/* ============================================================================
   layout.css — containers, section shell, grid, header/nav, footer.
   Breakpoints: 640 / 1024 / 1280 (min-width, mobile-first). No others.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTAINERS
   -------------------------------------------------------------------------- */
.container {
  inline-size: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* --container-wide is a `wide` (>=1280) affordance only — see §7 */
.container--wide { max-inline-size: var(--container-max); }
.container--narrow { max-inline-size: var(--container-narrow); }

/* --------------------------------------------------------------------------
   2. SECTION SHELL
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  padding-block: var(--space-section);
  background-color: var(--c-bg);
  transition: background-color var(--dur-base) var(--ease-standard);
}

.section--surface { background-color: var(--c-surface); }

.section__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.section__head { grid-column: 1 / -1; }

.section__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.section__title { max-inline-size: var(--measure); }

.section__deck {
  margin-block-start: var(--space-4);
  max-inline-size: var(--measure);
  font-size: var(--fs-md);
  color: var(--c-text-muted);
}

.section__head .disclaimer { margin-block-start: var(--space-4); }

.section__head--center {
  text-align: start;
}

.section__body {
  grid-column: 1 / -1;
  margin-block-start: var(--space-stack);
}

/* Full-width hairline between head and body.
   `grid-column: 1 / -1` matters when .section__body is itself a grid
   (expertise, contact) — otherwise the pseudo-element eats the first cell. */
.section__body::before {
  content: "";
  display: block;
  grid-column: 1 / -1;
  block-size: 1px;
  background-image: var(--grad-hairline);
  margin-block-end: var(--space-stack);
}

/* --------------------------------------------------------------------------
   3. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background-color: color-mix(in srgb, var(--c-surface) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-header);
  transition: background-color var(--dur-base) var(--ease-standard);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--header-h);
}

.logo {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap-min);
  padding-inline-end: var(--space-2);
  color: var(--c-text);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
}

.logo__mark {
  display: inline-flex;
  color: var(--c-accent);
}

.site-header__actions {
  order: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.site-header__cta { display: none; }

/* --- Nav ---------------------------------------------------------------- */
.nav { order: 3; }

.nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding-inline: var(--space-3);
  border-radius: var(--r-sm);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  transition: color var(--dur-fast) var(--ease-standard);
}

.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-3);
  inset-block-end: var(--space-2);
  block-size: 1px;
  background-color: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out-quart);
}

.nav__link:hover,
.nav__link[aria-current="true"] { color: var(--c-text); }

.nav__link:hover::after,
.nav__link[aria-current="true"]::after { transform: scaleX(1); }

/* No JavaScript: the nav is a plain wrapping row, the hamburger is removed. */
html:not(.js) .nav {
  flex-basis: 100%;
  padding-block-end: var(--space-2);
}

html:not(.js) .nav-toggle { display: none; }

/* With JavaScript: mobile/tablet nav is a sheet under the header. */
.js .nav {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: var(--z-dropdown);
  display: none;
  padding: var(--space-3) var(--container-pad) var(--space-5);
  border-block-start: 1px solid var(--c-border);
  background-color: var(--c-surface-raised);
  box-shadow: var(--shadow-3);
}

.js .site-header:has(.nav-toggle[aria-expanded="true"]) .nav,
.js .nav[data-open="true"] { display: block; }

/* Lift the whole header above the scrim while the sheet is open */
.js .site-header:has(.nav-toggle[aria-expanded="true"]) { z-index: var(--z-modal); }

.js .nav .nav__list {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}

.js .nav .nav__link { padding-inline: var(--space-2); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: var(--c-scrim);
}

/* --- Read progress ------------------------------------------------------ */
#read-progress {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-progress);
  block-size: 2px;
  background-image: var(--grad-neon);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
}

/* --------------------------------------------------------------------------
   4. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background-color: var(--c-bg);
  padding-block: var(--space-16) var(--space-8);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background-image: var(--grad-hairline);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10) var(--gutter-lg);
}

.site-footer__col { display: block; }

.site-footer__wordmark {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  color: var(--c-text);
}

.site-footer__line {
  margin-block-start: var(--space-3);
  max-inline-size: var(--measure-narrow);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.site-footer__label { display: block; margin-block-end: var(--space-3); }

.site-footer__links {
  display: flex;
  flex-direction: column;
}

.site-footer__links a {
  display: flex;
  align-items: center;
  min-block-size: var(--tap-min);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  text-decoration: none;
}

.site-footer__links a:hover {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__email { margin-block-start: var(--space-4); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--c-border);
}

.site-footer__copy,
.site-footer__signoff,
.site-footer__disclaimer {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--c-text-faint);
}

.site-footer__disclaimer { flex-basis: 100%; }

/* --------------------------------------------------------------------------
   5. TABLET — >= 640px : 8-column grid
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .section__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .section__head { grid-column: 1 / span 6; }

  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__col--brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   6. DESKTOP — >= 1024px : 12-column grid, inline nav
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  html { scroll-padding-top: calc(var(--header-h-lg) + var(--space-4)); }

  .section__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .section__head { grid-column: 1 / span 7; }

  .site-header__inner {
    flex-wrap: nowrap;
    min-block-size: var(--header-h-lg);
    gap: var(--space-4);
  }

  .site-header__cta { display: inline-flex; }

  .nav-toggle { display: none; }

  .js .nav,
  html:not(.js) .nav {
    position: static;
    order: 2;
    display: block;
    flex-basis: auto;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .site-header__actions { order: 3; margin-inline-start: 0; }

  .js .nav .nav__list {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .js .nav .nav__link { padding-inline: var(--space-3); }

  .site-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__col--brand { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   7. WIDE — >= 1280px : the two wide stages only
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  #hero .container--wide,
  #architectures .container--wide,
  .site-header .container--wide { max-inline-size: var(--container-wide); }
}

/* --------------------------------------------------------------------------
   Logo mark. The hexagon is the container silhouette, the lemniscate inside is
   the DevOps loop, and a node runs that loop continuously. Sizes are fixed in
   the SVG viewBox so the mark holds its proportions next to the wordmark at
   every breakpoint.
   -------------------------------------------------------------------------- */
.logo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The glow is what makes a two-colour mark read as lit rather than printed.
     Kept small: this sits in a sticky header on every scroll frame. */
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c-accent) 28%, transparent));
}

.logo__loop {
  /* Drawn by the dash animation in motion.css. Without JS or with reduced
     motion the full path is simply visible. */
  stroke-dasharray: none;
}

.logo__node { opacity: 0; }

/* A slow sheen across the wordmark. Wealth reads as restraint plus one moment
   of light, not as gold paint — so this is a single highlight pass over the
   existing text colour, never a colour change. */
.logo__text {
  background-image: linear-gradient(
    100deg,
    var(--c-text) 0%,
    var(--c-text) 42%,
    var(--c-accent) 50%,
    var(--c-text) 58%,
    var(--c-text) 100%
  );
  background-size: 280% 100%;
  background-position: 100% 0;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .logo__text {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* --------------------------------------------------------------------------
   Book a call — the one button on the page that has to be found without being
   looked for. It carries the accent as a filled gradient rather than the ghost
   outline every other header control uses, so it is the only lit object in the
   bar. The sheen is the same device as the wordmark's: one pass of light over
   a solid colour, not a colour change.
   -------------------------------------------------------------------------- */
.btn--book {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  padding-inline: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
  border-radius: var(--r-md);
  background-image: linear-gradient(
    135deg,
    var(--c-accent) 0%,
    color-mix(in srgb, var(--c-accent) 72%, var(--c-accent-2)) 100%
  );
  color: var(--c-text-on-accent);
  font-weight: var(--fw-semibold);
  box-shadow: var(--glow-accent-sm);
  overflow: hidden;
  transition:
    box-shadow var(--dur-base) var(--ease-standard),
    translate  var(--dur-base) var(--ease-out-quart);
}

.btn--book:hover {
  box-shadow: var(--glow-accent-md);
  translate: 0 -1px;
}

.btn--book__icon { flex: none; opacity: 0.85; }

/* The light source sits above the button, the way the Figma reference lights
   its primary control — a blur below would read as a drop shadow instead. */
.btn--book::before {
  content: "";
  position: absolute;
  inset-block-start: -70%;
  inset-inline: 12%;
  block-size: 70%;
  border-radius: 50%;
  background-color: rgb(255 255 255 / 0.55);
  filter: blur(10px);
  pointer-events: none;
}

/* The travelling sheen. Sits above the fill, below the label. */
.btn--book::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: 40%;
  inset-inline-start: -45%;
  background-image: linear-gradient(
    100deg,
    transparent 0%,
    rgb(255 255 255 / 0.35) 50%,
    transparent 100%
  );
  pointer-events: none;
}