/* /Pages/DesignSystem/Index.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   Design System catalogue page
   ------------------------------------------------------------------ */

.page[b-8qul9kg85a] {
  background: var(--color-cream);
  color: var(--color-ink);
  min-height: 100dvh;
  padding-bottom: clamp(4rem, 8vh, 6rem);
}

/* ===================  HEADER  =================== */

.header[b-8qul9kg85a] {
  padding: clamp(4rem, 8vh, 7rem) var(--pad-x) clamp(2rem, 4vh, 3rem);
  border-bottom: 1px solid var(--color-divider);
  max-width: 1400px;
  margin: 0 auto;
}

.backLink[b-8qul9kg85a] {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-label);
  color: var(--color-ink-mute);
  margin-bottom: 1.5rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.backLink:hover[b-8qul9kg85a] { color: var(--color-ink); }

.pageTitle[b-8qul9kg85a] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 115%;
  color: var(--color-ink);
  margin: 0;
}

.pageSub[b-8qul9kg85a] {
  margin-top: 1.25rem;
  max-width: 60ch;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--color-ink-mute);
}

/* ===================  SECTION SCAFFOLD  =================== */

.section[b-8qul9kg85a] {
  padding: clamp(3rem, 6vh, 5rem) var(--pad-x);
  border-bottom: 1px solid var(--color-divider);
  max-width: 1400px;
  margin: 0 auto;
}

.sectionDark[b-8qul9kg85a] {
  background: var(--color-bg);
  color: var(--color-fg);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  max-width: none;
  margin-left: calc(-1 * var(--pad-x));
  margin-right: calc(-1 * var(--pad-x));
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.sectionHead[b-8qul9kg85a] {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: clamp(2rem, 3vh, 2.75rem);
}

.eyebrow[b-8qul9kg85a] {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-mute);
}

.sectionDark .eyebrow[b-8qul9kg85a] { color: var(--color-fg-mute); }

.sectionTitle[b-8qul9kg85a] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  color: inherit;
  margin: 0;
}

.sectionBody[b-8qul9kg85a] {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vh, 3rem);
}

.subhead[b-8qul9kg85a] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-lead);
  color: var(--color-ink);
  margin: 0 0 1rem;
}

.note[b-8qul9kg85a] {
  font-family: var(--font-display);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--color-ink-mute);
  margin: 0;
  max-width: 70ch;
}

.code[b-8qul9kg85a] {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--color-ink-faint);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  color: var(--color-ink);
}

.sectionDark .code[b-8qul9kg85a] {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-fg);
}

/* ===================  CHIPS (Colors)  =================== */

/* Container that holds a primary-scale row AND a button-state grid
   side-by-side on wide screens, stacked on narrow. */
.chipRowPair[b-8qul9kg85a] {
  display: grid;
  grid-template-columns: 7fr 2fr;
  gap: 1rem;
  align-items: stretch;
}

/* === Surface-palette headers ===
   Used to introduce the Light- and Dark-surface chip rows so each is
   clearly scoped to its intended page background. The Light version
   sits flat on the DS page; the Dark version is inside a #050505 panel. */
.surfaceHead[b-8qul9kg85a] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: clamp(1rem, 1.5vw, 1.25rem);
  max-width: 70ch;
}

.surfaceTitle[b-8qul9kg85a] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  color: var(--color-ink);
  margin: 0;
}

.surfaceNote[b-8qul9kg85a] {
  font-family: var(--font-display);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--color-ink-mute);
  margin: 0;
}

/* === Dark-surface palette block ===
   Wraps the Dark Text + Border + BG chip row in a #050505 panel so the
   demo visualises what those tokens look like when applied over the
   project's dark canvas (their only intended context). */
.darkSurfaceBlock[b-8qul9kg85a] {
  background: #050505;
  color: var(--color-fg);
  /* Push outside the section padding so it reads as its own surface,
     matching the full-bleed treatment of the dark Patterns section. */
  margin-inline: calc(-1 * var(--pad-x));
  padding-inline: var(--pad-x);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.darkSurfaceHead[b-8qul9kg85a] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
  max-width: 70ch;
}

.darkSurfaceTitle[b-8qul9kg85a] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  color: var(--color-fg);
  margin: 0;
}

.darkSurfaceNote[b-8qul9kg85a] {
  font-family: var(--font-display);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--color-fg-mute);
  margin: 0;
}

/* Horizontal row of chips, each one tall */
.chipRow[b-8qul9kg85a] {
  display: grid;
  gap: 1rem;
}

.chipGrid[b-8qul9kg85a] {
  display: grid;
  gap: 0.5rem;
}

/* Individual chip — label + hex inside the colour block */
.chip[b-8qul9kg85a] {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 7rem;
  padding: 1rem 1rem 1.1rem;
  border-radius: 4px;
  border: 1px solid var(--color-divider);
  font-family: var(--font-display);
  transition: transform var(--dur-fast) var(--ease-out);
}

.chip:hover[b-8qul9kg85a] { transform: translateY(-2px); }

.chipCompact[b-8qul9kg85a] {
  min-height: 4rem;
  padding: 0.75rem 0.85rem 0.85rem;
}

.chipInkLight[b-8qul9kg85a] { color: var(--color-white); }
.chipInkDark[b-8qul9kg85a]  { color: var(--color-heading); }

.chipName[b-8qul9kg85a] {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.chipCompact .chipName[b-8qul9kg85a] { font-size: var(--t-micro); }

.chipValue[b-8qul9kg85a] {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-top: 0.25rem;
}

.chipCompact .chipValue[b-8qul9kg85a] { font-size: var(--t-micro); }

/* Mobile — collapse rows of many chips into 2-column wraps */
@media (max-width: 1000px) {
  .chipRowPair[b-8qul9kg85a] { grid-template-columns: 1fr; }
  .chipRow[b-8qul9kg85a],
  .chipGrid[b-8qul9kg85a] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
  }
}

@media (max-width: 500px) {
  .chipRow[b-8qul9kg85a],
  .chipGrid[b-8qul9kg85a] {
    grid-template-columns: 1fr !important;
  }
}

/* ===================  TYPOGRAPHY  =================== */

.typeStack[b-8qul9kg85a] {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.typeRow[b-8qul9kg85a] {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items: baseline;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-divider);
}

.typeMeta[b-8qul9kg85a] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.typeLabel[b-8qul9kg85a] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-label);
  color: var(--color-ink);
}

.typeSpec[b-8qul9kg85a] {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--t-micro);
  color: var(--color-ink-mute);
}

/* No font-size / font-weight / line-height here — those are owned by
   whichever utility class (.t-h1, .t-h2, …) is applied alongside. The
   sample renders via the class itself so the demo is literal. */
.typeSample[b-8qul9kg85a] {
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

/* ===================  SPACING + TRACKING TABLE  =================== */

.table[b-8qul9kg85a] {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: var(--t-body);
}
.table th[b-8qul9kg85a],
.table td[b-8qul9kg85a] {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
.table th[b-8qul9kg85a] {
  font-weight: 600;
  color: var(--color-ink);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-mute);
}
.table td[b-8qul9kg85a] {
  color: var(--color-ink);
}

.trackStack[b-8qul9kg85a] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.trackRow[b-8qul9kg85a] {
  display: grid;
  grid-template-columns: 200px 100px 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 1rem;
  background: white;
  border: 1px solid var(--color-divider);
  border-radius: 4px;
}
.trackValue[b-8qul9kg85a] {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--t-label);
  color: var(--color-ink-mute);
}
.trackSample[b-8qul9kg85a] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-lead);
  color: var(--color-ink);
  text-transform: uppercase;
}

/* ===================  MOTION  =================== */

.motionGrid[b-8qul9kg85a] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.motionDemo[b-8qul9kg85a] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.5rem;
  background: white;
  border: 1px solid var(--color-divider);
  border-radius: 6px;
}
.demoBox[b-8qul9kg85a] {
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: 4px;
  background: var(--color-flame-bright);
  transform: translateX(0);
}
.demoBox[data-anim="fast"][b-8qul9kg85a] { transition: transform var(--dur-fast) var(--ease-out); }
.demoBox[data-anim="base"][b-8qul9kg85a] { transition: transform var(--dur-base) var(--ease-out); }
.demoBox[data-anim="slow"][b-8qul9kg85a] { transition: transform var(--dur-slow) var(--ease-out); }
.motionDemo:hover .demoBox[b-8qul9kg85a] { transform: translateX(110px); }

/* ===================  COMPONENT SAMPLES  =================== */

.compRow[b-8qul9kg85a] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.linkUnderline[b-8qul9kg85a] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  position: relative;
  padding-bottom: 4px;
}
.linkUnderline[b-8qul9kg85a]::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.linkUnderline:hover[b-8qul9kg85a]::after { transform: scaleX(1); }

.btn[b-8qul9kg85a] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.btn:hover[b-8qul9kg85a] { transform: translateY(-1px); }

.btnPrimary[b-8qul9kg85a] {
  background: var(--color-flame-bright);
  color: var(--color-fg);
}
.btnPrimary:hover[b-8qul9kg85a] { background: var(--color-flame-deep); }

.btnGhost[b-8qul9kg85a] {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
}
.btnGhost:hover[b-8qul9kg85a] { background: var(--color-ink); color: var(--color-fg); }

.chip[b-8qul9kg85a] {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--color-ink);
  text-transform: uppercase;
}

.numberMeta[b-8qul9kg85a] {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  color: var(--color-ink-mute);
}

/* ===================  PATTERNS  =================== */

.patternStage[b-8qul9kg85a] {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  background: var(--color-bg);
  border-radius: 8px;
  overflow: hidden;
}

.patternGrid[b-8qul9kg85a] {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.patternLine[b-8qul9kg85a] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-0.5px);
  background-color: rgba(255, 255, 255, 0.1);
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  background-size: 100% 35vh;
  background-repeat: no-repeat;
  background-position: 0 -35vh;
  animation: dsScanPulse-b-8qul9kg85a 4s ease-in-out infinite;
}

@keyframes dsScanPulse-b-8qul9kg85a {
  0%   { background-position: 0 -35vh; }
  100% { background-position: 0 100vh; }
}

.patternLabel[b-8qul9kg85a] {
  position: absolute;
  bottom: 1rem;
  left: 1.25rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  color: var(--color-fg-mute);
  text-transform: uppercase;
}

.glassDemo[b-8qul9kg85a] {
  display: grid;
  place-items: center;
  height: 12rem;
  background: #ffffff;
  border-radius: 8px;
  position: relative;
}

.glassCircle[b-8qul9kg85a] {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.25rem 0.5rem;
  color: #6c33ff;
  white-space: nowrap;
}

.glassLabel[b-8qul9kg85a] {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-h2);
  text-transform: uppercase;
  color: inherit;
  line-height: 1;
}

.shadowGrid[b-8qul9kg85a] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.shadowSample[b-8qul9kg85a] {
  height: 8rem;
  background: var(--color-fg);
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-label);
}

/* ===================  PAGE FOOTER  =================== */

.docFooter[b-8qul9kg85a] {
  padding: clamp(3rem, 6vh, 4rem) var(--pad-x);
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-display);
  font-size: var(--t-body);
  color: var(--color-ink-mute);
}

/* ===================  RESPONSIVE  =================== */

@media (max-width: 720px) {
  .typeRow[b-8qul9kg85a] { grid-template-columns: 1fr; gap: 0.75rem; }
  .trackRow[b-8qul9kg85a] { grid-template-columns: 1fr; gap: 0.5rem; }
}
/* /Pages/Legal/PrivacyPolicy.cshtml.rz.scp.css */
/* Privacy Policy long-form legal reading page.
   Inherits the dark canvas, Instrument Sans body, and IvyPresto italic accent
   from the global token system. No new visual language. */

.legal[b-99yq3byjww] {
    padding: clamp(7rem, 12vw, 11rem) var(--pad-x) var(--section-pad-y);
    color: var(--color-d-text-2);
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
}

/* ===== Sticky left column (header + contents) ===== */
.legalAside[b-99yq3byjww] {
    position: sticky;
    top: clamp(5rem, 8vh, 6.5rem);
    align-self: start;
}

/* ===== Header ===== */
.legalHead[b-99yq3byjww] {
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.legalKicker[b-99yq3byjww] {
    font-family: var(--font-display);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-fg-mute);
    margin: 0 0 1.1rem;
}

.legalTitle[b-99yq3byjww] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 3vw, 3.25rem);
    line-height: 1.02;
    letter-spacing: var(--tracking-tight);
    color: var(--color-d-heading);
    margin: 0 0 0.9rem;
}

.legalTitle .accent[b-99yq3byjww] {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 600;
}

.legalUpdated[b-99yq3byjww] {
    font-size: var(--t-label);
    color: var(--color-fg-mute);
    margin: 0 0 1rem;
}

.legalIntro[b-99yq3byjww] {
    font-size: var(--t-body);
    line-height: 1.5;
    color: var(--color-d-text-1);
    margin: 0;
}

/* ===== Table of contents ===== */
.legalToc[b-99yq3byjww] {
    border-top: 1px solid var(--color-d-border);
    border-bottom: 1px solid var(--color-d-border);
    padding: 1.25rem 0;
    margin-bottom: 0;
}

.legalToc ol[b-99yq3byjww] {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 1.75rem;
}

.legalToc li[b-99yq3byjww] {
    margin: 0 0 0.5rem;
    break-inside: avoid;
}

.legalToc a[b-99yq3byjww] {
    font-size: var(--t-label);
    color: var(--color-d-text-3);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

.legalToc a:hover[b-99yq3byjww] {
    color: var(--color-d-heading);
}

/* ===== Body ===== */
.legalBody section[b-99yq3byjww] {
    margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
    scroll-margin-top: 6rem;
}

.legalBody h2[b-99yq3byjww] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-h2);
    line-height: 1.2;
    letter-spacing: var(--tracking-tight);
    color: var(--color-d-heading);
    margin: 0 0 1rem;
}

.legalBody h2 .num[b-99yq3byjww] {
    color: var(--color-fg-mute);
    font-weight: 500;
    margin-right: 0.45rem;
}

.legalBody h3[b-99yq3byjww] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-lead);
    line-height: 1.3;
    color: var(--color-d-text-1);
    margin: 1.85rem 0 0.75rem;
}

.legalBody p[b-99yq3byjww],
.legalBody li[b-99yq3byjww] {
    font-size: var(--t-body);
    line-height: 1.72;
    color: var(--color-d-text-2);
}

.legalBody p[b-99yq3byjww] {
    margin: 0 0 1rem;
}

.legalBody ul[b-99yq3byjww] {
    margin: 0 0 1.25rem;
    padding-left: 1.2rem;
}

.legalBody li[b-99yq3byjww] {
    margin: 0 0 0.55rem;
}

.legalBody li[b-99yq3byjww]::marker {
    color: var(--color-fg-faint);
}

.legalBody a[b-99yq3byjww] {
    color: var(--color-primary-50);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: color var(--dur-fast) var(--ease-out);
}

.legalBody a:hover[b-99yq3byjww] {
    color: var(--color-d-heading);
}

.legalBody strong[b-99yq3byjww] {
    color: var(--color-d-text-1);
    font-weight: 600;
}

/* ===== Contact / grievance block ===== */
.legalContact[b-99yq3byjww] {
    border: 1px solid var(--color-d-border);
    border-radius: 14px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--color-d-bg-soft);
    margin-top: 1.25rem;
}

.legalContact address[b-99yq3byjww] {
    font-style: normal;
    font-size: var(--t-body);
    line-height: 1.7;
    color: var(--color-d-text-2);
    margin: 0 0 1rem;
}

.legalContact address:last-child[b-99yq3byjww] {
    margin-bottom: 0;
}

.legalContact .name[b-99yq3byjww] {
    color: var(--color-d-heading);
    font-weight: 600;
}

.legalContact .contactNote[b-99yq3byjww] {
    margin: 0 0 1rem;
}

/* ===== Tablet / collapse two-column to stacked ===== */
@media (max-width: 900px) {
    .legal[b-99yq3byjww] {
        grid-template-columns: minmax(0, 1fr);
    }

    .legalAside[b-99yq3byjww] {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* ===== Small screens ===== */
@media (max-width: 640px) {
    .legalToc ol[b-99yq3byjww] {
        columns: 1;
    }
}
/* /Pages/Legal/TermsConditions.cshtml.rz.scp.css */
/* Terms and Conditions long-form legal reading page.
   Mirrors the Privacy Policy styling. Scoped to this page via CSS isolation.
   Inherits the dark canvas, Instrument Sans body, and IvyPresto italic accent. */

.legal[b-xv5qhzh5dr] {
    padding: clamp(7rem, 12vw, 11rem) var(--pad-x) var(--section-pad-y);
    color: var(--color-d-text-2);
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
}

/* ===== Sticky left column (header + contents) ===== */
.legalAside[b-xv5qhzh5dr] {
    position: sticky;
    top: clamp(5rem, 8vh, 6.5rem);
    align-self: start;
}

/* ===== Header ===== */
.legalHead[b-xv5qhzh5dr] {
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.legalKicker[b-xv5qhzh5dr] {
    font-family: var(--font-display);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-fg-mute);
    margin: 0 0 1.1rem;
}

.legalTitle[b-xv5qhzh5dr] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 3vw, 3.25rem);
    line-height: 1.02;
    letter-spacing: var(--tracking-tight);
    color: var(--color-d-heading);
    margin: 0 0 0.9rem;
}

.legalTitle .accent[b-xv5qhzh5dr] {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 600;
}

.legalUpdated[b-xv5qhzh5dr] {
    font-size: var(--t-label);
    color: var(--color-fg-mute);
    margin: 0 0 1rem;
}

.legalIntro[b-xv5qhzh5dr] {
    font-size: var(--t-body);
    line-height: 1.5;
    color: var(--color-d-text-1);
    margin: 0;
}

/* ===== Table of contents ===== */
.legalToc[b-xv5qhzh5dr] {
    border-top: 1px solid var(--color-d-border);
    border-bottom: 1px solid var(--color-d-border);
    padding: 1.25rem 0;
    margin-bottom: 0;
}

.legalToc ol[b-xv5qhzh5dr] {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 1.75rem;
}

.legalToc li[b-xv5qhzh5dr] {
    margin: 0 0 0.5rem;
    break-inside: avoid;
}

.legalToc a[b-xv5qhzh5dr] {
    font-size: var(--t-label);
    color: var(--color-d-text-3);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

.legalToc a:hover[b-xv5qhzh5dr] {
    color: var(--color-d-heading);
}

/* ===== Body ===== */
.legalBody section[b-xv5qhzh5dr] {
    margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
    scroll-margin-top: 6rem;
}

.legalBody h2[b-xv5qhzh5dr] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-h2);
    line-height: 1.2;
    letter-spacing: var(--tracking-tight);
    color: var(--color-d-heading);
    margin: 0 0 1rem;
}

.legalBody h2 .num[b-xv5qhzh5dr] {
    color: var(--color-fg-mute);
    font-weight: 500;
    margin-right: 0.45rem;
}

.legalBody h3[b-xv5qhzh5dr] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-lead);
    line-height: 1.3;
    color: var(--color-d-text-1);
    margin: 1.85rem 0 0.75rem;
}

.legalBody p[b-xv5qhzh5dr],
.legalBody li[b-xv5qhzh5dr] {
    font-size: var(--t-body);
    line-height: 1.72;
    color: var(--color-d-text-2);
}

.legalBody p[b-xv5qhzh5dr] {
    margin: 0 0 1rem;
}

.legalBody ul[b-xv5qhzh5dr] {
    margin: 0 0 1.25rem;
    padding-left: 1.2rem;
}

.legalBody li[b-xv5qhzh5dr] {
    margin: 0 0 0.55rem;
}

.legalBody li[b-xv5qhzh5dr]::marker {
    color: var(--color-fg-faint);
}

.legalBody a[b-xv5qhzh5dr] {
    color: var(--color-primary-50);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: color var(--dur-fast) var(--ease-out);
}

.legalBody a:hover[b-xv5qhzh5dr] {
    color: var(--color-d-heading);
}

.legalBody strong[b-xv5qhzh5dr] {
    color: var(--color-d-text-1);
    font-weight: 600;
}

/* ===== Contact / grievance block ===== */
.legalContact[b-xv5qhzh5dr] {
    border: 1px solid var(--color-d-border);
    border-radius: 14px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--color-d-bg-soft);
    margin-top: 1.25rem;
}

.legalContact address[b-xv5qhzh5dr] {
    font-style: normal;
    font-size: var(--t-body);
    line-height: 1.7;
    color: var(--color-d-text-2);
    margin: 0 0 1rem;
}

.legalContact address:last-child[b-xv5qhzh5dr] {
    margin-bottom: 0;
}

.legalContact .name[b-xv5qhzh5dr] {
    color: var(--color-d-heading);
    font-weight: 600;
}

.legalContact .contactNote[b-xv5qhzh5dr] {
    margin: 0 0 1rem;
}

/* ===== Tablet / collapse two-column to stacked ===== */
@media (max-width: 900px) {
    .legal[b-xv5qhzh5dr] {
        grid-template-columns: minmax(0, 1fr);
    }

    .legalAside[b-xv5qhzh5dr] {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* ===== Small screens ===== */
@media (max-width: 640px) {
    .legalToc ol[b-xv5qhzh5dr] {
        columns: 1;
    }
}
/* /Pages/Shared/About/_AboutBelief.cshtml.rz.scp.css */
.section[b-owhraj888r] {
  padding: var(--section-pad-y) var(--pad-x);
}

.inner[b-owhraj888r] {
  max-width: 60ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.lede[b-owhraj888r] {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.45;
  color: var(--color-fg-soft);
  text-wrap: pretty;
}

.lede em[b-owhraj888r] {
  font-family: var(--font-italic-display);
  font-style: italic;
  color: var(--color-fg);
}
/* /Pages/Shared/About/_AboutHero.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   AboutHero — dedicated top section for the /about route. An isolated
   clone of the DesignProcess/Services hero; its layout / motion /
   typography can evolve on its own.
   - 70vh tall, content top-anchored, horizontally centred.
   - 4-line scanning grid (4s pulse, staggered).
   - Pointer-driven tilt + grid parallax (no scroll fade — effect
     stays active the whole time the hero is on screen).
   ------------------------------------------------------------------ */

.hero[b-arrwybq64t] {
  position: relative;
  width: 100%;
  height: 70vh;
  isolation: isolate;
  overflow: hidden;
  background: transparent;

  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--pad-x);
}

/* ===================  SCANNING GRID  =================== */

.bgGrid[b-arrwybq64t] {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.line[b-arrwybq64t] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-0.5px);

  background-color: rgba(255, 255, 255, 0.1);
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  background-size: 100% 35vh;
  background-repeat: no-repeat;
  background-position: 0 -35vh;

  animation: scanPulse-b-arrwybq64t 4s ease-in-out infinite;
  will-change: background-position;
}

@keyframes scanPulse-b-arrwybq64t {
  0%   { background-position: 0 -35vh; }
  100% { background-position: 0 100vh; }
}

@media (prefers-reduced-motion: reduce) {
  .line[b-arrwybq64t] {
    animation: none;
    background-image: none;
  }
}

/* ===================  CONTENT  =================== */

.content[b-arrwybq64t] {
  margin-top: clamp(10rem, 24vh, 18rem);
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 2.5vh, 2rem);
  width: 100%;
  max-width: 62%;
  text-align: center;
}

.heading[b-arrwybq64t] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: 0.98;
  color: var(--color-fg);
  text-transform: none;
  text-wrap: balance;
  max-width: 15ch;
  margin: 0;
}

.subheading[b-arrwybq64t] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.45;
  color: var(--color-fg-soft);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}

/* ===================  BOTTOM FADE  =================== */

.bottomFade[b-arrwybq64t] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12.5625rem;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, #050505 0%, rgba(5, 5, 5, 0.00) 100%);
}

/* ===================  RESPONSIVE  =================== */

@media (max-width: 1440px) {
  .content[b-arrwybq64t] { max-width: 64%; }
  .heading[b-arrwybq64t] { max-width: 14ch; }
}

@media (max-width: 1280px) {
  .content[b-arrwybq64t] { max-width: 70%; }
  .heading[b-arrwybq64t] { max-width: 13ch; }
}

@media (max-width: 1024px) {
  .content[b-arrwybq64t] { max-width: 78%; }
  .heading[b-arrwybq64t] { max-width: 12ch; line-height: 1.0; }
  .subheading[b-arrwybq64t] { line-height: 1.5; }
}

@media (max-width: 900px) {
  .content[b-arrwybq64t] { max-width: 88%; }
  .heading[b-arrwybq64t] { max-width: none; }
}

@media (max-width: 768px) {
  .content[b-arrwybq64t] { max-width: 100%; }
}
/* /Pages/Shared/About/_AboutPrinciples.cshtml.rz.scp.css */
.section[b-wo89v8cv95] {
  padding: var(--section-pad-y) var(--pad-x);
  max-width: 90rem;
  margin-inline: auto;
}

.title[b-wo89v8cv95] {
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  color: var(--color-fg);
}

.grid[b-wo89v8cv95] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.card[b-wo89v8cv95] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cardTitle[b-wo89v8cv95] {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-fg);
}

.cardBody[b-wo89v8cv95] {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-fg-mute);
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .grid[b-wo89v8cv95] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .grid[b-wo89v8cv95] { grid-template-columns: 1fr; }
}
/* /Pages/Shared/About/_AboutStory.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   AboutStory — big editorial stats narrative. Alternating left/right
   lines weave an IvyPresto italic brand accent with uppercase
   Instrument Sans, broken up by the client-logo strip and a thumbnail.
   ------------------------------------------------------------------ */

.story[b-fm6h6t80n9] {
  padding: var(--section-pad-y) var(--pad-x);
  max-width: 100rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

.line[b-fm6h6t80n9] {
  margin: 0;
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 1.04;
  text-wrap: balance;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em;
}

.lineLeft[b-fm6h6t80n9]  { justify-content: flex-start; text-align: left; }
.lineRight[b-fm6h6t80n9] { justify-content: flex-end;  text-align: right; }

.accent[b-fm6h6t80n9] {
  font-family: var(--font-italic-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-flame-bright);
}

.plain[b-fm6h6t80n9] {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-fg);
}

/* === Client-logo strip === */
.logos[b-fm6h6t80n9] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding: clamp(1.25rem, 2.5vw, 2.25rem) 0;
  border-block: 1px solid rgba(255, 255, 255, 0.1);
}

.logos img[b-fm6h6t80n9] {
  height: clamp(1.5rem, 2.2vw, 2.25rem);
  width: auto;
  opacity: 0.75;
  transition: opacity 200ms var(--ease-out);
}

.logos:hover img[b-fm6h6t80n9] { opacity: 0.5; }
.logos img:hover[b-fm6h6t80n9] { opacity: 1; }

/* === Inline case-study thumbnail === */
.hasMedia[b-fm6h6t80n9] {
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
}

.media[b-fm6h6t80n9] {
  height: clamp(2.5rem, 7vw, 5.5rem);
  width: auto;
  max-width: 38%;
  border-radius: 10px;
  object-fit: cover;
  vertical-align: middle;
}

/* === Responsive === */
@media (max-width: 768px) {
  /* Stack everything left-aligned on small screens for readability. */
  .lineLeft[b-fm6h6t80n9],
  .lineRight[b-fm6h6t80n9] {
    justify-content: flex-start;
    text-align: left;
  }
  .media[b-fm6h6t80n9] { max-width: 50%; }
}
/* /Pages/Shared/About/_AboutStudio.cshtml.rz.scp.css */
.section[b-575uj9vfyj] {
  padding: var(--section-pad-y) var(--pad-x) clamp(4rem, 8vw, 9rem);
}

.body[b-575uj9vfyj] {
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.6;
  color: var(--color-fg-soft);
  text-wrap: pretty;
}

.body strong[b-575uj9vfyj] {
  color: var(--color-fg);
  font-weight: 600;
}
/* /Pages/Shared/Contact/_ContactForm.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   ContactForm — "Let's ship your next website" lead section (/contact).
   Two-column layout: left = heading + intro + office illustration,
   right = lead form. Solid dark background (the section paints its
   own #050505 so the global main::before backdrop never bleeds
   through), matching the pure-black design.
   ------------------------------------------------------------------ */

.section[b-1wis1ps3k3] {
  position: relative;
  z-index: 1;
  width: 100%;
  background: var(--color-bg);
  color: var(--color-fg);
  padding: clamp(4rem, 9vw, 9rem) var(--pad-x) clamp(5rem, 10vw, 10rem);
}

.grid[b-1wis1ps3k3] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 8rem);
  align-items: start;
  width: 100%;
}

/* ===================  LEFT COLUMN  =================== */

.left[b-1wis1ps3k3] {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vh, 2.25rem);
}

.title[b-1wis1ps3k3] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 115%;
  color: var(--color-fg);
  margin: 0;
  text-wrap: balance;
}

.intro[b-1wis1ps3k3] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--color-fg-mute);
  margin: 0;
  max-width: 34ch;
}

.illustration[b-1wis1ps3k3] {
  width: clamp(18rem, 32vw, 30rem);
  height: auto;
  margin-top: clamp(1rem, 3vh, 2.5rem);
  user-select: none;
  -webkit-user-drag: none;
  /* Promote to its own GPU layer so the looping playback stays smooth
     and doesn't repaint alongside scroll/reveal transforms. */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* ===================  RIGHT COLUMN / FORM  =================== */

.right[b-1wis1ps3k3] {
  width: 100%;
}

/* NOTE: the <form> element does NOT receive this component's CSS-isolation
   scope attribute — the Form Tag Helper (it injects the antiforgery token on
   method="post") re-emits the tag and drops the Razor-added b-* attribute, so a
   bare ".form" selector (rewritten to ".form[b-xxx]") never matches and the form
   falls back to display:block. That makes the inline-flex NDA row and submit
   button share a line. Reach the form through its scoped parent (.right keeps
   its attribute) with ::deep, which leaves ".form" un-scoped. */
.right[b-1wis1ps3k3]  .form {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 1.8vw, 2rem);
  width: 100%;
}

/* Two side-by-side fields (email + phone) that collapse on narrow widths. */
.row[b-1wis1ps3k3] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.field[b-1wis1ps3k3] {
  display: flex;
  flex-direction: column;
}

/* Positioning context for the floating label, which is absolutely
   positioned over the input. */
.control[b-1wis1ps3k3] {
  position: relative;
}

.req[b-1wis1ps3k3] {
  color: var(--color-white);
  margin-left: 1px;
}

.input[b-1wis1ps3k3],
.textarea[b-1wis1ps3k3] {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-d-border);   /* Dark Border #1E1F22 */
  color: var(--color-fg);
  font-family: var(--font-display);
  font-size: var(--t-lead);
  line-height: 1.4;
  /* Top padding reserves the space the label lifts into. */
  padding: 1.6rem 0 0.65rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.textarea[b-1wis1ps3k3] {
  resize: vertical;
  min-height: 3.5rem;
}

.input:focus[b-1wis1ps3k3],
.textarea:focus[b-1wis1ps3k3] {
  outline: none;
  border-bottom-color: var(--color-primary-50);
}

.input[data-invalid="true"][b-1wis1ps3k3] {
  border-bottom-color: var(--color-error-100);
}

/* === Floating label ===
   Empty + unfocused: sits on the input line at full size, acting as a
   placeholder. On focus OR when the field has a value (detected via
   :not(:placeholder-shown), which is why every input carries a
   placeholder=" "), it shrinks and lifts to the top. */
.floatLabel[b-1wis1ps3k3] {
  position: absolute;
  left: 0;
  top: 1.6rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-body);          /* resting: Body */
  line-height: 1.4;
  color: var(--color-d-text-2);
  pointer-events: none;
  transform-origin: left top;
  transition:
    transform var(--dur-base) var(--ease-out),
    font-size var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.input:focus ~ .floatLabel[b-1wis1ps3k3],
.input:not(:placeholder-shown) ~ .floatLabel[b-1wis1ps3k3],
.textarea:focus ~ .floatLabel[b-1wis1ps3k3],
.textarea:not(:placeholder-shown) ~ .floatLabel[b-1wis1ps3k3] {
  transform: translateY(-1.6rem);
  font-size: var(--t-micro);         /* floated: Micro */
  color: var(--color-d-text-3);      /* floated */
}

.error[b-1wis1ps3k3] {
  margin-top: 0.4rem;
  font-size: var(--t-micro);
  color: var(--color-error-50);
}

/* ===================  ATTACH FILE  =================== */

.attachRow[b-1wis1ps3k3] {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.attach[b-1wis1ps3k3] {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: var(--color-d-text-2);      /* Text 2 */
  font-family: var(--font-display);
  font-size: var(--t-label);
  max-width: 100%;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.attach span[b-1wis1ps3k3] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 16rem;
}

.attach:hover[b-1wis1ps3k3] {
  border-color: var(--color-primary-50);
  background: rgba(98, 0, 238, 0.12);
}

.attachHint[b-1wis1ps3k3] {
  font-size: var(--t-label);
  color: var(--color-d-text-4);
}

/* Visually hidden native file input — triggered via the pill button. */
.fileInput[b-1wis1ps3k3] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===================  SCHEDULE A CALL / DATE  =================== */

.scheduleBlock[b-1wis1ps3k3] {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.scheduleLabel[b-1wis1ps3k3] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-lead);
  color: var(--color-d-text-3);
  margin: 0;
}

.dateField[b-1wis1ps3k3] {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.dateInput[b-1wis1ps3k3] {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--color-fg);
  font-family: var(--font-display);
  font-size: var(--t-body);
  padding: 0.35rem 2.25rem 0.6rem 0;
  color-scheme: dark;
}

.dateInput:focus[b-1wis1ps3k3] {
  outline: none;
}

/* When empty, hide the native mm/dd/yyyy text so the custom
   "Select Date" placeholder shows in its place. */
.dateInput[data-empty="true"][b-1wis1ps3k3] {
  color: transparent;
}

/* Hide the browser's default calendar picker indicator — the
   supplied calendar icon stands in for it. */
.dateInput[b-1wis1ps3k3]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

.datePlaceholder[b-1wis1ps3k3] {
  position: absolute;
  left: 0;
  top: 0.35rem;
  font-size: var(--t-body);
  color: var(--color-d-text-2);      /* resting — matches field labels */
  pointer-events: none;
  transition: color var(--dur-base) var(--ease-out);
}

.dateInput:focus ~ .datePlaceholder[b-1wis1ps3k3] {
  color: var(--color-d-text-3);      /* focused — matches field labels */
}

.calendarIcon[b-1wis1ps3k3] {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-d-text-4);
  pointer-events: none;
}

/* ===================  NDA CHECKBOX  =================== */

.checkboxRow[b-1wis1ps3k3] {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
}

/* Hide the native control but keep it accessible / focusable. */
.checkbox[b-1wis1ps3k3] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.checkboxBox[b-1wis1ps3k3] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  color: var(--color-white);
  flex-shrink: 0;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.checkboxBox svg[b-1wis1ps3k3] {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.checkbox:checked + .checkboxBox[b-1wis1ps3k3] {
  background: var(--color-primary-100);
  border-color: var(--color-primary-100);
}

.checkbox:checked + .checkboxBox svg[b-1wis1ps3k3] {
  opacity: 1;
}

.checkbox:focus-visible + .checkboxBox[b-1wis1ps3k3] {
  outline: 2px solid var(--color-primary-50);
  outline-offset: 2px;
}

.checkboxLabel[b-1wis1ps3k3] {
  font-size: var(--t-body);
  color: var(--color-d-text-4);      /* Text 4 #5C5D62 */
}

/* ===================  SUBMIT BUTTON  =================== */

/* Mirrors the shared "Get in touch" CTA (.cta in _GetInTouch.cshtml.css):
   white pill / purple text that inverts to purple / white on hover, with a
   two-arrow slide-swap in the circular icon. */
.submit[b-1wis1ps3k3] {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.45rem 0.45rem 0.45rem clamp(1.5rem, 2.5vw, 2.25rem);
  border-radius: 999px;
  border: 0;
  cursor: pointer;

  background: var(--color-white);
  color: var(--color-primary-100);

  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;

  transition:
    background var(--dur-base) var(--ease-out),
    color      var(--dur-base) var(--ease-out);
}

.submitText[b-1wis1ps3k3] {
  white-space: nowrap;
}

.submitIcon[b-1wis1ps3k3] {
  display: grid;
  place-items: center;
  overflow: hidden;          /* clip the off-screen halves of each arrow during the slide */
  width: clamp(2.5rem, 3vw, 3.25rem);
  height: clamp(2.5rem, 3vw, 3.25rem);
  border-radius: 50%;
  background: var(--color-primary-100);
  color: var(--color-white);
  flex-shrink: 0;

  transition:
    background var(--dur-base) var(--ease-out),
    color      var(--dur-base) var(--ease-out);
}

/* Hover: invert the pill colours — white pill → purple, purple icon → white. */
.submit:hover[b-1wis1ps3k3] {
  background: var(--color-primary-100);
  color: var(--color-white);
}
.submit:hover .submitIcon[b-1wis1ps3k3] {
  background: var(--color-white);
  color: var(--color-primary-100);
}

/* Two arrows stacked in the same grid cell. On hover the default arrow slides
   out to the right while the second slides in from the left. Shape from
   arrow-vector.svg used as a CSS mask; fill is currentColor. */
.arrowDefault[b-1wis1ps3k3],
.arrowHover[b-1wis1ps3k3] {
  grid-area: 1 / 1;          /* stack both in the same cell */
  display: block;
  width: 1.05em;             /* keep 0.7:1 ratio (svg is 14:20) */
  height: 1.5em;
  background-color: currentColor;
  -webkit-mask: url("/images/icons/arrow-vector.svg") no-repeat center / contain;
          mask: url("/images/icons/arrow-vector.svg") no-repeat center / contain;
  transition: transform var(--dur-base) var(--ease-out);
}

.arrowDefault[b-1wis1ps3k3] {
  color: var(--color-white);
  transform: translateX(0);
}
.submit:hover .arrowDefault[b-1wis1ps3k3] {
  transform: translateX(220%);
}

.arrowHover[b-1wis1ps3k3] {
  color: var(--color-primary-100);
  transform: translateX(-220%);
}
.submit:hover .arrowHover[b-1wis1ps3k3] {
  transform: translateX(0);
}

/* ===================  SUCCESS STATE  =================== */

.success[b-1wis1ps3k3] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.02);
}

.successTitle[b-1wis1ps3k3] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  color: var(--color-fg);
  margin: 0;
}

.successCopy[b-1wis1ps3k3] {
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--color-fg-mute);
  margin: 0;
  max-width: 42ch;
}

/* ===================  RESPONSIVE  =================== */

@media (max-width: 1024px) {
  .grid[b-1wis1ps3k3] {
    gap: clamp(2rem, 5vw, 4rem);
  }
}

@media (max-width: 900px) {
  .grid[b-1wis1ps3k3] {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 8vw, 4rem);
  }
  .illustration[b-1wis1ps3k3] {
    width: clamp(16rem, 60vw, 26rem);
  }
}

@media (max-width: 560px) {
  .row[b-1wis1ps3k3] {
    grid-template-columns: 1fr;
  }
}

/* === 480 — mobile: tighten section padding, shrink the office
       illustration so it doesn't dominate, give the file-attach row
       room to wrap, drop the heavy submit-icon size === */
@media (max-width: 480px) {
  .section[b-1wis1ps3k3] {
    padding: clamp(3rem, 8vh, 5rem) var(--pad-x);
  }
  .illustration[b-1wis1ps3k3] {
    width: clamp(13rem, 70vw, 22rem);
    margin-top: clamp(1rem, 3vh, 1.75rem);
  }
  .right[b-1wis1ps3k3]  .form {
    gap: clamp(1rem, 1.5vw, 1.5rem);
  }
  .attachRow[b-1wis1ps3k3] {
    gap: 0.6rem;
  }
  .attach span[b-1wis1ps3k3] {
    max-width: 12rem;
  }
  .submit[b-1wis1ps3k3] {
    gap: clamp(0.875rem, 4vw, 1.5rem);
    padding-left: clamp(1.25rem, 4vw, 1.75rem);
  }
  .submitIcon[b-1wis1ps3k3] {
    width: clamp(2.25rem, 9vw, 2.75rem);
    height: clamp(2.25rem, 9vw, 2.75rem);
  }
}

/* === 360 — small phone: floor the page gutter, allow file name to
       ellipsize further inside the attach pill === */
@media (max-width: 360px) {
  .section[b-1wis1ps3k3] {
    padding-inline: 1rem;
  }
  .attach span[b-1wis1ps3k3] {
    max-width: 8.5rem;
  }
}
/* /Pages/Shared/Contact/_ContactHero.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   ContactHero — dedicated top section for the /contact route.
   A standalone copy of ServicesHero so the contact page's hero can
   evolve independently and NEVER affect /services.
   - 70vh tall, content bottom-anchored, horizontally centred.
   - 4-line scanning grid (4s pulse, staggered).
   - Pointer-driven tilt + grid parallax.
   ------------------------------------------------------------------ */

.hero[b-1q2jnlauhm] {
  position: relative;
  width: 100%;
  height: 70vh;
  isolation: isolate;
  overflow: hidden;
  background: transparent;

  /* Top-anchor .content (align-items: flex-start), horizontally centred;
     .content's viewport-height-relative margin-top drops it down the hero.
     The .bottomFade gradient sits BEHIND the text (lower z-index). */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--pad-x);
}

/* ===================  SCANNING GRID  =================== */

.bgGrid[b-1q2jnlauhm] {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.line[b-1q2jnlauhm] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-0.5px);

  background-color: rgba(255, 255, 255, 0.1);
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  background-size: 100% 35vh;
  background-repeat: no-repeat;
  background-position: 0 -35vh;

  animation: scanPulse-b-1q2jnlauhm 4s ease-in-out infinite;
  will-change: background-position;
}

@keyframes scanPulse-b-1q2jnlauhm {
  0%   { background-position: 0 -35vh; }
  100% { background-position: 0 100vh; }
}

@media (prefers-reduced-motion: reduce) {
  .line[b-1q2jnlauhm] {
    animation: none;
    background-image: none;
  }
}

/* ===================  CONTENT  =================== */

.content[b-1q2jnlauhm] {
  /* Viewport-height-relative drop from the top of the hero — scales with
     screen height, capped at 16rem on tall screens. */
  margin-top: clamp(10rem, 24vh, 18rem);
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 2.5vh, 2rem);
  width: 100%;
  max-width: 62%;
  text-align: center;
}

.heading[b-1q2jnlauhm] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: 0.98;
  color: var(--color-fg);
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 15ch;
  margin: 0;
}

.subheading[b-1q2jnlauhm] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.45;
  color: var(--color-fg-soft);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}

/* ===================  BOTTOM FADE  =================== */

/* Layered BEHIND .content (z-index 1, content is z-index 2) so the
   bottom-anchored text reads over the gradient. */
.bottomFade[b-1q2jnlauhm] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12.5625rem;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, #050505 0%, rgba(5, 5, 5, 0.00) 100%);
}

/* ===================  RESPONSIVE  =================== */

@media (max-width: 1440px) {
  .content[b-1q2jnlauhm] { max-width: 64%; }
  .heading[b-1q2jnlauhm] { max-width: 14ch; }
}

@media (max-width: 1280px) {
  .content[b-1q2jnlauhm] { max-width: 70%; }
  .heading[b-1q2jnlauhm] { max-width: 13ch; }
}

@media (max-width: 1024px) {
  .content[b-1q2jnlauhm] { max-width: 78%; }
  .heading[b-1q2jnlauhm] { max-width: 12ch; line-height: 1.0; }
  .subheading[b-1q2jnlauhm] { line-height: 1.5; }
}

@media (max-width: 900px) {
  .content[b-1q2jnlauhm] { max-width: 88%; }
  .heading[b-1q2jnlauhm] { max-width: none; }
}

@media (max-width: 768px) {
  .content[b-1q2jnlauhm] { max-width: 100%; }
}
/* /Pages/Shared/Contact/_ContactInfo.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   ContactInfo — three contact-method cards + an embedded map.
   Sits below the ContactForm section on /contact, on the same
   #050505 canvas. Uses the dark-surface design-system tokens.
   ------------------------------------------------------------------ */

.section[b-wvfunq7w2j] {
  position: relative;
  z-index: 1;
  width: 100%;
  background: var(--color-bg);
  color: var(--color-fg);
  padding: clamp(2rem, 4vw, 4rem) var(--pad-x) clamp(4rem, 8vw, 7rem);
}

/* Accessible-only heading for the section. */
.srOnly[b-wvfunq7w2j] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===================  CARDS  =================== */

.grid[b-wvfunq7w2j] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.card[b-wvfunq7w2j] {
  display: flex;
  flex-direction: column;
}

.iconBox[b-wvfunq7w2j] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 0;
  /* Gradient fill + gradient border: the first layer (padding-box) is the
     inner fill, the second (border-box) paints the ~0.5px ring. The ring
     gradient is top-lit — bright along the top edge, fading to near-black
     at the bottom. */
  border: 0.527px solid transparent;
  background:
    linear-gradient(180deg, #0A0A0C 0%, transparent 100%) padding-box,
    linear-gradient(180deg, #1E1F22 0%, transparent 100%) border-box;
  box-shadow: 0 2.109px 2.109px 0 rgba(0, 0, 0, 0.25);
  color: var(--color-white);              /* white icon */
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Soft purple glow on the icon itself. */
.iconBox svg[b-wvfunq7w2j] {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 8px rgba(98, 0, 238, 0.45));
}

.cardTitle[b-wvfunq7w2j] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  color: var(--color-d-text-3);           /* Text 3 */
  margin: 0 0 0.3rem;
}

.caption[b-wvfunq7w2j] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-body);
  color: var(--color-d-text-3);           /* Text 3 */
  margin: 0 0 clamp(1.5rem, 2vw, 1.8rem);
}

.value[b-wvfunq7w2j] {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  color: var(--color-d-text-1);           /* Text 1 */
}

.value a[b-wvfunq7w2j] {
  transition: color var(--dur-fast) var(--ease-out);
}

.value a:hover[b-wvfunq7w2j] {
  color: var(--color-primary-50);
}

.line[b-wvfunq7w2j] {
  display: block;
  line-height: 1.45;
}

/* ===================  MAP  =================== */

/* Full-bleed live map shell — ported from Lumex `loc-map--full`.
   Negative inline margins cancel the section's horizontal padding so the
   map spans the full viewport width, edge-to-edge. */
.mapWrap[b-wvfunq7w2j] {
  position: relative;
  width: auto;
  margin-inline: calc(-1 * var(--pad-x));
  height: clamp(360px, 40vw, 560px);
  background: var(--color-bg);
  border-radius: 0;
  overflow: hidden;
}

/* Full-colour Google Maps embed — matches the Lumex live page. Static by
   design: `pointer-events: none` blocks dragging/zooming so the map can't be
   panned, while the marker + place card still render on load. */
.mapFrame[b-wvfunq7w2j] {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

/* ===================  RESPONSIVE  =================== */

@media (max-width: 860px) {
  .grid[b-wvfunq7w2j] {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 6vw, 2.5rem);
  }
}

/* === 480 — mobile: smaller iconBox + map height; tighten the section
       padding so each card uses the page width fully === */
@media (max-width: 480px) {
  .section[b-wvfunq7w2j] {
    padding: clamp(1.5rem, 4vh, 2.5rem) var(--pad-x) clamp(3rem, 7vw, 5rem);
  }
  .grid[b-wvfunq7w2j] {
    gap: clamp(1.75rem, 5vw, 2.25rem);
    margin-bottom: clamp(2rem, 5vw, 3rem);
  }
  .iconBox[b-wvfunq7w2j] {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
  }
  .iconBox svg[b-wvfunq7w2j] {
    width: 26px;
    height: 26px;
  }
  .caption[b-wvfunq7w2j] {
    margin-bottom: clamp(1rem, 3vw, 1.4rem);
  }
  .mapWrap[b-wvfunq7w2j] {
    border-radius: 0;
    height: clamp(16rem, 60vw, 22rem);
  }
}

@media (max-width: 360px) {
  .section[b-wvfunq7w2j] {
    padding-inline: 1rem;
  }
  /* Keep the map full-bleed against the narrowed gutter. */
  .mapWrap[b-wvfunq7w2j] {
    margin-inline: -1rem;
  }
  .iconBox[b-wvfunq7w2j] {
    width: 3rem;
    height: 3rem;
  }
}
/* /Pages/Shared/DesignProcess/_DesignProcessHero.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   DesignProcessHero — dedicated top section for the /design-process
   route. An isolated clone of ServicesHero; its layout / motion /
   typography can evolve on its own without touching /services.
   - 70vh tall, content bottom-anchored, horizontally centred.
   - 4-line scanning grid (4s pulse, staggered).
   - Pointer-driven tilt + grid parallax (no scroll fade — effect
     stays active the whole time the hero is on screen).
   ------------------------------------------------------------------ */

.hero[b-qj604v1kr0] {
  position: relative;
  width: 100%;
  height: 70vh;
  isolation: isolate;
  overflow: hidden;
  background: transparent;

  /* Top-anchor .content (align-items: flex-start), horizontally centred;
     .content's viewport-height-relative margin-top drops it down the hero.
     The .bottomFade gradient sits BEHIND the text (lower z-index).
     .bgGrid is position:absolute so it's out of flow and ignored by the
     flex layout — sits behind everything as intended. */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--pad-x);
}

/* ===================  SCANNING GRID  =================== */

.bgGrid[b-qj604v1kr0] {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Individual line — base hairline always visible; a vertical bright-pulse
   gradient travels top→bottom over 4s. animation-delay staggers the four
   lines so the pulse cascades across the screen. */
.line[b-qj604v1kr0] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-0.5px);

  background-color: rgba(255, 255, 255, 0.1);
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  background-size: 100% 35vh;
  background-repeat: no-repeat;
  background-position: 0 -35vh;

  animation: scanPulse-b-qj604v1kr0 4s ease-in-out infinite;
  will-change: background-position;
}

@keyframes scanPulse-b-qj604v1kr0 {
  0%   { background-position: 0 -35vh; }
  100% { background-position: 0 100vh; }
}

@media (prefers-reduced-motion: reduce) {
  .line[b-qj604v1kr0] {
    animation: none;
    background-image: none;
  }
}

/* ===================  CONTENT  =================== */

.content[b-qj604v1kr0] {
  /* Viewport-height-relative drop from the top of the hero — scales with
     screen height, capped at 16rem on tall screens. */
  margin-top: clamp(10rem, 24vh, 18rem);
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 2.5vh, 2rem);
  width: 100%;
  max-width: 62%;
  text-align: center;
}

.heading[b-qj604v1kr0] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: 0.98;
  color: var(--color-fg);
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 15ch;
  margin: 0;
}

.subheading[b-qj604v1kr0] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.45;
  color: var(--color-fg-soft);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}

/* ===================  BOTTOM FADE  =================== */

/* Dark gradient strip blending the hero's bottom edge into the section
   below. Layered BEHIND .content (z-index 1, content is z-index 2) so the
   bottom-anchored text reads over it; decorative + non-interactive so it
   never blocks the pointer-tilt. Full-bleed via left/right:0 rather than
   the source's fixed 109.9375rem, so it spans every viewport without a
   gap or clip. */
.bottomFade[b-qj604v1kr0] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12.5625rem;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, #050505 0%, rgba(5, 5, 5, 0.00) 100%);
}

/* ===================  RESPONSIVE  =================== */

@media (max-width: 1440px) {
  .content[b-qj604v1kr0] { max-width: 64%; }
  .heading[b-qj604v1kr0] { max-width: 14ch; }
}

@media (max-width: 1280px) {
  .content[b-qj604v1kr0] { max-width: 70%; }
  .heading[b-qj604v1kr0] { max-width: 13ch; }
}

@media (max-width: 1024px) {
  .content[b-qj604v1kr0] { max-width: 78%; }
  .heading[b-qj604v1kr0] { max-width: 12ch; line-height: 1.0; }
  .subheading[b-qj604v1kr0] { line-height: 1.5; }
}

@media (max-width: 900px) {
  .content[b-qj604v1kr0] { max-width: 88%; }
  .heading[b-qj604v1kr0] { max-width: none; }
}

@media (max-width: 768px) {
  .content[b-qj604v1kr0] { max-width: 100%; }
}

/* @media (max-width: 600px) — letter-spacing override removed
   as part of the project-wide "no letter-spacing on headings" rule.
   Kept as a comment hook for future overrides. */
/* /Pages/Shared/DesignProcess/_DesignProcessList.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   DesignProcessList — "Our Design Process" full-bleed accordion.
   Isolated to the /design-process route; CSS Modules scope locally.

   - The active phase's photo is a FULL-SECTION background that
     crossfades as you scroll (darknode.army-style immersive panel).
   - LEFT  : heading + subtitle sitting directly on the photo.
   - RIGHT : a frosted-glass accordion floating over the same photo —
     backdrop-filter blurs the background behind it. The active phase
     opens to its description, deliverable chips, and artefact.
   Active phase is driven by a rAF scroll-spy (see component); rows also
   open on click. At ≤ 767px the layout stacks and the glass relaxes.
   ------------------------------------------------------------------ */

/* Tall scroll track. Its height is set inline from the phase count
   (100vh + (N-1)*STEP_VH); the inner .pin sticks while it scrolls past. */
.section[b-jc783tlzdu] {
  position: relative;
  background: var(--color-bg);
  color: var(--color-fg);
  padding-top: clamp(4rem, 9vw, 9rem);
}

/* Pinned panel — sticks to the viewport top for the length of the track,
   releasing once the last phase has been scrolled through. */
.pin[b-jc783tlzdu] {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  /* No padding here — the glass panel must reach the top, bottom, and
     right edges of the viewport. Edge spacing lives on .left / .right. */
}

/* ===================  FULL-BLEED BACKGROUND  =================== */

.bg[b-jc783tlzdu] {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bgImg[b-jc783tlzdu] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  user-select: none;
  -webkit-user-drag: none;
}

/* Top crossfade layer — its opacity is scrubbed by scroll (0 = base only). */
.bgImgB[b-jc783tlzdu] {
  opacity: 0;
  will-change: opacity;
}

/* Legibility wash — heavier on the left under the heading, lighter on
   the right so the photo still reads through the glass. Plus a soft
   top/bottom vignette to seat the panel in the page. */
.scrim[b-jc783tlzdu] {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(5, 5, 5, 0.86) 0%,
      rgba(5, 5, 5, 0.55) 34%,
      rgba(5, 5, 5, 0.20) 50%,
      rgba(5, 5, 5, 0.28) 100%
    ),
    linear-gradient(0deg, rgba(5, 5, 5, 0.55) 0%, rgba(5, 5, 5, 0.00) 30%);
}

/* ===================  WRAPPER  =================== */

.wrapper[b-jc783tlzdu] {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* ===================  LEFT — heading over photo  =================== */

.left[b-jc783tlzdu] {
  flex: 0 0 50%;
  display: flex;
  align-items: flex-start;
  /* Top-align the heading; match the right column's top padding so it
     clears the fixed nav and lines up with phase 01. */
  padding: clamp(5rem, 11vh, 8.5rem) clamp(2rem, 5vw, 5rem) 0 var(--pad-x);
}

.leftContent[b-jc783tlzdu] {
  /* no max-width — heading/subtitle wrap to the column's full width */
}

.heading[b-jc783tlzdu] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 1.5rem + 5vw, 6rem);
  line-height: 1.0;
  color: var(--color-fg);
  margin: 0;
}

.subheading[b-jc783tlzdu] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--color-fg-soft);
  margin: clamp(1.5rem, 3.5vh, 2.5rem) 0 0;
  max-width: 36ch;
  text-wrap: pretty;
}

/* ===================  RIGHT — frosted-glass accordion  =================== */

.right[b-jc783tlzdu] {
  flex: 1 1 50%;
  min-height: 0;
  position: relative;
  overflow: hidden;

  /* Frosted glass over the background photo. */
  background: rgba(0, 0, 0, 0.10);
  -webkit-backdrop-filter: blur(25px);
          backdrop-filter: blur(25px);
  /* Bright hairline divider between photo and glass (the vertical line
     in the reference). */
  border-left: 1px solid rgba(255, 255, 255, 0.20);
}

/* The row list — absolutely positioned and shifted via translateY (set
   inline from JS) so the active phase is centred in the panel. Left/right
   insets give the symmetric content padding; the glass still spans to the
   panel edges behind it. */
.track[b-jc783tlzdu] {
  position: absolute;
  top: 0;
  left: clamp(1.5rem, 3vw, 3.25rem);
  right: clamp(1.5rem, 3vw, 3.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.item[b-jc783tlzdu] {
  border: 1px solid rgba(255, 255, 255, 0.00);
}

/* Always-visible row — number + title (reset button). */
.row[b-jc783tlzdu] {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  width: 100%;
  cursor: pointer;
  text-align: left;
  color: inherit;

  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  column-gap: clamp(0.85rem, 1.6vw, 1.5rem);
  padding: clamp(1rem, 2.1vh, 1.6rem) 0;
}

/* Number colour is scrubbed text-3 → white by scroll (written inline). */
.number[b-jc783tlzdu] {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: var(--t-lead);
  line-height: 1;
  user-select: none;
  color: var(--color-d-text-3);
}

/* Title size (lead → h2) and colour (text-2 → text-1) are scrubbed by
   scroll, written inline from the live position — no CSS transition so it
   tracks the scroll 1:1 and holds wherever you stop between two rows. */
.title[b-jc783tlzdu] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-lead);
  line-height: 1.15;
  color: var(--color-d-text-2);
  will-change: font-size;
}

/* Expanded body — height is scrubbed inline from scroll; clipped on close. */
.body[b-jc783tlzdu] {
  overflow: hidden;
  height: 0;
}

/* Body content aligns flush under the title (past the number column),
   no extra indent now that the accent rule is gone. The three blocks
   (description / deliverables / image) are spaced by a single gap. */
.bodyInner[b-jc783tlzdu] {
  margin-left: calc(32px + clamp(0.85rem, 1.6vw, 1.5rem));
  padding: 0 0 clamp(1.5rem, 3vh, 2.25rem) 0;

  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 3vh, 2rem);

  /* Opacity is scrubbed by scroll alongside the height (written inline). */
  opacity: 0;
  will-change: opacity;
}

.bodyBlock[b-jc783tlzdu] {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 0.5vw, 1.2rem);
}

.description[b-jc783tlzdu] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.92rem, 0.85rem + 0.35vw, 1.1rem);
  line-height: 1.55;
  color: #ffffff;
  width: 70%;
  margin: 0;
}

.deliverableLabel[b-jc783tlzdu] {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-label);
  letter-spacing: 0;
  color: var(--color-d-text-1);
}

/* Deliverables — one bold, uppercase, comma-separated line. */
.deliverables[b-jc783tlzdu] {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: var(--color-d-text-1);
}

.bodyImg[b-jc783tlzdu] {
  display: block;
  width: 60%;
  max-height: 40vh;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Off-screen probe — only used to resolve --t-lead / --t-h2 to pixels for
   the scrubbed title-size interpolation. */
.probe[b-jc783tlzdu] {
  position: absolute;
  left: -9999px;
  top: 0;
  visibility: hidden;
  pointer-events: none;
  font-family: var(--font-display);
  white-space: nowrap;
}

/* ===================  RESPONSIVE  =================== */

@media (max-width: 1023px) and (min-width: 768px) {
  .left[b-jc783tlzdu] { flex-basis: 44%; }
  .right[b-jc783tlzdu] { flex-basis: 56%; }
}

/* Mobile — unpin and stack: heading over photo on top, glass accordion
   below. Drop the heavy blur for performance and keep the photo as a
   darker backdrop behind both. The inline track height is overridden so
   the section flows at its natural height. */
@media (max-width: 767px) {
  .section[b-jc783tlzdu] { height: auto !important; }
  .pin[b-jc783tlzdu] {
    position: relative;
    height: auto;
    display: block;
    padding: clamp(3rem, 8vh, 5rem) 0;
  }
  .wrapper[b-jc783tlzdu] { flex-direction: column; gap: clamp(2rem, 5vh, 3rem); }
  .left[b-jc783tlzdu] {
    flex: 1 1 auto;
    padding: 0 var(--pad-x);
    min-height: 40vh;
  }
  .leftContent[b-jc783tlzdu] { max-width: none; }
  .right[b-jc783tlzdu] {
    flex: 1 1 auto;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.10);
    -webkit-backdrop-filter: blur(25px);
            backdrop-filter: blur(25px);
  }
  /* Static, naturally-flowing accordion on mobile — no centring transform,
     and every phase shown open (the scrub JS bails out at this width). */
  .track[b-jc783tlzdu] {
    position: static;
    left: auto;
    right: auto;
    transform: none !important;
  }
  .body[b-jc783tlzdu] { height: auto !important; }
  .bodyInner[b-jc783tlzdu] { opacity: 1 !important; }
  .row[b-jc783tlzdu] { padding-left: clamp(1rem, 4vw, 1.5rem); padding-right: clamp(1rem, 4vw, 1.5rem); }
  .item[b-jc783tlzdu] { background-position: clamp(1rem, 4vw, 1.5rem) 0; background-size: calc(100% - 2 * clamp(1rem, 4vw, 1.5rem)) 1px; }
  .bodyInner[b-jc783tlzdu] {
    margin-left: clamp(1rem, 4vw, 1.5rem);
    margin-right: clamp(1rem, 4vw, 1.5rem);
  }
}

/* === 480 — mobile: scrim is heavier so text reads cleanly over the
       photo; in-body image goes full-width; heading hugs the gutter === */
@media (max-width: 480px) {
  .scrim[b-jc783tlzdu] {
    background:
      linear-gradient(
        180deg,
        rgba(5, 5, 5, 0.78) 0%,
        rgba(5, 5, 5, 0.48) 45%,
        rgba(5, 5, 5, 0.72) 100%
      );
  }
  .left[b-jc783tlzdu] {
    padding-top: clamp(2.5rem, 8vh, 4rem);
    min-height: 32vh;
  }
  .heading[b-jc783tlzdu] {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.05;
  }
  .subheading[b-jc783tlzdu] {
    font-size: clamp(0.95rem, 0.85rem + 0.6vw, 1.15rem);
    max-width: 36ch;
    margin-top: clamp(1rem, 3vh, 1.5rem);
  }
  .bodyImg[b-jc783tlzdu] {
    width: 100%;
    max-height: 32vh;
  }
  .row[b-jc783tlzdu] {
    padding: clamp(0.85rem, 2vh, 1.25rem) 0;
  }
}

@media (max-width: 360px) {
  .left[b-jc783tlzdu] {
    padding-inline: 1rem;
  }
  .heading[b-jc783tlzdu] {
    font-size: clamp(1.75rem, 9vw, 2.5rem);
  }
}
/* /Pages/Shared/Home/_ClientLogoGrid.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   ClientLogoGrid — two marquee rows of rectangular logo cards
   - Top row scrolls right → left
   - Bottom row scrolls left → right
   - No hover effects
   ------------------------------------------------------------------ */

.grid[b-75lubezowx] {
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 5vh, 4rem) 0;
}

/* Each row clips its content so the cards seamlessly recycle */
.viewport[b-75lubezowx] {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 6%,
    black 94%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 6%,
    black 94%,
    transparent 100%
  );
}

.track[b-75lubezowx] {
  display: flex;
  width: max-content;       /* tracks must size to content, not the viewport */
  will-change: transform;
}

/* Top row: slides left (content moves to the left) */
.trackLeft[b-75lubezowx] {
  animation: marquee-left-b-75lubezowx 40s linear infinite;
}

/* Bottom row: slides right (content moves to the right) */
.trackRight[b-75lubezowx] {
  animation: marquee-right-b-75lubezowx 40s linear infinite;
}

@keyframes marquee-left-b-75lubezowx {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marquee-right-b-75lubezowx {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .trackLeft[b-75lubezowx],
  .trackRight[b-75lubezowx] {
    animation: none;
  }
}

/* ===================  CARD  =================== */

.card[b-75lubezowx] {
  margin: 0.5rem 0.5rem;
  display: flex;
  width: 11.25rem;
  height: 11.25rem;
  padding: 1.32431rem 2.41213rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.473rem;
  flex-shrink: 0;

  background: linear-gradient(
    132deg,
    #111 2.71%,
    rgba(1, 1, 1, 0.00) 59.76%
  );
}

.logo[b-75lubezowx] {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ===================  RESPONSIVE  =================== */

@media (max-width: 720px) {
  .card[b-75lubezowx] {
    width: 8rem;
    height: 8rem;
    padding: 1rem 1.5rem;
  }
}

/* === 480 — mobile: smaller logo cards so more fit per screen-width
       and the marquee rhythm stays interesting === */
@media (max-width: 480px) {
  .card[b-75lubezowx] {
    width: 6rem;
    height: 6rem;
    padding: 0.75rem 1rem;
    margin: 0.35rem 0.35rem;
  }
}

@media (max-width: 360px) {
  .card[b-75lubezowx] {
    width: 5rem;
    height: 5rem;
    padding: 0.5rem 0.75rem;
  }
}
/* /Pages/Shared/Home/_Faqs.cshtml.rz.scp.css */
/* FAQs — "Questions we get asked." Dark band; heading left, accordion list right.
   Token-driven (no hard-coded themed colours). Native <details> accordion. */

/* Vertical/horizontal padding matched to the other home sections (Testimonials). */
.section[b-t47nu29f36] {
  position: relative;
  background: var(--color-bg);
  color: var(--color-fg);
  padding: clamp(6rem, 12vw, 11rem) clamp(1.25rem, 5vw, 5rem);
  overflow: hidden;
}

/* Two columns: heading (top-left) | list. Spans the full padded section width
   (no max-width cap) so the list runs to the right edge like the reference.
   Collapses to one column on tablet. */
.inner[b-t47nu29f36] {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}

/* ---- Heading — pinned top-left of its column ---- */
.heading[b-t47nu29f36] {
  align-self: start;
}

.title[b-t47nu29f36] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 110%;
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
  margin: 0;
  max-width: 14ch;
  text-align: left;
}

/* ---- Accordion list ---- */
.list[b-t47nu29f36] {
  display: flex;
  flex-direction: column;
  /* Lets the browser interpolate block-size to/from the `auto` keyword so the
     ::details-content open/close below can slide instead of snapping. */
  interpolate-size: allow-keywords;
}

/* Borders sit *between* rows only (none at the start or end). Each is a
   left-to-right fade — solid at the start, transparent by the right edge —
   drawn via border-image so the gradient renders on the top edge. */
.item[b-t47nu29f36] {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, #343435 0%, rgba(52, 52, 53, 0.00) 100%) 1;
}

.item:first-child[b-t47nu29f36] {
  border-top: 0;
}

/* ---- Summary (the always-visible question row) ---- */
.summary[b-t47nu29f36] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.5rem, 2.4vw, 2.1rem) 0;
  cursor: pointer;
  list-style: none;            /* hide the native disclosure triangle */
  user-select: none;
}

.summary[b-t47nu29f36]::-webkit-details-marker { display: none; }

/* When open, pull the answer up close to its question — trims the row's
   bottom padding so the gap between question and answer is tight. */
.item[open] .summary[b-t47nu29f36] {
  padding-bottom: 0.5rem;
}

.question[b-t47nu29f36] {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.35;
  color: var(--color-d-text-2);
  transition: color var(--dur-fast) var(--ease-out);
}

.summary:hover .question[b-t47nu29f36],
.item[open] .question[b-t47nu29f36] {
  color: var(--color-fg);
}

/* ---- +/× icon (pure CSS: two bars, the vertical one collapses on open) ---- */
.icon[b-t47nu29f36] {
  position: relative;
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
}

.icon[b-t47nu29f36]::before,
.icon[b-t47nu29f36]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-d-text-3);
  transition: transform var(--dur-base) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.icon[b-t47nu29f36]::before {                /* horizontal bar */
  width: 100%;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.icon[b-t47nu29f36]::after {                 /* vertical bar — collapses to form a minus when open */
  width: 1.5px;
  height: 100%;
  transform: translate(-50%, -50%);
}

.summary:hover .icon[b-t47nu29f36]::before,
.summary:hover .icon[b-t47nu29f36]::after,
.item[open] .icon[b-t47nu29f36]::before,
.item[open] .icon[b-t47nu29f36]::after {
  background: var(--color-fg);
}

.item[open] .icon[b-t47nu29f36]::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* ---- Answer body ----
   Open/close is animated in pure CSS — the browser-generated ::details-content
   box slides its block-size from 0 to auto (the `interpolate-size` on .list
   enables the keyword interpolation), with the copy fading and easing up at the
   same time. Smoother than driving height from JS; degrades to an instant native
   toggle where ::details-content / interpolate-size aren't supported. home.js now
   only enforces mutual exclusivity (open one → the rest close). */
.item[b-t47nu29f36]::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  content-visibility: hidden;
  transition: block-size 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.4s ease,
              content-visibility 0.45s allow-discrete;
}

.item[open][b-t47nu29f36]::details-content {
  block-size: auto;
  opacity: 1;
  content-visibility: visible;
}

.answer[b-t47nu29f36] {
  overflow: hidden;
  padding: 0 clamp(2rem, 4vw, 3.5rem) clamp(1.75rem, 2.6vw, 2.25rem) 0;
  /* Lift the copy slightly while closed; settles into place as the row opens. */
  transform: translateY(-8px);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.item[open] .answer[b-t47nu29f36] {
  transform: none;
}

.answer p[b-t47nu29f36] {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--color-white);     /* white answer copy */
  max-width: 60ch;
}

/* Honour reduced-motion: open/close instantly, no slide or fade. */
@media (prefers-reduced-motion: reduce) {
  .item[b-t47nu29f36]::details-content,
  .answer[b-t47nu29f36] {
    transition: none;
  }
}

/* ---- Responsive: stack heading above the list ---- */
@media (max-width: 860px) {
  .inner[b-t47nu29f36] {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 6vw, 3rem);
  }
  .heading[b-t47nu29f36] {
    position: static;
  }
  .title[b-t47nu29f36] {
    max-width: none;
  }
}
/* /Pages/Shared/Home/_Hero.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   Hero with natural-flow thumbnail morph
   - .wrap         : 200vh container (hero + imageSection stacked)
   - .hero         : 100vh, heading + subhead + microcopy
   - .imageSection : 100vh, holds .imageBox at its natural full size
   - .imageBox     : absolutely fills its section; transformed by JS
                     so it starts as a 1/3-width panel in the hero's
                     top-right, then grows + descends into its section
   Backgrounds are transparent — the PNG backdrop on main::before
   provides all the colour.
   ------------------------------------------------------------------ */

.wrap[b-97kf4s2pdh] {
  position: relative;
  width: 100%;
}

/* ===================  HERO (top 100vh)  =================== */

.hero[b-97kf4s2pdh] {
  position: relative;
  width: 100%;
  height: 100vh;
  isolation: isolate;
  overflow: visible;        /* image transforms up into here */
  background: transparent;
}

/* Hero-scoped vertical grid container — 4 hairlines at 20/40/60/80%.
   Sits at z-index 0 so it's BEHIND .content (z:2) and .meta (z:2). */
.bgGrid[b-97kf4s2pdh] {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;            /* clips any pulse that travels past the hero */
}

/* Individual line — base rgba(255,255,255,0.1) is always visible.
   A vertical bright-pulse gradient (peaks at rgba(255,255,255,0.3))
   is layered on top via background-image and travels top → bottom
   over 4 seconds. animation-delay staggers the four lines. */
.line[b-97kf4s2pdh] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-0.5px);   /* centre on the percentage */

  background-color: rgba(255, 255, 255, 0.1);
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  background-size: 100% 35vh;
  background-repeat: no-repeat;
  background-position: 0 -35vh;

  animation: scanPulse-b-97kf4s2pdh 4s ease-in-out infinite;
  will-change: background-position;
}

@keyframes scanPulse-b-97kf4s2pdh {
  0%   { background-position: 0 -35vh; }   /* pulse above viewport — invisible */
  100% { background-position: 0 100vh; }   /* pulse below viewport — invisible */
}

@media (prefers-reduced-motion: reduce) {
  .line[b-97kf4s2pdh] {
    animation: none;
    background-image: none;       /* drop the pulse for reduced-motion users */
  }
}

/* --- Left-aligned content (heading + subheading), positioned high in viewport --- */
/* NOTE (Phase 6.6): the source's `transform: translateY(-50%)` is DEAD in the
   live build — Motion writes an inline transform (translateY(0) at rest) that
   overrides it, so the source content is top-anchored at 25% (heading top
   ~270px, clearing the fixed logo). The verbatim copy reintroduced the rule as
   a LIVE declaration (GSAP, unlike Motion, doesn't zero it), centring the block
   on 25% and lifting the headline into the logo. We reproduce the source's
   rendered transform (translateY(0)) by top-anchoring — geometry now 1:1. */
.content[b-97kf4s2pdh] {
  position: absolute;
  top: 25%;
  left: var(--pad-x);
  right: var(--pad-x);
  z-index: 2;               /* above the morphing image */

  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vh, 2rem);
  max-width: 62%;           /* ~2/3 — leaves the right 1/3 for the image */
  text-align: left;

  pointer-events: none;
}
.content > *[b-97kf4s2pdh] { pointer-events: auto; }

.heading[b-97kf4s2pdh] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: 0.98;
  color: var(--color-fg);
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 15ch;
  margin: 0;
}

.italic[b-97kf4s2pdh] {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  /* 1.04em — relative bump retained on purpose so the italic word
     reads a touch larger than the rest of the heading. */
  font-size: 1.04em;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-fg-soft);
}

.subheading[b-97kf4s2pdh] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-fg-soft);
  max-width: 48ch;
  margin: 0;
  text-wrap: pretty;
}

/* Hero-specific subheading — a touch larger than the standard .subheading
   so it has more presence beneath the oversized H1. Layered on top of
   .subheading so responsive max-width rules still apply. */
.heroSubheading[b-97kf4s2pdh] {
  font-size: clamp(1.3rem, 2vw, 1.8rem);
}

/* --- Microtypography row: ©2026 · GURUGRAM · DESIGN STUDIO --- */
.meta[b-97kf4s2pdh] {
  position: absolute;
  bottom: var(--pad-x);
  left: var(--pad-x);
  right: var(--pad-x);
  z-index: 2;

  display: grid;
  grid-template-columns: minmax(80px, auto) minmax(160px, auto) 1fr;
  gap: clamp(2rem, 8vw, 7rem);
  align-items: baseline;

  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--color-white);
}

.meta span:last-child[b-97kf4s2pdh] {
  text-align: right;
  justify-self: end;
}

/* ===================  IMAGE SECTION (next 100vh)  =================== */

.imageSection[b-97kf4s2pdh] {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: visible;        /* allow .imageBox to transform up into hero */
  background: transparent;
}

/* The thumbnail wrapper — naturally fills the section, but the
   JS-driven transform pulls it up into the hero's top-right at
   scroll progress 0, then releases to identity by progress 0.5 */
.imageBox[b-97kf4s2pdh] {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  transform-origin: top right;
  will-change: transform;
  z-index: 1;
  /* NOTE: the clip (overflow/background/border-radius) lives on .imageTilt, not
     here — so it rotates WITH the panel during the pointer tilt and the box
     background can never show through the corners. */
}

/* Pointer-tilt layer — sits between .imageBox (morph) and the <img>, and owns
   the clip so the whole panel rectangle tilts as one solid plane. home.js
   rotates this around its centre while the thumbnail is still the small panel,
   fading to identity as the morph fills the screen. border-radius is animated
   here by the morph (12px → 0). */
.imageTilt[b-97kf4s2pdh] {
  width: 100%;
  height: 100%;
  overflow: hidden;            /* clip rotates WITH the panel — no corner gap */
  background: var(--color-bg);
  transform-origin: 50% 50%;
  will-change: transform, border-radius;
  backface-visibility: hidden;
}

.imageBox img[b-97kf4s2pdh] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ===================  RESPONSIVE  =================== */

/* === RESPONSIVE — only layout knobs (max-width, padding, position).
   Font-size is owned by the --t-* tokens (clamp() handles scaling). */

@media (max-width: 1440px) {
  .content[b-97kf4s2pdh] { max-width: 54%; }
  .heading[b-97kf4s2pdh] { max-width: 14ch; }
  .subheading[b-97kf4s2pdh] { max-width: 44ch; }
}

@media (max-width: 1280px) {
  .content[b-97kf4s2pdh] { max-width: 56%; }
  .heading[b-97kf4s2pdh] { max-width: 13ch; }
  .subheading[b-97kf4s2pdh] { max-width: 42ch; }
}

@media (max-width: 1024px) {
  .content[b-97kf4s2pdh] { max-width: 60%; top: 24%; }
  .heading[b-97kf4s2pdh] { max-width: 12ch; line-height: 1.0; }
  .subheading[b-97kf4s2pdh] { max-width: 38ch; line-height: 1.5; }
}

@media (max-width: 900px) {
  .content[b-97kf4s2pdh] { max-width: 72%; top: 22%; }
  .heading[b-97kf4s2pdh] { max-width: none; }
}

@media (max-width: 768px) {
  .content[b-97kf4s2pdh] { max-width: 88%; top: 20%; }
  .heading[b-97kf4s2pdh] { line-height: 1.0; }
  .subheading[b-97kf4s2pdh] { max-width: 36ch; }
}

@media (max-width: 600px) {
  .content[b-97kf4s2pdh] { max-width: 100%; top: 16%; }
  .subheading[b-97kf4s2pdh] { line-height: 1.5; }
  .meta[b-97kf4s2pdh] {
    grid-template-columns: 1fr 1fr;
    row-gap: 0.5rem;
    gap: 1rem;
  }
  .meta span:last-child[b-97kf4s2pdh] {
    grid-column: 1 / -1;
    text-align: left;
    justify-self: start;
  }
}

@media (max-width: 420px) {
  .content[b-97kf4s2pdh] { top: 13%; }
}
/* /Pages/Shared/Home/_OurJourney.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   OurJourney — stat section that sits between ImpactStats / TrustedClients
   block and GetInTouch.
   - Pure-black canvas with two corner PNG overlays providing the
     purple ambient glow on the left + right edges.
   - Headline left-aligned at top.
   - 4 horizontal stat cards: each has a top strip (number + label)
     and a media area below holding the supplied PNG.
   ------------------------------------------------------------------ */

/* Outer section is tall so the inner .sticky has scroll travel to
   drive the card reveal. ~300vh gives 200vh of post-pin scroll —
   enough room for three sequential card animations. */
.section[b-ho9yf3wgvn] {
  position: relative;
  height: 200vh;
  background: var(--color-bg);
  color: var(--color-fg);
}

/* Pins to the viewport for the full .section height. Acts as the
   visual stage on which the cards animate in.
   - justify-content: flex-start anchors title + cards near the top
     so there's plenty of vertical room BELOW for the down-state
     cards to render fully without being clipped by the 100vh bound. */
.sticky[b-ho9yf3wgvn] {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  padding:
    clamp(5rem, 12vh, 10rem)
    var(--pad-x)
    0;
}

/* === Ambient corner gradients (pinned inside .sticky) === */
.bg[b-ho9yf3wgvn] {
  position: absolute;
  top: 0;
  height: 100%;
  width: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.bgLeft[b-ho9yf3wgvn]  { left: 0; }
.bgRight[b-ho9yf3wgvn] { right: 0; }

/* === Inner stack — title + cards row === */
.inner[b-ho9yf3wgvn] {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 8vh, 8rem);
  max-width: 100%;
}

.title[b-ho9yf3wgvn] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 115%;
  color: var(--color-fg);
  margin: 0;
  max-width: 24ch;
  text-wrap: balance;
}

/* === Cards row === */
.cards[b-ho9yf3wgvn] {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.8rem, 1vw, 1.3rem);
  align-items: start;            /* each card takes its own natural height */
  /* No overflow clipping — cards translated to their "down" state
     render fully. The .sticky container caps anything past 100vh. */
}

.card[b-ho9yf3wgvn] {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
  overflow: hidden;
  will-change: transform, opacity;
}

/* Vertical hairline between cards removed — element kept hidden so
   the TSX render doesn't need to change. */
.hairline[b-ho9yf3wgvn] {
  display: none;
}

.cardHead[b-ho9yf3wgvn] {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 1.75rem);
  padding: clamp(0.2rem, 0.5vh, 0.4rem) clamp(1.3rem, 1.8vw, 1.8rem) clamp(0.5rem, 0.9vh, 0.7rem);
  background: #15151a;          /* slightly lighter strip vs card body */
}

.cardNumber[b-ho9yf3wgvn] {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h1);
  color: var(--color-fg);
  line-height: 115%;
  font-variant-numeric: tabular-nums;     /* keep width stable if values change */
}

/* Trimmed variant — a little smaller than the default --t-h1 card number
   so the numerals feel more refined alongside the card body. */
.cardNumberSm[b-ho9yf3wgvn] {
  font-family: var(--font-italic-display);   /* IvyPresto serif numerals */
  font-size: clamp(1.75rem, 0.75rem + 4vw, 5rem);
}

/* The trailing "+" stays in the Instrument Sans body face,
   not the IvyPresto serif used for the numerals. */
.cardPlus[b-ho9yf3wgvn] {
  font-family: var(--font-display);
  margin-left: 4px;
}

.cardLabel[b-ho9yf3wgvn] {
  flex: 1;
  min-width: 0;                 /* let it wrap to 2 lines when narrow */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--color-fg);
  text-wrap: balance;
  margin-top: 12px;
}

/* === Card media — PNG fills the card width at its natural aspect ===
   No fixed aspect-ratio: the card height adapts to whatever the image
   needs so nothing is cropped. */
.cardMedia[b-ho9yf3wgvn] {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.cardMedia img[b-ho9yf3wgvn] {
  width: 100%;
  height: auto;                /* natural height for the given width */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ===================  RESPONSIVE  =================== */

@media (max-width: 1024px) {
  .cards[b-ho9yf3wgvn] {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* === 768 — tablet portrait: cards still 2-col but tighter; corner
       glow PNGs scale down so they don't push content off-canvas === */
@media (max-width: 768px) {
  .cards[b-ho9yf3wgvn] {
    gap: clamp(0.75rem, 2vw, 1.25rem);
  }
  .bg[b-ho9yf3wgvn] {
    width: auto;
    max-width: 40%;
    opacity: 0.55;
  }
  .cardHead[b-ho9yf3wgvn] {
    padding: clamp(1rem, 2vh, 1.4rem) clamp(1rem, 2vw, 1.4rem);
  }
}

@media (max-width: 600px) {
  /* On phones the cards stack vertically. The sticky-scroll reveal
     still works (each card slides in from below its row), but if the
     content is taller than the viewport the .sticky pin would crop
     it — so relax sticky to a normal block on small screens. */
  .section[b-ho9yf3wgvn] {
    height: auto;
  }
  .sticky[b-ho9yf3wgvn] {
    position: static;
    height: auto;
    overflow: visible;
  }
  .cards[b-ho9yf3wgvn] {
    grid-template-columns: 1fr;
  }
}

/* === 480 — small phone: corner glows pull off-canvas, title max-width
       unlocks, card head spacing tightens. Number + label sit cleanly
       inside the single-column card. === */
@media (max-width: 480px) {
  .sticky[b-ho9yf3wgvn] {
    padding-top: clamp(3.5rem, 8vh, 5rem);
  }
  .inner[b-ho9yf3wgvn] {
    gap: clamp(3rem, 8vh, 5rem);
  }
  .title[b-ho9yf3wgvn] {
    max-width: none;
  }
  .bg[b-ho9yf3wgvn] {
    max-width: 50%;
    opacity: 0.42;
  }
  .cardHead[b-ho9yf3wgvn] {
    gap: clamp(0.75rem, 3vw, 1.25rem);
    padding: 1rem;
  }
  .cardNumber[b-ho9yf3wgvn] {
    font-size: clamp(2.25rem, 10vw, 3.5rem);
  }
}

@media (max-width: 360px) {
  .bg[b-ho9yf3wgvn] {
    display: none;
  }
}

/* === SHORT-VIEWPORT LAPTOPS (wide but limited height) =================
   On short screens the cards overflow the 100vh sticky fold and clip at
   the bottom. The heading font is intentionally left UNCHANGED — instead
   we compress the surrounding vertical rhythm (top padding, gap, card-head
   padding) and cap the card media to a viewport-relative height with
   object-fit: contain, which scales the artwork down to fit WITHOUT
   cropping. Scoped to >1024px (the 4-column layout); phones/tablets adapt
   via their own width breakpoints, and tall screens keep the full design. */
@media (min-width: 1025px) and (max-height: 940px) {
  .sticky[b-ho9yf3wgvn] {
    padding-top: clamp(2.5rem, 7vh, 6rem);
  }
  .cardMedia[b-ho9yf3wgvn] {
    height: 32vh;
  }
  .cardMedia img[b-ho9yf3wgvn] {
    height: 100%;
    object-fit: contain;
  }
}
/* /Pages/Shared/Home/_ProjectGallery.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   ProjectGallery — uniform 3×3 grid of image tiles
   - All 9 tiles same width and height
   - Full-bleed across the page
   - Bottom edge fades to cream so it merges into TrustedClients
   ------------------------------------------------------------------ */

.section[b-ormybt7skw] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #ffffff;

  /* Full-bleed: no horizontal padding so the grid covers the whole page */
  padding:
    clamp(2rem, 8vh, 6rem)
    0
    clamp(6rem, 12vh, 12rem);
  padding-bottom: 0px;
}

/* Bottom fade — pulls the surface down to cream so the next section
   (TrustedClients banner) joins with no visible step. */
.section[b-ormybt7skw]::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 25%;
  /* Stronger fade: transparent at top → cream midway → fully opaque
     white from 70% down so the bottom band is solid #FFFFFF. */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(250, 243, 230, 0.4) 30%,
    rgba(255, 255, 255, 0.85) 55%,
    #ffffff 70%,
    #ffffff 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* ===================  3×3 GRID  =================== */

.grid[b-ormybt7skw] {
  position: relative;
  z-index: 1;
  width: 100%;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.8rem, 1vw, 1.3rem);
  padding-inline: clamp(1rem, 2vw, 2rem);

  /* Scroll-driven scale (1.5× → 1×) is applied via motion in TSX */
  transform-origin: center center;
  will-change: transform;
}

/* ===================  TILES  =================== */

.tile[b-ormybt7skw] {
  position: relative;
  width: 100%;
  aspect-ratio: 12 / 8;         /* 3:2 landscape — uniform width and height */
  overflow: hidden;
  background: var(--color-cream-deep);
  /* Native pointer hidden — replaced by the rich <HoverCursor> with video */
  cursor: none;
}

.tile *[b-ormybt7skw] {
  cursor: none;
}

/* Touch / no-hover devices — restore native cursor */
@media (hover: none), (pointer: coarse) {
  .tile[b-ormybt7skw], .tile *[b-ormybt7skw] { cursor: auto; }
}

.tile img[b-ormybt7skw] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ===================  RESPONSIVE  =================== */

@media (max-width: 900px) {
  .grid[b-ormybt7skw] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .grid[b-ormybt7skw] {
    grid-template-columns: 1fr;
  }
}
/* /Pages/Shared/Home/_SelectedWorks.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   SelectedWorks — the full section
   - Banner: transparent. The PNG backdrop on main::before provides
             the visual; the banner just hosts the wordmark + TOC
             pushed to its bottom.
   - Rows: light cream background with project entries
   ------------------------------------------------------------------ */

.section[b-pnnvm8cm17] {
  background: transparent;       /* let main::before PNG show through banner */
  color: var(--color-ink);
  position: relative;
}

/* ===================  BANNER  =================== */

.banner[b-pnnvm8cm17] {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;     /* push wordmark + toc to bottom */

  /* Sensible fluid height that scales from 38vh on phones up to ~58vh
     on full desktops so the wordmark always has comfortable breathing
     above and the TOC has room below. */
  min-height: clamp(38vh, 12vw + 28vh, 58vh);
  padding-bottom: clamp(1rem, 1.5vh, 1.5rem);

  background: #ffffff;
}

/* "Selected Works" heading — shared size with every other H2 on the page. */
.title[b-pnnvm8cm17] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 115%;
  color: var(--color-ink);
  text-align: center;
  white-space: nowrap;
  user-select: none;
  padding-inline: var(--pad-x);
  margin: 0;
}

/* Very narrow screens: allow the wordmark to wrap so it never
   horizontally overflows. */
@media (max-width: 380px) {
  .title[b-pnnvm8cm17] { white-space: normal; }
}

/* Index strip beneath the wordmark — evenly distributed project names */
.toc[b-pnnvm8cm17] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 2vh, 1.75rem) var(--pad-x) 0;
}

.tocItem[b-pnnvm8cm17] {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink);
  opacity: 0.85;
}

/* ===================  ROWS  =================== */

.rows[b-pnnvm8cm17] {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  background: #ffffff;
  padding: clamp(1rem, 2.5vw, 2.5rem) 0 clamp(2.5rem, 5vw, 5rem);

  /* 3D stage for the per-row spherical scroll tilt — see
     useSphericalScroll. A shared vanishing point lets every row read
     as part of the same imaginary cylinder. */
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

/* Hide native cursor only on the left image stage — replaced by
   <HoverCursor>. Everything else in the row keeps its native cursor
   (text caret, button pointer, etc.). */
.rows [data-hover-target][b-pnnvm8cm17],
.rows [data-hover-target] *[b-pnnvm8cm17] {
  cursor: none;
}

/* === 1024 — tighter banner === */
@media (max-width: 1024px) {
  .banner[b-pnnvm8cm17] {
    min-height: clamp(42vh, 50vh, 56vh);
  }
  .toc[b-pnnvm8cm17] {
    padding-top: clamp(1rem, 1.75vh, 1.5rem);
  }
  .rows[b-pnnvm8cm17] {
    padding: clamp(0.75rem, 2vw, 2rem) 0 clamp(2rem, 4vw, 4rem);
  }
}

/* === 900 — labels can wrap, native cursor restored === */
@media (max-width: 900px) {
  .banner[b-pnnvm8cm17] { min-height: clamp(38vh, 46vh, 52vh); }
  .toc[b-pnnvm8cm17] {
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    justify-content: flex-start;
  }
  /* HoverCursor isn't useful without a pointer device — restore native */
  .rows [data-hover-target][b-pnnvm8cm17],
  .rows [data-hover-target] *[b-pnnvm8cm17] {
    cursor: auto;
  }
}

/* === 768 — tablet, balanced banner === */
@media (max-width: 768px) {
  .banner[b-pnnvm8cm17] { min-height: 38vh; }
  .toc[b-pnnvm8cm17] {
    gap: 0.4rem 1rem;
    padding-top: 1rem;
  }
  .rows[b-pnnvm8cm17] { padding: 0.75rem 0 2rem; }
}

/* === 480 — small phone === */
@media (max-width: 480px) {
  .banner[b-pnnvm8cm17] { min-height: 30vh; }
}
/* /Pages/Shared/Home/_Testimonials.cshtml.rz.scp.css */
/* Testimonials — "What clients say". Dark band; staggered polaroid cards.
   Verbatim-token styling (no hard-coded themed colours). */

.section[b-f8ve30sayf] {
  position: relative;
  background: var(--color-bg);
  color: var(--color-fg);
  padding: clamp(6rem, 12vw, 11rem) clamp(1.25rem, 5vw, 5rem);
  overflow: hidden;
}

/* ---- Banner ---- */
.banner[b-f8ve30sayf] {
  max-width: 60rem;
  margin: 0 auto clamp(3rem, 7vw, 6rem);
  text-align: center;
}

/* Standard section heading — matches Selected Works / Trusted Clients / Our Journey. */
.title[b-f8ve30sayf] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 115%;
  color: var(--color-fg);
  margin: 0;
}

/* ---- Grid: 3 on top, 2 centered on the bottom ----
   Six tracks so each card can span two: the top row fills 1-2 / 3-4 / 5-6, and
   the 4th card is pushed to start at column 2 so the bottom pair (cards 4 & 5)
   sits centred under the three above. */
.grid[b-f8ve30sayf] {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 72rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(3.5rem, 7vw, 6rem) clamp(3.5rem, 6vw, 6.5rem);
  align-items: start;
  justify-items: center;
}

.grid > .card[b-f8ve30sayf] {
  grid-column: span 2;
}

/* First card of the bottom row starts one track in → centres the trailing pair. */
.grid > .card:nth-child(4)[b-f8ve30sayf] {
  grid-column: 2 / span 2;
}

/* Drop the middle top card so the row reads as "pinned/scattered", not gridded. */
.grid > .card:nth-child(2)[b-f8ve30sayf] {
  margin-top: clamp(2rem, 5vw, 4rem);
}

/* ---- Card ---- */
.card[b-f8ve30sayf] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

/* ---- Polaroid ---- */
.polaroid[b-f8ve30sayf] {
  margin: 0;
  background: #ffffff;
  padding: 0.75rem 0.75rem 1.1rem;
  border-radius: 2px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  width: min(15rem, 70vw);
}

.card:nth-child(4n + 1) .polaroid[b-f8ve30sayf] { rotate: -3deg; }
.card:nth-child(4n + 2) .polaroid[b-f8ve30sayf] { rotate: 2.5deg; }
.card:nth-child(4n + 3) .polaroid[b-f8ve30sayf] { rotate: 2deg; }
.card:nth-child(4n + 4) .polaroid[b-f8ve30sayf] { rotate: -2.5deg; }

.photo[b-f8ve30sayf] {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #ece7e1;
}

.photo img[b-f8ve30sayf] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.frameCaption[b-f8ve30sayf] {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.65rem 0.25rem 0.25rem;
  color: #14121a;
}

.frameCaption .name[b-f8ve30sayf] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0;
}

.frameCaption .role[b-f8ve30sayf] {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.78rem;
  color: rgba(20, 18, 26, 0.6);
}

/* ---- Company logo / fallback ---- */
.logo[b-f8ve30sayf] {
  height: 2.5rem;
  width: auto;
  max-width: 9rem;
  object-fit: contain;
  opacity: 0.9;
}

/* The Parliament of India mark ships as black line-art; invert it so it reads
   as white on the dark band (the other logos are already light). */
.logo[src*="parliament"][b-f8ve30sayf] {
  filter: invert(1);
  opacity: 0.85;
}

.logoText[b-f8ve30sayf] {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  font-variant: small-caps;
  color: var(--color-fg-mute);
}

/* ---- Quote ---- */
.quote[b-f8ve30sayf] {
  margin: 0;
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  line-height: 1.55;
  color: var(--color-fg);
  max-width: 32ch;
}

.quote[b-f8ve30sayf]::before { content: "\201C"; }
.quote[b-f8ve30sayf]::after  { content: "\201D"; }

/* ---- Responsive ---- */

/* Tablet: drop to 2 columns; cards flow naturally, no span/offset tricks. */
@media (max-width: 900px) {
  .grid[b-f8ve30sayf] {
    grid-template-columns: repeat(2, 1fr);
    max-width: 46rem;
    gap: clamp(3.5rem, 7vw, 5.5rem) clamp(3rem, 6vw, 6rem);
  }
  .grid > .card[b-f8ve30sayf],
  .grid > .card:nth-child(4)[b-f8ve30sayf] { grid-column: auto; }
  .grid > .card:nth-child(2)[b-f8ve30sayf] { margin-top: 0; }
}

/* Mobile: single column, no tilt/offset. */
@media (max-width: 640px) {
  .grid[b-f8ve30sayf] {
    grid-template-columns: 1fr;
    gap: clamp(3rem, 10vw, 4.5rem);
    max-width: 22rem;
  }
  .card:nth-child(4n + 1) .polaroid[b-f8ve30sayf],
  .card:nth-child(4n + 2) .polaroid[b-f8ve30sayf],
  .card:nth-child(4n + 3) .polaroid[b-f8ve30sayf],
  .card:nth-child(4n + 4) .polaroid[b-f8ve30sayf] { rotate: 0deg; }
}
/* /Pages/Shared/Home/_TrustedClients.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   TrustedClients — independent palette
   ----------------------------------------------------------------
   Edit the variables in `.section` to recolour the entire block.
   The rest of the file references these tokens so you should not
   need to touch the individual rules.
   ------------------------------------------------------------------ */

.section[b-ywalo81nag] {
  /* Wordmark + label colour tokens. Background variables are no longer
     used — the banner paints its own solid colour and .rows inherits
     from the banner below it. */
  --tc-title-top:    #ffffff;
  --tc-title-mid:    #ffffff;
  --tc-title-bottom: #ffffff;
  --tc-title-shadow: #3c028d34;

  --tc-label-ink: var(--color-fg);

  position: relative;
  color: var(--color-fg);
}

/* ===================  BANNER  =================== */

.banner[b-ywalo81nag] {
  position: relative;
  isolation: isolate;
  /* Fluid vertical padding — top scales from ~5rem on phones to 11rem
     on full desktop instead of the previous fixed 11rem-with-!important.
     That made the banner an ocean of empty space on mobile. */
  padding:
    clamp(5rem, 12vh, 11rem)
    var(--pad-x)
    clamp(1.5rem, 3vh, 3rem);
  text-align: center;
  overflow: hidden;
  background: #050505;
}

/* Imported SVG gradient — manually sized + positioned.
   Adjust width / height / top / left / transform to taste. */
.gradient[b-ywalo81nag] {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Blurred warm halo sitting behind the wordmark */
.halo[b-ywalo81nag] {
  position: absolute;
  inset: 5% -10% -25% -10%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55% 60% at 50% 60%,
    var(--tc-halo-core) 0%,
    var(--tc-halo-soft) 35%,
    rgba(255, 138, 80, 0) 72%
  );
  filter: blur(48px);
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* "Trusted Clients" heading — shared size with every other H2 on the page. */
.title[b-ywalo81nag] {
  position: relative;
  z-index: 1;

  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 115%;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  margin: 0;

  background-image: linear-gradient(
    to bottom,
    var(--tc-title-top)    0%,
    var(--tc-title-top)    38%,
    var(--tc-title-mid)    62%,
    var(--tc-title-bottom) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  /* drop-shadow removed */
}

/* The label index row beneath the wordmark */
.labels[b-ywalo81nag] {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.25rem, 2.5vh, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem clamp(1rem, 3vw, 2.5rem);
}

.label[b-ywalo81nag] {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--tc-label-ink);
  opacity: 0.9;
  white-space: nowrap;
}

/* ===================  ROWS  =================== */

.rows[b-ywalo81nag] {
  position: relative;
  background: var(--tc-rows-bg);
  padding-bottom: clamp(4rem, 8vh, 6rem);
}

/* === 1024 — small laptop / tablet landscape: title can wrap if needed === */
@media (max-width: 1024px) {
  .title[b-ywalo81nag] {
    white-space: normal;
    text-wrap: balance;
  }
}

/* On narrow screens the label strip wraps centred */
@media (max-width: 720px) {
  .labels[b-ywalo81nag] {
    justify-content: center;
    text-align: center;
  }
}

/* === 480 — mobile: banner pulls in horizontally, halo softens === */
@media (max-width: 480px) {
  .banner[b-ywalo81nag] {
    padding-top: clamp(4rem, 10vh, 6rem);
  }
  .labels[b-ywalo81nag] {
    gap: 0.4rem 1rem;
  }
  .label[b-ywalo81nag] {
    font-size: 0.62rem;
  }
  .halo[b-ywalo81nag] {
    inset: 10% -15% -20% -15%;
    opacity: 0.6;
  }
}
/* /Pages/Shared/Home/_WorkRow.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   WorkRow — case-study card
   [ staged visual ]   [ header / desc / meta-footer ]
   ------------------------------------------------------------------ */

.row[b-wd7hjld4p3] {
  display: grid;
  /* minmax(0, 1fr) — stops a wide stage or long URL from blowing its
     grid track wider than its share. Without this, an oversized child
     can push the column out and visually creep into its neighbour. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.25rem, 4vw, 4.5rem);
  padding: 0 var(--pad-x);
  align-items: stretch;
}

/* ===================  STAGE (left) — image-only  =================== */

.stage[b-wd7hjld4p3] {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-cream-deep);
  overflow: hidden;              /* clips the zoomed image inside the stage */
  isolation: isolate;
  min-width: 0;                  /* lets the stage shrink with its grid track */
  max-width: 100%;               /* never wider than its column */

  /* JS (useLusionCardReveal) animates clip-path inset on scroll.
     Will-change keeps the compositor on the fast path. */
  will-change: clip-path;
}

/* Project screenshot — fills the stage entirely.
   Transform is owned by GSAP hooks (useLusionCardReveal for the
   one-shot reveal, useLusionImageZoom for the hover zoom). No CSS
   transition here so it doesn't fight GSAP's per-frame tweens. */
.deviceImage[b-wd7hjld4p3] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

/* ===================  INFO (right)  =================== */

.info[b-wd7hjld4p3] {
  display: flex;
  flex-direction: column;
  gap: clamp(0.875rem, 1.5vw, 1.25rem);
  padding-top: 0.25rem;
  min-width: 0;                 /* allow long children to shrink, not overflow the grid track */
  position: relative;
  z-index: 1;                   /* sit above any visual bleed from the 3D-transformed stage */
}

.head[b-wd7hjld4p3] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  min-width: 0;
}

.identity[b-wd7hjld4p3] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 1.75vw, 1.5rem);
  min-width: 0;                 /* lets .name wrap instead of overflowing on narrow widths */
}

.logo[b-wd7hjld4p3] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Fluid logo — 3.25rem on small screens up to 5rem on full desktop */
  width: clamp(3.25rem, 4.5vw, 5rem);
  height: clamp(3.25rem, 4.5vw, 5rem);
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
}

.logo img[b-wd7hjld4p3] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.name[b-wd7hjld4p3] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  color: var(--color-ink);
  line-height: 115%;
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.number[b-wd7hjld4p3] {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-body);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-mute);
  flex-shrink: 0;
  padding-top: 0.45rem;
}

.description[b-wd7hjld4p3] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--color-text-1);
  max-width: 50ch;
}

/* ===================  META FOOTER (right, bottom)  ===================
   Top row = three equal columns (Live Site / Industry / Published).
   Below = a single full-width metaPair for the comma-joined
   Deliverables. Label + value pairs share the same vertical-gap
   styling so the rhythm reads consistently across the footer. */

.meta[b-wd7hjld4p3] {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  padding-top: clamp(2rem, 3.5vw, 3rem);
}

.metaRow[b-wd7hjld4p3] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem clamp(1rem, 1.75vw, 2rem);
}

.metaPair[b-wd7hjld4p3] {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 0.5vw, 1.2rem);
}

.metaLabel[b-wd7hjld4p3] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-label);
  letter-spacing: 0;
  color: var(--color-ink-mute);
  text-transform: none;
}

.metaValue[b-wd7hjld4p3],
.metaLink[b-wd7hjld4p3],
.deliverablesText[b-wd7hjld4p3] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-body);
  letter-spacing: 0.06em;
  color: var(--color-ink);
  text-transform: uppercase;
  overflow-wrap: anywhere;       /* deliverables list can wrap mid-word if needed on narrow widths */
}

.metaLink[b-wd7hjld4p3] {
  width: fit-content;
  max-width: 100%;
  position: relative;
  overflow-wrap: anywhere;       /* long URLs/domains break cleanly instead of overflowing */
  transition: color var(--dur-fast) var(--ease-out);
}
.metaLink[b-wd7hjld4p3]::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.metaLink:hover[b-wd7hjld4p3]::after { transform: scaleX(1); }

/* ===================  RESPONSIVE  =================== */

/* === 1440 — keep 2-col, tighten padding + gap ===
   No font-size overrides — the --t-* tokens already clamp() across
   widths so type re-sizes itself without per-breakpoint help. */
@media (max-width: 1440px) {
  .row[b-wd7hjld4p3] {
    padding: clamp(2rem, 3.5vw, 3.25rem) var(--pad-x);
    gap: clamp(2rem, 3.5vw, 3rem);
  }
}

/* === 1024 — STILL 2-col 50/50, tighter spacing === */
@media (max-width: 1024px) {
  .row[b-wd7hjld4p3] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: clamp(1.5rem, 3vw, 2.5rem) var(--pad-x);
    gap: clamp(1.5rem, 2.75vw, 2rem);
  }
  .stage[b-wd7hjld4p3] { aspect-ratio: 16 / 11; }
  .description[b-wd7hjld4p3] { max-width: 44ch; }
  .info[b-wd7hjld4p3] { gap: clamp(0.75rem, 1.25vw, 1rem); }
  .identity[b-wd7hjld4p3] { gap: 0.875rem; }
  .meta[b-wd7hjld4p3] {
    padding-top: clamp(1.5rem, 2.75vw, 2.25rem);
    gap: clamp(1.25rem, 2vw, 1.75rem);
  }
}

/* === 900 — stack stage above info === */
@media (max-width: 900px) {
  .row[b-wd7hjld4p3] {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2rem);
    padding: clamp(1.75rem, 3.5vw, 2.75rem) var(--pad-x);
  }
  .stage[b-wd7hjld4p3] { aspect-ratio: 16 / 9; }
  .info[b-wd7hjld4p3] { gap: 1rem; }
  .identity[b-wd7hjld4p3] { flex-direction: row; align-items: center; gap: 0.875rem; }
  .meta[b-wd7hjld4p3] {
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
  }
}

/* === 768 — tablet, comfortable single-column === */
@media (max-width: 768px) {
  .row[b-wd7hjld4p3] {
    padding: 2rem var(--pad-x);
    gap: 1.5rem;
  }
  .head[b-wd7hjld4p3] { gap: 0.75rem; }
  .identity[b-wd7hjld4p3] { gap: 0.75rem; }
  .logo[b-wd7hjld4p3] {
    width: 3rem;
    height: 3rem;
  }
  .description[b-wd7hjld4p3] {
    line-height: 1.55;
    max-width: none;
  }
  .meta[b-wd7hjld4p3] {
    gap: 1.25rem;
    padding-top: 1.5rem;
  }
  .metaRow[b-wd7hjld4p3] {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1rem;
  }
}

/* === 480 — small phone === */
@media (max-width: 480px) {
  .row[b-wd7hjld4p3] {
    padding: 1.75rem var(--pad-x);
    gap: 1.25rem;
  }
  .logo[b-wd7hjld4p3] { width: 2.75rem; height: 2.75rem; }
  .meta[b-wd7hjld4p3] { gap: 1.25rem; }
  .metaRow[b-wd7hjld4p3] { grid-template-columns: 1fr; }
}
/* /Pages/Shared/Services/_ServicesHero.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   ServicesHero — dedicated top section for the /services route.
   Independent from <HeroOversized> (home) and any generic page hero
   so its layout / motion / typography can evolve on its own.
   - 70vh tall, content bottom-anchored, horizontally centred.
   - 4-line scanning grid (4s pulse, staggered).
   - Pointer-driven tilt + grid parallax (no scroll fade — effect
     stays active the whole time the hero is on screen).
   ------------------------------------------------------------------ */

.hero[b-nx4dv8rwch] {
  position: relative;
  width: 100%;
  height: 70vh;
  isolation: isolate;
  overflow: hidden;
  background: transparent;

  /* Top-anchor .content (align-items: flex-start), horizontally centred;
     .content's viewport-height-relative margin-top drops it down the hero.
     The .bottomFade gradient sits BEHIND the text (lower z-index).
     .bgGrid is position:absolute so it's out of flow and ignored by the
     flex layout — sits behind everything as intended. */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--pad-x);
}

/* ===================  SCANNING GRID  =================== */

.bgGrid[b-nx4dv8rwch] {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Individual line — base hairline always visible; a vertical bright-pulse
   gradient travels top→bottom over 4s. animation-delay staggers the four
   lines so the pulse cascades across the screen. */
.line[b-nx4dv8rwch] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-0.5px);

  background-color: rgba(255, 255, 255, 0.1);
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  background-size: 100% 35vh;
  background-repeat: no-repeat;
  background-position: 0 -35vh;

  animation: scanPulse-b-nx4dv8rwch 4s ease-in-out infinite;
  will-change: background-position;
}

@keyframes scanPulse-b-nx4dv8rwch {
  0%   { background-position: 0 -35vh; }
  100% { background-position: 0 100vh; }
}

@media (prefers-reduced-motion: reduce) {
  .line[b-nx4dv8rwch] {
    animation: none;
    background-image: none;
  }
}

/* ===================  CONTENT  =================== */

.content[b-nx4dv8rwch] {
  /* Viewport-height-relative drop from the top of the hero — scales with
     screen height, capped at 16rem on tall screens. */
  margin-top: clamp(10rem, 24vh, 18rem);
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 2.5vh, 2rem);
  width: 100%;
  max-width: 62%;
  text-align: center;
}

.heading[b-nx4dv8rwch] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: 0.98;
  color: var(--color-fg);
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 15ch;
  margin: 0;
}

.subheading[b-nx4dv8rwch] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.45;
  color: var(--color-fg-soft);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}

/* ===================  BOTTOM FADE  =================== */

/* Dark gradient strip blending the hero's bottom edge into the section
   below. Layered BEHIND .content (z-index 1, content is z-index 2) so the
   bottom-anchored text reads over it; decorative + non-interactive so it
   never blocks the pointer-tilt. Full-bleed via left/right:0 rather than
   the source's fixed 109.9375rem, so it spans every viewport without a
   gap or clip. */
.bottomFade[b-nx4dv8rwch] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12.5625rem;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, #050505 0%, rgba(5, 5, 5, 0.00) 100%);
}

/* ===================  RESPONSIVE  =================== */

@media (max-width: 1440px) {
  .content[b-nx4dv8rwch] { max-width: 64%; }
  .heading[b-nx4dv8rwch] { max-width: 14ch; }
}

@media (max-width: 1280px) {
  .content[b-nx4dv8rwch] { max-width: 70%; }
  .heading[b-nx4dv8rwch] { max-width: 13ch; }
}

@media (max-width: 1024px) {
  .content[b-nx4dv8rwch] { max-width: 78%; }
  .heading[b-nx4dv8rwch] { max-width: 12ch; line-height: 1.0; }
  .subheading[b-nx4dv8rwch] { line-height: 1.5; }
}

@media (max-width: 900px) {
  .content[b-nx4dv8rwch] { max-width: 88%; }
  .heading[b-nx4dv8rwch] { max-width: none; }
}

@media (max-width: 768px) {
  .content[b-nx4dv8rwch] { max-width: 100%; }
}

/* @media (max-width: 600px) — letter-spacing override removed
   as part of the project-wide "no letter-spacing on headings" rule.
   Kept as a comment hook for future overrides. */
/* /Pages/Shared/Services/_ServicesList.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   ServicesList — scroll-pinned split section.

   LEFT  (sticky, vertically centered)  — heading + body text that
                                          swaps per chapter.
   RIGHT (stacked chapters, 100vh each) — one image per chapter,
                                          drives the chapter index via
                                          GSAP ScrollTrigger.
   At ≤ 767px the layout stacks vertically and pinning is disabled.
   ------------------------------------------------------------------ */

.section[b-c8oknbe5mv] {
  position: relative;
  background: var(--color-bg);
  color: var(--color-fg);
  padding:
    clamp(4rem, 10vh, 8rem)
    var(--pad-x);
}

/* Accessibility-only heading (visually hidden, exposed to AT) */
.srOnly[b-c8oknbe5mv] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Two-column wrapper. Each column is a flex item at 50/50 desktop;
   mobile collapses to a single stacked column. */
.wrapper[b-c8oknbe5mv] {
  display: flex;
  align-items: flex-start;
}

/* ===================  LEFT — sticky text panel  =================== */

.left[b-c8oknbe5mv] {
  flex: 0 0 50%;
  position: sticky;
  /* Offset matches the TopNav height so the panel sits just below the
     header instead of behind it. Same clamp() the nav uses. */
  top: clamp(3rem, 6vh, 6rem);
  /* Calc viewport height minus the offset so the sticky pin spans the
     visible space below the nav. */
  height: calc(100vh - clamp(3rem, 6vh, 6rem));

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  padding-top: 6vh;

  /* Clip the sliding content so each chapter slides cleanly in/out of
     the visible panel instead of overflowing. */
  overflow: hidden;
}

/* Inner panel — AnimatePresence swaps this whole block per chapter. */
.leftInner[b-c8oknbe5mv] {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vh, 1.5rem);
  width: 100%;
}

/* ===================  RIGHT — stacked chapter blocks  =================== */

.right[b-c8oknbe5mv] {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
}

.chapter[b-c8oknbe5mv] {
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: clamp(4.5rem, 6vh, 7rem) 0;
}

/* Two-image grid per chapter — second tile drops down for the
   brick-pattern stagger seen in the source design. */
.chapterMedia[b-c8oknbe5mv] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1rem, 1.8vw, 1.75rem);
  align-items: start;
  width: 100%;
}

.chapterMedia img[b-c8oknbe5mv] {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.chapterMedia img:nth-child(2)[b-c8oknbe5mv] {
  margin-top: clamp(2rem, 6vh, 5rem);
}

/* ===================  LEFT CONTENT TYPOGRAPHY  =================== */

.number[b-c8oknbe5mv] {
  font-family: var(--font-italic-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(4rem, 1.5rem + 6vw, 9rem);
  line-height: 115%;
  margin: 0 0 -0.2em;
  user-select: none;

  background: linear-gradient(
    181deg,
    #6200EE 0.61%,
    rgba(98, 0, 238, 0.00) 101.02%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.title[b-c8oknbe5mv] {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 0.8rem + 4vw, 5.5rem);
  line-height: 115%;
  color: var(--color-fg);
  margin: 0;
}

.tagline[b-c8oknbe5mv] {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  margin: 0.85rem 0 0;
  padding-bottom: clamp(1.25rem, 2.5vh, 1.75rem);

  background-image: linear-gradient(90deg, #343435 0%, rgba(52, 52, 53, 0.00) 100%);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}

.bullets[b-c8oknbe5mv] {
  list-style: none;
  padding: 0;
  margin: clamp(1.5rem, 3vh, 2.25rem) 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.65rem, 1.2vh, 1rem);
}

.bullets li[b-c8oknbe5mv] {
  position: relative;
  padding-left: 2.4rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-d-text-1);          /* Text 1 — #F0F0F2 */
}

.bullets li[b-c8oknbe5mv]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.36em;
  width: 0.95em;
  height: 0.735em;
  background-color: var(--color-text-5);
  -webkit-mask: url("/images/icons/arrow-vector-2.svg") no-repeat center / contain;
          mask: url("/images/icons/arrow-vector-2.svg") no-repeat center / contain;
}

.outcome[b-c8oknbe5mv] {
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
  padding-top: clamp(1.25rem, 2.5vh, 1.75rem);

  /* Thin gradient divider matching the one above the bullets. */
  background-image: linear-gradient(90deg, #343435 0%, rgba(52, 52, 53, 0.00) 100%);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 1px;

  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.outcomeLabel[b-c8oknbe5mv] {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-body);
  color: var(--color-d-text-2);          /* Text 2 — #C4C6CC */
  letter-spacing: 0;
}

.outcomeValue[b-c8oknbe5mv] {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.outcomeNumber[b-c8oknbe5mv] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1rem + 3vw, 4rem);
  line-height: 115%;
  color: var(--color-fg);
}

.outcomeUnit[b-c8oknbe5mv] {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 0.5rem + 1vw, 1.5rem);
  letter-spacing: -0.005em;
  color: var(--color-fg);
}

/* ===================  RESPONSIVE  =================== */

/* Tablet — same split layout, tighter padding */
@media (max-width: 1023px) and (min-width: 768px) {
  .section[b-c8oknbe5mv] {
    padding:
      clamp(3rem, 8vh, 6rem)
      clamp(1.25rem, 4vw, 2.5rem);
  }
  .wrapper[b-c8oknbe5mv] { gap: clamp(1.5rem, 3vw, 3rem); }
  .chapterMedia[b-c8oknbe5mv] { column-gap: clamp(0.75rem, 1.4vw, 1.25rem); }
  .chapterMedia img:nth-child(2)[b-c8oknbe5mv] { margin-top: clamp(1.5rem, 4vh, 3rem); }
}

/* Mobile — stack vertically, no pinning */
@media (max-width: 767px) {
  .wrapper[b-c8oknbe5mv] {
    flex-direction: column;
    gap: clamp(2rem, 5vh, 3rem);
  }
  .left[b-c8oknbe5mv] {
    flex: 1 1 auto;
    position: relative;
    top: 0;
    height: auto;
  }
  .right[b-c8oknbe5mv] { flex: 1 1 auto; }
  .chapter[b-c8oknbe5mv] {
    min-height: auto;
    padding: clamp(1.5rem, 4vh, 2.5rem) 0;
  }
  .chapterMedia[b-c8oknbe5mv] { column-gap: 0.75rem; }
  .chapterMedia img:nth-child(2)[b-c8oknbe5mv] { margin-top: 1rem; }
}

/* === 480 — mobile: chapter heading + body type drop a size; brick
       stagger on the right-column images flattens so neither portrait
       is shoved off-screen === */
@media (max-width: 480px) {
  .section[b-c8oknbe5mv] {
    padding: clamp(2.5rem, 6vh, 4rem) clamp(1rem, 4vw, 1.5rem);
  }
  .list[b-c8oknbe5mv] {
    gap: clamp(2.5rem, 7vh, 4rem);
  }
  .number[b-c8oknbe5mv] {
    font-size: clamp(3rem, 14vw, 5rem);
    margin-bottom: 0.1rem;
  }
  .title[b-c8oknbe5mv] {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }
  .tagline[b-c8oknbe5mv] {
    font-size: clamp(1.05rem, 4vw, 1.35rem);
    margin-top: 0.6rem;
  }
  .bullets li[b-c8oknbe5mv] {
    font-size: 0.95rem;
    padding-left: 1.85rem;
  }
  .outcomeNumber[b-c8oknbe5mv] {
    font-size: clamp(1.75rem, 9vw, 2.5rem);
  }
  .outcomeUnit[b-c8oknbe5mv] {
    font-size: clamp(0.95rem, 4vw, 1.15rem);
  }
  .chapterMedia img:nth-child(2)[b-c8oknbe5mv] {
    margin-top: 0.5rem;
  }
}

/* === 360 — very small phone: floor the gutter so wider headings + the
       2-col image grid still fit === */
@media (max-width: 360px) {
  .section[b-c8oknbe5mv] {
    padding-inline: 0.875rem;
  }
  .number[b-c8oknbe5mv] {
    font-size: clamp(2.5rem, 14vw, 3.5rem);
  }
}
/* /Pages/Shared/_Footer.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   Footer
   ─ Top:       logo (left) + tagline (right)
   ─ Divider
   ─ Columns:   Office / Service / Company / Legal Policies
   ─ Wordmark:  massive "WEBORITY  DESIGN" wide-tracked spread
   ─ Divider
   ─ Bottom:    copyright (left) + "Built with precision in India" (right)
   ------------------------------------------------------------------ */

.footer[b-s8nw4rrbt6] {
  /* background removed — DarkCluster wrapper provides bg + grid */
  color: var(--color-fg);
  padding: clamp(3rem, 6vh, 5rem) var(--pad-x) 0;
  position: relative;
  padding-bottom: 5rem;
  isolation: isolate;
  overflow: hidden;
}

/* === SVG backdrop — pushed below the footer base so only the top
   of the gradient peeks above the wordmark line === */
.bgImage[b-s8nw4rrbt6] {
  position: absolute;
  bottom: 0%;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Lift the content stack above the SVG bg */
.content[b-s8nw4rrbt6] {
  position: relative;
  z-index: 1;
}

/* ===================  TOP ROW  =================== */

.top[b-s8nw4rrbt6] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4rem);
}

.logo[b-s8nw4rrbt6] {
  display: inline-flex;
  align-items: center;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.logo:hover[b-s8nw4rrbt6] { opacity: 0.85; }

.logo img[b-s8nw4rrbt6] {
  height: clamp(2.5rem, 5.5vh, 3.75rem);
  width: auto;
  display: block;
}

/* "Crafted to be experienced" — Instrument Sans italic, all caps */
.tagline[b-s8nw4rrbt6] {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-h2);
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--color-fg);
  margin: 0;
  text-align: right;
  text-transform: uppercase;
}

/* ===================  DIVIDER  =================== */

.divider[b-s8nw4rrbt6] {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 0;
}

/* ===================  COLUMNS  =================== */

.columns[b-s8nw4rrbt6] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;   /* full gap between brand col and link group */
  gap: clamp(2rem, 3vw, 3rem);      /* minimum breathing room at narrow widths */
  padding: clamp(3.5rem, 6vh, 5rem) 0;
}

/* Sub-grid holding MENU / SERVICES / SAY HELLO together — each col hugs its content */
.linkColumns[b-s8nw4rrbt6] {
  display: flex;
  align-items: flex-start;
  gap: clamp(7rem, 14vw, 14rem);
  flex-shrink: 0;
}

.linkColumns > .col[b-s8nw4rrbt6] {
  width: max-content;
}

.col[b-s8nw4rrbt6] {
  display: flex;
  flex-direction: column;
}

.colHead[b-s8nw4rrbt6] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-lead);
  letter-spacing: 0.02em;
  color: #ffffff;
  margin: 0 0 1.5rem;
}

/* Subsequent headers in the same column get top spacing */
.contactLinks + .colHead[b-s8nw4rrbt6],
.address + .colHead[b-s8nw4rrbt6] {
  margin-top: 2rem;
}

.col p[b-s8nw4rrbt6],
.col a[b-s8nw4rrbt6],
.col span[b-s8nw4rrbt6] {
  font-family: var(--font-display);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--color-fg);
  font-weight: 400;
  text-decoration: none;
}

.col a[b-s8nw4rrbt6] {
  transition: opacity var(--dur-fast) var(--ease-out);
  display: inline-block;
}
.col a:hover[b-s8nw4rrbt6] { opacity: 0.7; }

/* --- Office column specifics --- */
.address[b-s8nw4rrbt6] {
  margin: 0;
  color: var(--color-fg);
}

.contactLinks[b-s8nw4rrbt6] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0;
}

.phone[b-s8nw4rrbt6] {
  font-weight: 400;
  font-size: var(--t-body);
}

.email[b-s8nw4rrbt6] {
  font-weight: 400;
  font-size: var(--t-body);
}

/* === COL 1 — brand brief + follow us === */
.colBrand[b-s8nw4rrbt6] {
  gap: clamp(3.5rem, 7vh, 6rem);
}

.brief[b-s8nw4rrbt6] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--color-fg);
  margin: 0;
  max-width: 42ch;
}

.socialBlock[b-s8nw4rrbt6] {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.socialHead[b-s8nw4rrbt6] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-lead);
  letter-spacing: 0.02em;
  line-height: 1;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
}

.socials[b-s8nw4rrbt6] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Circular social icon — glass fill, white glyph */
.socialIcon[b-s8nw4rrbt6] {
  position: relative;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: rgba(250, 250, 250, 0.10);
  color: #FFFFFF;
  text-decoration: none;
  font-size: 0;
  line-height: 0;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.socialIcon svg[b-s8nw4rrbt6] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  transform: translate(-50%, -50%);
  display: block;
  transition: color var(--dur-fast) var(--ease-out);
}

.socialIcon:hover[b-s8nw4rrbt6] {
  background: #ffffff;
  opacity: 1 !important;
}

.socialIcon:hover svg[b-s8nw4rrbt6] {
  color: #6200EE;
}

/* === COL 4 — Say Hello (phone, email, address block) === */
.addressBlock[b-s8nw4rrbt6] {
  margin-top: clamp(1.25rem, 2.5vh, 2rem);
}

.cityHead[b-s8nw4rrbt6] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-body);
  letter-spacing: -0.005em;
  color: var(--color-fg);
  margin: 0 0 0.75rem;
}

/* --- Service/Company/Legal link lists --- */
.linkList[b-s8nw4rrbt6] {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ===================  PARTNER-PROPERTY CARDS  ===================
   Three glass cards linking to the wider Webority group. Sit between
   the column grid and the bottom copyright bar. */

.partnerCards[b-s8nw4rrbt6] {
  display: flex;
  gap: clamp(0.75rem, 1.25vw, 1.25rem);
  padding: 0 0 clamp(1.75rem, 3vh, 2.5rem);
}

.partnerCard[b-s8nw4rrbt6] {
  display: flex;
  height: 5rem;
  padding: 0 1.75rem;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 0;
  background: rgba(250, 250, 250, 0.10);
  backdrop-filter: blur(25.35px);
  -webkit-backdrop-filter: blur(25.35px);
  color: var(--color-fg);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.partnerLogo[b-s8nw4rrbt6] {
  display: block;
  width: 10rem;
  height: auto;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: none;
}

.partnerText[b-s8nw4rrbt6] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
  flex: 1;
  margin-left: 1rem;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
}

.partnerText em[b-s8nw4rrbt6] {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-micro);
  letter-spacing: 0.005em;
  color: var(--color-d-text-1);
  line-height: 1.1;
}

.partnerText strong[b-s8nw4rrbt6] {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  color: var(--color-fg);
  line-height: 1.1;
}

.partnerArrow[b-s8nw4rrbt6] {
  /* `grid` + `grid-area: 1/1` on the two child SVGs stacks them
     centred in the same cell. `overflow: hidden` clips the off-screen
     halves of each arrow during the slide.
     Default: white square. On hover: purple square. The arrows inside
     have fixed (not currentColor) fills so they read crisply against
     whichever background is mid-transition. */
  display: grid;
  place-items: center;
  overflow: hidden;

  width: 2rem;
  height: 2rem;
  border-radius: 50%;          /* circular icon background */
  background: #ffffff;
  margin-left: 1rem;
  flex-shrink: 0;

  transition: background var(--dur-base) var(--ease-out);
}

.partnerCard:hover .partnerArrow[b-s8nw4rrbt6] {
  background: #6200EE;
}

/* Both arrows share the same grid cell. They differ only in starting
   colour and starting x-offset; the slide is a transform transition
   driven by .partnerCard:hover. */
.arrowDefault[b-s8nw4rrbt6],
.arrowHover[b-s8nw4rrbt6] {
  grid-area: 1 / 1;
  width: 0.84rem;           /* keep 0.7:1 ratio (svg is 14:20) */
  height: 1.2rem;
  display: block;
  /* Shape from the brand arrow file via mask; colour = background-color:
     currentColor, driven by the per-arrow `color` rules below. */
  background-color: currentColor;
  -webkit-mask: url("/images/icons/arrow-vector.svg") no-repeat center / contain;
          mask: url("/images/icons/arrow-vector.svg") no-repeat center / contain;
  transition: transform var(--dur-base) var(--ease-out);
}

/* Default arrow — brand purple on white square. On hover, slides off to the right. */
.arrowDefault[b-s8nw4rrbt6] {
  color: #6200EE;
  transform: translateX(0);
}
.partnerCard:hover .arrowDefault[b-s8nw4rrbt6] {
  transform: translateX(180%);
}

/* Hover arrow — white, waits off to the left. On hover, slides in. */
.arrowHover[b-s8nw4rrbt6] {
  color: var(--color-white);
  transform: translateX(-180%);
}
.partnerCard:hover .arrowHover[b-s8nw4rrbt6] {
  transform: translateX(0);
}

/* ===================  MASSIVE WORDMARK  ===================
   Sits at the bottom of the footer ON TOP of the SVG gradient.
   The text uses a vertical clip gradient so its upper edge fades
   toward soft lavender-white and its lower edge sinks into the
   bright purple of the SVG backdrop — making it look like the
   wordmark is "rising" out of the gradient. */

.wordmarkBlock[b-s8nw4rrbt6] {
  padding: clamp(3rem, 6vh, 5rem) 0 0;
  text-align: center;
  overflow: hidden;
  /* Pull wordmark slightly below baseline so its bottom kisses the
     footer's bottom edge; cropped by .footer's overflow:hidden. */
  margin-bottom: clamp(-6rem, -7vh, -3rem);
}

.wordmark[b-s8nw4rrbt6] {
  font-family: var(--font-display);
  font-weight: 700;
  /* Fluid font-size sized so the full 14-character "WEBORITY DESIGN"
     spans ~80% of the viewport width without clipping. Tuned to
     Instrument Sans Bold's per-glyph em width at the current
     letter-spacing. The clamp() caps it on very narrow phones and
     ultrawide monitors. */
  font-size: clamp(2rem, 8vw, 15rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
  white-space: nowrap;
  user-select: none;
  display: inline-block;
  text-transform: uppercase;
  background-image: linear-gradient(#ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ===================  BOTTOM BAR  =================== */

.bottom[b-s8nw4rrbt6] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding-top: clamp(1.25rem, 2vh, 1.75rem);
  flex-wrap: wrap;
}

.copyBlock[b-s8nw4rrbt6] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.copy[b-s8nw4rrbt6] {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--color-fg);
  margin: 0;
}

.copyCert[b-s8nw4rrbt6] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-micro);
  letter-spacing: 0;
  color: var(--color-fg);
  margin: 0;
}

/* Right side: Privacy | Terms */
.legalLinks[b-s8nw4rrbt6] {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.legalLinks li[b-s8nw4rrbt6] {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.legalLinks a[b-s8nw4rrbt6] {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.legalLinks a:hover[b-s8nw4rrbt6] { opacity: 0.7; }

.legalDivider[b-s8nw4rrbt6] {
  color: var(--color-fg-mute);
  font-size: var(--t-body);
  user-select: none;
}

/* ===================  RESPONSIVE  =================== */

/* === 1440 — tighten the gap between link cols === */
@media (max-width: 1440px) {
  .linkColumns[b-s8nw4rrbt6] {
    gap: clamp(2rem, 4vw, 4rem);
  }

  /* Partner cards: compress internals so the 3-col row keeps fitting on
     small laptops (1201–1440) instead of clipping the nowrap title. */
  .partnerCards[b-s8nw4rrbt6] { gap: 0.625rem; }
  .partnerCard[b-s8nw4rrbt6] { padding: 0 1rem; }
  .partnerText[b-s8nw4rrbt6] { margin-left: 0.625rem; }
  .partnerText em[b-s8nw4rrbt6] { font-size: 0.8rem; }
  .partnerText strong[b-s8nw4rrbt6] { font-size: 0.8rem; letter-spacing: 0.02em; }
  .partnerArrow[b-s8nw4rrbt6] { width: 1.75rem; height: 1.75rem; margin-left: 0.625rem; }
}

/* === 1200 — partner row can't fit 3-up any more; stack to 1 column === */
@media (max-width: 1200px) {
  .partnerCards[b-s8nw4rrbt6] {
    flex-direction: column;
    gap: 0.75rem;
  }
  .partnerCard[b-s8nw4rrbt6] { height: auto; padding: 1.125rem 1.25rem; }
  /* Each card now spans the full row, so restore the full-size internals. */
  .partnerText[b-s8nw4rrbt6] { margin-left: 1rem; }
  .partnerText em[b-s8nw4rrbt6],
  .partnerText strong[b-s8nw4rrbt6] { font-size: var(--t-body); }
  .partnerText strong[b-s8nw4rrbt6] { letter-spacing: 0.04em; }
  .partnerArrow[b-s8nw4rrbt6] { width: 2rem; height: 2rem; margin-left: 1rem; }
}

/* === 1024 — brand on top, link cols below === */
@media (max-width: 1024px) {
  .columns[b-s8nw4rrbt6] {
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3rem);
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.75rem, 3.5vw, 3rem);
  }
  .linkColumns[b-s8nw4rrbt6] {
    width: 100%;
    justify-content: space-between;
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .footer[b-s8nw4rrbt6] { padding-top: clamp(2.5rem, 5vw, 4rem); }
  /* Partner cards already stacked at ≤1200 (see above). */
}

/* === 900 — link cols wrap to 2x2 === */
@media (max-width: 900px) {
  .linkColumns[b-s8nw4rrbt6] {
    flex-wrap: wrap;
    gap: 2.25rem 1.75rem;
  }
  .linkColumns > .col[b-s8nw4rrbt6] { width: calc(50% - 0.875rem); }
}

/* === 768 — tighter link grid === */
@media (max-width: 768px) {
  .top[b-s8nw4rrbt6] {
    gap: 1.25rem;
  }
  .linkColumns[b-s8nw4rrbt6] {
    gap: 2rem 1.5rem;
  }
  .linkColumns > .col[b-s8nw4rrbt6] { width: calc(50% - 0.75rem); }
}

/* === 600 — stack everything === */
@media (max-width: 600px) {
  .top[b-s8nw4rrbt6] {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .tagline[b-s8nw4rrbt6] { text-align: left; }
  .columns[b-s8nw4rrbt6] {
    flex-direction: column;
    gap: 2.5rem;
    padding: clamp(2rem, 4vh, 3rem) 0 clamp(1.5rem, 3vh, 2.5rem);
  }
  .linkColumns[b-s8nw4rrbt6] {
    flex-direction: column;
    gap: 2.5rem;
  }
  .linkColumns > .col[b-s8nw4rrbt6] { width: 100%; }
  .wordmarkBlock[b-s8nw4rrbt6] { padding: clamp(1.5rem, 3vh, 2.5rem) 0; }
  .bottom[b-s8nw4rrbt6] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .socialRow[b-s8nw4rrbt6] {
    margin-top: 1.5rem;
    flex-wrap: wrap;
  }
}

/* /Pages/Shared/_GetInTouch.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   GetInTouch — closing CTA section, full-height + sticky-pinned
   - .wrap    : 200vh container that gives 100vh of scroll headroom
                so the inner sticky child stays pinned while the user
                scrolls past — driving the parallax logo.
   - .sticky  : sticky-positioned shell pinned at top:0, 100vh tall.
   - .section : the visible scene (heading + CTA), with a parallax
                Webority Design logo drifting behind at low opacity.
   ------------------------------------------------------------------ */

.wrap[b-f67br7a0o2] {
  position: relative;
  width: 100%;
  height: 200vh;             /* extra height for the sticky child to "ride" */
}

.sticky[b-f67br7a0o2] {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.section[b-f67br7a0o2] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-fg);
  /* Dark backdrop INSIDE the isolated stacking context so the video's
     mix-blend-mode: screen has a near-black base to blend its black against
     (isolation: isolate stops it reaching the body #050505). */
  background: var(--color-bg);

  width: 100%;
  height: 100%;              /* fill the sticky shell */
  display: flex;
  align-items: center;       /* vertically centre the grid */

  padding:
    clamp(5rem, 12vh, 9rem)
    var(--pad-x);
}

/* ==================================================================
   === Parallax video (was SVG logo) ============================ MANUAL
   ==================================================================
   EDIT THE VALUES IN THIS BLOCK to tune size / anchor / opacity /
   stacking of the right-side ambient video. The scroll-driven Y travel
   and scale still live in GetInTouch.tsx (see PARALLAX_START_Y /
   PARALLAX_END_Y / START_SCALE / END_SCALE) because they must feed
   motion/react's useTransform — every other knob is here.

   Stack order in this section (lowest → highest):
     z-index 0  →  .parallaxLogo (video — deepest background layer)
     z-index 1  →  .gradient     (gradient backdrop, painted over the video)
     z-index 2  →  .grid         (text content — sits above both)
   ================================================================== */
.parallaxLogo[b-f67br7a0o2] {
  /* === LAYOUT — anchor + size ===
     Right-anchored: distance is measured from the right edge of the
     sticky shell. Use `right: -10%` to bleed off-screen, `right: 5%`
     to inset, etc. Width / height accept any CSS unit. */
  position: absolute;
  top:    0;
  right:  0;
  left:   auto;
  width:  65%;
  height: auto;

  /* === APPEARANCE === */
  opacity: 0.9;
  object-fit: cover;
  /* Drop the video's pure-black background: screen-blends against the dark
     section base so #000 → invisible while the glowing cubes stay crisp. */
  mix-blend-mode: screen;

  /* === STACKING — change to 1 to lift video above the gradient PNG === */
  z-index: 0;

  /* === FIXED WIRING (don't usually need to touch) === */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

/* === RESPONSIVE — example: make the video narrower on smaller screens.
       Uncomment / adjust as needed. ============================ */
@media (max-width: 900px) {
  .parallaxLogo[b-f67br7a0o2] {
    width:  70%;
    right:  -5%;
    opacity: 0.6;
  }
}

/* Ambient gradient backdrop — a left-weighted purple glow filling the
   whole section. Sits above the parallax video (z:0) and below the text
   grid (z:2).
   The source is a landscape image, so we cover the section rather than
   size by intrinsic ratio: object-fit:cover guarantees it always fills
   the pinned scene (no hard rectangular edge can show during the sticky
   scroll), and object-position keeps the bright lobe anchored left,
   behind the headline. max-width:none overrides the global
   `img { max-width: 100% }`, which would otherwise clamp this wide image
   to the section width and squash it into a short band across the top. */
.gradient[b-f67br7a0o2] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left center;
  transform: translateX(-2rem);   /* nudge the backdrop 2rem to the left */
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.grid[b-f67br7a0o2] {
  position: relative;
  z-index: 2;                /* above parallax logo (z:0) + gradient (z:1) */
  width: 100%;
  /* No max-width or auto margin — let the two columns stretch fully
     so the headline sits flush left and the CTA flush right. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}

/* ===================  LEFT COLUMN  =================== */

.left[b-f67br7a0o2] {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vh, 1.5rem);
}

.eyebrow[b-f67br7a0o2] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-lead);
  color: var(--color-flame-bright);
}

.title[b-f67br7a0o2] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 115%;
  color: var(--color-fg);
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}

/* ===================  RIGHT COLUMN  =================== */

.right[b-f67br7a0o2] {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vh, 4rem);
  padding-top: clamp(0.5rem, 1vh, 1rem);
}

.description[b-f67br7a0o2] {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 115%;
  color: var(--color-fg);
  margin: 0;
  text-wrap: pretty;
}

/* === Tagline + pill CTA row === */
.ctaRow[b-f67br7a0o2] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(4rem, 6vw, 6rem);
  flex-wrap: wrap;
}

.tagline[b-f67br7a0o2] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--color-text-5);
  margin: 0;
}

/* === Get-in-touch CTA — shared button pattern
       Same visual shape as the contact form's Send Message button:
       purple pill with white text and a white circular icon block on
       the right holding the brand arrow. On hover the icon nudges
       right slightly and the pill deepens to primary-hover.
       Note: kept the `.arrowHover` element in JSX for now; CSS hides
       it so the markup change can land separately. */
.cta[b-f67br7a0o2] {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.45rem 0.45rem 0.45rem clamp(1.5rem, 2.5vw, 2.25rem);
  border-radius: 999px;

  background: var(--color-white);
  color: var(--color-primary-100);

  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;

  transition:
    background var(--dur-base) var(--ease-out),
    color      var(--dur-base) var(--ease-out);
}

.ctaText[b-f67br7a0o2] {
  /* No extra padding — the gap on .cta owns the spacing between text
     and the icon block. */
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);   /* a touch larger than the .cta base */
}

.ctaIcon[b-f67br7a0o2] {
  display: grid;
  place-items: center;
  overflow: hidden;          /* clip the off-screen halves of each arrow during the slide */
  width: clamp(2.5rem, 3vw, 3.25rem);
  height: clamp(2.5rem, 3vw, 3.25rem);
  border-radius: 50%;
  background: var(--color-primary-100);
  color: var(--color-white);
  flex-shrink: 0;

  transition:
    background var(--dur-base) var(--ease-out),
    color      var(--dur-base) var(--ease-out);
}

/* Hover: invert the pill colours — white pill → purple, purple icon → white,
   with a smooth colour transition. */
.cta:hover[b-f67br7a0o2] {
  background: var(--color-primary-100);
  color: var(--color-white);
}
.cta:hover .ctaIcon[b-f67br7a0o2] {
  background: var(--color-white);
  color: var(--color-primary-100);
}

/* Two arrows stacked in the same grid cell (same slide-swap as the footer
   partner cards). On hover the default arrow slides out to the right while
   the second slides in from the left. The shape comes from
   /images/icons/arrow-vector.svg used as a CSS mask; the fill is
   background-color: currentColor, driven by the per-arrow `color` rules so
   each arrow stays crisp against whichever pill background it sits on. */
.arrowDefault[b-f67br7a0o2],
.arrowHover[b-f67br7a0o2] {
  grid-area: 1 / 1;         /* stack both in the same cell */
  display: block;
  width: 1.05em;            /* keep 0.7:1 ratio (svg is 14:20) */
  height: 1.5em;
  background-color: currentColor;
  -webkit-mask: url("/images/icons/arrow-vector.svg") no-repeat center / contain;
          mask: url("/images/icons/arrow-vector.svg") no-repeat center / contain;
  transition: transform var(--dur-base) var(--ease-out);
}

/* Default arrow — white, sits centred on the purple icon. On hover it
   slides off to the right. */
.arrowDefault[b-f67br7a0o2] {
  color: var(--color-white);
  transform: translateX(0);
}
.cta:hover .arrowDefault[b-f67br7a0o2] {
  transform: translateX(220%);
}

/* Hover arrow — purple (matching the inverted white icon), waits off to the
   left. On hover it slides in to centre. */
.arrowHover[b-f67br7a0o2] {
  color: var(--color-primary-100);
  transform: translateX(-220%);
}
.cta:hover .arrowHover[b-f67br7a0o2] {
  transform: translateX(0);
}

/* ===================  RESPONSIVE  =================== */

@media (max-width: 900px) {
  .grid[b-f67br7a0o2] {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 6vh, 3rem);
  }
  .description[b-f67br7a0o2] {
    max-width: 100%;
  }
  .ctaRow[b-f67br7a0o2] {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* === 768 — tablet portrait: tighten section padding, shrink the
       right-anchored parallax video so it doesn't dominate the
       narrow viewport === */
@media (max-width: 768px) {
  .section[b-f67br7a0o2] {
    padding: clamp(3.5rem, 9vh, 6rem) var(--pad-x);
  }
  .parallaxLogo[b-f67br7a0o2] {
    width: 80%;
    right: -8%;
    opacity: 0.45;
  }
  .ctaRow[b-f67br7a0o2] {
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }
}

/* === 480 — mobile: title max-width unlocks so the headline can
       breathe, gradient glow shrinks back to the top, tagline + CTA
       stack tightly === */
@media (max-width: 480px) {
  .section[b-f67br7a0o2] {
    padding: clamp(2.5rem, 8vh, 4.5rem) var(--pad-x);
  }
  .title[b-f67br7a0o2] {
    max-width: 20ch;
  }
  .gradient[b-f67br7a0o2] {
    height: 70%;
    opacity: 0.7;
  }
  .parallaxLogo[b-f67br7a0o2] {
    width: 95%;
    right: -12%;
    opacity: 0.32;
  }
  .right[b-f67br7a0o2] {
    gap: clamp(1.75rem, 4.5vh, 2.5rem);
  }
}

/* === 360 — very narrow phone: floor the gutter so content gets
       max width without clipping === */
@media (max-width: 360px) {
  .section[b-f67br7a0o2] {
    padding-inline: 1rem;
  }
}
/* /Pages/Shared/_Layout.cshtml.rz.scp.css */
/* Scoped layout styles. Intentionally empty — styling is driven by Tailwind v4
   (wwwroot/css/site.css) and design tokens (Styles/app.css). */
/* /Pages/Shared/_TopNav.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   TopNav — fixed, white-on-dark
   Pattern: [logo image (left)] [3 nav links right-aligned]
   ------------------------------------------------------------------ */

.nav[b-81uqw3qt6r] {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 5vw, 4rem);
  padding: clamp(0.875rem, 1.6vh, 1.5rem) var(--pad-x);

  pointer-events: none;

  /* Hide on scroll down / reveal on scroll up — JS toggles .navHidden */
  transform: translate3d(0, 0, 0);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.nav > *[b-81uqw3qt6r] { pointer-events: auto; }

.navHidden[b-81uqw3qt6r] {
  transform: translate3d(0, -100%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .nav[b-81uqw3qt6r] { transition: none; }
}

/* === Logo (left) === */
.logo[b-81uqw3qt6r] {
  display: inline-flex;
  align-items: center;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.logo:hover[b-81uqw3qt6r] { opacity: 0.8; }

/* Drop the global :focus-visible purple outline on the logo link so it
   doesn't stay ringed after a click. The logo's destination (home) is
   already obvious — and the surrounding nav links keep their own
   focus-visible affordance for keyboard users. */
.logo:focus[b-81uqw3qt6r],
.logo:focus-visible[b-81uqw3qt6r] {
  outline: none;
}

/* Wordmark rendered via `mask-image` (URL injected as the --logo-svg
   custom property from TopNav.tsx). The element's `background-color`
   becomes the logo colour — so the swap to #6200EE on light sections
   is just a colour change, no second asset needed. */
.logoMark[b-81uqw3qt6r] {
  display: block;
  height: clamp(2.75rem, 5.5vh, 4rem);
  aspect-ratio: 112 / 41;
  background-color: var(--color-fg);

  mask-image:         var(--logo-svg);
  mask-size:          contain;
  mask-repeat:        no-repeat;
  mask-position:      center;
  -webkit-mask-image:    var(--logo-svg);
  -webkit-mask-size:     contain;
  -webkit-mask-repeat:   no-repeat;
  -webkit-mask-position: center;

  transition: background-color var(--dur-base) var(--ease-out);
}

/* === Right-aligned nav links === */
.links ul[b-81uqw3qt6r] {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.links a[b-81uqw3qt6r] {
  position: relative;
  padding: 0.25rem 0;

  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.05em;
  color: var(--color-fg);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.links a[b-81uqw3qt6r]::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.links a:hover[b-81uqw3qt6r] { opacity: 0.85; }
.links a:hover[b-81uqw3qt6r]::after { transform: scaleX(1); }

/* Active page — the <li> carries data-active when its link points at
   the current route, so the same ::after underline used by hover stays
   visible. Slightly thicker hairline so the active state reads from a
   glance even when no hover is happening. */
.links li[data-active] a[b-81uqw3qt6r]::after {
  transform: scaleX(1);
  height: 2px;
}

/* === "Get in touch" pill CTA — replaces the old plain CONTACT link =====
   Same visual pattern as the closing GetInTouch CTA
   (_GetInTouch.cshtml.css), scaled down to sit inside the nav bar: a
   white pill with violet text and a violet circular icon block holding
   the brand arrow. On hover the colours invert and the arrow slide-swaps.
   Selectors are scoped under `.links a` so they out-specify the shared
   link rules above (.links a is more specific than a bare .navCta). */
.ctaItem[b-81uqw3qt6r] { display: flex; align-items: center; }

.links a.navCta[b-81uqw3qt6r] {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.3rem 0.3rem clamp(0.85rem, 1.1vw, 1.1rem);
  border-radius: 999px;

  background: var(--color-white);
  color: var(--color-primary-100);

  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-label);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  line-height: 1;

  transition:
    background var(--dur-base) var(--ease-out),
    color      var(--dur-base) var(--ease-out);
}
/* Drop the shared link underline + hover-fade on the pill. */
.links a.navCta[b-81uqw3qt6r]::after { content: none; }
.links a.navCta:hover[b-81uqw3qt6r] { opacity: 1; }

.navCtaIcon[b-81uqw3qt6r] {
  display: grid;
  place-items: center;
  overflow: hidden;          /* clip the off-screen halves of the arrows */
  width: clamp(1.8rem, 2.1vw, 2.05rem);
  height: clamp(1.8rem, 2.1vw, 2.05rem);
  border-radius: 50%;
  background: var(--color-primary-100);
  color: var(--color-white);
  flex-shrink: 0;
  transition:
    background var(--dur-base) var(--ease-out),
    color      var(--dur-base) var(--ease-out);
}

/* Hover — invert the pill colours. */
.links a.navCta:hover[b-81uqw3qt6r] {
  background: var(--color-primary-100);
  color: var(--color-white);
}
.links a.navCta:hover .navCtaIcon[b-81uqw3qt6r] {
  background: var(--color-white);
  color: var(--color-primary-100);
}

/* Brand arrow via CSS mask — two stacked copies slide-swap on hover
   (same /images/icons/arrow-vector.svg used by the closing CTA). */
.navArrowDefault[b-81uqw3qt6r],
.navArrowHover[b-81uqw3qt6r] {
  grid-area: 1 / 1;
  display: block;
  width: 0.7rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: url("/images/icons/arrow-vector.svg") no-repeat center / contain;
          mask: url("/images/icons/arrow-vector.svg") no-repeat center / contain;
  transition: transform var(--dur-base) var(--ease-out);
}
.navArrowDefault[b-81uqw3qt6r] { color: var(--color-white); transform: translateX(0); }
.links a.navCta:hover .navArrowDefault[b-81uqw3qt6r] { transform: translateX(220%); }
.navArrowHover[b-81uqw3qt6r] { color: var(--color-primary-100); transform: translateX(-220%); }
.links a.navCta:hover .navArrowHover[b-81uqw3qt6r] { transform: translateX(0); }

/* === Colour swap when the nav sits over a light background ============
   TopNav.tsx watches sections marked with `data-nav-bg="light"` and
   toggles `.navOnLight` on the header when one of them is currently
   behind the nav. Text becomes near-black (#050505), the wordmark
   becomes brand violet (#6200EE). Transitions are scoped to `color`
   and `background-color` so the hide/show transform (which animates on
   `transform`) is unaffected. */
.navOnLight .links a[b-81uqw3qt6r] {
  color: #050505;
}
.navOnLight .logoMark[b-81uqw3qt6r] {
  background-color: #050505;
}

/* On a light section a white pill would vanish — flip the CTA to a violet
   pill with a white icon block so it stays legible. The icon circle is
   always white here, so both arrows sit in violet. */
.navOnLight .links a.navCta[b-81uqw3qt6r] {
  background: var(--color-primary-100);
  color: var(--color-white);
}
.navOnLight .navCtaIcon[b-81uqw3qt6r] {
  background: var(--color-white);
  color: var(--color-primary-100);
}
.navOnLight .navArrowDefault[b-81uqw3qt6r],
.navOnLight .navArrowHover[b-81uqw3qt6r] {
  color: var(--color-primary-100);
}
.navOnLight .links a[b-81uqw3qt6r] {
  transition:
    color   var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

/* === Tablet — tighter spacing, slightly smaller logo === */
@media (max-width: 900px) {
  .logoMark[b-81uqw3qt6r] { height: clamp(2.5rem, 5vh, 3.25rem); }
  .links ul[b-81uqw3qt6r] { gap: clamp(1rem, 3vw, 2rem); }
}

/* === Mobile — compact horizontal layout === */
@media (max-width: 720px) {
  .nav[b-81uqw3qt6r] { padding: 0.75rem var(--pad-x); }
  .logoMark[b-81uqw3qt6r] { height: 2.25rem; }
  .links ul[b-81uqw3qt6r] { gap: 1rem; }
  .links a[b-81uqw3qt6r] { font-size: var(--t-micro); letter-spacing: 0.04em; }
}

/* === Small phone — drop tracking, shrink links === */
@media (max-width: 480px) {
  .links ul[b-81uqw3qt6r] { gap: 0.75rem; }
  .links a[b-81uqw3qt6r] { letter-spacing: 0.03em; }
}

/* === Very narrow — hide secondary nav, keep logo === */
@media (max-width: 380px) {
  .links[b-81uqw3qt6r] { display: none; }
}
/* /Pages/Work/CaseStudy.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   /work/:slug — case study detail page.

   Long-form editorial layout. Every section uses a doubled gutter
   (`calc(var(--pad-x) * 2)`) on the left/right so the column rail
   sits inset from the viewport edge. All content is left-aligned to
   read like an editorial spread.
   ------------------------------------------------------------------ */

.page[b-ilx3cpm579] {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(6rem, 10vh, 9rem);
  padding: 0 var(--pad-x) clamp(4rem, 8vh, 7rem);
  background: var(--color-bg);
  color: var(--color-fg);
}

/* Shared rail rule — every direct section is a full-width row inside
   the page flex column. No horizontal padding; sections sit edge-to-edge. */
.page > *[b-ilx3cpm579] {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ===================  HERO SECTION  ===================
   Houses topbar + heroHead. Breaks out of .page horizontal padding so
   the SVG gradient backdrop (applied via index.css
   `main[data-route="work"] #top`) and the scanning lines run the full
   viewport width. */

.hero[b-ilx3cpm579] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;

  /* Break out of .page padding so backdrop is full-width. */
  width: calc(100% + 2 * var(--pad-x));
  margin-left: calc(-1 * var(--pad-x));
  margin-right: calc(-1 * var(--pad-x));

  display: flex;
  flex-direction: column;
  align-items: center;          /* horizontal center */
  justify-content: center;      /* vertically center heroHead in the hero */
  gap: clamp(2rem, 5vh, 4rem);
  padding:
    clamp(5rem, 10vh, 8rem)
    var(--pad-x)
    clamp(4rem, 8vh, 6rem);
  min-height: 70vh;
  text-align: center;
}

/* === Scanning grid (4 vertical hairlines, 4s pulse) === */
.bgGrid[b-ilx3cpm579] {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.scanLine[b-ilx3cpm579] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-0.5px);

  background-color: rgba(255, 255, 255, 0.1);
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  background-size: 100% 35vh;
  background-repeat: no-repeat;
  background-position: 0 -35vh;

  animation: scanPulse-b-ilx3cpm579 4s ease-in-out infinite;
  will-change: background-position;
}

@keyframes scanPulse-b-ilx3cpm579 {
  0%   { background-position: 0 -35vh; }
  100% { background-position: 0 100vh; }
}

@media (prefers-reduced-motion: reduce) {
  .scanLine[b-ilx3cpm579] {
    animation: none;
    background-image: none;
  }
}

/* === Bottom fade — blends gradient into body bg === */
.bottomFade[b-ilx3cpm579] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12rem;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, #050505 0%, rgba(5, 5, 5, 0) 100%);
}

/* ===================  TOP BAR  =================== */

.topbar[b-ilx3cpm579] {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg-mute);
}

.crumb[b-ilx3cpm579] {
  color: var(--color-fg-mute);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.crumb:hover[b-ilx3cpm579] { color: var(--color-fg); }

.crumbSep[b-ilx3cpm579] {
  color: var(--color-fg-faint);
  font-size: 1rem;
  line-height: 1;
}

.crumbCurrent[b-ilx3cpm579] {
  color: var(--color-fg);
  font-weight: 500;
}

/* ===================  HERO TITLE — left rail  =================== */

.heroHead[b-ilx3cpm579] {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem, 3vh, 2.25rem);
}

.eyebrow[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary-50);
}

.title[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--color-fg);
  margin: 0;
  max-width: 22ch;
}

.titleItalic[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-fg);
}

.metaInline[b-ilx3cpm579] {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: clamp(2rem, 4vw, 4rem);
  margin: 0;
  padding: 0;
}

.metaInlinePair[b-ilx3cpm579] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  text-align: center;
  min-width: 0;
}

.metaInlinePair dt[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg-mute);
  margin: 0;
}

.metaInlinePair dd[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--color-fg);
  margin: 0;
}

/* ===================  FULL-BLEED IMAGE  =================== */

.bleedFrame[b-ilx3cpm579] {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  border: 1px solid var(--color-d-border);
  isolation: isolate;
}

/* Full-viewport-width variant — escapes the .page outer padding so the
   image runs edge-to-edge of the screen. No border, no radius. */
.bleedFull[b-ilx3cpm579] {
  width: calc(100% + 2 * var(--pad-x));
  margin-left: calc(-1 * var(--pad-x));
  margin-right: calc(-1 * var(--pad-x));
  border-radius: 0;
  border: 0;
}

/* Hero showcase — 60% width, centered, and pulled up so it overlaps the
   lower portion of the hero/title section above it (sits on top via z-index).
   Shows the same thumbnail as the /work grid card at the card's 16/10 height. */
.heroShowcase[b-ilx3cpm579] {
  width: 60%;
  aspect-ratio: 16 / 10;
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(-1 * clamp(6rem, 21vh, 17rem));
  position: relative;
  z-index: 3;
}

/* Match the grid card's image crop exactly (object-fit cover, top-centered);
   overrides the default .bleedImg parallax bleed for this hero image only. */
.heroShowcase .bleedImg[b-ilx3cpm579] {
  height: 100%;
  margin-top: 0;
  object-position: top center;
}

@media (max-width: 768px) {
  .heroShowcase[b-ilx3cpm579] {
    width: 86%;
    margin-top: calc(-1 * clamp(3rem, 12vh, 8rem));
  }
}

/* Every image below the project description shows its FULL height, uncropped:
   no forced aspect-ratio on the frame (markup only sets it for .heroShowcase),
   so the frame sizes to the image and `cover` never crops. .heroShowcase keeps
   height:100% (above) to crop into its fixed 16/10 card frame. */
.bleedImg[b-ilx3cpm579] {
  width: 100%;
  height: auto;
  margin-top: 0;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Full-bleed break image (below project description) shows its full natural
   height — no overscan crop. */
.bleedFull .bleedImg[b-ilx3cpm579] {
  height: auto;
  margin-top: 0;
}

/* ===================  PROJECT DESCRIPTION (centered)  =================== */

.intro[b-ilx3cpm579] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.25rem, 2.5vh, 2rem);
}

.introHeading[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-fg);
  margin: 0;
  text-align: center;
}

.introBody[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
  line-height: 1.55;
  color: var(--color-fg-soft);
  margin: 0;
  max-width: 65ch;
  text-align: center;
  text-wrap: pretty;
}

/* ===================  NARRATIVE SECTION (Problem / Solution)  =================== */

.narrativeSection[b-ilx3cpm579] {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vh, 2.5rem);
  align-items: flex-start;
  text-align: left;
}

/* Left-aligned narrative heading + body text blocks constrained to 70% width.
   Card grids (<ul>) and full-bleed images are unaffected (targets only the
   direct <div> reveal wrappers around the heading and paragraph). */
.narrativeSection > div[b-ilx3cpm579],
.processSection > div[b-ilx3cpm579],
.resultSection > div[b-ilx3cpm579] {
  max-width: 70%;
}

@media (max-width: 768px) {
  .narrativeSection > div[b-ilx3cpm579],
  .processSection > div[b-ilx3cpm579],
  .resultSection > div[b-ilx3cpm579] {
    max-width: 100%;
  }
}

.sectionTitle[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--color-fg);
  margin: 0;
  text-align: left;
  max-width: 70%;
}

.sectionTitleLg[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--color-fg);
  margin: 0;
  text-align: left;
  max-width: 70%;
}

/* Section headings (below Project Description) read at a uniform 600 weight —
   the italic-em part matches the rest of the heading. Hero .title is unaffected. */
.introHeading .titleItalic[b-ilx3cpm579],
.sectionTitle .titleItalic[b-ilx3cpm579],
.sectionTitleLg .titleItalic[b-ilx3cpm579] {
  font-weight: 600;
}

.sectionBody[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.8rem);     /* matches .heroSubheading */
  line-height: 1.5;
  color: var(--color-fg-soft);
  margin: 0;
  text-wrap: pretty;
  text-align: left;
  max-width: 70%;
}

/* === Statement-card grid (Problem / Solution) ===
   3 equal cards laid out side-by-side at full inner width. Each card is
   tinted toward error / success on the dark canvas, with a soft border
   and a coloured circle icon. */
.cardGrid[b-ilx3cpm579] {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.75vw, 1.5rem);
  margin-top: clamp(0.5rem, 1.5vh, 1.25rem);
}

/* Problem grid leaves extra breathing room at the bottom so the
   staggered 3rd card doesn't crash into the next section. */
.staggeredGrid[b-ilx3cpm579] {
  padding-bottom: clamp(2rem, 5vw, 4.5rem);
}

/* Each statement card mirrors the reference screenshots: a soft light
   surface (pink for problem, green for solution), a coloured circle
   icon and label on the same row, then a short body paragraph below. */
.statementCard[b-ilx3cpm579] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  padding: clamp(1.25rem, 1.8vw, 1.75rem);
  border-radius: 0;
  background: var(--color-d-bg);
  border: 1px solid var(--color-d-border);
  width: 100%;
  height: 100%;
  text-align: left;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.statementHead[b-ilx3cpm579] {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.statementCard:hover[b-ilx3cpm579] {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.35);
}

/* Consistent dark card surface (set on .statementCard). The semantic
   distinction reads through the coloured circle icon alone. */
.problemCard .statementIcon[b-ilx3cpm579] { color: var(--color-error-100); }

.solutionCard .statementIcon[b-ilx3cpm579] { color: var(--color-success-100); }

.statementIcon[b-ilx3cpm579] {
  display: inline-flex;
  width: 1.625rem;
  height: 1.625rem;
  flex-shrink: 0;
}

.statementIcon svg[b-ilx3cpm579] {
  width: 100%;
  height: 100%;
  display: block;
}

.statementLabel[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  letter-spacing: 0;
  color: var(--color-fg);                        /* white — readable on dark card */
}

.statementBody[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.55;
  color: var(--color-d-text-2);                  /* #C4C6CC — muted body on dark */
  text-wrap: pretty;
}

/* ===================  PROCESS GRID  =================== */

.processSection[b-ilx3cpm579] {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vh, 2.5rem);
  align-items: flex-start;
  text-align: left;
}

.duoGrid[b-ilx3cpm579] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  width: 100%;
}

.trioGrid[b-ilx3cpm579] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  width: 100%;
}

.card[b-ilx3cpm579] {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  text-align: left;
}

.cardImgWrap[b-ilx3cpm579] {
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--color-d-border);
  aspect-ratio: 4 / 3;
  background: var(--color-bg-deep);
}

.cardImgWrap img[b-ilx3cpm579] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-base) var(--ease-out);
}

.card:hover .cardImgWrap img[b-ilx3cpm579] {
  transform: scale(1.03);
}

.cardCaption[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-fg-mute);
  text-align: left;
}

/* ===================  RESULT  =================== */

.resultSection[b-ilx3cpm579] {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vh, 2.25rem);
  align-items: flex-start;
  text-align: left;
  width: min(70vw, 100%);
}

@media (max-width: 768px) {
  .resultSection[b-ilx3cpm579] {
    width: 100%;
  }
}

.resultBody[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.55;
  color: var(--color-fg-soft);
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
  text-align: left;
}

/* ===================  METADATA  =================== */

.meta[b-ilx3cpm579] {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vh, 2.5rem);
  padding-top: clamp(2rem, 4vh, 3rem);
  padding-bottom: clamp(0.5rem, 1vh, 1rem);
  border-top: 1px solid var(--color-d-border);
  align-items: flex-start;
  text-align: left;
}

.metaRow[b-ilx3cpm579] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem clamp(1rem, 2vw, 2.5rem);
  width: 100%;
}

.metaPair[b-ilx3cpm579] {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  align-items: flex-start;
  text-align: left;
}

.metaLabel[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 400;
  color: var(--color-fg-mute);
}

.metaValue[b-ilx3cpm579],
.metaLink[b-ilx3cpm579],
.deliverablesText[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg);
  overflow-wrap: anywhere;
  text-align: left;
}

.metaLink[b-ilx3cpm579] {
  width: fit-content;
  position: relative;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.metaLink[b-ilx3cpm579]::after {
  content: "";
  position: absolute;
  inset: auto 0 -3px 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.metaLink:hover[b-ilx3cpm579] { color: var(--color-primary-50); }
.metaLink:hover[b-ilx3cpm579]::after { transform: scaleX(1); }

/* ===================  RELATED PROJECTS  =================== */

.related[b-ilx3cpm579] {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vh, 2.75rem);
  align-items: flex-start;
  text-align: left;
}

.relatedHead[b-ilx3cpm579] {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
}

.seeAll[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-fg-mute);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.seeAll:hover[b-ilx3cpm579] { color: var(--color-primary-50); }

.relatedGrid[b-ilx3cpm579] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  width: 100%;
}

.relatedItem[b-ilx3cpm579] { display: block; }

.relatedLink[b-ilx3cpm579] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--color-fg);
  text-decoration: none;
  text-align: left;
}

.relatedImgWrap[b-ilx3cpm579] {
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-d-border);
}

.relatedImgWrap img[b-ilx3cpm579] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-base) var(--ease-out);
}

.relatedLink:hover .relatedImgWrap img[b-ilx3cpm579] { transform: scale(1.04); }

.relatedMeta[b-ilx3cpm579] {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
  text-align: left;
}

.relatedTag[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg-mute);
}

.relatedTitle[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.2;
  color: var(--color-fg);
  margin: 0;
  transition: color var(--dur-fast) var(--ease-out);
}

.relatedLink:hover .relatedTitle[b-ilx3cpm579] { color: var(--color-primary-50); }

/* ===================  PREV / NEXT NAV  =================== */

.nav[b-ilx3cpm579] {
  padding-top: clamp(2rem, 4vh, 3rem);
  padding-bottom: clamp(0.5rem, 1vh, 1rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  border-top: 1px solid var(--color-d-border);
}

.navPrev[b-ilx3cpm579], .navNext[b-ilx3cpm579] {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: var(--color-fg);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.navPrev[b-ilx3cpm579] { align-items: flex-start; text-align: left; }
.navNext[b-ilx3cpm579] { align-items: flex-end;   text-align: right; }
.navPrev:hover[b-ilx3cpm579], .navNext:hover[b-ilx3cpm579] { color: var(--color-primary-50); }

.navHint[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg-mute);
}

.navTitle[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.1;
}

.navAll[b-ilx3cpm579] {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-mute);
  text-decoration: none;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--color-d-border);
  border-radius: 999px;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.navAll:hover[b-ilx3cpm579] {
  color: var(--color-fg);
  border-color: var(--color-fg-mute);
}

/* ===================  RESPONSIVE  =================== */

@media (max-width: 1024px) {
  .trioGrid[b-ilx3cpm579] { grid-template-columns: repeat(2, 1fr); }
  .relatedGrid[b-ilx3cpm579] { grid-template-columns: repeat(2, 1fr); }
  .cardGrid[b-ilx3cpm579] { grid-template-columns: 1fr; }
  .staggeredGrid[b-ilx3cpm579] { padding-bottom: 0; }
}

@media (max-width: 768px) {
  .page[b-ilx3cpm579] {
    gap: clamp(3rem, 6vh, 5rem);
  }
  .duoGrid[b-ilx3cpm579],
  .trioGrid[b-ilx3cpm579],
  .relatedGrid[b-ilx3cpm579],
  .cardGrid[b-ilx3cpm579] {
    grid-template-columns: 1fr;
  }
  .metaRow[b-ilx3cpm579] { grid-template-columns: 1fr 1fr; }
  .nav[b-ilx3cpm579] {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 1.5rem;
    justify-items: start;
  }
  .navPrev[b-ilx3cpm579], .navNext[b-ilx3cpm579] {
    align-items: flex-start;
    text-align: left;
  }
  .navAll[b-ilx3cpm579] { justify-self: start; }
  .relatedHead[b-ilx3cpm579] { align-items: flex-start; }
  .title[b-ilx3cpm579] { max-width: none; }
  .sectionTitle[b-ilx3cpm579],
  .sectionTitleLg[b-ilx3cpm579],
  .sectionBody[b-ilx3cpm579] { max-width: none; }
}

@media (max-width: 480px) {
  .topbar[b-ilx3cpm579] { padding-top: clamp(4rem, 10vh, 6rem); }
  .metaRow[b-ilx3cpm579] { grid-template-columns: 1fr; }
}
/* /Pages/Work/Index.cshtml.rz.scp.css */
/* ------------------------------------------------------------------
   /work listing — hero + 2-column card grid of case studies.
   Uses the shared non-home SVG backdrop on #top.
   ------------------------------------------------------------------ */

/* ===================  HERO  =================== */

.hero[b-dpncxi0sa5] {
  position: relative;
  width: 100%;
  height: 70vh;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  color: var(--color-fg);

  /* Top-anchor .heroInner (align-items: flex-start), horizontally centred —
     same layout as the /design-process & /services heroes; .heroInner's
     viewport-height-relative margin-top drops it down the hero. The
     .bottomFade gradient sits BEHIND the text (lower z-index). */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--pad-x);
}

/* ---------------  SCANNING GRID  ---------------
   Same effect as the /services and /design-process heroes: 4 hairlines
   at 20/40/60/80% with a vertical bright-pulse gradient travelling
   top→bottom over 4s, staggered so the pulse cascades across the hero. */
.bgGrid[b-dpncxi0sa5] {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.line[b-dpncxi0sa5] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-0.5px);

  background-color: rgba(255, 255, 255, 0.1);
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  background-size: 100% 35vh;
  background-repeat: no-repeat;
  background-position: 0 -35vh;

  animation: scanPulse-b-dpncxi0sa5 4s ease-in-out infinite;
  will-change: background-position;
}

@keyframes scanPulse-b-dpncxi0sa5 {
  0%   { background-position: 0 -35vh; }
  100% { background-position: 0 100vh; }
}

@media (prefers-reduced-motion: reduce) {
  .line[b-dpncxi0sa5] {
    animation: none;
    background-image: none;
  }
}

.heroInner[b-dpncxi0sa5] {
  /* Viewport-height-relative drop from the top of the hero — scales with
     screen height, capped at 16rem on tall screens. */
  margin-top: clamp(10rem, 24vh, 18rem);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 2.5vh, 2rem);
  width: 100%;
  max-width: 62%;
  text-align: center;
}

.eyebrow[b-dpncxi0sa5] {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg-mute);
}

.heading[b-dpncxi0sa5] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: 0.98;
  color: var(--color-fg);
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 15ch;
  margin: 0;
}

.subheading[b-dpncxi0sa5] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.45;
  color: var(--color-fg-soft);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}

/* ===================  BOTTOM FADE  =================== */

/* Dark gradient strip blending the hero's bottom edge into the grid
   section below. Layered BEHIND .heroInner (z-index 1, content is
   z-index 2) so the bottom-anchored text reads over it. */
.bottomFade[b-dpncxi0sa5] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12.5625rem;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, #050505 0%, rgba(5, 5, 5, 0.00) 100%);
}

.srOnly[b-dpncxi0sa5] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===================  GRID  =================== */

.gridSection[b-dpncxi0sa5] {
  position: relative;
  background: var(--color-bg);
  color: var(--color-fg);
  /* Top/bottom padding halved per /work feedback; horizontal --pad-x kept. */
  padding: clamp(2rem, 4.5vw, 4.5rem) var(--pad-x) clamp(2.5rem, 5vw, 5rem);
}

.grid[b-dpncxi0sa5] {
  list-style: none;
  margin: 0;
  padding: 0;

  /* Vertical stack of rows; each .row holds the 2-up card pair. Rows (not
     individual cards) are the spiral-scroll unit — see work.js. */
  display: flex;
  flex-direction: column;
  gap: clamp(2.2rem, 4vw, 3.6rem);
  /* Full-bleed within the section: the only side inset is the section's
     --pad-x padding — no extra max-width centering margin. */
  width: 100%;
}

/* A row = two cards sharing one transform plane. The rotateX/scale/translate
   (work.js) is applied to the ROW itself, so the cards already tilt together as
   one plane — they carry no 3D transform of their own. transform-style stays
   `flat` (the default): `preserve-3d` would keep the flat children in the row's
   3D coordinate space, which mis-projects their hit-test geometry under the
   rotateX and made the card links impossible to hover or click. */
.row[b-dpncxi0sa5] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.2rem, 4vw, 3.6rem);
  align-items: start;
  transform-style: flat;
  will-change: transform;
}

/* ===================  CARD  =================== */

.card[b-dpncxi0sa5] {
  position: relative;
}

.cardLink[b-dpncxi0sa5] {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  color: inherit;
  text-decoration: none;
  isolation: isolate;
}

.cardImage[b-dpncxi0sa5] {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-cream-deep);
  will-change: transform;
  transition: transform var(--dur-base) var(--ease-out);
}

.cardImage img[b-dpncxi0sa5] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform var(--dur-slow) var(--ease-out);
}

.cardLink:hover .cardImage img[b-dpncxi0sa5] {
  transform: scale(1.04);
}

.cardBody[b-dpncxi0sa5] {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(0.875rem, 1.5vw, 1.25rem);
  padding-inline: 0.25rem;
}

.cardText[b-dpncxi0sa5] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.cardName[b-dpncxi0sa5] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.1;
  color: var(--color-fg);
  margin: 0;
}

/* Category line — comma-separated, uppercase, bold. Mirrors the deliverables
   text style used elsewhere (WorkRow / CaseStudy), tuned for the dark page. */
.cardTags[b-dpncxi0sa5] {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-mute);
  overflow-wrap: anywhere;
}

.cardArrow[b-dpncxi0sa5] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg-mute);
  transition:
    transform var(--dur-base) var(--ease-out),
    color     var(--dur-fast) var(--ease-out);
}

.cardLink:hover .cardArrow[b-dpncxi0sa5] {
  color: var(--color-fg);
  transform: translate(3px, -3px);
}

/* ===================  RESPONSIVE  =================== */

/* Hero — same breakpoints as the /design-process & /services heroes. */
@media (max-width: 1440px) {
  .heroInner[b-dpncxi0sa5] { max-width: 64%; }
  .heading[b-dpncxi0sa5] { max-width: 14ch; }
}

@media (max-width: 1280px) {
  .heroInner[b-dpncxi0sa5] { max-width: 70%; }
  .heading[b-dpncxi0sa5] { max-width: 13ch; }
}

@media (max-width: 1024px) {
  .heroInner[b-dpncxi0sa5] { max-width: 78%; }
  .heading[b-dpncxi0sa5] { max-width: 12ch; line-height: 1.0; }
  .subheading[b-dpncxi0sa5] { line-height: 1.5; }
}

@media (max-width: 768px) {
  .heroInner[b-dpncxi0sa5] { max-width: 100%; }
  .heading[b-dpncxi0sa5] { max-width: none; }
}

@media (max-width: 900px) {
  .grid[b-dpncxi0sa5] {
    gap: clamp(2rem, 5vw, 2.75rem);
  }
  .row[b-dpncxi0sa5] {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 2.75rem);
  }
}

@media (max-width: 480px) {
  .gridSection[b-dpncxi0sa5] {
    padding-inline: 1rem;
  }
  .cardBody[b-dpncxi0sa5] {
    gap: 0.875rem;
  }
}

@media (max-width: 360px) {
  .gridSection[b-dpncxi0sa5] {
    padding-inline: 0.875rem;
  }
}