/* ============================================================================
   SECTIONS — composition-level layouts: hero, page headers, showcase splits,
   CTA bands, spec tables, timelines. Built on the primitives in base.css.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE HERO
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(4rem, 2rem + 8vw, 8.5rem) clamp(3.5rem, 2rem + 5vw, 6.5rem);
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(3rem, 1.5rem + 6vw, 7rem));
}

/* Layered background: radial accent bloom + fine engineering grid.
   Replace `--hero-image` with your own still or poster frame. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(58% 62% at 78% 12%, var(--cn-accent-glow) 0%, transparent 58%),
    radial-gradient(46% 52% at 6% 88%, rgba(91, 140, 255, 0.12) 0%, transparent 60%),
    var(--cn-ink-deep);
}
.hero__grid-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(247, 249, 250, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247, 249, 250, 0.045) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
  pointer-events: none;
}

/* Optional hero imagery slot — drop a file in and add .hero__media img */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.3;
}
.hero__media img, .hero__media video { inline-size: 100%; block-size: 100%; object-fit: cover; }

.hero__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: end;
}
.hero__lede { grid-column: 1 / span 8; }
.hero__side  { grid-column: 10 / span 3; }
@media (max-width: 1079px) {
  .hero__lede { grid-column: 1 / -1; }
  .hero__side { grid-column: 1 / -1; }
}

.hero__title {
  font-family: var(--cn-font-display);
  font-size: var(--fs-display-1);
  font-weight: var(--fw-black);
  line-height: 0.99;
  letter-spacing: -0.04em;
  margin: 0 0 var(--s-6);
  text-wrap: balance;
}
/* The accent clause — the one phrase we want remembered. */
.hero__title em {
  font-style: normal;
  color: var(--cn-accent);
  position: relative;
}

.hero__sub {
  font-size: var(--fs-lead);
  line-height: 1.42;
  color: rgba(247, 249, 250, 0.74);
  max-width: 60ch;
  margin: 0 0 var(--s-8);
  text-wrap: pretty;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

/* Right-hand stat rail — asymmetric counterweight to the headline. */
.hero__rail { display: grid; gap: var(--s-6); border-left: 1px solid rgba(247, 249, 250, 0.16); padding-left: var(--s-6); }
@media (max-width: 1079px) {
  .hero__rail {
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 1fr);
    border-left: 0;
    border-top: 1px solid rgba(247, 249, 250, 0.16);
    padding-left: 0;
    padding-top: var(--s-6);
    margin-top: var(--s-8);
    overflow-x: auto;
    gap: var(--s-5);
  }
}
.hero__stat-value {
  font-family: var(--cn-font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.375rem);
  font-weight: var(--fw-black);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--cn-text-on-dark);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: var(--s-2);
}
.hero__stat-value span { font-size: 0.5em; color: var(--cn-accent); }
.hero__stat-label { font-size: var(--fs-xs); color: rgba(247, 249, 250, 0.58); line-height: 1.4; display: block; }

/* Scroll cue */
.hero__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  font-family: var(--cn-font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 249, 250, 0.5);
}
.hero__cue .icon { animation: cn-nudge 2.6s var(--ease-in-out) infinite; }
@keyframes cn-nudge {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   INNER PAGE HEADER
   ══════════════════════════════════════════════════════════════════════════ */
.pagehead {
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.pagehead__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 70% at 84% 6%, var(--cn-accent-glow) 0%, transparent 60%),
    var(--cn-ink-deep);
}
.pagehead__grid-lines {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(to right, rgba(247, 249, 250, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247, 249, 250, 0.04) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(110% 100% at 50% 0%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(110% 100% at 50% 0%, #000 0%, transparent 80%);
  pointer-events: none;
}
.pagehead__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: end;
  margin-top: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.pagehead__lede { grid-column: 1 / span 7; }
.pagehead__aside { grid-column: 9 / span 4; }
@media (max-width: 1079px) {
  .pagehead__lede, .pagehead__aside { grid-column: 1 / -1; }
}
.pagehead__title {
  font-family: var(--cn-font-display);
  font-size: var(--fs-display-2);
  font-weight: var(--fw-black);
  line-height: 1.02;
  letter-spacing: -0.038em;
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}
.pagehead__sub { font-size: var(--fs-lead); line-height: 1.44; color: rgba(247, 249, 250, 0.72); max-width: 58ch; margin: 0; text-wrap: pretty; }

/* Key-facts list in the header aside */
.factlist { display: grid; gap: var(--s-4); border-left: 1px solid rgba(247, 249, 250, 0.16); padding-left: var(--s-5); margin: 0; }
.factlist div { display: grid; gap: 2px; }
.factlist dt { font-family: var(--cn-font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cn-accent); }
.factlist dd { margin: 0; font-size: var(--fs-sm); color: rgba(247, 249, 250, 0.82); line-height: 1.45; }

/* ══════════════════════════════════════════════════════════════════════════
   SPLIT — copy beside media / diagram
   ══════════════════════════════════════════════════════════════════════════ */
.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.split__copy  { grid-column: 1 / span 5; }
.split__media { grid-column: 7 / span 6; }
.split--flip .split__copy  { grid-column: 8 / span 5; order: 2; }
.split--flip .split__media { grid-column: 1 / span 6; order: 1; }
@media (max-width: 899px) {
  .split__copy, .split__media,
  .split--flip .split__copy, .split--flip .split__media { grid-column: 1 / -1; order: 0; }
}

.framed {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-alt);
  overflow: hidden;
  position: relative;
}
.framed--diagram { aspect-ratio: 4 / 3; max-width: 100%; }
.framed__cap {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--cn-font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════════════════════
   FEATURE ROWS — numbered editorial list
   ══════════════════════════════════════════════════════════════════════════ */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(1rem, 0.5rem + 2.4vw, 3rem);
  padding-block: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: background-color var(--dur-2) var(--ease-out);
}
.row:hover { background: var(--cn-accent-veil); }
@media (max-width: 767px) {
  .row { grid-template-columns: 1fr; gap: var(--s-3); }
}
.row__num { font-family: var(--cn-font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--accent-text); padding-top: 0.35em; }
.row__title { font-family: var(--cn-font-display); font-size: var(--fs-h3); font-weight: var(--fw-semi); letter-spacing: -0.018em; line-height: 1.18; margin: 0; }
.row__body { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-loose); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   SPEC TABLE
   ══════════════════════════════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.spec-table { min-inline-size: 560px; font-size: var(--fs-sm); }
.spec-table caption { text-align: left; padding: var(--s-4) var(--s-5); font-size: var(--fs-xs); color: var(--text-faint); border-bottom: 1px solid var(--line); }
.spec-table th, .spec-table td { padding: var(--s-4) var(--s-5); text-align: left; border-bottom: 1px solid var(--line-faint); vertical-align: top; }
.spec-table thead th {
  font-family: var(--cn-font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-med);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line);
  background: var(--surface-alt);
  white-space: nowrap;
}
.spec-table tbody th { font-weight: var(--fw-semi); color: var(--text); inline-size: 32%; }
.spec-table td { color: var(--text-muted); }
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table tbody tr:hover { background: var(--cn-accent-veil); }

/* ══════════════════════════════════════════════════════════════════════════
   CTA BAND
   ══════════════════════════════════════════════════════════════════════════ */
.ctaband {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(4rem, 2rem + 7vw, 8rem);
}
.ctaband__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 100% at 100% 0%, var(--cn-accent-glow) 0%, transparent 62%),
    radial-gradient(60% 90% at 0% 100%, rgba(91, 140, 255, 0.1) 0%, transparent 60%),
    var(--cn-ink-deep);
}
.ctaband__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.ctaband__copy { grid-column: 1 / span 7; }
.ctaband__side { grid-column: 9 / span 4; }
@media (max-width: 899px) { .ctaband__copy, .ctaband__side { grid-column: 1 / -1; } }

.ctaband__title {
  font-family: var(--cn-font-display);
  font-size: var(--fs-display-2);
  font-weight: var(--fw-black);
  line-height: 1.03;
  letter-spacing: -0.038em;
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}
.ctaband__title em { font-style: normal; color: var(--cn-accent); }

/* Direct-contact panel */
.contactcard {
  border: 1px solid rgba(247, 249, 250, 0.16);
  border-radius: var(--r-sm);
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  background: rgba(247, 249, 250, 0.03);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: grid;
  gap: var(--s-5);
}
.contactcard dl { display: grid; gap: var(--s-4); margin: 0; }
.contactcard dt { font-family: var(--cn-font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cn-accent); margin-bottom: 2px; }
.contactcard dd { margin: 0; font-size: var(--fs-sm); }
.contactcard dd a { color: rgba(247, 249, 250, 0.88); }

/* ══════════════════════════════════════════════════════════════════════════
   QUOTE / PULL-QUOTE
   ══════════════════════════════════════════════════════════════════════════ */
.pullquote { display: grid; gap: var(--s-6); max-width: 30ch; }
.pullquote blockquote {
  font-family: var(--cn-font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2.125rem);
  font-weight: var(--fw-semi);
  line-height: 1.2;
  letter-spacing: -0.026em;
  margin: 0;
  text-wrap: balance;
}
.pullquote--wide { max-width: 44ch; }
.pullquote figcaption { font-size: var(--fs-sm); color: var(--text-muted); }
.pullquote figcaption strong { color: var(--text); font-weight: var(--fw-semi); display: block; }
.pullquote__rule { inline-size: 3rem; block-size: 2px; background: var(--cn-accent); }

/* ══════════════════════════════════════════════════════════════════════════
   TIMELINE / PROCESS
   ══════════════════════════════════════════════════════════════════════════ */
.timeline { display: grid; gap: 0; counter-reset: tl; }
.tl-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem);
  padding-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  position: relative;
  counter-increment: tl;
}
.tl-step:last-child { padding-bottom: 0; }
.tl-step__marker {
  display: grid;
  place-items: center;
  inline-size: 2.75rem; block-size: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-family: var(--cn-font-mono);
  font-size: var(--fs-xs);
  color: var(--accent-text);
  background: var(--surface);
  position: relative;
  z-index: 1;
  flex: none;
}
.tl-step__marker::before { content: counter(tl, decimal-leading-zero); }
/* Connector line */
.tl-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 1.375rem;
  top: 2.75rem;
  bottom: 0;
  inline-size: 1px;
  background: var(--line);
}
.tl-step__title { font-family: var(--cn-font-display); font-size: var(--fs-h3); font-weight: var(--fw-semi); letter-spacing: -0.018em; margin: 0.3rem 0 var(--s-3); line-height: 1.2; }
.tl-step__body { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-loose); margin: 0; max-width: 62ch; }

/* ══════════════════════════════════════════════════════════════════════════
   INDEX LIST — solutions / industries overview
   ══════════════════════════════════════════════════════════════════════════ */
.tilegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
}
.tilegrid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.tilegrid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }

/* Editorial 7-item asymmetric arrangement: first tile spans two columns on
   wide viewports so the grid never reads as a plain uniform matrix. */
@media (min-width: 1080px) {
  .tilegrid--feature > *:first-child { grid-column: span 2; }
}

/* ══════════════════════════════════════════════════════════════════════════
   OUTCOME / RESULT STRIP
   ══════════════════════════════════════════════════════════════════════════ */
.results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  border: 1px solid var(--line);
  border-left: 2px solid var(--cn-accent);
  border-radius: var(--r-sm);
  background: var(--cn-accent-veil);
}
.result__value {
  font-family: var(--cn-font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: var(--fw-black);
  letter-spacing: -0.04em;
  line-height: 1;
  display: block;
  margin-bottom: var(--s-2);
  font-variant-numeric: tabular-nums;
}
.result__label { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   TEAM
   ══════════════════════════════════════════════════════════════════════════ */
.person { display: grid; gap: var(--s-4); }
.person__photo { aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-alt); }
.person__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: grayscale(1); transition: filter var(--dur-3) var(--ease-out); }
.person:hover .person__photo img { filter: grayscale(0); }
.person__name { font-family: var(--cn-font-display); font-size: var(--fs-h4); font-weight: var(--fw-semi); margin: 0; letter-spacing: -0.012em; }
.person__role { font-family: var(--cn-font-mono); font-size: var(--fs-xs); color: var(--accent-text); letter-spacing: 0.04em; margin: 0; }
.person__bio { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-normal); margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */
.contact-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.contact-layout__form { grid-column: 1 / span 7; }
.contact-layout__aside { grid-column: 9 / span 4; }
@media (max-width: 899px) { .contact-layout__form, .contact-layout__aside { grid-column: 1 / -1; } }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.form-grid > .field--full { grid-column: 1 / -1; }
@media (max-width: 599px) { .form-grid { grid-template-columns: 1fr; } }

.officecard { display: grid; gap: var(--s-2); padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.officecard:first-of-type { border-top: 1px solid var(--line); }
.officecard__city { font-family: var(--cn-font-display); font-size: var(--fs-h4); font-weight: var(--fw-semi); margin: 0; }
.officecard__addr { font-size: var(--fs-sm); color: var(--text-muted); font-style: normal; line-height: var(--lh-normal); }

/* ══════════════════════════════════════════════════════════════════════════
   RELATED / NEXT NAV
   ══════════════════════════════════════════════════════════════════════════ */
.nextnav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  border-top: 1px solid var(--line);
}
.nextnav__item {
  display: grid;
  gap: var(--s-3);
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem) clamp(1.25rem, 1rem + 1vw, 2rem);
  border-right: 1px solid var(--line);
  color: inherit;
  position: relative;
  transition: background-color var(--dur-2) var(--ease-out);
}
.nextnav__item:last-child { border-right: 0; }
.nextnav__item:hover { text-decoration: none; background: var(--cn-accent-veil); }
.nextnav__kicker { font-family: var(--cn-font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.nextnav__title { font-family: var(--cn-font-display); font-size: var(--fs-h3); font-weight: var(--fw-semi); letter-spacing: -0.018em; margin: 0; line-height: 1.18; }
.nextnav__item .icon--arrow { transition: transform var(--dur-2) var(--ease-out); }
.nextnav__item:hover .icon--arrow { transform: translateX(5px); }

/* ══════════════════════════════════════════════════════════════════════════
   MISC
   ══════════════════════════════════════════════════════════════════════════ */
.note-panel {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-alt);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}
.note-panel strong { color: var(--text); }

.kv { display: grid; gap: var(--s-4); margin: 0; }
.kv > div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-faint); }
@media (max-width: 599px) { .kv > div { grid-template-columns: 1fr; gap: var(--s-1); } }
.kv dt { font-family: var(--cn-font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.kv dd { margin: 0; font-size: var(--fs-sm); color: var(--text); }