/* =========================================================================
   Tarakeswara Textile Park
   Palette is drawn from the company mark: leaf green, thread magenta, gold.
   ========================================================================= */

:root {
  --green-900: #0f3d22;
  --green-800: #164a2b;
  --green-700: #1d5c34;
  --green-600: #256e3f;
  --green-500: #2f7d47;
  --green-100: #e6f1e9;

  --plum-700: #7f1a4f;
  --plum-600: #9e1b5c;
  --plum-500: #b3306f;
  --plum-100: #f7e8f0;

  --gold-600: #c76f12;
  --gold-500: #e0891f;
  --gold-100: #fdf1e0;

  --ink: #16211b;
  --body: #4d5a53;
  --muted: #7a867f;
  --line: #e1e8e3;
  --cream: #f6f8f6;
  --sand: #faf7f2;
  --white: #ffffff;

  --shadow-sm: 0 1px 2px rgba(15, 61, 34, .06), 0 2px 8px rgba(15, 61, 34, .05);
  --shadow-md: 0 4px 12px rgba(15, 61, 34, .08), 0 12px 32px rgba(15, 61, 34, .07);
  --shadow-lg: 0 12px 28px rgba(15, 61, 34, .10), 0 28px 64px rgba(15, 61, 34, .10);

  --radius: 4px;
  --radius-lg: 8px;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wrap: 1180px;
  --gutter: 24px;
  --header-h: 76px;
}

/* ---------- reset ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--green-700); text-decoration: none; }
a:hover { color: var(--plum-600); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.18;
  margin: 0 0 .6em;
  font-weight: 600;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.1rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 2.9vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
h4 { font-size: 1.05rem; }

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

ul, ol { margin: 0 0 1.2em; padding-left: 1.2em; }
li { margin-bottom: .4em; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--green-700); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- layout ---------- */

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

.section { padding: clamp(56px, 7vw, 96px) 0; }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.section--cream { background: var(--cream); }
.section--sand { background: var(--sand); }
.section--dark { background: var(--green-900); color: rgba(255, 255, 255, .82); }
.section--dark h2, .section--dark h3 { color: #fff; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--plum-600);
  margin: 0 0 .8em;
  display: flex;
  align-items: center;
  gap: .7em;
}
.eyebrow::after {
  content: "";
  flex: 0 0 34px;
  height: 2px;
  background: var(--gold-500);
}
.eyebrow--light { color: var(--gold-500); }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before {
  content: "";
  flex: 0 0 34px;
  height: 2px;
  background: var(--gold-500);
}

.section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: 1.06rem; }
.section-head h2 { margin-bottom: .45em; }

.lead { font-size: 1.12rem; line-height: 1.66; color: var(--ink); }

.grid { display: grid; gap: clamp(20px, 2.6vw, 32px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 61, 34, .18); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn--primary { background: var(--green-700); color: #fff; }
.btn--primary:hover { background: var(--green-800); color: #fff; }

.btn--gold { background: var(--gold-500); color: #2a1a06; }
.btn--gold:hover { background: var(--gold-600); color: #fff; }

.btn--outline { border-color: var(--green-700); color: var(--green-700); background: transparent; }
.btn--outline:hover { background: var(--green-700); color: #fff; }

.btn--ghost { border-color: rgba(255, 255, 255, .45); color: #fff; background: transparent; }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- top bar + masthead ---------- */

.topbar {
  background: var(--green-900);
  color: rgba(255, 255, 255, .72);
  font-size: .82rem;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
}
.topbar__note { margin: 0; }
.topbar__links { display: flex; gap: 22px; }
.topbar__links a { color: rgba(255, 255, 255, .82); }
.topbar__links a:hover { color: var(--gold-500); }

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.masthead.is-stuck { box-shadow: var(--shadow-sm); }

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 100px; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__text strong {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--green-800);
  letter-spacing: -.015em;
}
.brand__text span {
  font-size: 1rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--plum-600);
  font-weight: 600;
}

/* ---------- navigation ---------- */

.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__item { position: relative; margin: 0; }

.nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Anchors the is-active underline to the link itself. It cannot rely on
     .nav__item, because mega parents set position:static so the panel can span
     the header — which would leave the underline sizing itself to the masthead
     and drawing a gold rule right across it. */
  position: relative;
  padding: 10px 13px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
  border-radius: var(--radius);
  white-space: nowrap;
}
.nav__link:hover { color: var(--green-700); background: var(--green-100); }
.nav__link.is-active { color: var(--green-700); font-weight: 600; }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 2px;
  height: 2px;
  background: var(--gold-500);
}

.nav__caret {
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .6;
}

/* ---------- mega menu ---------- */

/* The panel spans the header, so the item itself must not be the containing
   block — the sticky .masthead is. */
.nav__item.has-mega { position: static; }

/* A centred card covering 70% of the viewport rather than a full-bleed bar.
   Centring is left:50% + translateX(-50%), so the open/close animation has to
   carry the -50% through or the panel jumps sideways as it fades in. */
.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  /* 70% of the viewport, but never so narrow that the two link columns and the
     296px feature card are crushed — below ~1310px the floor takes over. */
  width: 70%;
  min-width: min(920px, calc(100% - 2 * var(--gutter)));
  background: #fff;
  border: 1px solid var(--line);
  border-top: 0;
  border-bottom: 3px solid var(--green-700);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}
.nav__item.has-mega:hover > .mega,
.nav__item.has-mega:focus-within > .mega {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.nav__item.has-mega:hover > .nav__link,
.nav__item.has-mega:focus-within > .nav__link { color: var(--green-700); }
.nav__item.has-mega:hover > .nav__link .nav__caret { transform: rotate(-135deg) translateY(-3px); }

/* No max-width: the panel is already narrower than the page, so the columns
   should fill it rather than be constrained a second time. */
.mega__inner {
  padding: 30px 34px 32px;
  display: grid;
  gap: 26px 40px;
  align-items: start;
}
.mega__inner--list { grid-template-columns: repeat(2, minmax(0, 1fr)) 296px; }
.mega__inner--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mega__title {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--plum-600);
  margin: 0 0 .9em;
  padding-bottom: .7em;
  border-bottom: 1px solid var(--line);
}

.mega__link {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius);
  margin-inline: -12px;
}
.mega__link strong {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .12em;
}
.mega__link span { display: block; font-size: .83rem; line-height: 1.5; color: var(--muted); }
.mega__link:hover { background: var(--green-100); }
.mega__link:hover strong { color: var(--green-700); }

.mega__card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 12px;
  border-radius: var(--radius);
  margin-inline: -12px;
}
.mega__card img {
  flex: 0 0 64px;
  width: 64px; height: 48px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--cream);
}
.mega__card strong {
  display: block;
  font-size: .94rem;
  font-weight: 600;
  color: var(--ink);
}
.mega__card > span > span { display: block; font-size: .82rem; line-height: 1.45; color: var(--muted); }
.mega__card:hover { background: var(--green-100); }
.mega__card:hover strong { color: var(--green-700); }

.mega__feature {
  display: block;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
/* Height-capped rather than stretched to a 16/9 frame. The panel images range
   from a 0.67 portrait to a 1.78 landscape, and forcing the portrait to 16/9
   cropped it to a strip across the face and upscaled it past its 150px width.
   Capping the height instead keeps every image uncropped and at or below its
   natural size, so none of them are enlarged. */
.mega__feature img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 140px;
  border-radius: var(--radius);
  margin-bottom: 13px;
}
.mega__feature strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.06rem;
  color: var(--ink);
  margin-bottom: .3em;
}
.mega__feature > span { display: block; font-size: .85rem; line-height: 1.5; color: var(--body); }
.mega__feature:hover { border-color: var(--green-600); box-shadow: var(--shadow-sm); }
.mega__cta {
  margin-top: .9em;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--plum-600);
}
.mega__cta::after { content: " \2192"; }

.mega__foot {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.mega__foot p { margin: 0; font-size: .9rem; color: var(--muted); }

.navtoggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  position: relative;
}
.navtoggle__bars,
.navtoggle__bars::before,
.navtoggle__bars::after {
  position: absolute;
  left: 50%;
  width: 20px; height: 2px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform .2s ease, opacity .2s ease;
}
.navtoggle__bars { top: 50%; margin-top: -1px; }
.navtoggle__bars::before { content: ""; top: -6px; }
.navtoggle__bars::after { content: ""; top: 6px; }
.navtoggle[aria-expanded="true"] .navtoggle__bars { background: transparent; }
.navtoggle[aria-expanded="true"] .navtoggle__bars::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars::after { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

/* ---------- home hero ---------- */

.hero {
  position: relative;
  min-height: min(84vh, 680px);
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background: var(--green-900);
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s ease, transform 7s linear;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(9, 38, 21, .93) 0%, rgba(9, 38, 21, .74) 46%, rgba(9, 38, 21, .32) 100%);
}
/* padding-block only — the shorthand would cancel .wrap's horizontal gutter */
.hero__inner { position: relative; z-index: 2; padding-block: 90px; max-width: 784px; }

/* One-time entrance: the hero copy rises in line by line on page load. Gated
   on .js so the content is never hidden when scripting is unavailable. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.js .hero__inner > * { animation: hero-rise .7s cubic-bezier(.22, .68, .36, 1) backwards; }
.js .hero__inner > *:nth-child(2) { animation-delay: .12s; }
.js .hero__inner > *:nth-child(3) { animation-delay: .24s; }
.js .hero__inner > *:nth-child(4) { animation-delay: .36s; }
.js .hero__inner > *:nth-child(5) { animation-delay: .48s; }
.hero__title {
  color: #fff;
  font-size: clamp(2.3rem, 5vw, 3.7rem);
  margin-bottom: .35em;
}
.hero__title em {
  font-style: normal;
  color: var(--gold-500);
}
.hero__text {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: rgba(255, 255, 255, .88);
  max-width: 58ch;
  margin-bottom: 2em;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin-top: 2.6em;
  padding-top: 1.6em;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-size: .88rem;
  color: rgba(255, 255, 255, .78);
}
.hero__meta span { display: flex; align-items: center; gap: .5em; }
.hero__meta span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
}

/* ---------- page banner ---------- */

.banner {
  position: relative;
  background: var(--green-900) var(--banner-image) center / cover no-repeat;
  color: #fff;
}
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(9, 38, 21, .92), rgba(9, 38, 21, .62));
}
.banner__inner {
  position: relative;
  z-index: 2;
  padding: clamp(56px, 7vw, 96px) var(--gutter);
  max-width: var(--wrap);
}
/* Inner pages get the same entrance as the home hero, reusing its keyframes. */
.js .banner__inner > * { animation: hero-rise .6s cubic-bezier(.22, .68, .36, 1) backwards; }
.js .banner__inner > *:nth-child(2) { animation-delay: .1s; }
.js .banner__inner > *:nth-child(3) { animation-delay: .2s; }
.banner__title { color: #fff; margin-bottom: .3em; }
.banner__text { color: rgba(255, 255, 255, .85); max-width: 62ch; margin: 0; }

/* ---------- stat band ---------- */

.stats {
  background: var(--green-800);
  color: #fff;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: clamp(28px, 3.6vw, 44px) 20px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .13);
  transition: background .3s ease;
}
.stat:hover { background: rgba(255, 255, 255, .05); }
.stat:last-child { border-right: 0; }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 600;
  color: #fff;
  line-height: 1;
  /* Equal-width digits, so the figure does not wobble while counting up. */
  font-variant-numeric: tabular-nums;
  display: block;
}
.stat__unit {
  display: block;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-top: .7em;
  font-weight: 600;
}
.stat__label {
  margin: .5em 0 0;
  font-size: .9rem;
  color: rgba(255, 255, 255, .72);
}

/* ---------- cards ---------- */

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: #cfdcd4; }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.card__title { margin-bottom: .4em; }
.card__title a { color: inherit; }
.card__title a:hover { color: var(--green-700); }
.card__text { font-size: .95rem; margin-bottom: 1.1em; }
.card__more {
  margin-top: auto;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--plum-600);
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.card__more::after { content: "\2192"; display: inline-block; transition: transform .2s ease; }
.card:hover .card__more::after,
.tile--link:hover .card__more::after,
a.card__more:hover::after { transform: translateX(4px); }

/* icon/feature tiles */
.tile {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green-600);
  border-radius: var(--radius);
  padding: 24px 24px 22px;
  transition: box-shadow .25s ease, border-left-color .25s ease, transform .25s ease;
}
.tile:hover {
  box-shadow: var(--shadow-md);
  border-left-color: var(--gold-500);
  transform: translateY(-3px);
}
.tile__num { transition: color .25s ease; }
.tile:hover .tile__num { color: var(--green-700); }
.tile__num {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--gold-600);
  letter-spacing: .1em;
  display: block;
  margin-bottom: .7em;
}
.tile h3 { font-size: 1.08rem; margin-bottom: .35em; }
.tile p { font-size: .94rem; margin: 0; }

/* A whole tile acting as one link. display:flex so the "Read more" can be
   pushed to the bottom and the row of tiles keeps a common baseline. */
.tile--link {
  display: flex;
  flex-direction: column;
  color: var(--body);
  height: 100%;
}
.tile--link h3 { color: var(--ink); }
.tile--link p { flex: 1 0 auto; margin-bottom: 1.1em; }
.tile--link:hover h3 { color: var(--green-700); }

/* Sponsor and advisor emblems. Height-capped so every logo, from a 90x117
   emblem to a 262x76 wordmark, sits on one baseline without being enlarged. */
.partners { list-style: none; margin: .8em 0 0; padding: 0; display: grid; gap: 16px; }
.partners a {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--body);
  transition: transform .2s ease;
}
.partners a:hover { transform: translateX(4px); }
.partners img { flex: 0 0 auto; width: auto; height: 46px; }
.partners span { font-size: .92rem; line-height: 1.4; }
.partners a:hover span { color: var(--green-700); }

/* ---------- split / media rows ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 68px);
  align-items: center;
}
.split--wide-text { grid-template-columns: 1.1fr .9fr; }
.split__media { position: relative; }
.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.split__media--framed::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid var(--gold-500);
  border-radius: var(--radius-lg);
  z-index: -1;
}
.split--reverse .split__media { order: 2; }

.badge {
  position: absolute;
  right: -14px;
  bottom: -20px;
  background: var(--plum-600);
  color: #fff;
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 220px;
}
.badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
}
.badge span { font-size: .8rem; color: rgba(255, 255, 255, .82); }

/* ---------- checklist ---------- */

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checklist li {
  position: relative;
  padding-left: 34px;
  margin: 0;
  font-size: .97rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--green-100);
  border: 1px solid #bcd8c6;
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 6px; top: .72em;
  width: 5px; height: 9px;
  border-right: 2px solid var(--green-600);
  border-bottom: 2px solid var(--green-600);
  transform: rotate(42deg);
}
.checklist--2 { grid-template-columns: repeat(2, 1fr); gap: 12px 32px; }

/* ---------- tables ---------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}
/* No min-width floor. A 560px floor made every table in a half-width column
   (the .split layouts, ~530px) scroll sideways on a full desktop screen even
   though its content fitted. The floor is not needed to protect wide tables
   either: a table cannot shrink below its min-content width, so the ones that
   genuinely do not fit still scroll inside .table-wrap on their own. */
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
}
table.data caption {
  caption-side: top;
  text-align: left;
  padding: 18px 20px 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
  font-weight: 600;
}
table.data th,
table.data td {
  padding: 13px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data thead th {
  background: var(--green-800);
  color: #fff;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 0;
}
table.data tbody tr:nth-child(even) { background: var(--cream); }
table.data tbody tr:hover { background: var(--green-100); }
table.data tfoot td {
  font-weight: 700;
  color: var(--ink);
  background: var(--sand);
  border-top: 2px solid var(--green-600);
  border-bottom: 0;
}
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }

/* proportion meter inside tables — a fixed track so small shares stay legible */
.meter {
  display: block;
  width: 92px;
  height: 6px;
  border-radius: 3px;
  background: #e6ece8;
  margin: 7px 0 0 auto;
  overflow: hidden;
}
.meter span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--green-500);
  min-width: 2px;
}
.meter--plum span { background: var(--plum-500); }

table.data th[scope="col"].num,
table.data td.num { white-space: nowrap; }

/* ---------- unit sections ---------- */

.unit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(40px, 5vw, 64px) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.unit:last-child { border-bottom: 0; }
.unit:nth-child(even) .unit__media { order: 2; }
.unit__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.unit__lead { font-size: 1.1rem; color: var(--ink); font-weight: 500; margin-bottom: .8em; }
.unit__stat {
  display: inline-block;
  margin-top: 1.2em;
  padding: 9px 16px;
  background: var(--gold-100);
  border-left: 3px solid var(--gold-500);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .9rem;
  font-weight: 600;
  color: #6b4409;
}

/* ---------- people ---------- */

.person {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 30px;
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.person:last-child { border-bottom: 0; }
/* No fixed aspect ratio: the supplied photographs range from 0.67 portraits to
   a 1.52 landscape holding two people side by side, so forcing them square
   cropped heads off the portraits and cut a name off the composite. Each is
   shown at its own proportions instead. */
.person__photo {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--cream);
}
.person__name { margin-bottom: .15em; }
.person__role {
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--plum-600);
  font-weight: 600;
  margin-bottom: 1em;
}
.person__body { font-size: .97rem; margin: 0; }

/* ---------- construction progress ---------- */

.progress-list { list-style: none; margin: 0; padding: 0; }
.progress-row {
  display: grid;
  grid-template-columns: 1fr 120px 92px;
  gap: 14px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: .93rem;
}
.progress-row:last-child { border-bottom: 0; }
.progress-row__bar {
  height: 8px;
  border-radius: 99px;
  background: #e3e8e4;
  overflow: hidden;
}
.progress-row__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  transition: width 1.1s cubic-bezier(.25, .7, .3, 1);
}
/* Fill widths only apply once the section reveals, so the bars sweep in. */
.is-in .progress-row--completed .progress-row__fill { width: 100%; background: var(--green-600); }
.is-in .progress-row--ongoing .progress-row__fill {
  width: 55%;
  background: repeating-linear-gradient(-55deg,
    var(--gold-500) 0 8px, var(--gold-600) 8px 16px);
  background-size: 200% 100%;
  animation: progress-stripe 1.2s linear infinite;
}
.progress-row--planned .progress-row__fill { width: 0; }
@keyframes progress-stripe {
  to { background-position: -32px 0; }
}
.progress-row__status {
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: right;
}
.progress-row--completed .progress-row__status { color: var(--green-700); }
.progress-row--ongoing .progress-row__status { color: var(--gold-600); }
.progress-row--planned .progress-row__status { color: var(--muted); }

/* Compact status chips used on the home page. */
.status-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 26px 0 0; padding: 0; list-style: none; }
.status-chips li {
  font-size: .85rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid var(--line);
}
.status-chips .num { font-family: var(--font-display); font-weight: 700; margin-right: .3em; }
.status-chips .chip--completed .num { color: var(--green-700); }
.status-chips .chip--ongoing .num { color: var(--gold-600); }
.status-chips .chip--planned .num { color: var(--muted); }

/* ---------- gallery ---------- */

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.filter-btn {
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  padding: 9px 18px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  cursor: pointer;
  color: var(--body);
  transition: all .18s ease;
}
.filter-btn:hover { border-color: var(--green-600); color: var(--green-700); }
.filter-btn.is-active { background: var(--green-700); border-color: var(--green-700); color: #fff; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.shot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  background: var(--cream);
  cursor: zoom-in;
}
/* The filter hides shots via the hidden attribute. display:block above would
   silently override the browser's [hidden] rule — author styles always beat
   the UA sheet — so hidden must be restated here or filtering does nothing. */
.shot[hidden] { display: none; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.shot:hover img { transform: scale(1.07); }
.shot__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 14px 12px;
  background: linear-gradient(transparent, rgba(9, 38, 21, .88));
  color: #fff;
  font-size: .84rem;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
}
.shot:hover .shot__cap, .shot:focus-visible .shot__cap { opacity: 1; transform: translateY(0); }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(8, 24, 14, .94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lightbox__cap {
  position: absolute;
  bottom: 26px; left: 0; right: 0;
  text-align: center;
  color: rgba(255, 255, 255, .86);
  font-size: .92rem;
  padding-inline: 20px;
}
.lightbox__btn {
  position: absolute;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  width: 46px; height: 46px;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .18s ease;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .22); }
.lightbox__close { top: 22px; right: 22px; }
.lightbox__prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 22px; top: 50%; transform: translateY(-50%); }

/* ---------- quotes ---------- */

.quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.quote {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 28px 26px;
  position: relative;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.quote:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
  border-color: #cfdcd4;
}
.quote::before {
  content: "\201C";
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--plum-100);
  position: absolute;
  top: 14px; left: 20px;
  transition: color .25s ease;
}
.quote:hover::before { color: var(--plum-600); }
.quote p { position: relative; margin: 0; font-size: .99rem; color: var(--ink); }

/* ---------- contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

.info-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 20px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.info-card:hover { border-color: #cfdcd4; box-shadow: var(--shadow-sm); }
.info-card h3 { font-size: 1.05rem; margin-bottom: .5em; }
.info-card address { font-style: normal; }
.info-card a { font-weight: 500; }

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label {
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .02em;
}
.field .req { color: var(--plum-600); }
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: .97rem;
  color: var(--ink);
  padding: 12px 14px;
  border: 1px solid #d3ddd7;
  border-radius: var(--radius);
  background: #fff;
  width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(47, 125, 71, .14);
}
.field textarea { resize: vertical; min-height: 130px; }
.field--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-error { color: #b3261e; font-size: .84rem; }
.hp { position: absolute; left: -5000px; }

.notice {
  padding: 16px 20px;
  border-radius: var(--radius);
  font-size: .95rem;
  margin-bottom: 22px;
}
.notice--ok { background: var(--green-100); border-left: 3px solid var(--green-600); color: #14502c; }
.notice--bad { background: #fdecea; border-left: 3px solid #b3261e; color: #8c1d18; }

.map-embed {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  line-height: 0;
}
.map-embed iframe { width: 100%; height: 380px; border: 0; }

/* ---------- CTA band ---------- */

.cta {
  background: linear-gradient(120deg, var(--plum-700), var(--green-800) 78%);
  color: #fff;
}
.cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding-block: clamp(38px, 4.5vw, 58px);
  flex-wrap: wrap;
}
.cta__title { color: #fff; margin-bottom: .3em; font-size: clamp(1.4rem, 2.4vw, 1.95rem); }
.cta__text { color: rgba(255, 255, 255, .82); max-width: 56ch; margin: 0; font-size: .98rem; }
.cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- footer ---------- */

.footer {
  background: var(--green-900);
  color: rgba(255, 255, 255, .68);
  font-size: .92rem;
  padding-top: clamp(48px, 6vw, 72px);
}
/* Five columns: brand, then one per section of the site, so every page is
   reachable from the footer and not only from the header menu. */
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 44px;
}
/* The footer column is about 236px wide, so the masthead's 100px logo and
   1.8rem wordmark do not fit — they ran over the next column's heading. The
   footer keeps its own smaller scale. */
.brand--footer { margin-bottom: 18px; }
/* The logo file is a JPEG on white, which lands as a bare white rectangle on
   the dark footer. Padding it into a rounded chip makes that read as a
   deliberate panel rather than a missing transparency. */
.brand--footer img {
  width: 62px;
  background: #fff;
  padding: 5px;
  border-radius: var(--radius);
}
.brand--footer .brand__text strong { font-size: 1.2rem; }
.brand--footer .brand__text span { font-size: .64rem; letter-spacing: .16em; }
.brand--footer .brand__text strong { color: #fff; }
.brand--footer .brand__text span { color: var(--gold-500); }
.footer__blurb { font-size: .92rem; max-width: 38ch; margin: 0; }
.footer__heading {
  color: #fff;
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1.2em;
}
.footer__list { list-style: none; padding: 0; margin: 0; }
.footer__list li { margin-bottom: .55em; }
.footer__list a { color: rgba(255, 255, 255, .68); }
.footer__list a:hover { color: var(--gold-500); }
.footer__address { font-style: normal; margin-bottom: 1em; line-height: 1.7; }
.footer__list--contact a { font-weight: 500; color: rgba(255, 255, 255, .82); }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .84rem;
  color: rgba(255, 255, 255, .5);
}
.footer__bottom p { margin: 0; }

/* Developer credit, pinned to the far right of the bottom bar. margin-left:auto
   keeps it hard right even when the row wraps and space-between stops applying. */
.footer__credit { margin-left: auto; }
.footer__credit a { color: rgba(255, 255, 255, .68); font-weight: 500; }
.footer__credit a:hover { color: var(--gold-500); }

.totop {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--green-700);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s, background .18s ease;
  z-index: 90;
}
.totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.totop:hover { background: var(--plum-600); }

/* ---------- reveal on scroll ---------- */

/* Scoped to .js so the content stays visible when scripting is unavailable. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* A grid of cards reads as one flat block when the whole container fades at
   once. Hand the entrance to the children and offset each one, so the row
   assembles left to right. Uses an animation rather than a transition so the
   cards' own hover transitions (lift, shadow) are not overridden. */
.js .reveal.grid,
.js .reveal.quote-grid {
  opacity: 1;
  transform: none;
  transition: none;
}
.js .reveal.grid > *,
.js .reveal.quote-grid > * { opacity: 0; }
.js .reveal.grid.is-in > *,
.js .reveal.quote-grid.is-in > * {
  opacity: 1;
  animation: hero-rise .5s cubic-bezier(.22, .68, .36, 1) backwards;
}

.js .reveal.grid.is-in > *:nth-child(2),
.js .reveal.quote-grid.is-in > *:nth-child(2) { animation-delay: .06s; }
.js .reveal.grid.is-in > *:nth-child(3),
.js .reveal.quote-grid.is-in > *:nth-child(3) { animation-delay: .12s; }
.js .reveal.grid.is-in > *:nth-child(4),
.js .reveal.quote-grid.is-in > *:nth-child(4) { animation-delay: .18s; }
.js .reveal.grid.is-in > *:nth-child(5),
.js .reveal.quote-grid.is-in > *:nth-child(5) { animation-delay: .24s; }
.js .reveal.grid.is-in > *:nth-child(6),
.js .reveal.quote-grid.is-in > *:nth-child(6) { animation-delay: .30s; }
/* From the seventh card on (the ten-unit grid), the wave continues as one. */
.js .reveal.grid.is-in > *:nth-child(n+7),
.js .reveal.quote-grid.is-in > *:nth-child(n+7) { animation-delay: .36s; }

/* ---------- responsive ---------- */

/* Between the nav collapsing (900px) and roughly 1120px the full-size brand and
   the horizontal nav do not both fit, and the wordmark runs under "Home". Scale
   the brand back for that band only — below 900px the nav is a hamburger, so
   there is room for it at full size again. */
@media (min-width: 901px) and (max-width: 1120px) {
  .brand img { width: 74px; }
  .brand__text strong { font-size: 1.32rem; }
  .brand__text span { font-size: .74rem; letter-spacing: .18em; }
}

/* Five footer columns get cramped before the 1000px two-column rule takes
   over, so step down to three in between. Must stay above that rule to be
   overridden by it at narrower widths. */
@media (max-width: 1200px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, .13); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}

@media (max-width: 900px) {
  .navtoggle { display: block; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .nav.is-open { max-height: 78vh; overflow-y: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px 22px; }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__item:last-child { border-bottom: 0; }
  .nav__link { padding: 14px 4px; font-size: 1rem; justify-content: space-between; }
  .nav__link.is-active::after { display: none; }

  /* The mega panel collapses into a plain indented list, opened by tapping
     the parent link. Hover states must not reveal it on touch. */
  .nav__item.has-mega { position: relative; }
  .mega {
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--green-100);
    border-radius: 0;
    display: none;
    margin: 0 0 10px 6px;
  }
  .nav__item.has-mega:hover > .mega,
  .nav__item.has-mega:focus-within > .mega { display: none; }
  .mega.is-open,
  .nav__item.has-mega:hover > .mega.is-open { display: block; }
  .mega__inner,
  .mega__inner--list,
  .mega__inner--cards {
    grid-template-columns: 1fr;
    padding: 4px 0 8px 12px;
    gap: 14px;
  }
  .mega__feature { display: none; }
  .mega__foot { padding-top: 14px; }
  .mega__title { margin-bottom: .6em; }

  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split, .split--wide-text, .unit { grid-template-columns: 1fr; }
  .split--reverse .split__media, .unit:nth-child(even) .unit__media { order: 0; }
  .split__media--framed::before { display: none; }
  .badge { position: static; margin-top: 16px; max-width: none; display: inline-block; }
  .contact-grid { grid-template-columns: 1fr; }
  .quote-grid { grid-template-columns: 1fr; }
  .topbar__note { display: none; }
  .topbar__inner { justify-content: center; }

  /* Label above bar on narrow screens; three columns get too tight. */
  .progress-row { grid-template-columns: 1fr 92px; }
  .progress-row__label { grid-column: 1 / -1; padding-top: 2px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  /* On small phones the full-size brand is wide enough to push the menu button
     off the screen, which leaves the navigation unreachable. */
  .brand img { width: 66px; }
  .brand__text strong { font-size: 1.24rem; }
  .brand__text span { font-size: .68rem; letter-spacing: .16em; }

  /* The phone number and the 34-character address do not fit on one line on a
     narrow phone. Left unwrapped they widen the whole document, which drags the
     masthead's menu button off the right edge. */
  .topbar { font-size: .78rem; }
  .topbar__links { flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
  .topbar__inner { padding-block: 7px; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .checklist--2 { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .13); }
  .stat:last-child { border-bottom: 0; }
  .person { grid-template-columns: 1fr; gap: 18px; }
  .person__photo { max-width: 190px; }
  .footer__grid { grid-template-columns: 1fr; }
  .field--2 { grid-template-columns: 1fr; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal,
  .js .reveal.grid > *,
  .js .reveal.quote-grid > * { opacity: 1; transform: none; }
  .js .reveal.grid.is-in > *,
  .js .reveal.quote-grid.is-in > *,
  .js .hero__inner > *,
  .js .banner__inner > * { animation: none; }
}

@media print {
  .topbar, .masthead, .cta, .footer, .totop, .gallery-filters { display: none; }
  body { font-size: 11pt; }
  .banner::after { display: none; }
}