/* ==========================================================================
   Solarland Bangladesh (SEDCOL) — Design System
   Brand colours sampled programmatically from the 2026 company profile.
   All tokens live here: the Laravel port inherits one source of truth.
   ========================================================================== */

:root {
  /* --- Brand (sampled from profile artwork) --- */
  --navy-900: #001b33;
  --navy-800: #002140;
  --navy-700: #092a55;
  --navy-600: #133a6d;
  --navy-500: #1d4d8c;

  --gold-500: #fdca00;
  --gold-600: #b8891a;  /* 3.17:1 on white — large decorative text only */
  --gold-700: #8a640e;

  /* --- Neutrals --- */
  --white: #ffffff;
  --gray-50: #f7f9fb;
  --gray-100: #eef2f6;
  --gray-200: #dde4ec;
  --gray-300: #c3cedb;
  --gray-400: #93a2b4;
  --gray-500: #616f80;
  --gray-600: #4d5c6e;
  --gray-700: #33404f;
  --gray-900: #16202b;

  /* --- Semantic --- */
  --bg: var(--white);
  --bg-alt: var(--gray-50);
  --text: var(--gray-900);
  --text-muted: var(--gray-600);
  --text-subtle: var(--gray-500);
  --border: var(--gray-200);
  --accent: var(--navy-700);

  /* --- Type --- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 860px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* --- Elevation --- */
  --shadow-sm: 0 1px 2px rgba(0, 33, 64, 0.06), 0 1px 3px rgba(0, 33, 64, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 33, 64, 0.08), 0 2px 4px rgba(0, 33, 64, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 33, 64, 0.12), 0 4px 8px rgba(0, 33, 64, 0.06);

  --radius: 6px;
  --radius-lg: 12px;

  --header-h: 76px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  /* The off-canvas mobile menu sits at translateX(100%), which would otherwise
     extend the document's scroll width to 2x the viewport. `clip` contains it
     without creating a scroll container (which `hidden` would). */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Must come after the display:block above, or the [hidden] attribute stops
   working on svg/img (it did, showing both slider play and pause icons). */
[hidden] {
  display: none !important;
}

a {
  color: var(--navy-600);
  text-decoration-color: rgba(9, 42, 85, 0.3);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 2px;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0 0 0.6em;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--navy-800);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 1.35rem + 3.2vw, 3.75rem);
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.6rem);
}
h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
}
h4 {
  font-size: 1.0625rem;
}

p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

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

ul,
ol {
  margin: 0 0 1.1em;
  padding-left: 1.2em;
}

li {
  margin-bottom: 0.4em;
}

strong {
  font-weight: 700;
  color: var(--navy-800);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 3rem 0;
}

/* The UA stylesheet gives <figure> a 1em/40px margin, which was insetting every
   image on the site and misaligning it against neighbouring cards. */
figure {
  margin: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.section--tight {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

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

.section--navy {
  background: var(--navy-800);
  color: rgba(255, 255, 255, 0.88);
}

.section--navy h2,
.section--navy h3,
.section--navy h4 {
  color: var(--white);
}

/* Links on navy go gold — but NOT buttons, which carry their own colour pairing.
   Without :not(.btn) a gold .btn--primary here renders gold-on-gold. */
.section--navy a:not(.btn) {
  color: var(--gold-500);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy-800);
  color: var(--white);
  padding: 0.85rem 1.5rem;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

.grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Typographic helpers
   ========================================================================== */

.eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 0.9rem;
}

/* Eyebrows use the dark gold on light surfaces, but must switch to the bright
   gold on every dark surface — page-hero and cta-band were previously missed,
   leaving 2.1:1 dark-gold-on-navy on every interior page. */
.section--navy .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.cta-band .eyebrow,
.card--navy .eyebrow,
.slider .eyebrow,
.tl .eyebrow {
  color: var(--gold-500);
}

.rule {
  width: 64px;
  height: 4px;
  background: var(--gold-500);
  border-radius: 2px;
  margin-bottom: 1.5rem;
}

.rule--center {
  margin-inline: auto;
}

.lede {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 68ch;
}

.section--navy .lede {
  color: rgba(255, 255, 255, 0.82);
}

.section-head {
  max-width: 70ch;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section-head--center {
  text-align: center;
  margin-inline: auto;
}

.section-head--center .rule {
  margin-inline: auto;
}

.text-center {
  text-align: center;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.2;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease,
    transform 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--gold-500);
  color: var(--navy-900);
  border-color: var(--gold-500);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: #ffd633;
  border-color: #ffd633;
  box-shadow: var(--shadow-md);
  color: var(--navy-900);
}

.btn--navy {
  background: var(--navy-700);
  color: var(--white);
  border-color: var(--navy-700);
}

.btn--navy:hover {
  background: var(--navy-600);
  border-color: var(--navy-600);
  color: var(--white);
}

.btn--outline {
  background: transparent;
  color: var(--navy-700);
  border-color: var(--gray-300);
}

.btn--outline:hover {
  border-color: var(--navy-700);
  background: var(--navy-700);
  color: var(--white);
}

.btn--ghost-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn--ghost-light:hover {
  background: var(--white);
  color: var(--navy-800);
  border-color: var(--white);
}

.btn--lg {
  padding: 1.05rem 2.1rem;
  font-size: 1.02rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 650;
  font-size: 0.93rem;
  text-decoration: none;
  color: var(--navy-600);
  padding-block: 0.62rem;
  margin-block: -0.62rem;   /* keeps the visual position, enlarges the tap area */
}

.arrow-link::after {
  content: "→";
  transition: transform 0.18s ease;
}

.arrow-link:hover::after {
  transform: translateX(4px);
}

/* ==========================================================================
   Header
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
  /* NOTE: backdrop-filter must NOT live on .header itself. A filter/backdrop-filter
     makes an element the containing block for its position:fixed descendants, which
     would collapse the off-canvas mobile nav to the header's height. It is applied
     to the ::before layer below instead. */
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(180%) blur(12px);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
}

/* The wordmark is a wide lockup (≈5.4:1). Size it by height and let width
   follow, and give the anchor a fixed line-box so it centres on the header bar
   instead of riding on the image's baseline. */
.logo {
  line-height: 0;
  padding-block: 7px;   /* brings the link to a >=44px tap target on phones */
}

.logo picture {
  display: block;
}

.logo img {
  display: block;
  height: 40px;
  width: auto;
  max-width: min(58vw, 250px);
  object-fit: contain;
}

@media (max-width: 900px) {
  .logo img {
    height: 34px;
  }
}

@media (max-width: 380px) {
  .logo img {
    height: 30px;
  }
}

.footer .logo img {
  height: 46px;
  max-width: 270px;
}

.logo__mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

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

.logo__name {
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--navy-700);
}

.logo__name sup {
  font-size: 0.55em;
  top: -0.6em;
}

.logo__tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--gray-500);
  margin-top: 3px;
  font-style: italic;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.8rem;
  font-size: 0.91rem;
  font-weight: 600;
  color: var(--gray-700);
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav__link:hover,
.nav__link[aria-expanded="true"] {
  color: var(--navy-700);
  background: var(--gray-100);
}

.nav__link[aria-current="page"] {
  color: var(--navy-700);
  box-shadow: inset 0 -3px 0 var(--gold-500);
}

.nav__item {
  position: relative;
}

.nav__caret {
  width: 9px;
  height: 9px;
  transition: transform 0.18s ease;
  opacity: 0.6;
}

.nav__link[aria-expanded="true"] .nav__caret {
  transform: rotate(180deg);
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 268px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

/* focus-within must sit on the ITEM, not the dropdown: the dropdown's links are
   visibility:hidden when closed, so nothing inside it can receive focus to trigger
   :focus-within. Focusing the visible trigger opens the menu for keyboard users. */
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown,
.nav__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Escape sets this so the menu can be dismissed while the trigger still holds
   focus — :hover / :focus-within alone would immediately re-open it. */
.nav__item.is-dismissed .nav__dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}

.nav__dropdown li {
  margin: 0;
}

.nav__dropdown a {
  display: block;
  padding: 0.6rem 0.8rem;
  font-size: 0.89rem;
  font-weight: 550;
  color: var(--gray-700);
  text-decoration: none;
  border-radius: var(--radius);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav__dropdown a:hover {
  background: var(--gray-100);
  color: var(--navy-700);
}

.header__cta {
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  margin-left: auto;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin-inline: auto;
  background: var(--navy-700);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1060px) {
  .nav-toggle {
    display: flex;
  }

  .header__cta {
    display: none;
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    padding: 1.25rem var(--gutter) 3rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    margin-left: 0;
  }

  .nav.is-open {
    transform: translateX(0);
  }

  .nav__link {
    padding: 0.95rem 0.5rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    justify-content: space-between;
  }

  .nav__link[aria-current="page"] {
    box-shadow: none;
    border-left: 3px solid var(--gold-500);
    padding-left: 0.85rem;
  }

  .nav__dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 0.5rem 0.85rem;
    min-width: 0;
    display: none;
  }

  .nav__dropdown.is-open {
    display: block;
  }

  .nav__item:hover .nav__dropdown {
    display: none;
  }

  .nav__item:hover .nav__dropdown.is-open {
    display: block;
  }

  .nav__mobile-cta {
    margin-top: 1.5rem;
  }

  .nav__mobile-cta .btn {
    width: 100%;
  }
}

@media (min-width: 1061px) {
  .nav__mobile-cta {
    display: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  background: linear-gradient(155deg, var(--navy-900) 0%, var(--navy-800) 45%, var(--navy-600) 100%);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 70% 30%, #000 20%, transparent 75%);
  z-index: -1;
}

.hero::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -12%;
  width: 62%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(253, 202, 0, 0.14) 0%, transparent 62%);
  z-index: -1;
  pointer-events: none;
}

.hero__inner {
  padding-block: clamp(3.5rem, 8vw, 7rem);
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 980px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.hero h1 {
  color: var(--white);
  margin-bottom: 1.2rem;
}

.hero__lede {
  font-size: clamp(1.05rem, 0.97rem + 0.4vw, 1.28rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 56ch;
  line-height: 1.6;
}

.hero__disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  list-style: none;
  padding-left: 0;
}

.hero__disciplines li {
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

.hero__disciplines li:not(:last-child)::after {
  content: "•";
  color: var(--gold-500);
  margin-left: 0.75rem;
}

/* Hero stat panel */
.hero__panel {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  backdrop-filter: blur(8px);
}

.hero__panel-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 1.5rem;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1.25rem;
}

.hero__stat-value {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.85rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--gold-500);
}

.hero__stat-value span {
  font-size: 0.48em;
  font-weight: 700;
  margin-left: 0.15em;
}

.hero__stat-label {
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--white);
  margin-top: 0.4rem;
  line-height: 1.3;
}

.hero__stat-note {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.2rem;
  line-height: 1.4;
}

.hero__panel-note {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
}

/* Page hero (interior pages) */
.page-hero {
  background: linear-gradient(150deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-600) 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.page-hero::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -8%;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(253, 202, 0, 0.13) 0%, transparent 65%);
  z-index: -1;
}

.page-hero__inner {
  padding-block: clamp(2.75rem, 6vw, 5rem);
  max-width: 62rem;
}

.page-hero h1 {
  color: var(--white);
  margin-bottom: 1rem;
}

.page-hero .lede {
  color: rgba(255, 255, 255, 0.82);
}

.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-500);
  list-style: none;
  padding-left: 0;
}

.page-hero__meta li {
  margin: 0;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb {
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 1.25rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li {
  margin: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  opacity: 0.5;
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--gold-500);
  text-decoration: underline;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card--link:hover {
  border-color: var(--navy-500);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card__number {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--gold-600);
  margin-bottom: 0.85rem;
}

.card h3 {
  margin-bottom: 0.6rem;
}

.card p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.card__list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.card__list li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
}

.card__foot {
  margin-top: auto;
  padding-top: 1.25rem;
}

/* Card on navy */
.section--navy .card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

.section--navy .card p,
.section--navy .card__list {
  color: rgba(255, 255, 255, 0.75);
}

.section--navy .card__number {
  color: var(--gold-500);
}

/* ==========================================================================
   Stat band
   ========================================================================== */

.stat-band {
  background: var(--navy-800);
  color: var(--white);
}

.stat-band__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 0;
}

.stat-band__item {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 1.75rem);
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.13);
}

.stat-band__item:last-child {
  border-right: 0;
}

@media (max-width: 760px) {
  .stat-band__item {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  }
  .stat-band__item:last-child {
    border-bottom: 0;
  }
}

.stat-band__value {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--gold-500);
}

.stat-band__value span {
  font-size: 0.45em;
  font-weight: 700;
  margin-left: 0.12em;
}

.stat-band__label {
  font-size: 0.95rem;
  font-weight: 650;
  margin-top: 0.55rem;
}

.stat-band__note {
  font-size: 0.79rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.25rem;
  line-height: 1.45;
}

.stat-band__footnote {
  padding: 1.15rem 0 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  line-height: 1.5;
}

/* Light stat strip */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat-strip__item {
  background: var(--white);
  padding: 1.6rem 1.25rem;
  text-align: center;
}

.stat-strip__value {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--navy-700);
}

.stat-strip__label {
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--navy-800);
  margin-top: 0.4rem;
}

.stat-strip__note {
  font-size: 0.76rem;
  color: var(--text-subtle);
  margin-top: 0.2rem;
  line-height: 1.4;
}

/* ==========================================================================
   Role badge & clarity note  (claims discipline — PLAN.md section 2)
   ========================================================================== */

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 100px;
  background: var(--navy-700);
  color: var(--white);
  /* Was nowrap: the Meghnaghat badge is a full sentence and overflowed the
     viewport on phones. Short badges still sit on one line. */
  white-space: normal;
  text-align: left;
}

.role-badge--partner {
  background: var(--gold-600);
  color: var(--navy-900);
}

.role-note {
  display: flex;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  background: #fffdf2;
  border: 1px solid #f0e3b8;
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--gray-700);
}

.role-note__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--gold-700);
  margin-top: 1px;
}

.role-note strong {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 0.3rem;
}

.disclaimer {
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--text-subtle);
  font-style: italic;
}

.section--navy .disclaimer {
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   Project cards
   ========================================================================== */

.project-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.project-card:hover {
  border-color: var(--navy-500);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.project-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--navy-800);
  overflow: hidden;
}

.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card__badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  right: 0.85rem;   /* bound it so a long badge wraps instead of overflowing */
  z-index: 2;
}

.project-card__body {
  padding: 1.35rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project-card__cat {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 0.5rem;
}

.project-card__title {
  font-size: 1.2rem;
  margin-bottom: 0.35rem;
}

.project-card__title a {
  color: inherit;
  text-decoration: none;
}

.project-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.project-card__capacity {
  font-size: 1.02rem;
  font-weight: 750;
  color: var(--navy-600);
  letter-spacing: -0.015em;
  margin-bottom: 0.75rem;
}

.project-card__meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.project-card__meta dt {
  display: inline;
  font-weight: 650;
  color: var(--gray-700);
}

.project-card__meta dd {
  display: inline;
  margin: 0;
}

.project-card__meta div {
  margin-bottom: 0.2rem;
}

.project-card__foot {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.project-card {
  position: relative;
}

/* Compact portfolio item */
.portfolio-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold-500);
  border-radius: var(--radius);
  flex-wrap: wrap;
}

.portfolio-item__name {
  font-weight: 650;
  color: var(--navy-800);
  font-size: 0.95rem;
}

.portfolio-item__loc {
  font-size: 0.83rem;
  color: var(--text-subtle);
  display: block;
  margin-top: 0.15rem;
  font-weight: 400;
}

.portfolio-item__cap {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy-600);
  letter-spacing: -0.025em;
  white-space: nowrap;
}

/* ==========================================================================
   Data table
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}

.data-table {
  min-width: 720px;
  font-size: 0.9rem;
}

.data-table thead {
  background: var(--navy-800);
}

.data-table th {
  padding: 0.9rem 1.1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}

.data-table td {
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:nth-child(even) {
  background: var(--gray-50);
}

.data-table tbody tr:hover {
  background: #f0f5fa;
}

.data-table a {
  font-weight: 650;
  color: var(--navy-700);
  text-decoration: none;
}

.data-table a:hover {
  text-decoration: underline;
}

.data-table__year {
  font-weight: 750;
  color: var(--gold-700);
}

/* ==========================================================================
   Process / flow
   ========================================================================== */

.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.flow li {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0.9rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--navy-800);
  text-align: center;
  margin: 0;
  position: relative;
}

.flow li::after {
  content: "→";
  position: absolute;
  right: -0.62rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-600);
  font-weight: 700;
  z-index: 1;
  background: var(--bg-alt);
  line-height: 1;
}

.section--alt .flow li::after {
  background: var(--bg-alt);
}

.flow li:last-child::after {
  display: none;
}

.flow--navy li {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--white);
}

.flow--navy li::after {
  background: var(--navy-800);
  color: var(--gold-500);
}

.flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--navy-900);
  font-size: 0.72rem;
  font-weight: 800;
}

@media (max-width: 620px) {
  .flow li::after {
    display: none;
  }
}

/* Numbered step list */
.steps {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

.steps li {
  display: flex;
  gap: 1.1rem;
  padding: 1.35rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 0;
}

.steps__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy-700);
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.steps__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy-800);
  margin-bottom: 0.3rem;
  line-height: 1.35;
}

.steps__detail {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.steps__stage {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 0.35rem;
}

/* ==========================================================================
   Timeline
   ========================================================================== */

.timeline {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--navy-500), var(--gold-500));
}

.timeline li {
  position: relative;
  padding-left: 2.6rem;
  padding-bottom: 2.25rem;
  margin: 0;
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--navy-600);
  z-index: 1;
}

.timeline li:last-child::before {
  border-color: var(--gold-500);
  background: var(--gold-500);
}

.timeline__period {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy-700);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.timeline__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy-800);
  margin-top: 0.2rem;
}

.timeline__detail {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  line-height: 1.6;
  max-width: 62ch;
}

/* ==========================================================================
   Mission / value triptych
   ========================================================================== */

.triptych {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.triptych__item {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.triptych__item:last-child {
  border-right: 0;
}

@media (max-width: 820px) {
  .triptych__item {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  .triptych__item:last-child {
    border-bottom: 0;
  }
}

.triptych__title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 0.9rem;
}

.triptych__text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 40ch;
  margin-inline: auto;
}

/* ==========================================================================
   Certifications
   ========================================================================== */

.cert-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 4px solid var(--gold-500);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cert-card__standard {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy-800);
  letter-spacing: -0.025em;
}

.cert-card__title {
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.cert-card__field {
  margin-bottom: 1rem;
}

.cert-card__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 0.25rem;
}

.cert-card__value {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.cert-card__tag {
  margin-top: auto;
  padding-top: 1.25rem;
}

.cert-card__tag span {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  background: var(--gold-500);
  color: var(--navy-900);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
}

/* Awards */
.award {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.award:last-child {
  border-bottom: 0;
}

@media (max-width: 640px) {
  .award {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

.award__period {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gold-700);
  letter-spacing: -0.02em;
}

.award__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy-800);
  margin-bottom: 0.25rem;
}

.award__issuer {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.award__tag {
  display: inline-block;
  margin-top: 0.55rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--gold-600);
  color: var(--gold-700);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 100px;
}

.award__subs {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  margin-top: 1.1rem;
  list-style: none;
  padding: 0;
}

.award__subs li {
  padding: 1rem 1.15rem;
  background: var(--navy-800);
  border-radius: var(--radius);
  margin: 0;
}

.award__sub-cat {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 0.3rem;
}

.award__sub-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.45;
}

/* ==========================================================================
   Split feature
   ========================================================================== */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split--wide-left {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .split--wide-right {
    grid-template-columns: 0.85fr 1.15fr;
  }
  .split__media--first {
    order: -1;
  }
}

.media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-100);
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-frame--wide {
  aspect-ratio: 16 / 9;
}

.figure figcaption {
  font-size: 0.82rem;
  color: var(--text-subtle);
  margin-top: 0.6rem;
  line-height: 1.5;
}

/* ==========================================================================
   Feature list (checkmarks)
   ========================================================================== */

.check-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.85rem;
}

.check-list li {
  position: relative;
  padding-left: 2rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='%23000'/%3E%3C/svg%3E")
    center / 15px no-repeat,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='%23000'/%3E%3C/svg%3E")
    center / 15px no-repeat,
    linear-gradient(#000, #000);
  mask-composite: exclude;
}

.section--navy .check-list li {
  color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Pill list
   ========================================================================== */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pills li {
  padding: 0.45rem 0.95rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--navy-700);
  margin: 0;
}

.pills--navy li {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700));
  color: var(--white);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cta-band::after {
  content: "";
  position: absolute;
  top: -60%;
  right: -5%;
  width: 45%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(253, 202, 0, 0.16) 0%, transparent 65%);
  z-index: -1;
}

.cta-band__inner {
  padding-block: clamp(3rem, 6vw, 5rem);
  display: grid;
  gap: 2rem;
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .cta-band__inner {
    grid-template-columns: 1.4fr auto;
  }
}

.cta-band h2 {
  color: var(--white);
  margin-bottom: 0.75rem;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.cta-band__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.5rem;
  list-style: none;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-500);
}

.cta-band__tags li {
  margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form {
  display: grid;
  gap: 1.25rem;
}

.form__row {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--navy-800);
  margin-bottom: 0.4rem;
}

.field .req {
  color: #c0392b;
  margin-left: 0.15rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy-500);
  box-shadow: 0 0 0 3px rgba(29, 77, 140, 0.14);
}

.field textarea {
  resize: vertical;
  min-height: 140px;
}

.field__hint {
  font-size: 0.79rem;
  color: var(--text-subtle);
  margin-top: 0.35rem;
}

.form__note {
  font-size: 0.82rem;
  color: var(--text-subtle);
  line-height: 1.55;
}

/* ==========================================================================
   Contact blocks
   ========================================================================== */

.contact-card {
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  height: 100%;
}

.contact-card__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 0.85rem;
}

.contact-card address {
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.contact-card a {
  color: var(--navy-600);
  font-weight: 600;
  text-decoration: none;
}

.contact-card a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
}

.footer__main {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding-block: clamp(3rem, 5vw, 4.25rem);
}

@media (min-width: 760px) {
  .footer__main {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

@media (min-width: 1040px) {
  .footer__main {
    grid-template-columns: 1.8fr 1fr 1fr 1.25fr;
  }
}

.footer h2,
.footer h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 1.1rem;
}

.footer__brand .logo__name {
  color: var(--white);
}

.footer__brand .logo__tag {
  color: rgba(255, 255, 255, 0.55);
}

.footer__tagline {
  margin-top: 1.15rem;
  max-width: 38ch;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
}

.footer__disciplines {
  margin-top: 1.25rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__list li {
  margin-bottom: 0.6rem;
}

.footer__list a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer__list a:hover {
  color: var(--gold-500);
}

.footer address {
  font-style: normal;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
}

.footer__office {
  margin-bottom: 1.25rem;
}

.footer__office-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
  margin-bottom: 0.3rem;
}

.footer a[href^="mailto"],
.footer a[href^="tel"] {
  color: var(--gold-500);
  text-decoration: none;
  font-weight: 600;
}

.footer a[href^="mailto"]:hover,
.footer a[href^="tel"]:hover {
  text-decoration: underline;
}

.footer__social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.35rem;
  list-style: none;
  padding: 0;
}

.footer__social li {
  margin: 0;
}

.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  color: rgba(255, 255, 255, 0.75);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.footer__social a:hover {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
}

.footer__social svg {
  width: 17px;
  height: 17px;
}

.footer__iso {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.35rem;
  list-style: none;
  padding: 0;
}

.footer__iso li {
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }
.mt-4 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 1.5rem; }
.mb-3 { margin-bottom: 2.25rem; }

.print-only { display: none; }

@media print {
  .header,
  .footer,
  .cta-band,
  .nav-toggle,
  .btn {
    display: none !important;
  }
  body {
    font-size: 11pt;
  }
  .hero,
  .page-hero,
  .section--navy,
  .stat-band {
    background: none !important;
    color: #000 !important;
  }
  .hero h1,
  .page-hero h1 {
    color: #000 !important;
  }
}

/* --- Navy card variant (replaces inline background styles in templates) --- */
.card--navy {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: rgba(255, 255, 255, 0.82);
}

.card--navy h2,
.card--navy h3,
.card--navy p {
  color: var(--white);
}

.card--navy p {
  color: rgba(255, 255, 255, 0.82);
}

/* ==========================================================================
   Main hero slider
   ========================================================================== */

.slider {
  position: relative;
  background: var(--navy-900);
  isolation: isolate;
  overflow: hidden;
}

.slider__track {
  position: relative;
  display: grid;
}

/* All slides occupy the same grid cell; the tallest sets the height, so the
   section never jumps as slides change. */
.slider__slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 62vh, 660px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s;
  z-index: 0;
}

.slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* No-JS: the first slide stays visible and the rest never appear. */
.slider__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.slider__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim: keeps text legible over any photograph, dark at the left where the
   copy sits and lighter at the right so the image still reads. */
.slider__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(0, 20, 38, 0.94) 0%, rgba(0, 24, 45, 0.86) 34%,
    rgba(0, 27, 51, 0.6) 62%, rgba(0, 27, 51, 0.42) 100%);
}

.slider__inner {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(7.5rem, 12vw, 9rem);
}

.slider__copy {
  max-width: 40rem;
}

.slider__title {
  font-size: clamp(1.95rem, 1.25rem + 3.1vw, 3.55rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 0 0 1rem;
  text-wrap: balance;
}

.slider__text {
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
  max-width: 46ch;
}

/* Actions and controls sit above every slide and never re-render. */
.slider__actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(4.25rem, 7vw, 5.25rem);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  pointer-events: none;
}

.slider__actions .btn {
  pointer-events: auto;
}

.slider__controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}


.slider__arrow,
.slider__pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: rgba(0, 20, 38, 0.4);
  color: var(--white);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.slider__arrow:hover,
.slider__pause:hover {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
}

.slider__arrow svg,
.slider__pause svg {
  width: 18px;
  height: 18px;
}

.slider__pause {
  margin-left: auto;
}

.slider__dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* The visible indicator is a 4px bar, but the button itself is 44px tall so it
   is a legitimate touch target. The bar is drawn by ::after. */
.slider__dot {
  position: relative;
  width: 30px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: width 0.2s ease;
}

.slider__dot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.34);
  transition: background-color 0.2s ease;
}

.slider__dot:hover::after {
  background: rgba(255, 255, 255, 0.6);
}

.slider__dot.is-active {
  width: 46px;
}

.slider__dot.is-active::after {
  background: var(--gold-500);
}

/* On phones the actions and controls stop floating over the slide and stack
   below it instead. Absolutely positioning them meant the slide copy had to
   reserve exactly the right padding, and at 320px the stacked full-width
   buttons overlapped the text. Normal flow removes that whole class of bug. */
@media (max-width: 640px) {
  .slider {
    display: flex;
    flex-direction: column;
  }

  .slider__actions,
  .slider__controls {
    position: static;
    pointer-events: auto;
  }

  .slider__actions {
    flex-direction: column;
    align-items: stretch;
    padding-block: 1.25rem 0;
  }

  .slider__actions .btn {
    width: 100%;
  }

  .slider__controls {
    padding-block: 1rem 1.5rem;
  }

  /* margin-left:auto pushed the pause button onto its own row once the
     controls stacked; keep it inline with the arrows on phones. */
  .slider__pause {
    margin-left: 0;
  }

  .slider__inner {
    padding-bottom: clamp(2rem, 7vw, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slider__slide {
    transition: none;
  }
}

/* Marks imagery that illustrates the type of work rather than the named site.
   Mirrors the company profile's own "Representative visualization" practice. */
.img-tag {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  z-index: 2;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius);
  background: rgba(0, 20, 38, 0.78);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

.media-frame {
  position: relative;
}

/* ==========================================================================
   Brand timeline band  (navy field, gold pins - follows solarland.com/en/about)
   ========================================================================== */

.tl {
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color: rgba(255, 255, 255, 0.86);
  padding-block: clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}

.tl::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
  pointer-events: none;
}

.tl > * {
  position: relative;
}

.tl__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.tl__title {
  color: var(--white);
  margin: 0 0 0.4rem;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.35rem);
}

.tl__sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.98rem;
  max-width: 62ch;
}

.tl__nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.tl__key {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.75);
  margin-right: 0.4rem;
}

.tl__swatch {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--gold-500);
}

.tl__swatch--group {
  background: transparent;
}

.tl__swatch--bd {
  background: var(--gold-500);
}

.tl__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.tl__arrow:hover:not(:disabled) {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-900);
}

.tl__arrow:disabled {
  opacity: 0.32;
  cursor: default;
}

.tl__arrow svg {
  width: 18px;
  height: 18px;
}

/* Horizontally scrolled rail, full-bleed so entries run to the viewport edge. */
.tl__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-inline: var(--gutter);
}

.tl__scroller::-webkit-scrollbar {
  display: none;
}

.tl__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 250px;
  align-items: center;
  position: relative;
  min-height: 430px;
  width: max-content;
}

.tl__rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(253, 202, 0, 0.25), var(--gold-500) 12%,
    var(--gold-500) 88%, rgba(253, 202, 0, 0.25));
}

.tl__item {
  position: relative;
  height: 100%;
  margin: 0;
  padding-inline: 0.5rem;
}

.tl__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 3px solid var(--gold-500);
  background: var(--navy-800);
  z-index: 2;
}

.tl__dot--bd {
  background: var(--gold-500);
}

.tl__item.is-current .tl__dot {
  box-shadow: 0 0 0 6px rgba(253, 202, 0, 0.22);
}

.tl__stem {
  position: absolute;
  left: 50%;
  width: 1.5px;
  background: rgba(253, 202, 0, 0.55);
  z-index: 1;
}

.tl__item--up .tl__stem {
  bottom: 50%;
  height: 34px;
}

.tl__item--down .tl__stem {
  top: 50%;
  height: 34px;
}

.tl__card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
}

.tl__item--up .tl__card {
  bottom: calc(50% + 34px);
}

.tl__item--down .tl__card {
  top: calc(50% + 34px);
}

.tl__year {
  margin: 0 0 0.2rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--gold-500);
  line-height: 1;
}

.tl__label {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}

.tl__events {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.79rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

.tl__events li {
  position: relative;
  padding-left: 0.7rem;
  margin-bottom: 0.3rem;
}

.tl__events li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-500);
}

.tl__foot {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.66);
  max-width: 90ch;
}

@media (max-width: 640px) {
  .tl__rail {
    grid-auto-columns: 210px;
    min-height: 470px;
  }
  .tl__card {
    width: 195px;
  }
  .tl__head {
    align-items: flex-start;
  }
}

/* Product highlight strip inside cards and section heads */
.product-highlight {
  margin: 0 0 0.75rem;
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--gold-700);
  letter-spacing: 0.01em;
}

.section--navy .product-highlight {
  color: var(--gold-500);
}

/* Card with a leading image (product categories) */
.card--media {
  padding-top: 0;
  overflow: hidden;
}

.card__media {
  display: block;
  margin: 0 calc(-1 * clamp(1.4rem, 2.5vw, 2rem)) 1.25rem;
  aspect-ratio: 16 / 9;
  background: var(--gray-100);
  overflow: hidden;
}

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

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

@media (prefers-reduced-motion: reduce) {
  .card__media img {
    transition: none;
  }
  .card--media:hover .card__media img {
    transform: none;
  }
}

/* Narrowest phones: the two arrows, the dots and the pause button together
   exceeded one row. Declared last so it overrides the base .slider__dot width
   (same specificity, so source order decides). */
@media (max-width: 380px) {
  .slider__controls {
    gap: 0.3rem;
  }

  /* 24px is the WCAG 2.5.8 (AA) minimum target width; do not go below it. */
  .slider__dot {
    width: 24px;
  }

  .slider__dot.is-active {
    width: 34px;
  }
}