/* ===== 1. BRAND VALUES: change these and the whole site updates ===== */
:root {
  --green-dark: #1B4332;
  --green-accent: #52B788;
  /* ManuConnect brand (Lotus gold #FBAA1E, Pantone 1235 C, 4 Nov 2026): gold first, JointWerks green second (JointWerks is the reverse). The darker gold is for small text on light backgrounds. */
  --mc-gold: #FBAA1E;
  /* Slight gradients on the accent surfaces (4 Nov 2026): green on JointWerks pages, gold on ManuConnect pages */
  --accent-grad: linear-gradient(135deg, #66C69A 0%, #52B788 55%, #43A477 100%);
  --mc-gold-grad: linear-gradient(135deg, #FDBF4D 0%, #FBAA1E 55%, #EC9810 100%);
  --mc-gold-text: #8A5600;
  --charcoal: #1C1F1D;
  --off-white: #F8F9FA;
  --white: #ffffff;
  --grey: #5b615e;
  --line: #e3e6e4;
  --max: 72rem;
}

/* ===== 2. RESET ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
img, video { max-width: 100%; height: auto; display: block; }
body { font-family: "Inter", Arial, sans-serif; font-size: 1.0625rem; color: var(--charcoal); background: var(--white); line-height: 1.6; }
a { color: inherit; }
ul.plain { list-style: none; }

/* ===== 3. TYPE: headings use the logo font, Montserrat Bold Italic in caps ===== */
h1, h2, h3, .button, .tag, .stats strong, .login, .menu > li > a {
  font-family: "Montserrat", Arial, sans-serif;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 0.75rem; }
h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.section p + p, .prose p + p { margin-top: 1rem; }

/* ===== 4. HEADER AND MENU ===== */
/* Transparent over the hero photo (a soft fade keeps the menu readable); solid once the page scrolls or the phone menu opens. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; gap: 1rem; justify-content: space-between; align-items: center; padding: 0.75rem 1.5rem; background: linear-gradient(rgba(16, 18, 17, 0.55), rgba(16, 18, 17, 0)); transition: background-color 0.3s, box-shadow 0.3s; }
.site-header.is-solid, .nav-open .site-header { background: var(--charcoal); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); }
.hero-inner { padding-top: 5rem; }
.logo img { height: 44px; width: auto; }
.site-header nav { display: flex; align-items: center; gap: 1.5rem; }
.menu { list-style: none; display: flex; gap: 1.25rem; }
.menu > li { position: relative; }
.menu a { color: var(--white); text-decoration: none; display: block; }
.menu > li > a { font-size: 0.85rem; padding: 0.75rem 0; }
.menu > li.active > a, .menu a:hover { color: var(--green-accent); }
/* Drop-down lists: hidden until you hover or tab into the menu item */
.sub { list-style: none; position: absolute; top: 100%; left: -1rem; min-width: 16rem; background: var(--charcoal); border-top: 3px solid var(--green-accent); padding: 0.5rem 0; display: none; box-shadow: 0 12px 24px rgba(0,0,0,0.25); }
.sub a { padding: 0.5rem 1rem; font-size: 0.95rem; }
.has-sub:hover .sub, .has-sub:focus-within .sub { display: block; }
.login { color: var(--white); text-decoration: none; border: 2px solid var(--green-accent); padding: 0.45rem 0.9rem; font-size: 0.85rem; white-space: nowrap; }
.login span, .button span { display: inline-block; transition: transform 0.2s; }
.login:hover span, .button:hover span { transform: translateX(4px); }
.menu-toggle { display: none; background: none; color: var(--white); border: 2px solid var(--white); padding: 0.4rem 0.8rem; font: inherit; cursor: pointer; }

/* Phone menu: one button opens the whole menu as a list */
@media (max-width: 960px) {
  .logo img { height: 34px; }
  .menu-toggle { display: block; }
  .site-header { flex-wrap: wrap; }
  .site-header nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; padding-bottom: 1rem; }
  .nav-open .site-header nav { display: flex; }
  .menu { flex-direction: column; gap: 0; width: 100%; }
  .sub { position: static; display: block; box-shadow: none; border: 0; padding: 0 0 0.5rem 1rem; min-width: 0; }
  .sub a { padding: 0.3rem 0; color: #c9cfcc; }
}

/* ===== 5. BUTTONS ===== */
.button { display: inline-block; background: var(--green-accent); color: var(--charcoal); padding: 0.85rem 1.5rem; text-decoration: none; font-size: 0.95rem; min-height: 44px; }
.button:hover { background: var(--white); }
.button.ghost { background: transparent; color: var(--white); border: 2px solid var(--white); }
.button.ghost:hover { background: var(--white); color: var(--charcoal); }
.button.dark { background: var(--green-dark); color: var(--white); }
.button.dark:hover { background: var(--charcoal); }

/* ===== 6. HERO: video or photo behind a dark green overlay ===== */
.hero { position: relative; min-height: 48vh; display: flex; align-items: flex-end; overflow: hidden; color: var(--white); background: var(--green-dark); }
.hero-home { min-height: 82vh; align-items: center; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.hero-inner { position: relative; max-width: var(--max); margin: 0 auto; padding: 4rem 1.5rem 3.5rem; width: 100%; }
.hero h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.05; max-width: 18ch; margin-bottom: 1rem; }
.hero-home h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); max-width: 14ch; }
.hero p { max-width: 40rem; font-size: 1.15rem; margin-bottom: 1.75rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.breadcrumb { font-size: 0.85rem; margin-bottom: 1rem; color: #cfe8db; }
.breadcrumb a { color: #cfe8db; }

/* ===== 7. STATS ===== */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); background: var(--charcoal); color: var(--white); }
.stats div { padding: 2rem 1.5rem; border-left: 4px solid var(--green-accent); }
.stats strong { display: block; font-size: 2.6rem; color: var(--green-accent); line-height: 1; margin-bottom: 0.4rem; }

/* ===== 8. SECTIONS, CARDS AND LAYOUTS ===== */
.section { max-width: var(--max); margin: 0 auto; padding: 4.5rem 1.5rem; }
.section.tight { padding-top: 2rem; }
.alt { background: var(--off-white); }
.lead { color: var(--grey); max-width: 44rem; margin-bottom: 2.5rem; font-size: 1.15rem; }
.prose { max-width: 46rem; }
.prose p, .prose li { color: #353a37; }
.prose ul { margin: 1rem 0 0 1.25rem; }
.prose h2 + p, .prose ul + p, .prose table + p { margin-top: 1rem; }
.prose h2:not(:first-child) { margin-top: 2.5rem; }
.prose table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.prose th, .prose td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); }
.prose th { color: var(--green-dark); }
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.card { background: var(--off-white); padding: 1.75rem; border-top: 4px solid var(--green-accent); text-decoration: none; display: block; }
.alt .card { background: var(--white); }
a.card:hover { border-top-color: var(--green-dark); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.card p { color: var(--grey); }
.card .more { display: inline-block; margin-top: 0.75rem; color: var(--green-dark); font-weight: 600; }
.split { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: start; }
.split video, .split img { width: 100%; }
.specs { list-style: none; columns: 2 14rem; column-gap: 2rem; }
.specs li { padding: 0.5rem 0 0.5rem 1.6rem; border-bottom: 1px solid var(--line); position: relative; break-inside: avoid; }
.specs li::before, .checks li::before { content: "\2022"; position: absolute; left: 0.2rem; color: var(--green-accent); font-weight: 700; }
.specs strong { display: block; }
.note { background: var(--off-white); border-left: 4px solid var(--green-accent); padding: 1.25rem 1.5rem; color: var(--grey); max-width: 46rem; }

/* ===== 9. PROCESS STEPS ===== */
.steps { list-style: none; counter-reset: step; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 2rem; }
.steps li { counter-increment: step; }
.steps li::before { content: "0" counter(step); display: block; font-family: "Montserrat", Arial, sans-serif; font-style: italic; font-weight: 700; font-size: 2rem; color: var(--green-accent); }
.steps p { color: var(--grey); }

/* ===== 10. PROJECTS AND GALLERIES ===== */
.projects { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); margin-top: 2rem; }
.project img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; margin-bottom: 1rem; }
.project p { color: var(--grey); }
.tag { color: var(--green-dark) !important; font-size: 0.8rem; margin-bottom: 0.3rem; }
.gallery { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin-top: 1.5rem; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ===== 11. CLIENT LOGOS AND TESTIMONIAL ===== */
.logos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); align-items: center; margin-top: 2rem; }
.logos img { width: 100%; max-width: 9rem; margin: 0 auto; }
.testimonial { max-width: 50rem; margin: 3.5rem auto 0; text-align: center; }
.testimonial blockquote { font-size: clamp(1.2rem, 3vw, 1.6rem); line-height: 1.4; }
.testimonial blockquote::before { content: "\201C"; display: block; font-family: "Montserrat", Arial, sans-serif; font-style: italic; font-size: 4rem; line-height: 1; color: var(--green-accent); }
.testimonial figcaption { margin-top: 1rem; color: var(--grey); }
.testimonial img { width: 7rem; margin: 1rem auto 0; }

/* ===== 12. TEAM ===== */
.team { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin-top: 2rem; }
.person { background: var(--off-white); padding: 1.5rem; border-top: 4px solid var(--green-accent); }
.person .initials { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--green-dark); color: var(--white); display: grid; place-items: center; font-weight: 600; margin-bottom: 1rem; }
.person p { color: var(--grey); font-size: 0.95rem; }

/* ===== 13. BANDS: ManuConnect, call to action, video ===== */
.band { background: var(--green-dark); color: var(--white); }
.band-inner, .cta-inner { max-width: var(--max); margin: 0 auto; padding: 4.5rem 1.5rem; }
.band p { max-width: 42rem; margin-bottom: 1.5rem; }
.checks { list-style: none; margin-bottom: 2rem; }
.checks li { padding-left: 1.75rem; position: relative; margin-bottom: 0.5rem; }
.cta { background: var(--charcoal); color: var(--white); border-top: 4px solid var(--green-accent); }
.cta p { color: #c9cfcc; margin-bottom: 1.5rem; max-width: 40rem; }
.reel video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--charcoal); }

/* ===== 14. FOOTER ===== */
.site-footer { background: var(--charcoal); color: #c9cfcc; padding: 3.5rem 1.5rem 1.5rem; font-size: 0.92rem; }
.footer-cols { max-width: var(--max); margin: 0 auto; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.footer-cols h3 { font-size: 0.85rem; color: var(--white); margin-bottom: 0.75rem; }
.footer-cols h3 a { text-decoration: none; }
.footer-cols ul { list-style: none; }
.footer-cols li { margin-bottom: 0.35rem; }
.footer-cols a { text-decoration: none; }
.footer-cols a:hover { color: var(--green-accent); }
.footer-cols p { margin-bottom: 0.75rem; }
.flags { max-width: var(--max); margin: 2.5rem auto 0; display: flex; justify-content: center; gap: 1rem; }
.flags img { height: 30px; width: auto; box-shadow: 0 0 0 1px rgba(255,255,255,0.15); }
.copyright { max-width: var(--max); margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid #333; text-align: center; }

/* Respect people who turn off motion in their system settings */
@media (prefers-reduced-motion: reduce) { video.hero-bg { display: none; } }

/* Footer address: plain, not italic */
.site-footer address { font-style: normal; }

/* Card and step headings promoted to h2 for a correct outline keep the h3 look */
h2.as-h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }

/* ===== JOURNEY: the process from data/journey.yaml (home presentation and How it works) ===== */
.jp-label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-accent); margin-bottom: 0.2rem; }
.jp-caption { margin-top: 1rem; font-size: 0.85rem; color: var(--grey); }
.journey-ship { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; }

/* Presentation. Without its script it is a plain grid of steps. */
.journey-player { background: var(--charcoal); color: var(--white); padding: clamp(1rem, 3vw, 2rem); border-top: 4px solid var(--green-accent); }
.journey-player .jp-caption { color: #b7c9bf; }
.jp-steps { list-style: none; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.jp-media { overflow: hidden; background: var(--green-dark); }
.jp-media img, .jp-media svg { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.jp-text { padding-top: 0.75rem; }
.jp-text h3 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0.1rem 0 0.75rem; }
.jp-num { font-family: "Montserrat", Arial, sans-serif; font-style: italic; font-weight: 700; color: var(--green-accent); }
.jp-num span { color: #8fa198; font-size: 0.85em; }
.jp-part, .jp-info { color: #dfe7e2; }
.jp-info { margin-top: 0.75rem; padding-left: 0.75rem; border-left: 3px solid var(--green-accent); }
.jp-controls { display: none; }

.journey-player.is-live .jp-steps { display: grid; grid-template-columns: 1fr; }
.journey-player.is-live .jp-step { grid-area: 1 / 1; display: grid; gap: clamp(1rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.7s ease, visibility 0s linear 0.7s; }
.journey-player.is-live .jp-step.is-active { opacity: 1; visibility: visible; transition: opacity 0.7s ease; }
.journey-player.is-live .jp-step .jp-text > * { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.journey-player.is-live .jp-step.is-active .jp-text > * { opacity: 1; transform: none; }
.journey-player.is-live .jp-step.is-active .jp-text > :nth-child(2) { transition-delay: 0.1s; }
.journey-player.is-live .jp-step.is-active .jp-text > :nth-child(3) { transition-delay: 0.25s; }
.journey-player.is-live .jp-step.is-active .jp-text > :nth-child(4) { transition-delay: 0.4s; }
.journey-player.is-playing.is-tick .jp-step.is-active .jp-media > * { animation: jp-zoom var(--jp-step-ms, 5s) linear forwards; }
@keyframes jp-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }

.journey-player.is-live .jp-controls { display: flex; align-items: flex-start; gap: 1rem; margin-top: 1.5rem; }
.jp-toggle { flex: none; background: transparent; color: var(--white); border: 2px solid var(--green-accent); padding: 0.35rem 0.9rem; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.jp-toggle:hover, .jp-toggle:focus-visible { background: var(--green-accent); color: var(--charcoal); }
.jp-rail { list-style: none; flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.4rem; }
.jp-rail a { display: block; text-decoration: none; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #8fa198; }
.jp-rail a.is-active, .jp-rail a.is-done, .jp-rail a:hover { color: var(--white); }
.jp-bar { display: block; height: 4px; background: rgba(255, 255, 255, 0.18); margin-bottom: 0.4rem; overflow: hidden; }
.jp-bar span { display: block; height: 100%; width: 0; background: var(--green-accent); }
.jp-rail a.is-done .jp-bar span { width: 100%; }
.journey-player:not(.is-playing) .jp-rail a.is-active .jp-bar span { width: 100%; }
.journey-player.is-playing.is-tick .jp-rail a.is-active .jp-bar span { animation: jp-fill var(--jp-step-ms, 5s) linear forwards; }
@keyframes jp-fill { from { width: 0; } to { width: 100%; } }

@media (max-width: 48rem) {
  .journey-player.is-live .jp-step { grid-template-columns: 1fr; align-items: start; }
  .jp-rail a { font-size: 0; }
  .jp-bar { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-player.is-live .jp-step, .journey-player.is-live .jp-step .jp-text > * { transition: none; }
  .jp-media > * { animation: none !important; }
}

/* How it works: the part and the information side by side, a numbered line between them */
.journey-tracks ol { list-style: none; position: relative; }
.journey-tracks ol::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: var(--line); }
.jt-head, .jt-step { display: grid; grid-template-columns: 1fr 4rem 1fr; gap: 0 1.5rem; }
.jt-head { margin-bottom: 1rem; font-family: "Montserrat", Arial, sans-serif; font-style: italic; font-weight: 700; text-transform: uppercase; color: var(--green-dark); }
.jt-head span:last-child { grid-column: 3; }
.jt-step { position: relative; padding-bottom: 2.5rem; align-items: start; }
.jt-num { grid-column: 2; grid-row: 1; justify-self: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--green-dark); color: var(--white); font-family: "Montserrat", Arial, sans-serif; font-style: italic; font-weight: 700; position: relative; }
.jt-part { grid-column: 1; grid-row: 1; }
.jt-part figure { margin: 0.5rem 0 0.75rem; overflow: hidden; }
.jt-part img, .jt-part svg { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.jt-info { grid-column: 3; grid-row: 1; align-self: center; background: var(--off-white); border-left: 4px solid var(--green-accent); padding: 1.25rem; }
@media (max-width: 48rem) {
  .journey-tracks ol::before { left: 1.6rem; }
  .jt-head { display: none; }
  .jt-step { grid-template-columns: 3.25rem 1fr; gap: 0 1rem; }
  .jt-num { grid-column: 1; }
  .jt-part { grid-column: 2; }
  .jt-info { grid-column: 2; grid-row: 2; margin-top: 0.25rem; }
}

/* ===== PROJECTS: case studies from data/projects.yaml ===== */
.cases { display: grid; gap: 4rem; }
.case { display: grid; gap: 2rem 3rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; scroll-margin-top: 6rem; }
.case + .case { border-top: 1px solid var(--line); padding-top: 4rem; }
.case-text .lead { margin-bottom: 1.25rem; }
.case-text h3 { margin-top: 1.25rem; color: var(--green-dark); }
.case-text p { color: var(--charcoal); }
.case-caps { margin-top: 1.25rem; font-size: 0.95rem; color: var(--grey) !important; }
.case-cover img { width: 100%; height: auto; }
.case-thumbs { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); margin-top: 0.5rem; }
.case-thumbs img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.case-thumbs a:hover img, .case-thumbs a:focus-visible img { outline: 3px solid var(--green-accent); }
.case-card img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; margin: -1.75rem -1.75rem 1rem; width: calc(100% + 3.5rem); max-width: none; }
@media (max-width: 48rem) { .case { grid-template-columns: 1fr; } .case-photos { order: -1; } }
.person .bio { margin-top: 0.6rem; color: var(--charcoal); }

/* Process cycle (How it works): steps on a ring around ManuConnect, details beside it */
.journey-cycle { display: grid; gap: 2rem 3rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.jc-ring { width: 100%; max-width: 34rem; height: auto; justify-self: center; overflow: visible; position: sticky; top: 6rem; }
.jc-hub-ring { fill: var(--off-white); stroke: var(--line); stroke-width: 2; }
.jc-flow { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 8; }
.jc-arc { fill: none; stroke: var(--green-accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 14 10; animation: jc-flow 1.6s linear infinite; }
@keyframes jc-flow { to { stroke-dashoffset: -24; } }
.jc-hub-big { font: italic 700 24px "Montserrat", Arial, sans-serif; fill: var(--green-dark); text-anchor: middle; text-transform: uppercase; }
.jc-hub-small { font: 600 15px "Inter", Arial, sans-serif; fill: var(--grey); text-anchor: middle; }
.jc-node circle { fill: var(--green-dark); stroke: var(--white); stroke-width: 6; transition: fill 0.2s ease; }
.jc-node:hover circle, .jc-node:focus-visible circle { fill: var(--green-accent); }
.jc-node:focus-visible { outline: none; }
.jc-num { font: italic 700 22px "Montserrat", Arial, sans-serif; fill: var(--green-accent); text-anchor: middle; }
.jc-node:hover .jc-num, .jc-node:focus-visible .jc-num { fill: var(--charcoal); }
.jc-name { font: italic 700 17px "Montserrat", Arial, sans-serif; fill: var(--white); text-anchor: middle; text-transform: uppercase; letter-spacing: 0.04em; }
.jc-steps { list-style: none; display: grid; gap: 1.25rem; }
.jc-steps li { border-left: 4px solid var(--green-accent); padding: 0.25rem 0 0.25rem 1rem; scroll-margin-top: 6rem; }
.jc-steps li:target { background: var(--off-white); }
.jc-steps h3 span { color: var(--green-accent); margin-right: 0.35rem; }
.jc-steps p { color: var(--grey); }
.jc-info { margin-top: 0.4rem; color: var(--charcoal) !important; }
@media (max-width: 56rem) { .journey-cycle { grid-template-columns: 1fr; } .jc-ring { position: static; max-width: 26rem; } }
@media (prefers-reduced-motion: reduce) { .jc-arc { animation: none; } }
.jc-steps li { transition: background 0.2s ease, border-color 0.2s ease; }
.jc-steps li.is-active { background: var(--off-white); border-left-color: var(--green-dark); }
.jc-node.is-active circle { fill: var(--green-accent); }
.jc-node.is-active .jc-num { fill: var(--charcoal); }
.jc-node { cursor: pointer; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Stronger highlight for the selected step: tinted card, thick bar, lift; the other steps step back */
.jc-steps li { border-left-width: 6px; padding: 0.9rem 1rem 0.9rem 1.25rem; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease; }
.jc-steps:has(li.is-active) li:not(.is-active) { opacity: 0.66; }
.jc-steps li.is-active { background: #e3f4ea; border-left-color: var(--green-dark); box-shadow: 0 10px 28px rgba(27, 67, 50, 0.16); transform: translateX(6px); opacity: 1; }
.jc-steps li.is-active h3 { color: var(--green-dark); }
.jc-node.is-active circle { fill: var(--green-accent); stroke: #e3f4ea; stroke-width: 12; }
.jc-node.is-active .jc-name { fill: var(--charcoal); }
@media (prefers-reduced-motion: reduce) { .jc-steps li { transition: none; } .jc-steps li.is-active { transform: none; } }
.jc-node, .jc-node:focus, .jc-node:focus-visible, .jc-node:active { outline: none; -webkit-tap-highlight-color: transparent; }
.jc-node circle:focus { outline: none; }
/* Cycle centred against the three steps, and larger */
.journey-cycle { align-items: center; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.jc-steps { align-content: start; }
.jc-ring { position: static; max-width: 40rem; }
@media (max-width: 56rem) { .journey-cycle { grid-template-columns: 1fr; } .jc-ring { max-width: 28rem; } }
.jc-steps li { cursor: pointer; }
.jc-steps li:focus { outline: none; }
.jc-steps li:focus-visible { outline: 2px solid var(--green-accent); outline-offset: 2px; }

/* Review drafts: banner under the hero, and best-guess values marked "to confirm" */
.draft-banner { background: #fff4d6; border-bottom: 2px solid #e0a800; color: var(--charcoal); padding: 0.9rem 1.5rem; text-align: center; }
.tbc { background: #fff4d6; border-bottom: 1px dashed #e0a800; padding: 0 0.2em; }
.tbc::after { content: " (to confirm)"; font-size: 0.8em; color: #8a6500; }
.prose .mm { color: var(--grey); font-size: 0.9em; }
.prose h3 { margin-top: 1.75rem; }
.prose ol { margin: 1rem 0 0 1.25rem; }
.checklist { list-style: none; margin-left: 0 !important; }
.checklist li { padding-left: 1.75rem; position: relative; margin-top: 0.4rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1rem; height: 1rem; border: 2px solid var(--green-dark); border-radius: 3px; }
.badge { display: inline-block; font-size: 0.75rem; font-weight: 600; background: #fff4d6; color: #8a6500; padding: 0.1rem 0.5rem; border-radius: 999px; margin-left: 0.4rem; vertical-align: middle; }
@media print { .site-header, .site-footer, .cta, .draft-banner, .hero-bg, .hero-actions { display: none !important; } }
@media (max-width: 600px) { .prose table { display: block; overflow-x: auto; } }
.draft-slim { padding: 0.5rem 1.5rem; font-size: 0.9rem; }
.site-header .badge { font-size: 0.6rem; padding: 0.05rem 0.4rem; }
.review-list td:first-child { width: 7rem; }
.badge.ok { background: #d8f3dc; color: var(--green-dark); }
.site-header .badge.dot { width: 0.5rem; height: 0.5rem; padding: 0; margin-left: 0.3rem; vertical-align: super; background: #e0a800; }
/* Quote form on Contact */
.quote-form { max-width: 46rem; display: grid; gap: 1rem; }
.quote-form label { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.95rem; color: var(--charcoal); }
.quote-form input, .quote-form textarea { font: inherit; font-weight: 400; padding: 0.65rem 0.75rem; border: 1px solid #c9cecb; border-radius: 4px; background: var(--white); color: var(--charcoal); }
.quote-form input:focus, .quote-form textarea:focus { outline: 2px solid var(--green-accent); outline-offset: 1px; border-color: var(--green-accent); }
.quote-form input[type=file] { padding: 0.5rem; background: var(--off-white); }
.quote-form .hint { font-weight: 400; font-size: 0.85rem; color: var(--grey); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) { .form-grid, .form-grid.three { grid-template-columns: 1fr; } }
.quote-form .hp { position: absolute; left: -9999px; }
.form-status[hidden] { display: none; }
.form-status { padding: 0.75rem 1rem; border-left: 4px solid var(--green-accent); background: var(--off-white); }
.form-status.error { border-color: #c0392b; }
.form-status.note { border-color: var(--mc-gold); }
.quote-form button { justify-self: start; }
.quote-form .req { color: #c0392b; }
.form-progress { width: 100%; height: 0.5rem; accent-color: var(--green-accent); }
/* Review codes (preview builds only, static/js/review-codes.js) */
.rc { justify-self: start; width: max-content; display: inline-block; font: 600 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; text-transform: none; font-style: normal;
  background: #e0a800; color: #1c1f1d; padding: 0 4px; margin-right: 6px; border-radius: 3px; vertical-align: middle; cursor: copy; user-select: all; position: relative; z-index: 5; }
.rc.section { position: absolute; top: 4px; left: 4px; background: #1c1f1d; color: #ffd75e; border: 1px solid #e0a800; z-index: 20; }
.rc.copied { background: #52B788; color: #fff; }
.rc.copied::after { content: " copied"; }
.rc-off .rc { display: none; }
.rc-toggle { position: fixed; right: 12px; bottom: 12px; z-index: 1000; font: 600 12px/1 ui-monospace, Menlo, monospace; background: #1c1f1d; color: #ffd75e; border: 1px solid #e0a800; border-radius: 4px; padding: 8px 10px; cursor: pointer; }
@media print { .rc, .rc-toggle { display: none !important; } }
.form-progress[hidden] { display: none; }

.logo-strip { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.logo-strip h2 { text-align: center; }
/* Photo pop-up (static/js/lightbox.js) */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; margin: auto; inset: 0; position: fixed; overflow: visible; }
.lightbox[open] { display: flex; flex-direction: column; align-items: center; }
.lightbox::backdrop { background: rgba(10, 12, 11, 0.88); }
.lb-stage { position: relative; display: flex; align-items: center; }
.lightbox img { display: block; max-width: 86vw; max-height: 84vh; width: auto; height: auto; user-select: none; }
.lb-cap { color: #fff; margin: 0.6rem 0 0; font-size: 0.9rem; text-align: center; }
.lb-close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; background: rgba(0,0,0,0.65); color: #fff; border: 0; font-size: 1.6rem; line-height: 1; width: 2.4rem; height: 2.4rem; cursor: pointer; border-radius: 50%; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: rgba(0,0,0,0.45); color: rgba(255,255,255,0.75); font-size: 2.2rem; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.15s; }
.lb-prev { left: 0.6rem; } .lb-next { right: 0.6rem; }
.lb-prev:hover, .lb-next:hover, .lb-prev.hot, .lb-next.hot { background: var(--green-accent); color: #fff; transform: translateY(-50%) scale(1.12); }
.lb-close { transition: background 0.15s, transform 0.15s; }
.lb-close:hover, .lb-close.hot { background: var(--green-accent); transform: scale(1.15); }
.lightbox.single .lb-prev, .lightbox.single .lb-next { display: none; }
a[data-lightbox] { cursor: zoom-in; }

/* Testimonial carousel */
.testimonials { position: relative; }
.t-nav { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.t-nav > button { background: none; border: 2px solid var(--green-dark); color: var(--green-dark); width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1.1rem; cursor: pointer; }
.t-nav > button:hover { background: var(--green-dark); color: #fff; }
.t-dots { display: flex; gap: 0.5rem; }
.t-dots button { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 0; padding: 0; background: #c9cecb; cursor: pointer; }
.t-dots button[aria-current="true"] { background: var(--green-accent); }
/* Industry pages: intro aligned with the project write-ups below it */
.industry-intro .prose { max-width: 46rem; margin: 0; }
.industry-intro h3 { margin-top: 1.5rem; }
/* Industries hub: short keyword lists on the cards */
.card-list { list-style: none; margin: 0.75rem 0 1rem; padding: 0; color: var(--grey); }
.card-list li { position: relative; padding-left: 1.1rem; margin-top: 0.25rem; }
.card-list li::before { content: "\2022"; position: absolute; left: 0.1rem; color: var(--green-accent); font-weight: 700; }
/* Certifications: status first */
.cert-status { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.cert-pill { background: #fff4d6; color: #8a6500; border: 1px solid #e0a800; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; }
.cert-eta { background: var(--green-dark); color: #fff; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; padding: 0.2rem 0.6rem; border-radius: 999px; }
/* Home: customer logos in one row that drifts right to left on a loop and can be scrolled by hand */
.logo-strip .logos { display: flex; gap: 3rem; overflow-x: auto; scrollbar-width: none; grid-template-columns: none; margin-top: 1.5rem; padding: 0.5rem 0; }
.logo-strip .logos::-webkit-scrollbar { display: none; }
.logo-strip .logos img { flex: 0 0 auto; width: 8rem; max-width: none; height: auto; }
/* Team headshots */
.person { position: relative; }
.person .headshot { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin-bottom: 1rem; }
.photo-placeholder { position: absolute; top: 2rem; left: 2rem; background: #fff4d6; color: #8a6500; border: 1px solid #e0a800; font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; }
.team.founders { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.bio-points { list-style: none; margin: 0.75rem 0 0; padding: 0; color: var(--charcoal); font-size: 0.95rem; }
.bio-points li { position: relative; padding-left: 1.1rem; margin-top: 0.3rem; }
.bio-points li::before { content: "\2022"; position: absolute; left: 0.1rem; color: var(--green-accent); font-weight: 700; }
.bio-points strong { color: var(--green-dark); font-weight: 600; }
.bio-points .motto { font-style: italic; color: var(--green-dark); padding-left: 0; margin-top: 0.75rem; }
.bio-points .motto::before { content: none; }
.team + h2 { margin-top: 3.5rem; }
html { scroll-padding-top: 5.5rem; }
/* Team cards: highlight like the other cards; the headshot fades from black and white to colour */
.person { transition: border-top-color 0.2s, box-shadow 0.2s; }
.person:hover { border-top-color: var(--green-dark); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.headshot-wrap { position: relative; margin-bottom: 1rem; }
.headshot-wrap .headshot { margin-bottom: 0; display: block; }
.headshot-wrap .bw { position: absolute; inset: 0; transition: opacity 0.35s ease; }
.person:hover .headshot-wrap .bw, .person:focus-within .headshot-wrap .bw { opacity: 0; }
/* Steps: number, title, text and "In ManuConnect" line up across the columns (each step shares the row grid) */
.steps li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0.5rem; align-content: start; }
.steps .jc-info { align-self: start; }
/* Codes off = a clean view: no review codes, draft banners, draft badges or "to confirm" marks (dev only; main never has them) */
.rc-off .draft-banner, .rc-off .site-header .badge, .rc-off .photo-placeholder { display: none !important; }
.rc-off .tbc { background: none; border-bottom: 0; padding: 0; }
.rc-off .tbc::after { content: none; }
/* ManuConnect pages: the gold takes the accent role (borders, buttons, bullets, active menu); dark green stays as the second colour */
body.mc { --green-accent: var(--mc-gold); }
.jp-label { color: var(--mc-gold-text); }
.jc-hub-ring { stroke: #52B788; stroke-width: 3; }
.jc-arrowhead { fill: var(--green-accent); }
/* Home on a computer screen: the hero and the 32+ / 107+ / 6+ band fill the screen exactly, nothing of the next section peeks in */
@media (min-width: 900px) and (min-height: 560px) {
  :root { --stats-h: 8.75rem; }
  .hero-home { min-height: calc(100vh - var(--stats-h)); min-height: calc(100svh - var(--stats-h)); }
  .hero-home + .stats, .hero-home + .draft-banner + .stats { height: var(--stats-h); align-items: stretch; }
  .hero-home + .stats div, .hero-home + .draft-banner + .stats div { display: flex; flex-direction: column; justify-content: center; padding-top: 0; padding-bottom: 0; }
}
/* Slight gradients: buttons, card bars, step bars and stats bars use the accent gradient (gold on ManuConnect pages) */
body.mc { --accent-grad: var(--mc-gold-grad); }
.button:not(.ghost) { background: var(--accent-grad); }
.button:not(.ghost):hover { filter: brightness(1.05); }
.card, .person { border-top-color: transparent; border-image: var(--accent-grad) 1; }
a.card:hover, .person:hover { border-image: linear-gradient(135deg, #2a5a44, var(--green-dark)) 1; }
.stats div, .jc-steps li { border-image: var(--accent-grad) 1; }
.jc-node.is-active circle, .jc-node:hover circle, .jc-node:focus-visible circle { fill: url(#jc-accent); }
.jc-hub-big { fill: url(#jc-accent); }
/* ManuConnect in gold wherever it is pointed at: its menu item, and buttons that lead into ManuConnect */
.menu .menu-manuconnect > a, .menu .menu-manuconnect.active > a { color: var(--mc-gold); }
.menu .menu-manuconnect > a { transition: color 0.2s, text-shadow 0.2s; }
.menu .menu-manuconnect > a:hover, .menu .menu-manuconnect:hover > a { color: #FFC95C; text-shadow: 0 0 10px rgba(251, 170, 30, 0.75), 0 0 2px rgba(255, 210, 120, 0.6); }
.menu .menu-manuconnect .sub a:hover { color: var(--mc-gold); }
.button.gold { background: var(--mc-gold-grad); transition: box-shadow 0.25s, filter 0.25s; }
.button.gold:hover, .button.gold:focus-visible { box-shadow: 0 0 0 1px rgba(251, 170, 30, 0.25), 0 0 14px 1px rgba(251, 170, 30, 0.42); filter: brightness(1.04); }
/* The header stays JointWerks green on every page; only the ManuConnect item turns gold (hover, and while on a ManuConnect page) */
body.mc .site-header, body.mc .site-footer { --green-accent: #52B788; --accent-grad: linear-gradient(135deg, #66C69A 0%, #52B788 55%, #43A477 100%); }
/* Carousel keeps the height of its longest testimonial, so the page does not jump between slides */
.testimonials.is-carousel { display: grid; }
.testimonials.is-carousel .testimonial { grid-area: 1 / 1; margin-top: 3.5rem; }
.testimonials.is-carousel .testimonial[hidden] { display: block; visibility: hidden; }
.testimonials.is-carousel .t-nav { grid-area: 2 / 1; }
/* Every filled button glows softly in its own colour on hover (green on JointWerks pages, gold on ManuConnect pages and
   buttons into ManuConnect); outlined (ghost) buttons do not glow. */
.button:not(.ghost) { transition: box-shadow 0.25s, filter 0.25s; }
.button:not(.ghost):hover, .button:not(.ghost):focus-visible { box-shadow: 0 0 0 1px rgba(82, 183, 136, 0.25), 0 0 14px 1px rgba(82, 183, 136, 0.38); }
.button.dark:hover, .button.dark:focus-visible { box-shadow: 0 0 0 1px rgba(27, 67, 50, 0.25), 0 0 14px 1px rgba(82, 183, 136, 0.34); }
body.mc .button:not(.ghost):hover, body.mc .button:not(.ghost):focus-visible { box-shadow: 0 0 0 1px rgba(251, 170, 30, 0.25), 0 0 14px 1px rgba(251, 170, 30, 0.42); }
/* Call-to-action band: one compact row on wider screens, text left and the button right */
.cta .cta-inner { padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 760px) {
  .cta .cta-inner { display: grid; grid-template-columns: 1fr auto; column-gap: 3rem; align-items: center; }
  .cta .cta-inner h2 { grid-column: 1; margin-bottom: 0.4rem; }
  .cta .cta-inner p { grid-column: 1; margin-bottom: 0; }
  .cta .cta-inner .button { grid-column: 2; grid-row: 1 / span 2; }
}
/* Process cycle: arrows in JointWerks light green on every page */
.jc-arc { stroke: #52B788; }
.jc-arrowhead { fill: #52B788; }
/* Steps beside the cycle: only the active step shows its text; the others collapse to their titles */
/* The open step closes while the next one opens, at the same rate (same time, same curve, real heights in --h set by
   cycle.js), so the list's total height moves straight from one step to the next and never grows past the tallest. */
.jc-steps li > p { max-height: var(--h, 24rem); overflow: hidden; transition: max-height 0.4s ease-in-out, margin 0.4s ease-in-out, opacity 0.4s ease-in-out; }
.jc-steps li:not(.is-active) > p { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; }
/* On a computer the cycle stays in view while the page scrolls through its three steps */
.journey-cycle.no-anim .jc-steps li, .journey-cycle.no-anim .jc-steps li > p { transition: none !important; }
/* The diagram never grows taller than the screen leaves room for, so it is never cut off */
@media (prefers-reduced-motion: reduce) { .jc-steps li > p { transition: none; } }
/* Process cycle: no pale ring around the active circle and no grey guide ring; a soft glow in the step's colour instead */
.jc-flow { stroke: none; }
.jc-node.is-active circle, .jc-node:hover circle, .jc-node:focus-visible circle { stroke: none; stroke-width: 0; }
.jc-node circle { transition: filter 0.3s ease; }
.jc-node.is-active circle { filter: drop-shadow(0 0 10px rgba(82, 183, 136, 0.55)); }
body.mc .jc-node.is-active circle { filter: drop-shadow(0 0 10px rgba(251, 170, 30, 0.6)); }

/* ===== Tagline bar (7 Nov): one fixed line above the header. It scrolls away with the first bit of scrolling;
   the header moves up into its place and stays. ===== */
:root { --bar-h: 2rem; }
.offer-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 21; height: var(--bar-h); background: var(--green-dark); color: var(--white); font-size: 0.82rem; overflow: hidden; transition: transform 0.3s ease; }
.offer-bar ul { list-style: none; display: grid; height: 100%; max-width: var(--max); margin: 0 auto; padding: 0 1rem; }
.offer-bar li { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
.offer-bar li.is-on, .offer-bar:not(.is-live) li:first-child { opacity: 1; visibility: visible; transition: opacity 0.6s ease; }
.offer-bar a { color: #8fdcb6; margin-left: 0.3em; text-decoration: underline; text-underline-offset: 2px; }
.offer-bar a:hover { color: var(--white); }
.site-header { top: var(--bar-h); transition: top 0.3s ease, background-color 0.3s, box-shadow 0.3s; }
.scrolled .offer-bar { transform: translateY(-100%); }
.scrolled .site-header { top: 0; }
.hero-inner { padding-top: calc(4rem + var(--bar-h)); }
html { scroll-padding-top: calc(5.5rem + var(--bar-h)); }
@media (max-width: 600px) { .offer-bar { font-size: 0.74rem; } }
@media (prefers-reduced-motion: reduce) { .offer-bar, .site-header, .offer-bar li { transition: none; } }

/* Phone number in the header, always in view (desktop: right of the menu; phone: next to the Menu button). */
.call { order: 3; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--white); text-decoration: none; font-weight: 600; font-size: 0.95rem; white-space: nowrap; padding: 0.4rem 0; }
.call img { height: 12px; width: auto; box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }
.call:hover { color: var(--green-accent); }
@media (max-width: 960px) {
  .call { order: 0; margin-left: auto; font-size: 0.85rem; padding: 0.35rem 0; }
  .menu-toggle { order: 1; }
  .site-header nav { order: 2; }
}
@media (max-width: 420px) { .call { font-size: 0.78rem; gap: 0.35rem; } .logo img { height: 28px; } }

/* Call and email buttons on each team member (7 Nov, Tricia Mumby: give people something to do). */
.person-contact { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.person-contact .button { padding: 0.5rem 0.9rem; font-size: 0.8rem; min-height: 0; }
.button.ghost-dark { background: transparent; color: var(--green-dark); border: 2px solid var(--green-dark); padding: calc(0.5rem - 2px) calc(0.9rem - 2px); }
.button.ghost-dark:hover { background: var(--green-dark); color: var(--white); }
/* A call to action at the end of a section (centred under cards, left under prose). */
.section-cta { margin-top: 2rem; }
.section-cta.center { text-align: center; }
.footer-login { color: var(--green-accent); }
.cta p a { color: var(--green-accent); }
/* Article byline and the talk-to-the-author box at the end */
.byline { display: flex; align-items: center; gap: 1rem; padding-bottom: 0; }
.byline img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.byline p { color: var(--grey); font-size: 0.95rem; }
.byline strong { color: var(--charcoal); }
.author-cta { display: flex; gap: 1.5rem; align-items: center; background: var(--off-white); border-left: 6px solid var(--green-accent); max-width: 46rem; margin: 0 auto 3rem; padding: 1.5rem; }
.author-cta img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; }
.author-cta p { margin-top: 0.5rem; }
@media (max-width: 600px) { .author-cta { flex-direction: column; align-items: flex-start; } }
.team-intro { margin-bottom: 2.5rem; }
/* FAQ: one question per row, the answer opens below */
.faq { max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 700; color: var(--green-accent); font-size: 1.4rem; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary h2 { margin: 0; }
.faq details p { margin-top: 0.75rem; color: var(--grey); }
.call-short { display: none; }
@media (max-width: 600px) {
  .site-header { padding: 0.6rem 1rem; gap: 0.6rem; }
  .logo img { height: 26px; }
  .call-num { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .call-short { display: inline; }
}
@media (max-width: 600px) {
  .call { padding: 0.3rem 0; gap: 0.35rem; font-size: 0.8rem; }
  .menu-toggle { padding: 0.3rem 0.6rem; font-size: 0.9rem; }
}
.team .person { display: flex; flex-direction: column; }
.person-contact { margin-top: auto; padding-top: 1rem; }
.person-contact .button { padding: 0.45rem 0.7rem; font-size: 0.75rem; }
.person-contact .button.ghost-dark { padding: calc(0.45rem - 2px) calc(0.7rem - 2px); }
.byline { max-width: 46rem; padding-top: 3rem; }
.byline + .section { padding-top: 1.5rem; }
/* Team card buttons: stacked, the full width of the card, text centred (7 Nov, Dekker) */
.person-contact { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.person-contact .button { display: block; width: 100%; text-align: center; }
@media (max-width: 480px) { .offer-bar .bar-long { display: none; } }
.hero-home h1 { font-size: clamp(2.1rem, 5.2vw, 3.7rem); max-width: 20ch; }

/* Language picker (CA | EN), right of the phone number; opens on hover or tap like the menus (osprey.com style). */
.lang { order: 4; position: relative; color: var(--white); font-size: 0.85rem; font-weight: 600; }
.lang button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.75rem 0; white-space: nowrap; }
.lang button span[aria-hidden] { opacity: 0.6; }
.lang:hover button, .lang:focus-within button { color: var(--green-accent); }
.lang ul { list-style: none; position: absolute; right: 0; top: 100%; min-width: 9rem; background: var(--charcoal); border-top: 3px solid var(--green-accent); padding: 0.4rem 0; box-shadow: 0 12px 24px rgba(0,0,0,0.25); z-index: 30; display: none; }
.lang:hover ul, .lang:focus-within ul { display: block; }
.lang a { display: block; padding: 0.45rem 1rem; color: var(--white); text-decoration: none; font-weight: 400; }
.lang a:hover { color: var(--green-accent); }
.lang a[aria-current] { font-weight: 600; }
.site-header .call { margin-left: auto; }
@media (min-width: 961px) { .site-header { justify-content: flex-start; } .site-header nav { margin: 0 auto; } .site-header .call { margin-left: 0; } }
@media (max-width: 960px) { .lang { order: 0; } }
@media (max-width: 600px) { .lang button { gap: 0.25rem; font-size: 0.78rem; } }
.lang { margin-left: 1.1rem; }
@media (max-width: 960px) { .lang { margin-left: 0.6rem; } }
@media (min-width: 961px) and (max-width: 1240px) {
  .logo img { height: 34px; }
  .menu { gap: 0.85rem; }
  .menu > li > a { font-size: 0.76rem; }
  .site-header nav { gap: 1rem; }
  .call { font-size: 0.85rem; margin-left: 1rem; }
  .site-header { gap: 0.75rem; padding-left: 1rem; padding-right: 1rem; }
}
.menu > li > a { white-space: nowrap; }
@media (max-width: 600px) {
  .lang-ca { display: none; }
  .lang { margin-left: 0.4rem; }
  .site-header { gap: 0.5rem; }
}
.sub .sub-top a { font-weight: 600; color: var(--green-accent); } .menu-manuconnect .sub .sub-top a { color: var(--mc-gold); }
/* Header layout: logo left, menu centred on the page, phone and language right (7 Nov, Dekker). The two side
   columns share the leftover space equally, so the menu sits in the true centre whenever there is room. */
.header-tools { display: flex; align-items: center; gap: 1.1rem; }
.header-tools .call, .header-tools .lang { order: 0; margin: 0; }
@media (min-width: 961px) {
  .site-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .site-header .logo { grid-column: 1; grid-row: 1; justify-self: start; }
  .site-header nav { grid-column: 2; grid-row: 1; margin: 0; }
  .header-tools { grid-column: 3; grid-row: 1; justify-self: end; }
}
@media (max-width: 960px) {
  .header-tools { margin-left: auto; gap: 0.6rem; }
  .menu-toggle { order: 1; }
}

/* Drag-and-drop upload (ManuConnect page): a big target, files listed under it, then name and email. */
.quote-drop { max-width: 52rem; margin: 0 auto; }
.dropzone { position: relative; display: grid; justify-items: center; gap: 0.4rem; text-align: center; padding: 3.5rem 1.5rem; border: 3px dashed var(--mc-gold); background: #fff8ea; color: var(--charcoal); cursor: pointer; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; font-weight: 400; }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.dropzone:hover, .dropzone.is-over, .dropzone:focus-within { background: #fff1d1; box-shadow: 0 0 0 1px rgba(251,170,30,0.25), 0 0 14px 1px rgba(251,170,30,0.42); }
.dropzone.is-over { border-style: solid; }
.dz-icon { color: var(--mc-gold-text); }
.dz-title { font: italic 700 clamp(1.25rem, 3vw, 1.75rem) "Montserrat", Arial, sans-serif; text-transform: uppercase; color: var(--green-dark); }
.dz-sub { font-size: 1.05rem; color: var(--charcoal); }
.dz-hint { font-size: 0.85rem; color: var(--grey); }
.dz-files { list-style: none; display: grid; gap: 0.35rem; margin: 0; }
.dz-files:empty { display: none; }
.dz-files li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--off-white); border-left: 4px solid var(--mc-gold); padding: 0.45rem 0.75rem; font-size: 0.92rem; }
.dz-files button { background: none; border: 0; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--grey); }
.dz-files button:hover { color: #c0392b; }
.quote-drop button[type=submit] { justify-self: stretch; text-align: center; font-size: 1.05rem; }
/* Short banner (hero_short: true), so what matters, such as the upload box, shows without scrolling. */
.hero-short { min-height: 0; }
.hero-short .hero-inner { padding-bottom: 2rem; }
.hero-short + .section, .hero-short + .draft-banner + .section { padding-top: 2rem; }
.hero-short .hero-inner { padding-top: calc(5.5rem + var(--bar-h)); }
/* Lead-time table on Home: service on the left, lead time on the right. */
.lead-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.lead-table th { text-align: left; font: italic 700 0.8rem "Montserrat", Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey); padding: 0 0 0.5rem; border-bottom: 2px solid var(--green-accent); }
.lead-table th:last-child, .lead-table td:last-child { text-align: right; white-space: nowrap; }
.lead-table td { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.lead-table td:last-child { font-weight: 600; color: var(--green-dark); }
.lead-table a { color: var(--charcoal); text-decoration: none; }
.lead-table a:hover { color: var(--green-accent); }
/* Same look as the lead-time table, for short feature lists (Home: With JointWerks ManuConnect). */
.feature-table td:first-child { font-weight: 600; color: var(--charcoal); padding-right: 1.5rem; }
.feature-table th:last-child, .feature-table td:last-child { text-align: left; white-space: normal; font-weight: 400; color: var(--charcoal); }
.feature-table th { border-bottom-color: var(--mc-gold); }
/* Home hero: wider heading (fewer lines) and room under the fixed header so the heading never runs under it. */
.hero-home h1 { max-width: 24ch; }
.hero-home .hero-inner { padding-top: calc(6rem + var(--bar-h)); }
@media (max-width: 480px) { .hero-home h1 { font-size: 1.62rem; } } @media (max-width: 370px) { .hero-home h1 { font-size: 1.45rem; } }
.center-head { text-align: center; } .center-head .lead { margin-left: auto; margin-right: auto; }
/* About Us, Who we're for: every review in a box that scrolls, beside a short paragraph. */
.who-for { align-items: center; }
.t-scroll { max-height: 30rem; overflow-y: auto; display: grid; gap: 1rem; padding: 0.25rem 0.75rem 0.25rem 0.25rem; scroll-snap-type: y proximity; overscroll-behavior: contain; mask-image: linear-gradient(to bottom, #000 85%, transparent); }
.t-scroll:focus-visible { outline: 2px solid var(--green-accent); outline-offset: 4px; }
.t-card { background: var(--off-white); border-left: 4px solid var(--green-accent); padding: 1.1rem 1.25rem; scroll-snap-align: start; margin: 0; }
.t-card blockquote { font-size: 1rem; line-height: 1.55; color: var(--charcoal); }
.t-card blockquote::before { content: "\201C"; font: italic 700 1.8rem/0 "Montserrat", Arial, sans-serif; color: var(--green-accent); vertical-align: -0.45em; margin-right: 0.2rem; }
.t-card figcaption { margin-top: 0.6rem; font-size: 0.88rem; color: var(--grey); }
/* Review form: five stars, picked right to left in the markup so hovering lights the stars up to the pointer. */
.rating { border: 0; padding: 0; margin: 0; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.25rem; }
.rating legend { font-weight: 600; font-size: 0.95rem; color: var(--charcoal); margin-bottom: 0.35rem; width: 100%; }
.rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating label { font-size: 2rem; line-height: 1; color: #c9cecb; cursor: pointer; font-weight: 400; }
.rating label:hover, .rating label:hover ~ label, .rating input:checked ~ label { color: var(--mc-gold); }
.rating input:focus-visible + label { outline: 2px solid var(--green-accent); outline-offset: 2px; }
.quote-form .check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; }
.quote-form .check input { margin-top: 0.3rem; }
/* A hero button with fine print under it (ManuConnect: Create account / For full access). */
.action-stack { display: inline-flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.action-stack small { font-size: 0.8rem; color: rgba(255,255,255,0.85); }
.hero-actions { align-items: flex-start; }
/* Company logo beside the reviewer's name (About Us scroll box) and above it (home carousel). */
.t-card figcaption { display: flex; align-items: center; gap: 0.75rem; }
.t-card figcaption img { width: 3.25rem; height: 3.25rem; object-fit: contain; background: var(--white); padding: 0.2rem; flex: none; }
.testimonial figcaption img { display: block; width: 5rem; height: 5rem; object-fit: contain; margin: 0 auto 0.6rem; }
.t-card figcaption img { width: 5.5rem; height: 4rem; padding: 0; object-fit: cover; }
.testimonial figcaption img { width: 8rem; height: 6rem; object-fit: cover; }
/* Review cards are white so the customer logos (white backgrounds) sit flush; a thin line marks the card. */
.t-card { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--green-accent); }
/* Industries hub: photo across the top of each card, parts split into Machining and Fabrication */
.industry-card .card-img { display: block; width: calc(100% + 3.5rem); max-width: none; height: auto; aspect-ratio: 8 / 5; object-fit: cover; margin: -1.75rem -1.75rem 1.25rem; }
.industry-card .card-sub { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green-dark); margin: 1rem 0 0; }
.industry-card .card-list { margin-top: 0.35rem; margin-bottom: 0.5rem; }
.industry-card { position: relative; }
.industry-card > .rc { position: absolute; top: 12px; left: 12px; z-index: 2; }
/* 2026-11-08 (Noah, feedback 3): every banner is as tall as the home banner, so more of the photo or video shows. */
.hero { min-height: 82vh; min-height: 82svh; }
@media (min-width: 900px) and (min-height: 560px) { .hero { min-height: calc(100vh - var(--stats-h)); min-height: calc(100svh - var(--stats-h)); } }
/* Banner videos in their own colours: darkened on black for the white heading, no green tint. */
.hero-video { background: #000; }
.hero-video .hero-bg { opacity: 0.55; }
/* Photo cards have no coloured bar above the photo. */
.card:has(img) { border-top: 0; border-image: none; }
/* Reviews: plain quotation marks around the words, no large green mark. */
.testimonial blockquote::before, .t-card blockquote::before { content: "\201C"; display: inline; font: inherit; color: inherit; vertical-align: baseline; margin: 0; }
.testimonial blockquote::after, .t-card blockquote::after { content: "\201D"; }
.center { text-align: center; }
/* History & Vision timeline: years on the left stay in view while you read; the line fills as you scroll (static/js/timeline.js). */
.timeline { --yw: 8rem; --gap: 2.5rem; --p: 0; list-style: none; margin: 0 auto; padding: 0; position: relative; max-width: 58rem; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: calc(var(--yw) + var(--gap) / 2 - 1.5px); top: 0.5rem; width: 3px; border-radius: 2px; }
.timeline::before { bottom: 0; background: var(--line); }
.timeline::after { height: calc(var(--p) * (100% - 0.5rem)); background: var(--accent-grad); }
.tl-item { display: grid; grid-template-columns: var(--yw) 1fr; column-gap: var(--gap); padding-bottom: 3.5rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-year { position: sticky; top: calc(var(--bar-h, 0px) + 6.5rem); align-self: start; text-align: right; font: 700 1.15rem/1.3 "Montserrat", Arial, sans-serif; color: var(--grey); transition: color 0.3s; }
.tl-year::after { content: ""; position: absolute; top: 0.2rem; right: calc(var(--gap) / -2 - 9px); width: 12px; height: 12px; border-radius: 50%; background: var(--white); border: 3px solid var(--line); z-index: 1; transition: background 0.3s, border-color 0.3s; }
.tl-item.is-past .tl-year { color: var(--green-dark); }
.tl-item.is-past .tl-year::after { background: var(--green-accent); border-color: var(--green-accent); }
.tl-body h2 { margin-top: 0; }
@media (max-width: 600px) { .timeline { --yw: 4.6rem; --gap: 1.6rem; } .tl-year { font-size: 0.85rem; } }
.tl-item { position: relative; }
.tl-year { grid-column: 1; grid-row: 1; }
.tl-body { grid-column: 2; grid-row: 1; max-width: 46rem; }
.tl-item > .rc { position: absolute; top: -1.4rem; left: 0; z-index: 2; }
h3.as-h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
/* 2026-11-08: every banner video gets the home video's look: near black-and-white, hard contrast, dark. */
.hero-video:not(.hero-home) .hero-bg { filter: grayscale(0.9) contrast(1.3) brightness(0.8); }
/* Home: the stats band sits inside the banner on a transparent background, with the video playing behind it. */
.hero-home { flex-direction: column; align-items: stretch; justify-content: center; }
.hero-home .hero-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hero-stats { position: relative; width: 100%; background: transparent; }
.hero-stats div { background: transparent; }
@media (min-width: 900px) and (min-height: 560px) {
  .hero-home { min-height: 100vh; min-height: 100svh; }
  .hero-stats { height: var(--stats-h); align-items: stretch; }
  .hero-stats div { display: flex; flex-direction: column; justify-content: center; padding-top: 0; padding-bottom: 0; }
}
/* Home stats: the label sits beside the number, lined up with the bottom of it. */
.hero-stats div { display: flex; flex-direction: row !important; align-items: flex-end !important; justify-content: flex-start !important; gap: 0.75rem; }
.hero-stats div strong { margin-bottom: 0; }
.hero-stats div span { padding-bottom: 0.15em; line-height: 1.25; }
@media (min-width: 900px) and (min-height: 560px) { .hero-stats div { align-self: stretch; padding-bottom: 1.75rem !important; } }
/* Home stats: the green bar is only as tall as the number and its label. */
.hero-stats div { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; margin-bottom: 1.5rem; }
@media (min-width: 900px) and (min-height: 560px) { .hero-stats { align-items: end; } .hero-stats div { align-self: end; } }
/* 2026-11-08: banner photos and videos all share the home look (no green tint): dark, hard contrast, a touch of colour. */
.hero { background: #000; }
.hero .hero-bg { opacity: 0.6; }
.hero:not(.hero-home) .hero-bg { filter: grayscale(0.7) contrast(1.25) brightness(0.9); }
/* Commitments & Values: partner cards with logos. */
.partner-cards { margin-top: 1.5rem; }
.partner-card { display: flex; flex-direction: column; }
.partner-card .partner-logo { display: flex; align-items: center; justify-content: center; height: 7rem; margin: -1.75rem -1.75rem 1.25rem; padding: 1.25rem 1.5rem; background: var(--white); border-bottom: 1px solid var(--line); }
.partner-card .partner-logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.partner-card h3 { margin-bottom: 0.4rem; }
.partner-card .more { margin-top: auto; padding-top: 0.75rem; }
.partner-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); transform: translateY(-2px); transition: transform 0.2s, box-shadow 0.2s; }
.section-cta.center, .partner-cards + .section-cta { margin-top: 2rem; }
.partner-card { position: relative; } .partner-card > .rc { position: absolute; top: 12px; left: 12px; z-index: 2; }
/* Design & Engineering video is a CAD render on white: darker so the heading reads. */
.hero-video .hero-bg[poster*="hero-design-and-engineering"] { filter: grayscale(0.6) contrast(1.2) brightness(0.55); }
/* About Us, Industries, Capabilities and ManuConnect banner videos: lighter, a touch more colour. */
.hero-video .hero-bg:is([poster*="hero-company"], [poster*="hero-industries"], [poster*="hero-capabilities"], [poster*="hero-manuconnect"]) { opacity: 0.75; filter: grayscale(0.5) contrast(1.15) brightness(1.05); }
/* Phone menu taller than the screen (13 Nov, Dekker): the open menu scrolls inside the header and the page behind it stays put. */
@media (max-width: 960px) {
  .nav-open .site-header { max-height: calc(100vh - var(--bar-h)); max-height: calc(100dvh - var(--bar-h)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .scrolled.nav-open .site-header, .scrolled .nav-open .site-header { max-height: 100dvh; }
  body.nav-open { overflow: hidden; }
}
/* Banner videos on portrait screens (13 Nov, Dekker): a phone shows about a quarter of the frame, so these three
   are cropped on their subject instead of the middle. x% = (subject centre - 0.13) / 0.74, from his marked frames. */
@media (max-aspect-ratio: 1/1) {
  .hero-bg[poster*="hero-company"] { object-position: 11% 50%; }
  .hero-bg:is([poster*="hero-home"], [poster*="hero-metalworking-and-fabrication"]) { object-position: 72% 50%; }
}
/* Phone menu folds (13 Nov, Dekker): only the section names show; a tap opens one section's list (layouts/baseof.html). */
@media (max-width: 960px) {
  .menu > li > a { font-size: 1rem; padding: 0.8rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .menu > .has-sub > a { display: flex; justify-content: space-between; align-items: center; }
  .menu > .has-sub > a::after { content: ""; width: 0.5rem; height: 0.5rem; margin-right: 0.3rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; }
  .menu > .has-sub.open > a::after { transform: rotate(-135deg); }
  .menu .has-sub:hover .sub, .menu .has-sub:focus-within .sub, .menu .has-sub .sub { display: none; }
  .menu .has-sub.open .sub { display: block; padding-top: 0.4rem; }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) { .menu > .has-sub > a::after { transition: none; } }