/* Neo Heights — Projects page */

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

html {
  scroll-behavior: smooth;
}

html.lenis {
  scroll-behavior: auto;
}

body {
  background: var(--bg-body);
  color: var(--text);
  font-family: "Fustat", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

.page {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  background: var(--bg-page);
  overflow-x: clip;
}

/* ——— Shared ——— */

.font-nav {
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  font-weight: 500;
}

.font-hubballi {
  font-family: "Hubballi", "Figtree", "Trebuchet MS", sans-serif;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #f68121;
  color: #fff;
  border-radius: 12px;
  padding: 16px 24px;
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  white-space: nowrap;
}

.btn-primary .btn-label {
  padding: 0 8px;
}

.btn-primary img {
  width: 24px;
  height: 24px;
  transform: scaleX(-1);
  flex-shrink: 0;
}

.link-accent {
  display: inline-flex;
  align-items: center;
  color: #f68121;
  font-family: "Fustat", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  padding: 16px 0;
}

.link-accent .link-label {
  padding: 0 8px;
}

.link-accent img {
  width: 24px;
  height: 24px;
  transform: scaleX(-1);
  flex-shrink: 0;
}

/* Header styles live in css/header.css — do not redefine here */
.projects-page-spacer { display: none; }

/* ——— Hero ——— */

.hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 557px;
  padding: 122px 120px;
  background: linear-gradient(180deg, #000 0%, #1d1d1d 100%);
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  left: 50%;
  top: -246px;
  transform: translateX(-50%);
  width: 623px;
  height: 257px;
  background: rgba(224, 105, 0, 0.5);
  border-radius: 200px;
  filter: blur(300px);
  pointer-events: none;
}

.hero-left {
  width: 755px;
  flex-shrink: 0;
}

.hero-eyebrow {
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: normal;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #909090;
  margin-bottom: 24px;
}

.hero-title {
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 64px;
  line-height: 1.2;
  color: #fff;
  width: 611px;
  max-width: 100%;
}

.hero-right {
  width: 916px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.hero-copy {
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.hero-copy p + p {
  margin-top: 1.5em;
}

/* ——— Projects section ——— */

.projects {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: 0 120px 120px;
  width: 100%;
  scroll-margin-top: calc(var(--header-height, 72px) + 16px);
}

.filters-bar {
  position: sticky;
  top: var(--header-height, 96px);
  z-index: 900;
  margin-left: -120px;
  margin-right: -120px;
  padding: 16px 0;
  background: var(--bg-page, #1d1d1d);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: top 0.25s ease;
}

body:has(.header.is-scrolled) .filters-bar {
  top: 72px;
}

.filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 11px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 120px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

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

.filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 20px;
  line-height: 24px;
  color: #fff;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.12);
  font-family: "Fustat", sans-serif;
  font-weight: 500;
}

.filter.active {
  background: #f68121;
  font-weight: 600;
}

.proj-switch {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 0 120px;
}

.proj-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}

.proj-tile {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 0;
  background: #272727;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  min-height: 420px;
}

.proj-tile-media {
  position: relative;
  min-height: 420px;
  background: #111;
}

.proj-tile-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.proj-tile-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.proj-tile-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.proj-tile-nav:hover,
.proj-tile-nav:focus-visible {
  background: #f68121;
}

.proj-tile-nav-prev { left: 16px; }
.proj-tile-nav-next { right: 16px; }

.proj-tile-nav[hidden],
.proj-tile-dots[hidden] {
  display: none !important;
}

.proj-tile-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}

.proj-tile-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  padding: 0;
}

.proj-tile-dot.is-active {
  background: #f68121;
  width: 22px;
  border-radius: 99px;
}

.proj-tile-info {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}

.proj-tile-status {
  font-family: "Inter", "Fustat", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #f68121;
}

.proj-tile-dl {
  display: grid;
  gap: 12px;
  margin: 0;
}

.proj-tile-dl > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}

.proj-tile-dl dt {
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.proj-tile-dl dd {
  margin: 0;
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35;
  color: #fff;
}

.proj-tile-more {
  align-self: flex-start;
}

.filters-bar .proj-switch {
  max-width: 1680px;
  margin: 0 auto;
}

.project-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.row {
  display: flex;
  gap: 28px;
  width: 100%;
  align-items: stretch;
}

.row > .card {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

.row-tight {
  gap: 29.55px;
}

/* Card base */

.card {
  position: relative;
  height: 512px;
  border-radius: 17.46px;
  overflow: hidden;
  flex-shrink: 0;
}

.card-img {
  background: #f7f7f7;
}

.card-img img.cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-img.blue-bg {
  background: linear-gradient(180.65deg, rgb(57, 145, 218) 13.15%, rgb(40, 126, 201) 50.56%);
}

.card-flag {
  position: absolute;
  top: 18px;
  right: 88px;
  z-index: 3;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.72);
  color: #fff;
  font-family: "Fustat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}

.card-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  z-index: 2;
  pointer-events: none;
}

.card-glass {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  min-height: 106px;
  display: flex;
  align-items: center;
  padding: 18px 30px;
  background: rgba(63, 63, 63, 0.3);
  backdrop-filter: blur(4.3px);
  -webkit-backdrop-filter: blur(4.3px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 2;
}

.card-glass-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}

.card-title {
  font-family: "Fustat", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  color: #fff;
  flex: 1;
  min-width: 0;
}

.card-title.upper {
  text-transform: uppercase;
}

.card-loc {
  font-family: "Hubballi", "Figtree", "Trebuchet MS", sans-serif;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.card-loc.invisible {
  color: transparent;
}

.card-text {
  background: #232323;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 31px 40px;
  height: 512px;
}

.card-text.simple {
  padding: 58px 37px 40px;
  justify-content: flex-start;
  gap: 0;
}

.card-text.simple .card-desc {
  color: #fff;
  margin-bottom: 40px;
}

.card-text-head {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}

.card-text-title {
  flex: 1;
  font-family: "Fustat", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.5;
  color: #fff;
  min-width: 0;
}

.badge-area {
  background: #494949;
  border-radius: 12px;
  padding: 12px;
  font-family: "Fustat", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-area.ghost {
  background: transparent;
  color: transparent;
}

.card-desc {
  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  max-width: 467px;
}

.badge-csr {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(90deg, #0d3896 0%, #4fdaff 100%);
  border-radius: 0 0 0 14px;
  padding: 14px;
  z-index: 3;
}

.badge-csr span {
  display: block;
  font-family: "Fustat", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
  padding: 7px;
}

/* Row width helpers — based on 1680px content width */

.w-half {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

.w-32 {
  width: 32.58%;
}

.w-33 {
  width: 32.37%;
}

.w-33b {
  width: 32.85%;
}

.w-66 {
  width: 66.05%;
}

.w-65 {
  width: 64.81%;
}

.w-34 {
  width: 33.82%;
}

.w-620 {
  width: 620px;
}

.w-1032 {
  width: 1032px;
  flex: 1 1 auto;
}

/* Grid-style rows with consistent 24px gaps */

/* Figma 1611:14529 — text/image split is 546 / 1114 on a 1680 track, 20px gutter.
   NOTE: flex-basis:0 cannot be used on the text cards — with box-sizing:border-box
   the used basis is floored at their horizontal padding, which stole ~49px from the
   image card in every split row. Explicit calc() bases keep the ratio exact. */
.row-split {
  display: flex;
  gap: 20px;
  width: 100%;
  align-items: stretch;
}

.row-split .w-32 {
  flex: 0 0 calc((100% - 20px) * 0.3289);
  width: auto;
  min-width: 0;
}

.row-split .w-66 {
  flex: 0 0 calc((100% - 20px) * 0.6711);
  width: auto;
  min-width: 0;
}

/* Figma: three equal 544px columns with a 24px gutter. */
.row-3 {
  display: flex;
  gap: 24px;
  width: 100%;
  align-items: stretch;
}

.row-3 > .card,
.row-3 .w-33,
.row-3 .w-33b {
  flex: 0 0 calc((100% - 48px) / 3);
  width: auto;
  min-width: 0;
}

/* Figma: 1092 / 568 on a 1680 track, 20px gutter. */
.row-wide-narrow {
  display: flex;
  gap: 20px;
  width: 100%;
  align-items: stretch;
}

.row-wide-narrow .w-65 {
  flex: 0 0 calc((100% - 20px) * 0.6578);
  width: auto;
  min-width: 0;
}

.row-wide-narrow .w-34 {
  flex: 0 0 calc((100% - 20px) * 0.3422);
  width: auto;
  min-width: 0;
}

.row-fixed {
  display: flex;
  flex-wrap: nowrap;
  gap: 28px;
  width: 100%;
}

/* 620 / 1032 on a 1680 track with a 28px gutter. Percentages so the pair
   stays side by side when the page gutter is 120px on a 1440 viewport. */
.row-fixed .w-620 {
  flex: 0 0 calc((100% - 28px) * 0.3753);
  width: auto;
  min-width: 0;
}

.row-fixed .w-1032 {
  flex: 0 0 calc((100% - 28px) * 0.6247);
  width: auto;
  min-width: 0;
}

/* ——— Filtered state ———
   js/site.js toggles .is-filtered on the grid and hides individual cards; without
   this rule the bespoke masonry rows kept their fixed column bases and left holes.
   While a filter is active the whole grid collapses to an even 3-up. */
.project-grid.is-filtered {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.project-grid.is-filtered > .row,
.project-grid.is-filtered > .row-tight,
.project-grid.is-filtered > .row-split,
.project-grid.is-filtered > .row-3,
.project-grid.is-filtered > .row-wide-narrow,
.project-grid.is-filtered > .row-fixed {
  display: contents;
}

.project-grid.is-filtered .card {
  flex: none;
  width: auto;
  min-width: 0;
  height: 420px;
}

.project-grid.is-filtered .card-desc {
  max-width: none;
}

/* The prose companion cards are layout partners for a specific photo card, not
   projects in their own right — in the flattened filtered grid they read as
   duplicates of the card next to them, so drop them while a filter is active. */
.project-grid.is-filtered .card-text {
  display: none;
}

/* Clients with no photograph are kept in the markup and hidden until photos exist. */
.row-unpictured,
.project-grid.is-filtered .card-text.card-fact,
.card-fact {
  display: none;
}

@media (max-width: 1099.98px) {
  .project-grid.is-filtered {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .project-grid.is-filtered {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .project-grid.is-filtered .card {
    height: 240px;
  }
}

.home-projects-empty {
  grid-column: 1 / -1;
  padding: 80px 0;
  text-align: center;
  font-family: "Fustat", sans-serif;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.55);
}

/* ——— Featured Blogs — styled entirely by css/components.css (+ footer.css /
   responsive.css breakpoints). The verbatim clone removed from here pinned
   the band to 120px gutters and made .blog-card transparent. ——— */

/* ——— CTA — styled entirely by css/components.css. ——— */

/* ——— Footer ——— */

.footer {
  background: #171717;
  width: 100%;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding: 64px 50px 0;
  min-height: 635px;
  position: relative;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 64px;
  border-bottom: 1px solid #262626;
  width: 100%;
}

.footer-top-title {
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: #fff;
}

.footer-top-sub {
  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #a1a1a1;
  margin-top: 8px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 48px 52px;
  width: 100%;
  padding-bottom: 80px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer-brand .logo {
  width: 133px;
  height: 100px;
}

.footer-arul {
  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #e17100;
}

.footer-about {
  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22.75px;
  color: #d4d4d4;
  max-width: 303px;
}

.footer-col-title {
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  margin-bottom: 24px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}

.footer-links a {
  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #d4d4d4;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #d4d4d4;
}

.footer-contact-row img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 0;
}

.footer-phones {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.footer-address strong {
  font-weight: 700;
}

.footer-social {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.footer-social a {
  width: 46px;
  height: 35px;
  display: block;
}

.footer-social img {
  width: 46px;
  height: 35px;
}

.footer-headoffice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: -40px;
  margin-left: calc(60% + 26px);
  padding-bottom: 40px;
  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #d4d4d4;
}

.footer-headoffice img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.footer-headoffice strong {
  font-weight: 700;
}

.footer-bottom {
  border-top: 1px solid #262626;
  padding: 25px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 69px;
}

.footer-bottom p,
.footer-bottom a {
  font-family: "Fustat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #8f8a84;
  white-space: nowrap;
}

.footer-bottom .arul-link {
  color: #e17100;
}

/* ——— Responsive fallback (keep 1920 look; scale on smaller) ——— */

@media (max-width: 1920px) {
  .page {
    width: 100%;
  }
}

@media (max-width: 1440px) {
  /* .hero/.projects/.blogs 60px gutters come from css/footer.css @1440. */
  .filters-bar {
    margin-left: -60px;
    margin-right: -60px;
  }

  .filters {
    padding: 0 60px;
  }

  .hero {
    flex-direction: column;
  }

  .hero-left,
  .hero-right,
  .hero-title {
    width: 100%;
  }

  .project-grid.is-filtered {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* .cta / .blog-cards / .blog-card @1440 come from css/footer.css. */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-headoffice {
    margin-left: 0;
  }

}

.card-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
}

@media (max-width: 1100px) {
  .filters-bar {
    top: 72px;
  }
}

/* Phone / small tablet — Projects */

@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    padding: 100px 20px 56px !important;
    min-height: 0;
    gap: 24px;
    box-sizing: border-box;
    width: 100%;
  }
  .hero-left, .hero-right, .hero-title, .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .hero-title {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.15;
  }
  /* Decorative blur — .hero clips it, but keep it inside the viewport box. */
  .hero-glow {
    width: min(623px, 100%);
  }
  .hero-copy p {
    font-size: 14px;
    line-height: 1.55;
  }
  .projects {
    padding: 40px 16px 64px;
    width: 100%;
    box-sizing: border-box;
    gap: 32px;
  }
  .filters-bar {
    margin-left: -16px;
    margin-right: -16px;
    padding: 12px 0;
    top: 72px;
  }
  .filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding: 0 16px;
  }
  /* 44px minimum tap target on touch. */
  .filter {
    white-space: nowrap;
    font-size: 13px;
    line-height: 18px;
    padding: 13px 14px;
    min-height: 44px;
  }
  .project-grid .row,
  .project-grid .row-split,
  .project-grid .row-3,
  .project-grid .row-wide-narrow,
  .project-grid .row-fixed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  /* The stacked rows are column flex containers, so flex-basis:100% was sizing
     these on the *block* axis and stretching every card to a share of the row
     height. Width is set explicitly instead and the flex sizing is switched off. */
  .card, .w-half, .w-32, .w-66, .w-33, .w-33b, .w-65, .w-34, .w-620, .w-1032 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }
  .card {
    height: 240px;
  }
  /* Prose companion cards are text — let them size to their content. */
  .card-text {
    height: auto;
    padding: 24px 20px;
    gap: 20px;
  }
  .card-text.simple {
    padding: 24px 20px;
  }
  .card-text.simple .card-desc {
    margin-bottom: 24px;
  }
  .card-text-title {
    font-size: 20px;
    line-height: 1.35;
  }
  /* A nowrap badge next to a flexible title collides at 375 — stack them. */
  .card-text-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .card-desc {
    font-size: 16px;
    max-width: 100%;
  }
  .card-glass {
    min-height: 0;
    padding: 14px 16px;
  }
  .card-title {
    font-size: 18px;
  }
  .card-loc {
    font-size: 15px;
    letter-spacing: 0.6px;
  }
  .badge-csr span {
    font-size: 16px;
    padding: 4px;
  }
  .card-arrow {
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
  }
  .project-grid.is-filtered {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .project-grid.is-filtered .card {
    height: 240px;
  }
  .card-img {
    min-height: 240px;
  }
}

/* ==========================================================================
   Light theme — Projects listing
   Reference: Figma light landing 1264:9007 (frames fl-04 / fl-05).
   Rule of thumb from that frame: text bands flip to the light ground, while
   anything sitting on photography (card glass plates) keeps its dark scrim and
   white type, and the standalone prose "companion" cards stay dark on purpose.
   The accent #f68121 is never themed.
   ========================================================================== */

/* --- Hero band ----------------------------------------------------------- */
html[data-theme="light"] .hero {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-page) 100%);
}

html[data-theme="light"] .hero-glow {
  background: rgba(246, 129, 33, 0.28);
  opacity: 0.6;
}

html[data-theme="light"] .hero-title {
  color: var(--text);
}

html[data-theme="light"] .hero-copy {
  color: var(--text-secondary);
}

/* --- Filter chips --------------------------------------------------------
   The dark chips are white-on-white in the light theme, so they need a dark
   translucent plate instead. Figma 1264:9007 (fl-04) marks the active chip with
   a #f68121 hairline in the light frame — the dark frame has no such border, so
   the border is added under the light theme only. */
html[data-theme="light"] .filters-bar {
  background: var(--bg-page);
  border-bottom-color: var(--border);
}

html[data-theme="light"] .filter {
  /* Opaque plates rather than washes, so contrast tooling can resolve the
     ground each label actually sits on. */
  background: var(--bg-sunken);
  color: var(--text);
  border: 1px solid transparent;
}

html[data-theme="light"] .filter:hover {
  background: var(--border-strong);
}

html[data-theme="light"] .filter.active {
  background: var(--bg-elevated);
  border-color: #f68121;
}

/* --- Photo cards ---------------------------------------------------------
   components.css flips .card-glass to a light plate with dark type. Over the
   bright site photography that plate all but disappears and it contradicts the
   light Figma frame, where the glass stays a dark scrim with white type. */
html[data-theme="light"] .card-glass {
  background: rgba(63, 63, 63, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="light"] .card-glass .card-glass-inner {
  background: transparent;
  border-color: transparent;
}

html[data-theme="light"] .card-glass .card-title,
html[data-theme="light"] .card-glass .card-loc {
  color: #fff;
}

html[data-theme="light"] .card-glass .card-loc.invisible {
  color: transparent;
}

html[data-theme="light"] .card-img {
  background: var(--bg-elevated);
}

/* --- Prose companion cards ----------------------------------------------
   Figma 1264:9007 keeps these dark in the light theme; components.css was
   recolouring only the type, leaving #121212 text on the #232323 card
   (contrast 1.19 — invisible). Restore the whole dark card. */
html[data-theme="light"] .card-text {
  background: #232323;
}

html[data-theme="light"] .card-text .card-text-title {
  color: #fff;
}

html[data-theme="light"] .card-text .card-desc {
  color: rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] .card-text.simple .card-desc {
  color: #fff;
}

html[data-theme="light"] .badge-area {
  background: #494949;
  color: #fff;
}

html[data-theme="light"] .badge-area.ghost {
  background: transparent;
  color: transparent;
}

html[data-theme="light"] .home-projects-empty {
  color: var(--text-secondary);
}

html[data-theme="light"] .proj-tile {
  background: var(--bg-card);
  border-color: var(--border);
}

html[data-theme="light"] .proj-tile-dl dt {
  color: var(--text-grey);
}

html[data-theme="light"] .proj-tile-dl dd {
  color: var(--text);
}

html[data-theme="light"] .filter.active {
  background: #f68121;
  color: #fff;
  border-color: #f68121;
}

@media (max-width: 1100px) {
  .proj-switch {
    padding: 0 24px;
  }

  /* `1fr` resolves to `minmax(auto, 1fr)`, so the auto MINIMUM let the media's
     aspect-ratio win: `min-height:280px` + `16/10` asked for a 448px-wide box
     and the single grid column grew to 448px inside a 335px tile. The tile's
     own `overflow:hidden` hid the damage — the next arrow and the right third
     of every photo and every `dd` value were clipped off on a phone.
     `minmax(0, 1fr)` caps the track at the tile width; the aspect-ratio then
     derives the height from the width instead of the other way round. */
  .proj-tile {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .proj-tile-media,
  .proj-tile-info {
    min-width: 0;
  }

  .proj-tile-media {
    width: 100%;
    min-height: 280px;
    aspect-ratio: 16 / 10;
  }

  .proj-tile-info {
    padding: 24px 20px 28px;
  }

  .proj-tile-dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .proj-tile-dl dd {
    overflow-wrap: break-word;
  }
}

/* Touch-target sizing for the tile carousels. Held one pixel below the
   1100px desktop boundary so the signed-off >=1100px rendering is byte
   identical; everything below it is a touch width. */
@media (max-width: 1099.98px) {
  /* ---- Carousel controls: 44x44 touch targets ----
     The arrows go from 40 to 44. The dots keep their 8px / 22px pill visuals
     but are drawn in a ::after so the button itself can be a transparent
     44x44 hit box; `gap:0` keeps the row from growing past 132px (3 slides is
     the maximum on this page) and the strip sits clear of the arrows, which
     are vertically centred. */
  .proj-tile-nav {
    width: 44px;
    height: 44px;
  }

  .proj-tile-nav-prev { left: 12px; }
  .proj-tile-nav-next { right: 12px; }

  .proj-tile-dots {
    gap: 0;
    bottom: 0;
  }

  .proj-tile-dot,
  .proj-tile-dot.is-active {
    width: 44px;
    height: 44px;
    border-radius: 0;
    background: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }

  .proj-tile-dot::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: width 0.25s ease, background-color 0.25s ease;
  }

  .proj-tile-dot.is-active::after {
    width: 22px;
    border-radius: 99px;
    background: #f68121;
  }
}


@media (max-width: 768px) {
  .projects {
    padding: 0 20px 80px;
    gap: 28px;
  }

  .filters-bar {
    margin-left: -20px;
    margin-right: -20px;
    top: var(--header-height, 72px);
  }

  .proj-switch {
    padding: 0 20px;
    width: 100%;
  }

  .proj-switch .filter {
    flex: 1;
    justify-content: center;
    font-size: 16px;
  }

  .proj-tile-dl dd {
    font-size: 16px;
  }
}

/* --- Featured blogs band — light rules live in css/components.css (the band
   stays dark ink in both themes, per the homepage). --- */