/* ===========================================================================
   COMPONENTS
   Built to the thirteen Figma component sets. Every value is a token —
   nothing here hard-codes a colour, a size or a space.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Shared
   --------------------------------------------------------------------------- */

.di-shell {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.di-eyebrow,
.di-label {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.23;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}

.di-eyebrow { color: var(--ground-accent, var(--c-text-accent)); }

.di-rule {
  border: 0;
  border-top: var(--bw-hairline) solid var(--ground-rule, var(--c-border-hairline));
  margin: 0;
}

/* Skip link — visible only on focus, but genuinely usable when it is. */
.di-skip {
  position: absolute;
  left: var(--s-md);
  top: var(--s-md);
  z-index: 100;
  padding: var(--s-sm) var(--s-md);
  background: var(--c-bg-raised);
  color: var(--c-text-primary);
  border: var(--bw-medium) solid var(--c-border-accent);
  transform: translateY(-200%);
}
.di-skip:focus { transform: none; }

/* ---------------------------------------------------------------------------
   Button — three styles. Heights are equal across states: the Figma frames
   drift between 46 and 48px, which would read as a 2px jump on hover.
   --------------------------------------------------------------------------- */

.di-btn {
  --btn-h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  padding-inline: var(--s-lg);
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--bw-medium) solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
}

.di-btn--primary {
  background: var(--c-bg-raised);
  color: var(--c-text-primary);
  border-color: var(--c-bg-raised);
}
.di-btn--primary:hover,
.di-btn--primary:focus-visible {
  background: var(--c-bg-accent);
  border-color: var(--c-bg-accent);
  color: var(--c-text-on-accent);
}

.di-btn--secondary {
  background: transparent;
  color: var(--ground-text, var(--c-text-primary));
  border-color: var(--ground-text, var(--c-border-strong));
}
.di-btn--secondary:hover,
.di-btn--secondary:focus-visible {
  border-color: var(--c-border-accent);
  color: var(--ground-accent, var(--c-text-accent));
}

/* The Text style is an inline link with a real underline element, not
   text-decoration — it has to thicken from 1px to 2px on interaction. */
.di-btn--text {
  --btn-h: 44px;              /* still clears the 44x44 touch minimum */
  padding-inline: 0;
  border: 0;
  background: none;
  color: var(--ground-text, var(--c-text-primary));
  position: relative;
}
.di-btn--text::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--btn-h) / 2 - 0.9em);
  height: var(--bw-hairline);
  background: currentColor;
  transition: height 160ms ease-out, background-color 160ms ease-out;
}
.di-btn--text:hover,
.di-btn--text:focus-visible { color: var(--ground-accent, var(--c-text-accent)); }
.di-btn--text:hover::after,
.di-btn--text:focus-visible::after { height: var(--bw-medium); }

/* Below 768 a button fills its column. */
@media (max-width: 767px) {
  .di-btn { width: 100%; }
  .di-btn--text { width: auto; }
}

/* ---------------------------------------------------------------------------
   Spec Row — one <dl> partial, used in the footer, the case study, the
   service pages and contact. The Figma featured card rebuilds this by hand
   with a narrower label column; this is the single version.
   --------------------------------------------------------------------------- */

.di-specs { margin: 0; }

.di-spec {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s-lg);
  align-items: baseline;
  padding-block: var(--s-md);
  border-top: var(--bw-hairline) solid var(--ground-rule, var(--c-border-hairline));
}

.di-spec dt {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.014em;
  text-transform: uppercase;
  color: var(--ground-quiet, var(--c-text-secondary));
}

.di-spec dd {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--ground-text, var(--c-text-primary));
}

.di-spec dd a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.di-spec dd a:hover { color: var(--ground-accent, var(--c-text-accent)); }

@media (max-width: 767px) {
  .di-spec { grid-template-columns: 1fr; gap: var(--s-2xs); }
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

.di-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-bg-page);
  padding-block: 22px;
  transition: padding 200ms ease-out, border-color 200ms ease-out;
  border-bottom: var(--bw-hairline) solid transparent;
}

.di-header.is-stuck {
  padding-block: 14px;
  border-bottom-color: var(--c-border-hairline);
}

.di-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-xl);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.di-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-md);
  text-decoration: none;
  color: var(--c-text-primary);
}

.di-logo__mark { display: block; line-height: 0; }
.di-logo__divider {
  width: 1px;
  height: 30px;
  background: var(--c-border-hairline);
}
.di-logo__words { display: flex; flex-direction: column; gap: 2px; }
.di-logo__name { font-size: 1rem; line-height: 1; }
.di-logo__role {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.014em;
  text-transform: uppercase;
  color: var(--c-text-secondary);
}

.di-nav-wrap {
  display: flex;
  align-items: center;
  gap: var(--s-xl);
}

.di-nav {
  display: flex;
  align-items: center;
  gap: var(--s-xl);
}

/* Nav links carry a 2px rule that wipes in from the left. Active is set by
   the scroll-spy, not by click. */
.di-nav a,
.di-drawer__nav a {
  position: relative;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-text-primary);
  padding-block: var(--s-sm);
}

.di-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: var(--bw-medium);
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease-out;
}
.di-nav a:hover::after { transform: scaleX(1); }

/* Active is accent-coloured as well as ruled, so a hovered link and the
   current section are never confusable. */
.di-nav a[aria-current="page"],
.di-nav .current-menu-item > a {
  color: var(--c-text-accent);
}
.di-nav a[aria-current="page"]::after,
.di-nav .current-menu-item > a::after { transform: scaleX(1); }

/* ---------------------------------------------------------------------------
   Burger and drawer
   The trigger is drawn 26x39 in Figma, under the 44x44 the same file sets as
   a hard minimum. Padding takes it to 44 without changing how it looks.
   --------------------------------------------------------------------------- */

.di-burger {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: var(--s-xs) 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--c-text-primary);
}

.di-burger__bars { display: flex; flex-direction: column; gap: 7px; }
.di-burger__bars span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: currentColor;
}
.di-burger__label {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.014em;
  text-transform: uppercase;
}

.di-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(100%, 420px);
  background: var(--c-bg-page);
  padding: var(--s-lg) var(--s-lg) var(--s-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-2xl);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(.2, 0, 0, 1);
  z-index: 60;
}
.di-drawer[hidden] { display: none; }
.di-drawer.is-open { transform: none; }

.di-drawer__head { display: flex; justify-content: flex-end; }
.di-drawer__close {
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.014em;
  text-transform: uppercase;
  color: var(--c-text-primary);
}

.di-drawer__nav { display: flex; flex-direction: column; }
.di-drawer__nav a {
  font-size: 1.25rem;
  padding-block: var(--s-md);
  border-bottom: var(--bw-hairline) solid var(--c-border-hairline);
}
.di-drawer__nav a:hover { color: var(--c-text-accent); }
.di-drawer__cta { margin-top: auto; }

body.di-drawer-open { overflow: hidden; }

@media (max-width: 1023px) {
  .di-burger { display: flex; }
  .di-nav-wrap { display: none; }
}

/* ---------------------------------------------------------------------------
   Footer
   Bound to the inverse ground, which in Dark resolves to the paper. The site
   therefore ends on a light block — deliberate, and rebindable to bg/sunken
   in one line if that reads wrong.
   --------------------------------------------------------------------------- */

.di-footer {
  background: var(--c-bg-inverse);
  color: var(--c-text-on-inverse);
  padding-block: var(--s-4xl);
  margin-top: var(--s-section);
}

.di-footer > * {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.di-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 712px) minmax(0, 440px);
  gap: var(--s-4xl);
}

.di-footer__headline { margin: var(--s-lg) 0 0; max-width: 712px; }
.di-footer__sub {
  margin: var(--s-lg) 0 0;
  max-width: 520px;
  color: var(--ground-quiet);
}

.di-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-lg);
  margin-top: var(--s-3xl);
  padding-top: var(--s-lg);
  border-top: var(--bw-hairline) solid var(--c-border-on-inverse);
}

.di-footer__copy,
.di-footer__links a {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.014em;
  text-transform: uppercase;
  margin: 0;
}

.di-footer__links { display: flex; gap: var(--s-lg); }
.di-footer__links a { color: inherit; text-decoration: none; }
.di-footer__links a:hover { color: var(--c-text-accent-on-inverse); }

@media (max-width: 1023px) {
  .di-footer__top { grid-template-columns: 1fr; gap: var(--s-2xl); }
}

/* Below 768 the links sit above the copyright, per the mobile frame —
   a reorder, not just a stack. */
@media (max-width: 767px) {
  .di-footer__bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--s-md);
  }
}

/* ---------------------------------------------------------------------------
   Section reveal — fires once, never on scroll back up.
   --------------------------------------------------------------------------- */

.di-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 420ms cubic-bezier(.2, 0, 0, 1), transform 420ms cubic-bezier(.2, 0, 0, 1);
}
.di-reveal.is-in { opacity: 1; transform: none; }