/* ============================================================
   Sobany & Sons — main stylesheet
   Phase 2: brand foundation + hero
   ============================================================ */

/* ---------- Self-hosted font (Inter variable, no CDN) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/InterVariable-Italic.woff2") format("woff2");
}
/* Montserrat (variable) — headings only; body stays Inter */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/Montserrat.woff2") format("woff2");
}

/* ---------- Brand tokens (hex derived from the logo) ---------- */
:root {
  --color-primary: #0360b4;        /* bright blue from the "S" */
  --color-primary-bright: #0277c9; /* brighter blue peak — hover/accents */
  --color-primary-dark: #024a8c;   /* darker blue for active/hover states */
  --color-dark: #282425;           /* grey wordmark / lower half of the "S" */
  --color-black: #120f10;          /* deepest near-black */

  --color-accent: #f9b000;         /* signal amber, tuned to SRL's rgb(249,176,0) */
  --color-accent-dark: #d99700;    /* amber hover/active */

  --color-navy: #0d2b5e;           /* deep navy for dark sections (from demo) */
  --color-navy-deep: #081f3f;      /* darker navy for footer */

  --color-bg: #ffffff;
  --color-bg-alt: #f6f8fa;         /* the only tint — alternates with white */
  --color-footer: #141414;         /* near-black footer (SRL-style) */
  --color-text: #202020;
  --color-muted: #5a6068;
  --color-border: #e9ecf0;      /* lighter hairline */

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Montserrat", var(--font-sans);

  --nav-height: 4rem;
  --content-max: 1100px;

  /* Type scale (Phase B). Montserrat is variable (100-900), so 300 and 500 are
     available from the single self-hosted file — no extra weights to ship.
     Sentence case throughout: no uppercase, no tracking on headings. */
  --h1-size: clamp(2.5rem, 6vw, 4rem);
  --h1-weight: 300;
  --h2-size: clamp(1.75rem, 4.5vw, 2.25rem);
  --h2-weight: 500;
  --h3-size: 1.35rem;
  --h3-weight: 600;
}

/* ---------- Base ---------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-primary);
}

/* Consistent, visible keyboard focus on all interactive elements
   (element-specific overrides add stronger rings where needed). */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- Sticky top nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Home only: the header floats over the hero photo until the page is scrolled,
   then becomes the same solid white bar every interior page uses. Fixed rather
   than sticky so the hero starts at the very top of the viewport. */
.site-nav--overlay {
  position: fixed;
  left: 0;
  right: 0;
  /* A soft scrim, fading to nothing by the bottom of the bar, so the white
     header text stays legible over a bright sky without putting a visible
     band across the photo. Contrast over the hero image cannot be guaranteed
     by a colour pair alone — this is what makes it safe. */
  background: linear-gradient(to bottom, rgba(9, 12, 20, 0.55), rgba(9, 12, 20, 0));
  border-bottom-color: transparent;
}
.site-nav--overlay .nav-logo__name,
.site-nav--overlay .nav-logo__sub,
.site-nav--overlay .nav-links a {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.site-nav--overlay.is-scrolled .nav-logo__name,
.site-nav--overlay.is-scrolled .nav-logo__sub,
.site-nav--overlay.is-scrolled .nav-links a,
.site-nav--overlay.is-open .nav-logo__name,
.site-nav--overlay.is-open .nav-logo__sub,
.site-nav--overlay.is-open .nav-links a {
  text-shadow: none;
}
.site-nav--overlay .nav-logo__name,
.site-nav--overlay .nav-logo__sub,
.site-nav--overlay .nav-links a {
  color: #ffffff;
}
.site-nav--overlay .nav-toggle__bar {
  background: #ffffff;
}
.site-nav--overlay.is-scrolled {
  background: var(--color-bg);
  border-bottom-color: var(--color-border);
}
.site-nav--overlay.is-scrolled .nav-logo__name,
.site-nav--overlay.is-scrolled .nav-links a {
  color: var(--color-dark);
}
.site-nav--overlay.is-scrolled .nav-logo__sub {
  color: var(--color-muted);
}
.site-nav--overlay.is-scrolled .nav-toggle__bar {
  background: var(--color-dark);
}
/* While the mobile menu is open the bar must be solid whatever the scroll. */
.site-nav--overlay.is-open {
  background: var(--color-bg);
  border-bottom-color: var(--color-border);
}
.site-nav--overlay.is-open .nav-logo__name,
.site-nav--overlay.is-open .nav-links a {
  color: var(--color-dark);
}
.site-nav--overlay.is-open .nav-logo__sub {
  color: var(--color-muted);
}
.site-nav--overlay.is-open .nav-toggle__bar {
  background: var(--color-dark);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 1rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  color: var(--color-dark);   /* explicit: never fall back to default link blue */
  text-decoration: none;
}

.nav-logo:hover,
.nav-logo:focus {
  text-decoration: none;
}

.nav-logo__mark {
  height: 44px;
  width: auto;
}

.nav-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nav-logo__name {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--color-dark);
}

.nav-logo__sub {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--color-muted);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  color: var(--color-dark);
  font-weight: 500;
  font-size: 0.95rem;
}

.nav-links a:hover {
  color: var(--color-dark);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* Hamburger toggle — hidden on desktop, shown < 768px (see media query). */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--color-dark);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Animate to an X when open. */
.site-nav.is-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav.is-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.site-nav.is-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.9rem 1.9rem;
  border-radius: 6px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Primary CTA = signal amber with near-black text (contrast ~9.5:1) */
/* Solid brand blue is the default action; amber carries the hover, so the
   accent still reads as "the" call to action without failing contrast as a
   text colour (amber on white is ~1.9:1 and can never hold body text). */
.btn--primary {
  background: var(--color-primary);
  color: #ffffff;
  border: 2px solid var(--color-primary);
}

.btn--primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-black);
}

/* The single amber call to action, used once on the home hero. Near-black on
   amber is 10.2:1; amber never carries text on a light background. */
.btn--accent {
  background: var(--color-accent);
  color: var(--color-black);
  border: 2px solid var(--color-accent);
}
.btn--accent:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-black);
}

/* Outlined secondary, for light backgrounds. */
.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn--secondary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

/* On the hero photo and any dark section the outline goes light. */
.hero .btn--secondary,
.section-block--navy .btn--secondary {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.85);
}
.hero .btn--secondary:hover,
.section-block--navy .btn--secondary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-black);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* The photo crops to fill; the section height is fixed, not photo-driven. */
  height: 100vh;
  display: flex;
  align-items: flex-end;            /* anchor the text block lower */
  padding: 3rem 1rem;
  background-image: url("../assets/img/hero.jpg");
  background-size: cover;
  background-position: 50% 50%;      /* skyline and signal poles both in frame */
  color: #fff;
  scroll-margin-top: var(--nav-height);
  overflow: hidden;
}

/* Overlay: darkest at the bottom-left (behind the text), fading lighter
   toward the top-right so more of the photo shows through. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top right,
      rgba(9, 12, 20, 0.5) 0%,
      rgba(9, 12, 20, 0.2) 42%,
      rgba(9, 12, 20, 0.03) 78%,
      rgba(9, 12, 20, 0) 100%
    ),
    linear-gradient(
      to top,
      rgba(9, 12, 20, 0.18) 0%,
      rgba(9, 12, 20, 0) 38%
    );
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

.hero__content {
  max-width: 36rem;            /* keep line lengths intentional; fits the name on one line */
  padding-bottom: 1.5rem;
}

@media (min-width: 768px) {
  /* a bit more breathing room below the CTA buttons on desktop */
  .hero__content {
    padding-bottom: 3.5rem;
  }
}

.hero__name {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: normal;
  line-height: 1.08;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.hero__tagline {
  margin: 0.5rem 0 0;
  font-size: clamp(1.05rem, 3.2vw, 1.4rem);
  font-weight: 400;
  color: #eaf2fb;
}

.hero__lead {
  margin: 0.75rem 0 0;
  font-size: clamp(1rem, 3vw, 1.35rem);
  font-weight: 400;
  font-style: italic;
  color: #d7e3f2;
}

.hero__positioning {
  margin: 1.25rem 0 0;
  max-width: 46ch;
  font-size: clamp(0.95rem, 2.6vw, 1.1rem);
  color: #e8ebf0;
}

.hero__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ---------- Section scaffolding ---------- */
.section-block {
  scroll-margin-top: var(--nav-height);
}

.section-block--alt {
  background: var(--color-bg-alt);
}

.section-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  /* ~1.5x the v1 rhythm (5.5rem -> 8.25rem) on desktop, never less than v1 on
     a phone, where that much air would just mean scrolling past nothing. */
  padding: clamp(5.5rem, 10vw, 8.25rem) 1.5rem;
}

/* Small uppercase eyebrow label above each section heading (demo pattern) */
.section__title {
  margin: 0 0 1.5rem;
  font-family: var(--font-head);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  letter-spacing: normal;
  line-height: 1.15;
  color: var(--color-dark);
}

/* ---------- Breadcrumbs (interior subpages only) ---------- */
.breadcrumb-nav {
  margin: 0 0 1.25rem;
}

.breadcrumb {
  display: flex;
  flex-wrap: nowrap;          /* one line; the current crumb truncates instead */
  align-items: baseline;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  color: #6b7280;
  min-width: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Decorative separator, drawn before every crumb except the first. */
.breadcrumb__item + .breadcrumb__item::before {
  content: "\203A";
  color: #9aa3af;
}

.breadcrumb__item a {
  color: #6b7280;
  text-decoration: none;
}

.breadcrumb__item a:hover,
.breadcrumb__item a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The current page: plain text, and the only crumb allowed to shrink — on a
   narrow screen a long category name ellipsises rather than wrapping the row. */
.breadcrumb__item--current {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  color: #6b7280;
}

.breadcrumb__item--current::before {
  content: "\203A";
  color: #9aa3af;
  margin-right: 0.5rem;
}

/* Section marker: the eyebrow labels are gone, and this replaces the anchor
   they gave a heading — and the only brand colour at the top of a section.
   4px + 2rem is 36px, within a pixel of the 35.4px the eyebrow block occupied,
   so headings keep their position and section padding is untouched. */
.section__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-bottom: 2rem;
  border-radius: 2px;
  background: var(--color-primary);
}

/* The same class carries the page h1 on interior pages and a section h2 on the
   home page, so the scale is keyed off the element, not a second class. */
h1.section__title {
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: 1.08;
}

/* Subtle fade-up on section headings (only when JS + motion are on;
   see js/anim.js). No-JS / reduced-motion leaves them visible. */
.js-anim .section__title {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.js-anim .section__title.is-in {
  opacity: 1;
  transform: none;
}

.section__intro {
  margin: 0 0 2.5rem;
  max-width: 60ch;
  font-size: 1.1rem;
  color: var(--color-muted);
}

/* Placeholder sections still using the Phase 1 stub class */
.section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 3rem 1rem;
  scroll-margin-top: var(--nav-height);
}

/* ---------- Navy sections (dark) ---------- */
.section-block--navy {
  background: var(--color-navy);
  color: #b8cbe4;                 /* lightened body text (contrast ~7:1 on navy) */
}
.section-block--navy .section__title {
  color: #ffffff;
}
/* Brand blue is too dark on navy; the marker takes the lighter tint the
   eyebrow used there. */
.section-block--navy .section__title::before {
  background: #7bbcff;
}

/* ---------- About (dark navy, split with the traffic light) ---------- */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

.about__main p {
  margin: 0 0 1.15rem;
  font-size: 1.08rem;
  color: #b8cbe4;
}
.about__main strong {
  color: #ffffff;
}

.about__vision {
  margin: 1.75rem 0 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid #7bbcff;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0 6px 6px 0;
  font-size: 1.12rem;
  font-style: italic;
  color: #eaf2fb;
}

.about__vision-label {
  display: block;
  margin-bottom: 0.4rem;
  font-style: normal;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: normal;
  color: #7bbcff;
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.25rem;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.4rem 1rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.stat__num {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  font-weight: 500;
  color: #ffffff;                 /* number in white */
  letter-spacing: normal;
}
.stat__suffix {
  color: var(--color-accent);     /* only the "+" / "/7" in amber */
}

.stat__label {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: normal;
  color: #8aafd6;
}

/* ---------- Signature traffic light ---------- */
.about__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.traffic-light {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tl-housing {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 18px 15px;
  background: #16233a;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 45px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.tl-housing::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  width: 40px;
  height: 12px;
  background: #16233a;
  border-radius: 4px 4px 0 0;
}

.tl-pole {
  width: 9px;
  height: 130px;
  background: linear-gradient(180deg, #2a3a50, #16223a);
  border-radius: 0 0 4px 4px;
}

.tl-light {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.tl-light--red {
  background: #3a1a1a;
}
.tl-light--amber {
  background: #3a2a0a;
}
.tl-light--green {
  background: #0a2a1a;
}
.tl-light--red.is-on {
  background: #e63946;
  box-shadow: 0 0 20px 6px rgba(230, 57, 70, 0.7), 0 0 60px 20px rgba(230, 57, 70, 0.3);
}
.tl-light--amber.is-on {
  background: var(--color-accent);
  box-shadow: 0 0 20px 6px rgba(245, 168, 0, 0.7), 0 0 60px 20px rgba(245, 168, 0, 0.3);
}
.tl-light--green.is-on {
  background: #2dc653;
  box-shadow: 0 0 20px 6px rgba(45, 198, 83, 0.7), 0 0 60px 20px rgba(45, 198, 83, 0.3);
}

/* ---------- Full-bleed category panel strip ---------- */
.section-inner--tight-bottom {
  padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.section-inner--tight-top {
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.cat-strip {
  display: flex;
  gap: 2px;
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-strip::-webkit-scrollbar {
  display: none;
}

.cat-panel {
  position: relative;
  flex: 0 0 100%;                 /* phones: one full-width panel at a time */
  min-width: 100%;
  scroll-snap-align: start;
  height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  background: var(--color-primary);
  transition: flex-grow 0.3s ease;
}

.cat-panel__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.cat-panel__bigicon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 132px;
  height: 132px;
  color: #fff;
  opacity: 0.22;
}
.cat-panel__bigicon svg {
  width: 100%;
  height: 100%;
}

.cat-panel__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(6, 10, 18, 0.3) 0%,
    rgba(6, 10, 18, 0.5) 55%,
    rgba(6, 10, 18, 0.78) 100%
  );
  transition: opacity 0.3s ease;
}
.cat-panel--blue .cat-panel__overlay {
  background: linear-gradient(
    to bottom,
    rgba(2, 40, 78, 0) 0%,
    rgba(2, 40, 78, 0.3) 100%
  );
}

.cat-panel__name {
  position: relative;
  z-index: 2;
  padding: 0 1.25rem;
  color: #fff;
  font-weight: 500;
  font-size: clamp(1.4rem, 5.5vw, 1.9rem);  /* panel label, sentence case */
  letter-spacing: normal;
  line-height: 1.25;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.cat-panel__plus {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  color: #fff;
  transition: transform 0.25s ease;
}

/* hover / focus: overlay lightens, background eases in */
.cat-panel:hover .cat-panel__overlay,
.cat-panel:focus-visible .cat-panel__overlay {
  opacity: 0.6;
}

/* active category: brighter overlay, underlined name, "+" rotates to a close */
.cat-panel.is-active .cat-panel__overlay {
  opacity: 0.5;
}
.cat-panel.is-active .cat-panel__name {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
}
.cat-panel.is-active .cat-panel__plus {
  transform: translateX(-50%) rotate(45deg);
  color: var(--color-accent);
}
.cat-panel:hover .cat-panel__bg,
.cat-panel:focus-visible .cat-panel__bg {
  transform: scale(1.06);
}
.cat-panel:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

@media (min-width: 700px) {
  .cat-panel {
    flex: 0 0 50%;               /* tablet: two visible, arrows advance one */
    min-width: 50%;
    height: 420px;
  }
}

@media (min-width: 1200px) {
  .cat-strip {
    overflow: hidden;             /* all 8 fit — no scroll */
  }
  .cat-panel {
    flex: 1 1 0;                  /* equal slim columns filling the viewport */
    min-width: 0;                 /* release the floor so they can share width */
    height: 440px;
  }
  .cat-panel:hover,
  .cat-panel:focus-visible {
    flex-grow: 1.8;               /* gently grow; neighbours shrink */
  }
  .cat-panel__name {
    /* Eight slim columns share the viewport, so the label has ~130px to work
       with — small and tightly led, to keep long category names to two lines. */
    font-size: clamp(0.85rem, 1.05vw, 1rem);
    line-height: 1.3;
    padding: 0 0.75rem;
  }
  .cat-arrow {
    display: none !important;     /* no carousel arrows on desktop */
  }
}

/* ---------- Mobile carousel arrows ---------- */
.cat-carousel {
  position: relative;
}

.cat-arrow {
  display: none;                  /* shown only when the strip is scrollable */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(6, 10, 18, 0.45);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.cat-carousel.is-scrollable .cat-arrow {
  display: flex;
}

.cat-arrow:hover {
  background: rgba(6, 10, 18, 0.72);
}

.cat-arrow[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.cat-arrow:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.cat-arrow svg {
  width: 24px;
  height: 24px;
}

.cat-arrow--prev {
  left: 0.6rem;
}

.cat-arrow--next {
  right: 0.6rem;
}

/* ---------- Products: panels-first, on-demand grids ---------- */
/* "View all" link + "select a category" hint under the strip */
.products-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 1.75rem;
}
.products-viewall {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--color-primary);
  text-decoration: none;
  padding: 0.4rem 0.2rem;
  border-bottom: 2px solid transparent;
}
.products-viewall:hover,
.products-viewall.is-active {
  border-bottom-color: var(--color-accent);
}
.products-hint {
  margin: 0 0 2rem;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.95rem;
}

/* ---------- Products (chrome-free tiles) ---------- */
/* Grids are present in the HTML but hidden until a category is chosen
   (js/products.js toggles .is-open; <noscript> reveals them all). */
.p-category {
  display: none;
  margin-bottom: 4rem;
  scroll-margin-top: calc(var(--nav-height) + 1rem);
}

.p-category.is-open {
  display: block;
}

.p-category:last-child {
  margin-bottom: 0;
}

.p-category__title {
  margin: 0 0 2.5rem;
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  letter-spacing: normal;
  text-align: center;
  color: var(--color-dark);
}

.p-grid {
  display: grid;
  grid-template-columns: 1fr;                  /* phone: 1 column */
  gap: 3rem 2rem;
}

@media (min-width: 480px) {
  .p-grid { grid-template-columns: repeat(2, 1fr); }   /* small tablet: 2 */
}

@media (min-width: 700px) {
  .p-grid { grid-template-columns: repeat(3, 1fr); }   /* tablet: 3 */
}

@media (min-width: 1000px) {
  .p-grid { grid-template-columns: repeat(4, 1fr); }   /* desktop: 4 */
}

/* No card chrome — each tile floats on the section background. */
.p-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
}

/* Uniform image/icon zone; transparent so cutout PNGs drop in cleanly and
   mixed icon/photo tiles stay aligned. */
.p-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 150px;
}

.p-card__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  /* melts the photos' light studio backdrop into the section background
     without any image editing (interim until cutout PNGs are available) */
  mix-blend-mode: multiply;
  transition: transform 0.25s ease;
}

.p-card:hover .p-card__media img {
  transform: scale(1.05);
}

.p-card__icon {
  width: 68px;
  height: 68px;
  color: var(--color-primary);
}

.p-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: var(--h3-weight);
  color: var(--color-dark);
}

.p-card__desc {
  margin: 0;
  max-width: 28ch;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-muted);
}

.p-loading,
.p-error {
  color: var(--color-muted);
}

/* ---------- Category card grid (home teaser) ---------- */
.cat-cards {
  display: grid;
  grid-template-columns: 1fr;                  /* phone: one per row */
  gap: 1.25rem;
}

@media (min-width: 480px) {
  .cat-cards { grid-template-columns: repeat(2, 1fr); }   /* large phone / tablet */
}

@media (min-width: 1000px) {
  .cat-cards { grid-template-columns: repeat(4, 1fr); }   /* desktop */
}

.cat-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;                /* clips the photo to the card's radius */
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Photo header. width/height are on the <img> and the box carries the same
   ratio, so the row height is known before the image loads — no layout shift. */
.cat-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--color-bg-alt);
  overflow: hidden;
}

.cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.cat-card:hover .cat-card__media img {
  transform: scale(1.04);
}

/* Categories without a photo keep the line icon, centred in the same box. */
.cat-card__media--icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  flex: 1 1 auto;
  padding: 1.35rem 1.4rem 1.5rem;
}

.cat-card:hover {
  transform: translateY(-3px);
  border-color: #ccd4dd;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
}

.cat-card:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.cat-card__icon {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
}

.cat-card__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
  /* Reserve two lines so one- and two-line category names produce cards of
     the same height in every row, not just within a row. */
  min-height: 2.6em;
  color: var(--color-dark);
}

/* Clamped summary — the full blurb leads the category page. */
.cat-card__snippet {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-muted);
  /* Two lines: one cut nearly every blurb mid-phrase at card width. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cat-card__cta {
  margin-top: auto;               /* pin to the bottom so cards align */
  padding-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-primary);
}

.cat-card:hover .cat-card__cta {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.cat-cards__footer {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

/* The lift is decoration; under reduced motion the card still responds, just
   without movement. */
@media (prefers-reduced-motion: reduce) {
  .cat-card,
  .cat-card__media img {
    transition: border-color 0.18s ease;
  }
  .cat-card:hover {
    transform: none;
  }
  .cat-card:hover .cat-card__media img {
    transform: none;
  }
}

/* ---------- Projects gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.25rem;
}

.gallery__item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #0d0f14;
  cursor: pointer;
}

.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.gallery__item:hover .gallery__img,
.gallery__item:focus-visible .gallery__img {
  transform: scale(1.05);
}

.gallery__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 0.85rem 0.7rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #fff;
  text-align: left;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
}

.gallery__item:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 12, 16, 0.93);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__figure {
  margin: 0;
  max-width: min(1100px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 6px;
  background: #000;
}

.lightbox__caption {
  margin-top: 0.85rem;
  max-width: 60ch;
  color: #e8ebf0;
  font-size: 0.95rem;
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  width: 44px;
  height: 44px;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 2rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.lightbox__nav:hover {
  background: rgba(0, 0, 0, 0.6);
}

.lightbox__prev {
  left: 0.75rem;
}

.lightbox__next {
  right: 0.75rem;
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .lightbox__nav {
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
  }
}

/* ---------- Pill list ----------
   No longer used by the client wall on /about/; retained because the 404 page
   uses it for its section chips. */
.clients {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0 0 4rem;
  padding: 0;
}

.client-badge {
  padding: 0.65rem 1.15rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--color-dark);
}

/* ---------- Client trust wall (about) ----------
   Names set as type on a full-bleed tint — no chrome, reading like a logo wall.
   Flex rather than grid so the short final row centres under the others. */
.client-wall {
  background: var(--color-bg-alt);
}

.client-wall__list {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(3rem, 5vw, 4.5rem) 1.5rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 2rem;
}

.client-wall__name {
  flex: 0 1 calc(50% - 1rem);        /* phone: two per row */
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: #6b7280;
}

@media (min-width: 700px) {
  .client-wall__name { flex-basis: calc(33.333% - 1.34rem); }   /* three */
}

@media (min-width: 1000px) {
  .client-wall__list { gap: 3rem 2.5rem; }
  .client-wall__name { flex-basis: calc(25% - 1.875rem); }      /* four */
}

.experience__heading {
  margin: 0 0 1.75rem;
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  color: var(--color-dark);
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 720px;
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;      /* phone: numeral stacked above the entry */
  gap: 0.4rem;
  padding: 0 0 2.5rem 1.75rem;
  border-left: 1px solid var(--color-border);
}

@media (min-width: 700px) {
  .timeline__item {
    grid-template-columns: 6.5rem 1fr;   /* numeral column | content */
    gap: 0 2.25rem;
    align-items: start;
  }
}

.timeline__when {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.timeline__month {
  font-size: 0.8rem;
  font-weight: 500;
  color: #6b7280;
}

.timeline__year {
  font-family: var(--font-head);
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--color-primary);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -5px;                      /* centred on the 1px connector */
  top: 0.5rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  /* final state (also the no-JS / reduced-motion state): filled */
  background: var(--color-primary);
  transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

/* Metro-highlighted contracts get the amber accent dot */
.timeline__item--metro::before {
  background: var(--color-accent);
}

/* With JS + motion the entries stagger in and the dots light in sequence, both
   driven by the .is-lit class js/anim.js already applies through its
   IntersectionObserver. No-JS and reduced-motion never get .js-anim, so they
   see the final state immediately. */
.js-anim .timeline__item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.js-anim .timeline__item.is-lit {
  opacity: 1;
  transform: none;
}
.js-anim .timeline__item::before {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--color-border);
  transform: scale(0.6);
}
.js-anim .timeline__item.is-lit::before {
  background: var(--color-primary);
  box-shadow: none;
  transform: scale(1);
}
.js-anim .timeline__item--metro.is-lit::before {
  background: var(--color-accent);
}

.timeline__date {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--color-primary);
}

.timeline__client {
  display: block;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-dark);
}

.timeline__tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.08rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--color-primary);
  background: rgba(3, 96, 180, 0.1);
  border-radius: 4px;
  vertical-align: middle;
}

.timeline__desc {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  color: var(--color-muted);
}

.experience__note {
  margin: 1.75rem 0 0;
  font-size: 0.82rem;
  color: var(--color-muted);
}

/* ---------- Contact ---------- */
.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
}

.contact__address {
  margin: 0 0 1.75rem;
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-dark);
}

.contact__list {
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
}

.contact__list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  padding: 0.7rem 0;
  font-size: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.contact__list span {
  min-width: 64px;
  font-weight: 600;
  color: var(--color-muted);
}

.contact__list a,
.contact__people a {
  color: var(--color-primary);
  text-decoration: none;
}

.contact__list a:hover,
.contact__people a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.contact__people {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 3rem;
  margin-bottom: 1.75rem;
}

.contact__people strong {
  color: var(--color-dark);
}

.contact__reg {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.contact__map iframe {
  width: 100%;
  min-height: 340px;
  height: 100%;
  border: 0;
  border-radius: 6px;
}

@media (min-width: 820px) {
  .contact {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

/* Contact on navy: lighten text, amber links */
.section-block--navy .contact__address {
  color: #eaf2fb;
}
.section-block--navy .contact__address strong {
  color: #ffffff;
}
.section-block--navy .contact__list li {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.section-block--navy .contact__list span {
  color: #8aafd6;
}
.section-block--navy .contact__list a,
.section-block--navy .contact__people a {
  color: #eaf2fb;                 /* light links; amber only as a hover underline */
}
.section-block--navy .contact__list a:hover,
.section-block--navy .contact__people a:hover {
  color: #ffffff;
}
.section-block--navy .contact__people strong {
  color: #ffffff;
}
.section-block--navy .contact__reg {
  color: #8aafd6;
}

/* ---------- Footer (navy) ---------- */
.site-footer {
  background: var(--color-footer);
  color: #b4b8bd;
}

.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
}

.site-footer__brand strong {
  color: #fff;
  font-size: 1.05rem;
}

.site-footer__brand span {
  font-size: 0.78rem;
  letter-spacing: normal;
  color: #9aa0a8;
}
.site-footer__brand strong {
  font-weight: 600;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.site-footer__links a {
  color: #e4e6e9;
  text-decoration: none;
  font-size: 0.9rem;
}

.site-footer__links a:hover {
  color: var(--color-accent);
}

.site-footer__copy {
  width: 100%;
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.82rem;
  color: #9aa0a8;
}

/* ---------- About: text + traffic light ---------- */
@media (min-width: 900px) {
  .about {
    grid-template-columns: 1fr auto;   /* text | traffic light */
    gap: 4.5rem;
  }
}

/* Below 900px the traffic light is the signature element: keep it, shrink it,
   and centre it ABOVE the text rather than hiding it. */
@media (max-width: 899.98px) {
  .about__visual {
    order: -1;
  }
  .tl-light {
    width: 42px;
    height: 42px;
  }
  .tl-housing {
    gap: 12px;
    padding: 15px 13px;
  }
  .tl-pole {
    height: 96px;
  }
}

/* ---------- Collapsing hamburger nav (< 992px) ---------- */
@media (max-width: 991.98px) {
  .nav-toggle {
    display: flex;
  }

  /* Inline links become a full-width panel that slides down below the header.
     max-height + visibility keep it collapsed AND out of the tab order while
     closed, yet still animatable. */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0 1.25rem;
    background: var(--color-bg);
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.06);
    overflow: hidden;
    max-height: 0;
    visibility: hidden;
    transition: max-height 0.28s ease, visibility 0.28s ease, padding 0.28s ease;
  }

  .site-nav.is-open .nav-links {
    max-height: 80vh;
    visibility: visible;
    padding: 0.5rem 1.25rem 1rem;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: block;
    width: 100%;
    padding: 0.95rem 0.25rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-links li:last-child a {
    border-bottom: 0;
  }
}

/* ---------- Mobile hero ---------- */
@media (max-width: 768px) {
  .hero {
    height: 90vh;
    /* A landscape photo covering a portrait viewport scales to fill the height
       and crops hard horizontally, so a full-frame file would be both heavy and
       upscaled. This variant is cropped to the right of the frame (focal point
       ~72%) at native pixels: the signal poles stay in view, sharply, for about
       half the bytes. */
    background-image: url("../assets/img/hero-mobile.jpg");
    background-position: 50% 50%;
  }

  /* Portrait puts the copy over the light trails rather than plain asphalt, so
     the bottom of the scrim is deepened here only. The top of the frame — the
     signal poles and skyline — is left as clear as it is on desktop. */
  .hero::before {
    background:
      linear-gradient(
        to top right,
        rgba(9, 12, 20, 0.6) 0%,
        rgba(9, 12, 20, 0.28) 45%,
        rgba(9, 12, 20, 0.04) 80%,
        rgba(9, 12, 20, 0) 100%
      ),
      linear-gradient(
        to top,
        rgba(9, 12, 20, 0.5) 0%,
        rgba(9, 12, 20, 0) 48%
      );
  }
}

/* ---------- Small screens (≤400px, e.g. 375px) ---------- */
@media (max-width: 400px) {
  .nav-logo__mark {
    height: 38px;
  }
  .nav-logo__name {
    font-size: 1.05rem;
  }
  .hero__actions .btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------- v2 multi-page additions ----------
   The single-page design is unchanged; these are the only rules the multi-page
   structure needs. Both reuse the existing tokens and hover treatments. */

/* Current page in the nav — the amber underline the links already use on hover. */
.nav-links a.is-current {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.site-footer__links a[aria-current="page"] {
  text-decoration-color: var(--color-accent);
}

/* Tiles that became links (category tiles, project tiles, gallery teasers):
   inherit the surrounding type colour instead of the default link blue. */
a.p-card,
a.gallery__item {
  color: inherit;
  text-decoration: none;
}

/* Category chips on the 404 page are links rather than plain text. */
.client-badge a {
  color: inherit;
  text-decoration: none;
}