/* ===========================================================================
   OMEGA DIGITAL - PROJECT PAGE STYLESHEET
   ---------------------------------------------------------------------------
   Shared by every /projects/<slug> page.

   Everything above the "PROJECT PAGE COMPONENTS" divider is lifted verbatim
   from index.html so the sub-pages inherit the homepage's system rather than
   re-stating it slightly differently. If a token changes on the homepage it has
   to change here too - these are the same design system, split across two files
   only because inlining ~1500 lines into thirteen documents would ship the same
   bytes thirteen times and cache none of them.

   Below the divider is the small amount that is genuinely new: the project
   hero, the fact strip, the capability grid and the brand panel. All of it is
   built from the tokens above.

   PER-PROJECT BRANDING
   Each page sets --brand / --brand-ink / --brand-on on .project-page. That is
   the same three-property hook index.html already uses for its featured cards
   ("adding a third branded product is two custom properties and nothing else").
   The Omega Digital red stays the page's own accent for navigation, buttons and
   links; the product colour is confined to the hero plate, the brand panel and
   the rules that separate them, so the two never compete.
   =========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink: #0D0D0D;
  --ink-light: #161616;
  --ink-card: #1A1A1A;
  --ink-border: #2A2A2A;
  --white: #FFFFFF;
  --off-white: #FAFAFA;
  --light-bg: #F5F5F5;
  --red: #f04e50;
  --red-dark: #e33e40;
  --red-glow: rgba(240, 78, 80, 0.15);
  --body-text: #444444;
  --muted: #888888;
  --muted-dark: #999999;
  --border: #E5E5E5;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --page-gutter: max(40px, calc((100% - 1240px) / 2 + 40px));
  /* Fallbacks so a page that forgets to declare a product colour still renders
     in the house palette instead of collapsing to unstyled. */
  --brand: var(--red);
  --brand-ink: var(--ink);
  --brand-on: #FFFFFF;
}

html { scroll-behavior: auto; }

body {
  font-family: var(--font);
  color: var(--body-text);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

.section-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.section-badge.dark { border-color: var(--ink-border); color: var(--muted-dark); }

/* Skip link. The homepage does not have one; every page here does, because a
   project page puts a full navbar plus a breadcrumb between the top of the
   document and the content. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--ink);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ─── TOP BAR ─── */
.top-bar {
  background: var(--ink);
  color: var(--white);
  font-size: 13px;
  padding: 10px 0;
  text-align: center;
  letter-spacing: 0.01em;
}
.top-bar a { color: var(--red); font-weight: 600; }
.top-bar a:hover { text-decoration: underline; }

/* ─── NAVBAR ─── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--red);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: none;
  transition: box-shadow 0.3s;
}
.navbar.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.15); }
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.nav-logo img { height: 34px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.2s;
}
.nav-links a:hover { color: #000; }
/* The page you are on, marked in the nav the same way the homepage marks
   nothing - there was no current-page state to inherit, so this is the
   lightest possible addition: a rule under the label, no colour change. */
.nav-links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ink); }
.nav-cta {
  background: var(--white) !important;
  color: var(--red) !important;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--font);
  line-height: 1.4;
  transition: opacity 0.2s, transform 0.2s;
}
.nav-cta:hover { opacity: 0.9; transform: translateY(-1px); }
.nav-cta:active { transform: scale(0.98); }
.nav-links a:focus-visible,
.nav-cta:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; border-radius: 4px; }

.nav-hamburger {
  display: none;
  width: 28px;
  height: 20px;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}
.nav-hamburger span {
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), opacity 0.2s;
}
.nav-hamburger:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ─── MOBILE DRAWER ─── */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--ink);
  padding: 96px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.42s cubic-bezier(0.16,1,0.3,1), opacity 0.3s, visibility 0.42s;
  overflow-y: auto;
}
.nav-drawer.open { transform: translateY(0); opacity: 1; visibility: visible; }
.nav-drawer a {
  font-size: 26px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-border);
  transition: color 0.2s, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.nav-drawer a:hover,
.nav-drawer a:focus-visible { color: var(--red); transform: translateX(8px); }
.nav-drawer .drawer-cta {
  margin-top: 28px;
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  font-family: var(--font);
}
.nav-drawer .drawer-cta:hover { background: var(--red-dark); color: var(--white); }
.nav-drawer .drawer-tel {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted-dark);
  border-bottom: none;
  padding: 0;
}

/* ─── BUTTONS AND LINKS ─── */
.btn-red {
  background: var(--red);
  color: var(--white);
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s, transform 0.2s;
}
.btn-red:hover { background: var(--red-dark); transform: translateY(-1px); }
.btn-red:active { transform: scale(0.98); }
.btn-red:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.btn-outline {
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--ink-border);
  color: var(--white);
  transition: border-color 0.2s, background 0.2s;
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.05); }
.btn-outline:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* Light-surface counterpart. The homepage only ever needed the dark one
   because its only outline button sits in the dark CTA band. */
.btn-outline-ink {
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.btn-outline-ink:hover { border-color: #D0D0D0; background: var(--light-bg); }
.btn-outline-ink:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.link-arrow {
  font-size: 14px;
  font-weight: 500;
  color: var(--body-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s, gap 0.2s;
}
.link-arrow:hover { color: var(--ink); gap: 10px; }
.link-arrow svg { width: 16px; height: 16px; }
.link-arrow:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }

/* ─── SECTION HEADER ─── */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}
.section-header h2 {
  font-size: clamp(30px, 3.5vw, 42px);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

/* ─── PROJECT CARD (reused verbatim for the "related" grid) ─── */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 8px 0 0;
}
.project-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 8px 40px rgba(13,13,13,0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s, border-color 0.2s;
}
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(13,13,13,0.10);
  border-color: #D8D8D8;
}
.project-card:focus-within {
  border-color: var(--red);
  box-shadow: 0 18px 50px rgba(13,13,13,0.10);
}
.project-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.project-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.project-stage {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 5px 11px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}
.project-stage.tier-live    { background: #E8F5E9; color: #2E7D32; }
.project-stage.tier-build   { background: #E3F2FD; color: #1565C0; }
.project-stage.tier-concept { background: #F3E5F5; color: #7B1FA2; }
.project-stage.tier-early   { background: #F1F1F1; color: #5A5A5A; }
.project-card h3 {
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.project-card h3 a { transition: color 0.2s; }
.project-card h3 a:hover { color: var(--red); }
.project-card h3 a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.project-tagline {
  font-size: 14px;
  font-weight: 500;
  color: var(--body-text);
  line-height: 1.55;
  margin-bottom: 12px;
}
.project-what {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 18px;
}
.project-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.project-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--body-text);
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 5px 11px;
  white-space: nowrap;
}

/* ─── CTA ─── */
.cta-section {
  background: var(--ink);
  color: var(--white);
  padding: 100px 0;
}
.cta-section .container { max-width: 800px; text-align: center; }
.cta-section h2 {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.cta-section p {
  font-size: 15px;
  color: var(--muted-dark);
  line-height: 1.7;
  margin-bottom: 36px;
}
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ─── FOOTER ─── */
.footer {
  background: var(--ink);
  border-top: 1px solid var(--ink-border);
  padding: 60px 0 40px;
  color: var(--muted-dark);
}
.footer .container {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-brand .nav-logo { margin-bottom: 16px; }
.footer-brand p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted-dark);
  max-width: 280px;
}
.footer-legal-links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.footer-legal-links a,
.footer-legal-links button {
  font-family: var(--font);
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s;
}
.footer-legal-links a:hover,
.footer-legal-links button:hover { color: var(--white); }
.footer-legal-links button { text-decoration: underline; text-underline-offset: 2px; }
.footer-legal-links a:focus-visible,
.footer-legal-links button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.footer-contact {
  list-style: none;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted-dark);
}
.footer-contact svg { color: var(--red); flex-shrink: 0; }
.footer-contact a { color: var(--muted-dark); transition: color 0.2s; }
.footer-contact a:hover,
.footer-contact a:focus-visible { color: var(--white); }
.footer h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 10px; }
.footer ul a { font-size: 13px; color: var(--muted-dark); transition: color 0.2s; }
.footer ul a:hover { color: var(--white); }
.footer-bottom {
  grid-column: 1 / -1;
  border-top: 1px solid var(--ink-border);
  margin-top: 48px;
  padding-top: 24px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ─── COOKIE CONSENT BANNER ─── */
.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 1200;
  max-width: 640px;
  margin: 0 auto;
  background: var(--ink);
  border: 1px solid var(--ink-border);
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  display: none;
}
.cookie-banner.show { display: block; }
.cookie-banner h3 { color: var(--white); font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.cookie-banner p { color: var(--muted-dark); font-size: 13px; line-height: 1.65; margin-bottom: 16px; }
.cookie-banner p a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-actions button {
  font-size: 13px;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 8px;
  transition: background 0.2s, border-color 0.2s;
}
.cookie-accept { background: var(--red); color: var(--white); }
.cookie-accept:hover { background: var(--red-dark); }
.cookie-decline { background: none; color: var(--white); border: 1px solid var(--ink-border); }
.cookie-decline:hover { border-color: var(--white); }
.cookie-actions button:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* ===========================================================================
   PROJECT PAGE COMPONENTS
   =========================================================================== */

/* ─── BREADCRUMB ─── */
.breadcrumb {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.breadcrumb a { transition: color 0.2s; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 3px; }
.breadcrumb span[aria-current] { color: var(--ink); }
.breadcrumb .sep { color: var(--border); }

/* ─── PROJECT HERO ───
   Same 1fr 1fr split and same 20px-radius dark visual panel as the homepage
   hero, so landing on a project page reads as the same site rather than a
   microsite that happens to share a navbar. */
.project-hero { padding: 64px 0 40px; overflow: hidden; }
.project-hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.project-hero h1 {
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.project-hero .hero-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body-text);
  max-width: 500px;
  margin-bottom: 32px;
}
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* The hero brand panel. This is where the product's own identity is allowed to
   lead, occupying the same slot and the same 20px radius as the homepage hero's
   dark visual, so the page still reads as Omega Digital.

   Each mark was lifted off a flat brand board, so some are dark-on-light and
   some light-on-dark. The panel carries whichever surface its mark needs
   (--plate-bg), which keeps one component working for all of them instead of
   requiring two logo variants per product. */
.hero-brand-panel {
  background: var(--plate-bg, var(--light-bg));
  border: 1px solid var(--plate-border, var(--border));
  border-radius: 20px;
  padding: 56px 44px;
  min-height: 340px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* The one place the pure product colour appears at full strength, matching how
   the homepage's featured cards mark their brand. */
.hero-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand);
}
.hero-brand-panel img {
  max-height: 96px;
  max-width: 100%;
  width: auto;
}
/* Products with no supplied logo get their name set in type rather than a mark
   borrowed from another product or drawn from scratch. */
.hero-brand-panel .wordmark {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--plate-fg, var(--ink));
  line-height: 1.1;
}
.hero-brand-panel .strapline {
  font-size: 14px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--plate-fg, var(--ink)) 60%, transparent);
  max-width: 360px;
}

/* ─── FACT STRIP ───
   Same dark full-bleed band as the homepage stats marquee, but static. The
   homepage already owns the one scrolling marquee on the site; repeating that
   device on thirteen sub-pages would be filler, and these four values are worth
   reading rather than watching go past. */
.fact-strip {
  background: var(--ink);
  border-top: 1px solid var(--ink-border);
  border-bottom: 1px solid var(--ink-border);
  padding: 26px 0;
}
.fact-strip .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px 40px;
}
.fact dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.fact dd { font-size: 14.5px; font-weight: 600; color: var(--white); line-height: 1.45; }
/* Live destinations sit in the strip alongside the status. They are the only
   links on a project page that leave the site, so they carry an arrow and pick
   up the product colour on hover to read as deliberate rather than incidental. */
.fact dd a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,0.28);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.fact dd a:hover { color: var(--brand); border-color: var(--brand); }
.fact dd a:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; border-radius: 3px; }
.fact dd a svg { flex-shrink: 0; opacity: 0.7; }

/* Available to screen readers, out of the visual flow. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ─── OVERVIEW ─── */
.overview { padding: 100px 0; }
.overview .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.overview h2 {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.overview-right p { font-size: 15px; line-height: 1.8; margin-bottom: 20px; }
.overview-right p:last-child { margin-bottom: 0; }

/* ─── CAPABILITY GRID ───
   The "what it will do" points. Each one is a full sentence from the project
   brief, so these are not headings with body copy under them - the sentence is
   the content, and a marker carries the counting. */
.capabilities { padding: 0 0 110px; }
.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
/* The grid has exactly as many cells as there are points, so it must not leave
   a hole. Counts that divide by three get three columns; any odd count in the
   two-column case lets its final card span the row rather than sit beside a
   gap. */
.capability-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.capability-grid:not(.cols-3) > .capability:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.capability {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s, border-color 0.2s;
}
.capability:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(13,13,13,0.07);
  border-color: #D8D8D8;
}
.capability-marker {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--brand) 14%, var(--white));
  color: color-mix(in srgb, var(--brand) 72%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
}
.capability p { font-size: 14.5px; line-height: 1.65; color: var(--body-text); }
.capability h3 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
  letter-spacing: -0.005em;
}
.capability h3 + p { font-size: 13.5px; color: var(--muted); line-height: 1.7; }

/* ─── PRODUCT VISUAL ───
   The screenshot or concept render taken from the project brief, sitting in the
   same hero slot and the same 20px radius as the homepage hero's visual panel.
   The product colour appears as the rule along the top edge, the same device the
   homepage uses to mark a branded card. */
.project-shot {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(13,13,13,0.08);
}
.project-shot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand);
  z-index: 2;
}
.project-shot img { width: 100%; height: auto; display: block; }

/* ─── SIGNATURE SYSTEMS ───
   RELUNO is described in the brief by six named systems rather than outcome
   sentences, so it gets the brief's own pill treatment instead of being forced
   into the capability grid as six one-word cards. */
.systems-row { gap: 10px; }
.systems-row .project-tag {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 11px 22px;
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
  background: color-mix(in srgb, var(--brand) 8%, var(--white));
}

/* ─── PRODUCT SCREENS ───
   Captures of the working product. Given its own tinted band so the screens sit
   on a surface rather than floating on the page, the same treatment the
   homepage uses to separate its services section. */
.shots { padding: 100px 0; background: var(--light-bg); }
.shots-grid { display: grid; gap: 24px; }
.shots figure {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(13,13,13,0.05);
}
.shots figure img { width: 100%; height: auto; }
.shots figcaption {
  font-size: 14px;
  color: var(--body-text);
  line-height: 1.65;
  padding: 18px 24px 20px;
  border-top: 1px solid var(--border);
}

/* Where two white sections meet there is no background change to carry the
   break, so the two paddings stack into an obvious void. A tinted band in
   between does that work on its own, hence the :not(). */
.capabilities + .related { padding-top: 0; }

/* ─── RELATED ─── */
.related { padding: 0 0 110px; }

/* ─── SCROLL REVEAL ───
   The homepage fades sections up on entry via GSAP. Same effect, same easing,
   done with IntersectionObserver so a project page does not need to pull GSAP
   for what is a single fade. Elements start visible and are only hidden once
   the script confirms it is going to animate them, so no-JS and reduced-motion
   both render normal content. */
.reveal-item.reveal-armed { opacity: 0; transform: translateY(24px); }
.reveal-item.reveal-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

/* ─── RESPONSIVE ─── */
section[id], div[id] { scroll-margin-top: 88px; }
[tabindex="-1"]:focus { outline: none; }

@media (max-width: 1180px) {
  .nav-links { gap: 22px; }
  .nav-links a { font-size: 13px; }
}

@media (max-width: 1024px) {
  .project-hero .container { grid-template-columns: 1fr; gap: 40px; }
  .overview .container { grid-template-columns: 1fr; gap: 40px; }
  .capability-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .footer .container { grid-template-columns: repeat(2, 1fr); }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .project-hero { padding: 44px 0 32px; }
  .projects-grid { grid-template-columns: 1fr; gap: 16px; }
  .project-card { padding: 24px; }
  .project-card-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer .container { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn-red,
  .cta-actions .btn-outline { justify-content: center; text-align: center; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-red,
  .hero-actions .btn-outline-ink { justify-content: center; text-align: center; }
  .nav-drawer a { font-size: 22px; }
  .overview { padding: 70px 0; }
  .capabilities, .related { padding-bottom: 70px; }
  .hero-brand-panel { padding: 40px 28px; min-height: 240px; }
  .hero-brand-panel img { max-height: 64px; }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  .nav-drawer { transition: opacity 0.01ms; }
  .reveal-item.reveal-armed { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── PRINT ─── */
@media print {
  .top-bar, .navbar, .nav-drawer, .cookie-banner, .cta-section, .related { display: none; }
  .fact-strip { background: #fff; color: #000; }
  .fact dd { color: #000; }
  .project-shot, .hero-brand-panel { box-shadow: none; }
}