/* =========================================================
   HydroCore website styles
   Brand colours and type come from the HydroCore brand
   identity v1 (Hydro Blue, Deep Teal, Sea Glass, Adobe Grey,
   Poppins). Layout cues come from the CIM deck.
   To change a colour site-wide, change it here only.
   ========================================================= */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Brand palette (brand identity v1) */
  --hydro-blue: #213B69;
  --deep-teal: #227C9A;
  --sea-glass: #60B6BE;
  --adobe-grey: #606060;

  /* Working tones (from the CIM deck) */
  --ink: #1B2B45;
  --body: #3A4554;
  --mist: #F1F5F6;
  --line: #D8E2E6;
  --white: #FFFFFF;
  --night: #172A4B;

  --max: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
  border-top: 4px solid var(--deep-teal);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--deep-teal); text-underline-offset: 3px; }
a:hover { color: var(--hydro-blue); }
:focus-visible { outline: 3px solid var(--sea-glass); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { color: var(--ink); line-height: 1.2; margin: 0 0 .5em; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; max-width: 68ch; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

/* ---------- Header ---------- */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--hydro-blue); }
.brand img { width: 34px; height: auto; }
.brand span { font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; }
.nav ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.nav a { text-decoration: none; color: var(--ink); font-weight: 500; font-size: .95rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--deep-teal); }
.nav a[aria-current="page"] { border-bottom-color: var(--deep-teal); }
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 8px 14px; font: inherit; font-weight: 500; color: var(--ink); cursor: pointer;
  }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 80px; background: var(--white); border-bottom: 1px solid var(--line); z-index: 5; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: 8px var(--gutter) 16px; }
  .nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav a[aria-current="page"] { color: var(--deep-teal); border-bottom-color: var(--line); }
  .site-header { position: relative; }
}

/* ---------- Hero (the one bold moment: the brand's water) ---------- */
.hero {
  position: relative; color: var(--white);
  /* Adobe Stock #334614099 "Hydrovaccing", Standard licence (Lee, Oct 2026). */
  background: var(--night) url("../img/hero-truck.jpg") center / cover no-repeat;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(23,42,75,.94) 0%, rgba(33,59,105,.82) 45%, rgba(34,124,154,.25) 100%);
}
.hero .wrap { position: relative; padding-top: clamp(72px, 12vw, 150px); padding-bottom: clamp(72px, 11vw, 140px); }
.hero h1 { color: var(--white); max-width: 17ch; margin-bottom: .45em; }
.hero p { font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 52ch; color: #E4EEF2; }
.hero .actions { margin-top: 2rem; }
@media (max-width: 700px) {
  .hero { background-image: url("../img/hero-truck-1200.jpg"); }
  .hero::before { background: linear-gradient(180deg, rgba(23,42,75,.93) 0%, rgba(33,59,105,.86) 100%); }
}

.page-hero { background: var(--mist); border-bottom: 1px solid var(--line); }
.page-hero .wrap { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(40px, 6vw, 72px); }
.page-hero p { font-size: 1.1rem; max-width: 60ch; }

/* Section label: mirrors the CIM's section tag above each slide title */
.tag { display: block; color: var(--deep-teal); font-weight: 600; font-size: .9rem; margin-bottom: .6rem; }
.hero .tag { color: var(--sea-glass); }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-block; padding: 13px 24px; border-radius: var(--radius); font-weight: 600; font-size: .98rem;
  text-decoration: none; border: 2px solid var(--deep-teal); background: var(--deep-teal); color: var(--white);
}
.btn:hover { background: var(--hydro-blue); border-color: var(--hydro-blue); color: var(--white); }
.btn.ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.btn.ghost:hover { background: var(--white); color: var(--hydro-blue); border-color: var(--white); }
.btn.line { background: transparent; color: var(--hydro-blue); border-color: var(--hydro-blue); }
.btn.line:hover { background: var(--hydro-blue); color: var(--white); }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 8vw, 100px) 0; }
.section.mist { background: var(--mist); }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p { font-size: 1.05rem; }

/* Two audiences */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.split > div { padding: clamp(28px, 4vw, 48px); }
.split > div + div { border-left: 1px solid var(--line); background: var(--mist); }
.split h3 { font-size: 1.35rem; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } .split > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* Columns with the CIM's short teal rule above each heading */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); }
.cols.two { grid-template-columns: repeat(2, 1fr); }
.cols h3::before { content: ""; display: block; width: 28px; height: 3px; background: var(--deep-teal); margin-bottom: 14px; }
.cols p { font-size: .97rem; }
@media (max-width: 860px) { .cols, .cols.two { grid-template-columns: 1fr; } }

/* Navy statement panel (CIM dark callout) */
.panel { background: var(--hydro-blue); color: #DCE7EE; border-radius: var(--radius); padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.panel blockquote { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3; font-weight: 500; color: var(--white); }
.panel p { margin: 0; }
.panel .tag { color: var(--sea-glass); }
@media (max-width: 860px) { .panel { grid-template-columns: 1fr; } }

/* Profile table (CIM target-profile slide) */
.profile { width: 100%; border-collapse: collapse; font-size: .97rem; }
.profile th, .profile td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.profile th { width: 30%; color: var(--ink); font-weight: 600; }
.profile td.value { color: var(--hydro-blue); font-weight: 600; width: 28%; white-space: nowrap; }
.profile td.note { color: var(--adobe-grey); }
.profile tr:first-child th, .profile tr:first-child td { border-top: 2px solid var(--hydro-blue); }
@media (max-width: 640px) {
  .profile, .profile tbody, .profile tr, .profile th, .profile td { display: block; width: 100%; }
  .profile tr { border-bottom: 1px solid var(--line); padding: 12px 0; }
  .profile tr:first-child { border-top: 2px solid var(--hydro-blue); }
  .profile th, .profile td { border: 0 !important; padding: 2px 0; white-space: normal; }
}

/* Steps: a real sequence, so numbered */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 72px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step, decimal-leading-zero); font-size: 2.2rem; font-weight: 600; line-height: 1; color: var(--sea-glass); }
.steps h3 { margin-bottom: .3em; }
.steps p { margin: 0; }

/* Lists */
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--line); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 21px; width: 12px; height: 3px; background: var(--deep-teal); }

/* Team */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 32px); }
.person img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--mist); filter: grayscale(100%); }
.person h3 { margin: 16px 0 2px; }
.person .role { color: var(--deep-teal); font-weight: 500; font-size: .92rem; margin-bottom: .6rem; }
.person p { font-size: .93rem; }
@media (max-width: 960px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team { grid-template-columns: 1fr; } .person img { max-width: 280px; } .team.compact { grid-template-columns: 1fr 1fr; } .team.compact .person img { max-width: none; } .team.compact h3 { font-size: 1rem; } }

/* Portfolio */
.portfolio-empty { border: 1px dashed var(--line); border-radius: var(--radius); padding: clamp(32px, 5vw, 56px); background: var(--white); }
.portfolio-empty p { margin: 0; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.contact-grid > div { border-top: 3px solid var(--deep-teal); padding-top: 18px; }
.contact-grid a { font-weight: 600; font-size: 1.1rem; text-decoration: none; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

/* Closing band */
.band { background: var(--mist); border-top: 1px solid var(--line); }
.band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 48px; padding-bottom: 48px; flex-wrap: wrap; }
.band h2 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.8rem); max-width: 30ch; }

.mt { margin-top: 1.2rem; }
.mt-lg { margin-top: 2rem; }
.notice { font-size: .85rem; color: var(--adobe-grey); border-left: 3px solid var(--line); padding-left: 16px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: #AFC0CF; font-size: .9rem; }
.site-footer .wrap { padding-top: 48px; padding-bottom: 32px; }
.footer-top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-brand { display: flex; align-items: center; gap: 12px; color: var(--white); font-weight: 600; font-size: 1.15rem; }
.footer-brand img { width: 30px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; flex-wrap: wrap; }
.site-footer a { color: #DCE7EE; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* =========================================================
   Perspectives and The Board
   ========================================================= */

/* Long-form reading column */
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-top: 2.2em; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 1.04rem; }
.prose .lede { font-size: 1.2rem; color: var(--ink); }
.prose .pull { font-size: clamp(1.3rem, 2.4vw, 1.65rem); font-weight: 500; line-height: 1.35; color: var(--hydro-blue); border-left: 4px solid var(--deep-teal); padding-left: 20px; margin: 1.6em 0; }
.byline { display: flex; align-items: center; gap: 14px; margin-top: 1.6rem; font-size: .93rem; color: var(--adobe-grey); }
.byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; filter: grayscale(100%); }
.byline strong { display: block; color: var(--ink); font-weight: 600; }
.source-note { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--adobe-grey); }

/* Featured Board panel on the Perspectives page */
.feature { background: var(--hydro-blue); color: #DCE7EE; border-radius: var(--radius); padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 56px); align-items: center; }
.feature h2 { color: var(--white); }
.feature .tag { color: var(--sea-glass); }
.feature p { color: #DCE7EE; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }

/* Board count strip: the board itself, in four columns */
.tally { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: rgba(255,255,255,.15); border-radius: var(--radius); overflow: hidden; }
.tally div { background: var(--night); padding: 18px 16px; }
.tally strong { display: block; font-size: 2.1rem; line-height: 1; color: var(--white); font-weight: 600; }
.tally span { font-size: .85rem; color: #AFC0CF; }
.tally .s-dirt strong { color: var(--sea-glass); }
.tally.light { background: var(--line); }
.tally.light div { background: var(--white); }
.tally.light strong { color: var(--ink); }
.tally.light span { color: var(--adobe-grey); }
.tally.light .s-dirt strong { color: var(--deep-teal); }
@media (max-width: 560px) { .tally { grid-template-columns: repeat(2, 1fr); } }

/* Article list */
.article-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--hydro-blue); }
.article-list li { border-bottom: 1px solid var(--line); }
.article-list a { display: grid; grid-template-columns: 1fr auto; gap: 8px 32px; padding: 24px 0; text-decoration: none; color: inherit; }
.article-list h3 { margin: 0; font-size: 1.2rem; color: var(--ink); }
.article-list p { margin: 0; color: var(--body); font-size: .97rem; grid-column: 1; }
.article-list .read { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--deep-teal); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.article-list a:hover h3 { color: var(--deep-teal); }
@media (max-width: 640px) { .article-list a { grid-template-columns: 1fr; } .article-list .read { grid-row: auto; grid-column: 1; } }

/* Board page */
.update { background: var(--mist); border: 1px solid var(--line); border-left: 4px solid var(--deep-teal); border-radius: var(--radius); padding: 24px 28px; }
.update h2 { font-size: 1.15rem; margin-bottom: .6em; }
.update ul { margin: 0; padding-left: 1.1em; }
.update li { margin-bottom: .5em; }
.update p { margin: .8em 0 0; font-size: .9rem; color: var(--adobe-grey); }

.grades { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; }
.grades dt { font-weight: 600; color: var(--ink); }
.grades dd { margin: 0; }
@media (max-width: 560px) { .grades { grid-template-columns: 1fr; } .grades dd { margin-bottom: 8px; } }

.status-group { margin-top: clamp(40px, 6vw, 64px); }
.status-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 20px; }
.status-head h3 { margin: 0; font-size: 1.35rem; }
.status-head .grade { font-size: .9rem; color: var(--adobe-grey); }
.status-head .count { margin-left: auto; font-weight: 600; color: var(--ink); }
.status-group.dirt .status-head { border-bottom-color: var(--deep-teal); }
.status-group.signed .status-head { border-bottom-color: var(--hydro-blue); }
.status-group.announced .status-head { border-bottom-color: var(--sea-glass); }
.status-group.stalled .status-head { border-bottom-color: var(--adobe-grey); }
.status-group.done .status-head { border-bottom-color: var(--line); }

.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.project { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; background: var(--white); }
.project h4 { margin: 0; font-size: 1.02rem; color: var(--ink); font-weight: 600; line-height: 1.3; }
.project .where { font-size: .88rem; color: var(--adobe-grey); }
.project .capex { display: block; margin: 10px 0 8px; font-weight: 600; color: var(--hydro-blue); font-size: .95rem; }
.project p { margin: 0; font-size: .93rem; }
.stalled .project { background: var(--mist); }
@media (max-width: 760px) { .projects { grid-template-columns: 1fr; } }

.also { columns: 2; column-gap: 40px; margin: 0; padding: 0; list-style: none; }
.also li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.also .grade { color: var(--adobe-grey); font-size: .85rem; }
@media (max-width: 640px) { .also { columns: 1; } }

/* =========================================================
   Audit fixes, 18 Oct 2026
   ========================================================= */
:root { --teal-text: #1D6E88; --muted: #4F555D; }
body { font-size: 1.0625rem; }
a { color: var(--teal-text); }
.tag { color: var(--teal-text); }
.hero .tag, .panel .tag, .feature .tag { color: var(--sea-glass); }
.profile td.note, .project .where, .status-head .grade, .also .grade, .byline, .source-note, .notice, .update p { color: var(--muted); }
.team .person p { font-size: 1rem; }
.steps li::before { color: var(--deep-teal); }
.person h2.name { font-size: 1.1rem; margin: 16px 0 2px; }
.contact-grid h2 { font-size: 1.1rem; margin-bottom: .4em; }
.panel .statement { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.35; font-weight: 500; color: var(--white); }
.panel .attrib { margin-top: .9rem; color: var(--sea-glass); font-size: .95rem; }
.site-footer .footer-note { margin: 18px 0 0; max-width: none; font-size: .82rem; color: #8FA3B6; }

/* FAQ accordion, no script needed */
.faq { max-width: 820px; border-top: 2px solid var(--hydro-blue); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-weight: 600; color: var(--ink); font-size: 1.08rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 1.5rem; font-weight: 400; color: var(--deep-teal); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 22px; }

/* Board extras */
.jump { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 1.4rem; font-size: .95rem; }
.jump a { font-weight: 500; }
.tally-caption { margin: 0 0 10px; font-size: .9rem; font-weight: 600; color: var(--muted); }
.project .src { font-size: .85rem; font-weight: 500; white-space: nowrap; }
.also a { color: var(--ink); text-decoration-color: var(--line); }
.also a:hover { color: var(--teal-text); }
.article-list .by { grid-column: 1; font-size: .85rem; font-weight: 500; color: var(--muted); }
@media (min-width: 641px) { .article-list .read { grid-row: 1 / span 3; } }

.person .remit { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: .4rem; color: var(--ink); }

/* Team page: line up names, titles, bios and role lines across the row */
.team.full { row-gap: 0; }
.team.full .person { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.team.full .person .remit { margin-bottom: 36px; }
/* Desktop: line up rows with a method every browser supports.
   Each person's five parts flow down one column of a shared 5-row grid. */
@media (min-width: 961px) {
  .team.full { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, auto); grid-auto-flow: column; row-gap: 0; }
  .team.full .person { display: contents; }
  .team.full .person .remit { margin-bottom: 0; }
}