/* wasiq — page layout grid (1440 ref):
   outer frame margin 25px; side rails 112px; content 1151px;
   text col 475px inset 50px; media col 575px right-aligned. */

.frame {
  position: relative;
  width: calc(100% - 2 * var(--size-frame-margin));
  max-width: calc(var(--size-container) - 2 * var(--size-frame-margin));
  margin: var(--size-frame-margin) auto;
  min-height: 100vh;
}

/* every band is a 3-col grid: rail | content | rail, hairlines between */
.band {
  display: grid;
  grid-template-columns: var(--size-rail) minmax(0, 1fr) var(--size-rail);
  border-bottom: var(--border-hairline) solid var(--color-border);
  border-left: var(--border-hairline) solid var(--color-border);
  border-right: var(--border-hairline) solid var(--color-border);
}
.band > .band__content { grid-column: 2; border-left: var(--border-hairline) solid var(--color-border); border-right: var(--border-hairline) solid var(--color-border); }
.band--bleed > .band__content { border-left: 0; border-right: 0; grid-column: 1 / -1; }

/* two-column split inside content: text left (inset 50px), media right 575px */
.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--size-col-media);
}
.cols__text { max-width: calc(var(--size-col-text) + var(--space-rhythm)); padding-left: var(--space-rhythm); }
.cols__col { display: flex; flex-direction: column; }
.cols__text > * + * { margin-top: var(--space-5); }
.cols--reverse { grid-template-columns: var(--size-col-media) minmax(0, 1fr); }
.cols--reverse .cols__text { order: 2; }
.cols--reverse .cols__media { order: 1; }

.section-pad { padding-top: var(--space-rhythm); padding-bottom: var(--space-rhythm); }

/* ---- nav ---- */
.nav { position: fixed; top: 0; left: var(--size-frame-margin); right: var(--size-frame-margin); margin: 0 auto; max-width: calc(var(--size-container) - 2 * var(--size-frame-margin)); z-index: 20; display: flex; justify-content: space-between; align-items: flex-start; padding: var(--space-rhythm) 123px var(--space-rhythm) var(--size-rail); pointer-events: none; }
.theme-fab { position: fixed; left: var(--space-2); bottom: var(--space-2); z-index: 30; opacity: 0.55; }
.theme-fab:hover { opacity: 1; }
.nav > * { pointer-events: auto; }
.nav__logo { height: 75px; width: auto; }
.nav--pinned { position: fixed; top: 0; max-width: calc(var(--size-container) - 2 * var(--size-frame-margin)); margin: 0 auto; }
.nav__actions { display: flex; gap: var(--space-3); align-items: center; margin-top: 20px; }
.nav__cta { opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-out-quint); }
.nav.is-scrolled .nav__cta { opacity: 1; pointer-events: auto; }
.nav > a:first-child { transition: transform var(--duration-base) var(--ease-out-expo); }
.nav.is-scrolled > a:first-child { transform: translateX(-75px); }


/* ---- hero ---- */
.hero { position: relative; }
.hero__media { position: relative; height: calc(100vh - 100px); min-height: 640px; background: var(--palette-gray-1000); overflow: hidden; }
.hero__media img, .hero__media video, .hero__media canvas { width: 100%; height: 100%; object-fit: cover; }
.hero__strip { position: relative; height: 242px; }
.hero__card {
  position: absolute;
  left: var(--size-rail);
  bottom: 168px;
  width: 718px;
  max-width: calc(100% - 2 * var(--size-rail));
  background: var(--color-surface-card);
  color: var(--color-text-inverse-primary);
  padding: var(--space-rhythm);
  z-index: 2;
}

.hero__card > * + * { margin-top: var(--space-5); }
.hero__investors { display: flex; gap: var(--space-6); margin-top: var(--space-5); align-items: center; }
.hero__investors img { height: 65px; width: auto; }
:root[data-theme="dark"] .hero__investors img { filter: none; }
:root[data-theme="light"] .hero__investors img { filter: invert(1) hue-rotate(180deg); }

/* ---- caption over heading ---- */
.kicker { margin-bottom: var(--space-2); }
.heading-block { padding-left: var(--space-rhythm); max-width: 977px; }
.heading-block + .cols, .heading-block + .work { margin-top: 51px; }
.cols__text { padding-top: var(--space-rhythm); }

/* ---- cell rows ---- */
.cellrow { display: grid; margin-top: var(--space-rhythm); }
.cellrow--4 { grid-template-columns: repeat(4, 1fr); }
.cellrow--8 { grid-template-columns: repeat(8, 1fr); }
.cell {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-1);
  min-height: 123px; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-rhythm);
  border: var(--border-hairline) solid var(--color-border);
  margin: 0 0 calc(-1 * var(--border-hairline)) calc(-1 * var(--border-hairline));
  text-decoration: none; color: var(--color-text-primary);
  transition: background-color var(--duration-fast) var(--ease-out-quint);
}
.cell:hover { background: var(--color-surface-raised); }
.cell--tall { min-height: 223px; justify-content: flex-start; padding-top: var(--space-4); }
.cell--link { flex-direction: row; align-items: center; gap: var(--space-2); }
.cell .ext { color: var(--color-text-muted); font-size: var(--text-body-sm-size); }
.cellrow-label { margin-top: var(--space-3); padding: 15px 0 15px var(--space-rhythm); border-top: var(--border-hairline) solid var(--color-border); color: var(--color-text-muted); letter-spacing: 0.05em; }

/* wide link card — full-column cell, top border only */
.linkcard {
  display: flex; flex-direction: column; gap: var(--space-5);
  width: 100%;
  padding: 60px var(--space-5) 55px var(--space-rhythm); margin-top: auto;
  border-top: var(--border-hairline) solid var(--color-border);
  text-decoration: none; color: var(--color-text-primary);
  transition: background-color var(--duration-fast) var(--ease-out-quint);
}
.cols__col { border-right: var(--border-hairline) solid var(--color-border); }
.cols__col + .cols__media.media-well { border-left: 0; }
.p-highlight {
  background: linear-gradient(90deg, var(--color-surface-raised), transparent 85%);
  margin-left: calc(-1 * var(--space-rhythm));
  padding: var(--space-5) var(--space-4) var(--space-5) var(--space-rhythm);
}
.linkcard:hover { background: var(--color-surface-raised); }

/* ---- quote ---- */
.quote { padding-left: var(--space-rhythm); max-width: calc(var(--size-col-text) + var(--space-rhythm)); }
.quote__glyph { font-family: var(--font-display); font-size: 64px; line-height: 1; color: var(--color-text-secondary); }
.quote__glyph--close { text-align: right; }
.quote__body { color: var(--color-text-emphasis); margin-top: var(--space-4); }
.quote__attr { margin-top: var(--space-6); }
.quote__attr .link { text-decoration: none; color: var(--color-text-emphasis); font-weight: var(--text-body-weight); }
.quote__attr .link:hover { text-decoration: underline; }

/* ---- network section: media bleeds through the left rail ---- */
.grounds { display: grid; grid-template-columns: calc(var(--size-rail) + 575px) minmax(0, 1fr) var(--size-rail); }
.grounds > .media-well { grid-column: 1; }
.grounds__text { grid-column: 2; padding: var(--space-rhythm) 0 var(--space-rhythm) var(--space-rhythm); max-width: calc(var(--size-col-text) + var(--space-rhythm)); border-left: var(--border-hairline) solid var(--color-border); box-sizing: content-box; }
.grounds__text h2 { margin-left: calc(-1 * var(--space-rhythm)); padding: 0 0 47px var(--space-rhythm); border-bottom: var(--border-hairline) solid var(--color-border); }
.grounds__text h2 + p { margin-top: 104px !important; }
.grounds__text .link { text-decoration: none; color: var(--color-text-emphasis); font-weight: var(--text-body-weight); }
.grounds__text .link:hover { text-decoration: underline; }
.grounds__text > div { max-width: var(--size-col-text); }
.grounds__text > * + * { margin-top: var(--space-4); }

/* ---- work section ---- */
.work { display: grid; grid-template-columns: minmax(0, 1fr) var(--size-col-media); }
.work__text { padding-top: 0; }
.work__text { padding-left: var(--space-rhythm); max-width: calc(var(--size-col-text) + var(--space-rhythm)); }
.work__block { margin-top: var(--space-8); }
.work__block:first-of-type { margin-top: 0; }
.work__block > * + * { margin-top: var(--space-4); }
.work__block h3 {
  margin-left: calc(-1 * var(--space-rhythm));
  padding: var(--space-5) 0 var(--space-5) var(--space-rhythm);
  border-top: var(--border-hairline) solid var(--color-border);
  border-bottom: var(--border-hairline) solid var(--color-border);
}
.work__block h3 + p { margin-top: var(--space-7); }
.rowlabel {
  margin-top: 0;
  padding: var(--space-5) 0 var(--space-5) var(--space-rhythm);
  border-top: var(--border-hairline) solid var(--color-border);
}

/* ---- CTA panel (white, watermark) ---- */
.cta-band { padding-top: 100px; }
.cta {
  position: relative; overflow: hidden;
  background: var(--color-surface-card);
  color: var(--color-text-inverse-primary);
  padding: var(--space-rhythm);

  display: grid; grid-template-columns: 576px 475px;
}
.cta__mark { height: 90px; width: auto; align-self: flex-start; }
:root[data-theme="light"] .cta__mark, :root[data-theme="light"] .cta__watermark { filter: invert(1) hue-rotate(180deg); }
.cta__watermark { position: absolute; right: -10%; top: -30%; height: 160%; opacity: 0.08; pointer-events: none; }
.cta__left { display: flex; flex-direction: column; }
.cta__left h3 { color: inherit; margin-top: 93px; max-width: 440px; }
.cta__right { position: relative; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 77px; max-width: 475px; }
.cta__right .btn { margin-top: 46px; }

/* ---- footer grid ---- */
.footer { border-top: var(--border-hairline) solid var(--color-border); padding: 0 !important; }
.footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.footer .footer__legal { margin-top: 0; }
.footer__col { border-right: var(--border-hairline) solid var(--color-border); padding: var(--space-rhythm); min-height: 230px; }
.footer__col:last-child { border-right: 0; }
.footer__col span { display: block; color: var(--color-text-emphasis); margin-bottom: var(--space-4); }
.footer__col a { display: block; text-decoration: none; color: var(--color-text-muted); padding: 2px 0; transition: color var(--duration-fast) var(--ease-out-quint); }
.footer__col a:hover { color: var(--color-text-emphasis); }
.footer__legal { border-top: var(--border-hairline) solid var(--color-border); padding: 0 var(--space-rhythm); min-height: 68px; display: flex; align-items: flex-start; padding-top: var(--space-1); color: var(--color-text-muted); }

@media (max-width: 992px) {
  .band { grid-template-columns: 0 1fr 0; }
  .cols, .cols--reverse, .work, .cta { grid-template-columns: 1fr; }
  .cols--reverse .cols__text { order: 1; }
  .cols--reverse .cols__media { order: 2; }
  .cols__text, .work__text, .quote, .cta__left { padding-left: var(--space-4); padding-right: var(--space-4); max-width: none; }
  .hero__card { left: var(--space-4); right: var(--space-4); width: auto; bottom: 120px; }
  .nav { padding: var(--space-4); }
  .cellrow--4 { grid-template-columns: repeat(2, 1fr); }
  .cellrow--8 { grid-template-columns: repeat(4, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .linkcard { width: auto; }
}