@layer reset, tokens, brand, base, components, utilities, site;

@import url("/styles/tokens-base/reset.css") layer(reset);
@import url("/styles/tokens-base/scales.css") layer(tokens);
@import url("/styles/tokens-base/aliases.css") layer(tokens);
@import url("/styles/tokens-base/misc.css") layer(tokens);

/* brand layer — applies ncss overrides */
@import url("/styles/tokens-ncss/index.css") layer(brand);

/* shared component styles */
@import url("/styles/components/index.css") layer(components);

/* site-only utilities */
@layer site {
  /* NCSS brand voice: ALL CAPS + tighter tracking on titles + nav.
     Heaviness comes from the font itself (Archivo Black handles --font-display),
     so weight overrides aren't needed except where elements use --font-sans. */
  [data-brand="ncss"] {
    /* ALL CAPS identity at Medium weight — Ultrabold is loaded but reserved;
       components request weight 200/300 so the browser snaps to Medium (500),
       giving an editorial caps treatment without the overbearing heft. */
    .title-mark__text {
      text-transform: uppercase;
      letter-spacing: 0.01em;
    }
    .home-hero__wordmark,
    .home-hero__tagline {
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }
    .home-hero__tagline {
      font-size: clamp(var(--text-step-3), 10vw, 8rem);
      line-height: 0.95;
      font-weight: 400;
    }
    @media (max-width: 640px) {
      .home-hero__tagline {
        display: block;
        font-size: clamp(var(--text-step-3), 13vw, 6rem);
      }
    }
    .home-hero__link,
    .site-nav__link,
    .site-nav__disclosure,
    .site-nav__wordmark {
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    /* Hero text is white over the video backdrop — link color inherits
       from .home-hero, so nav + tagline + wordmark all pick up white. */
    .home-hero {
      color: #ffffff;
    }
    /* Team headshots desaturated — matches the monochrome brand voice
       (black-and-white video hero + heavy display caps). */
    .bio-block__portrait {
      filter: grayscale(1);
    }

    /* Home engineered-shading section has no diagram on NCSS — collapse
       the shared 2-col grid (copy + diagram) so the copy fills the row
       and no empty 22rem cell hangs off the right. */
    .engineered-shading__grid {
      grid-template-columns: 1fr;
    }


    /* Dark overlay on top of the video to give the white type something
       to read against. ::after on .home-hero__media paints above the
       video but stays inside __media's z-index: -1 stacking context, so
       the hero content above still renders cleanly. */
    .home-hero__media::after {
      content: '';
      position: absolute;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.45);
      pointer-events: none;
    }

    /* Left-aligned hero — heavier display font reads as overbearing when
       centered over the video. Left-align gives it editorial weight and
       reduces the "billboard" feel. */
    .home-hero {
      justify-items: start;
      text-align: left;
      padding-inline: var(--space-l);
    }
    /* Reorder: brand → tagline (company name) → primary nav → secondary nav
       → scroll cue. Setting explicit orders on every cell avoids the
       default-0 items (brand, scroll-cue) jumping over the offset items. */
    .home-hero__brand          { order: 1; }
    .home-hero__tagline-group {
      justify-items: start;
      text-align: left;
      order: 2;
    }
    .home-hero__nav--primary   { order: 3; }
    .home-hero__nav--secondary { order: 4; }
    .home-hero__scroll-cue {
      order: 5;
      /* Keep the bobbing arrow centered against the left-aligned content
         above — the parent's justify-items: start would otherwise pull it
         flush left. */
      justify-self: center;
    }

    /* Desktop: primary and secondary nav sit side by side as two columns
       under the tagline, so eight step-4 links do not push the hero far
       past the fold. Brand, tagline and scroll cue span both columns. */
    @media (min-width: 641px) {
      .home-hero {
        /* 1fr keeps the spanning scroll cue centered on the viewport */
        grid-template-columns: auto 1fr;
        grid-template-rows: repeat(4, auto);
        column-gap: var(--space-2xl);
      }
      .home-hero__brand,
      .home-hero__tagline-group,
      .home-hero__scroll-cue {
        grid-column: 1 / -1;
      }
    }

    /* Bigger, tighter nav stack — vertical column on left rail. */
    .home-hero__list {
      flex-direction: column;
      align-items: start;
      gap: var(--space-3xs);
    }
    .home-hero__link {
      font-size: var(--text-step-4);
      line-height: 1;
      padding-inline: 0;
    }

    /* Mobile already stacks; override the size bump on the mobile rule too
       so the desktop step-4 doesn't get re-overridden by the existing
       multiplier-based mobile sizing in home-hero.css. */
    @media (max-width: 640px) {
      .home-hero__link {
        font-size: var(--text-step-4);
      }
    }
  }


  /* on mobile, reserve room at the bottom so content doesn't sit under the fixed quick-contact bar */
  @media (max-width: 640px) {
    body {
      padding-block-end: calc(var(--target-size-min) + var(--space-l));
    }
  }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-s);
    inset-block-start: var(--space-s);
    padding: var(--space-2xs) var(--space-s);
    background-color: var(--color-surface-default);
    color: var(--color-text-default);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-s);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
    z-index: 100;
  }
  .skip-link:focus {
    transform: translateY(0);
  }

  /* page-level shells used by layouts */
  .page-section {
    padding-block: var(--space-section);
    padding-inline: var(--space-m);
  }
  .page-section__inner {
    width: 100%;
    max-width: var(--measure-container);
    margin-inline: auto;
  }
  .page-section--prose .page-section__inner {
    max-width: var(--measure-prose);
  }
  .page-section--narrow .page-section__inner {
    max-width: var(--measure-narrow);
  }
  .page-section--wide .page-section__inner {
    max-width: var(--measure-wide);
  }
  .page-section--muted {
    background-color: var(--color-surface-muted);
  }

  /* two-col grids used by contact + sustainability header */
  .stack-grid {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: 1fr;
  }
  @media (min-width: 768px) {
    .stack-grid--two-up { grid-template-columns: 1fr 1fr; }
  }
  @media (min-width: 1024px) {
    .stack-grid--services { grid-template-columns: minmax(auto, 22rem) 1fr; align-items: start; gap: var(--space-xl); }
  }

  /* portfolio card grid (3 → 1 col responsive) */
  .project-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-l);
    grid-template-columns: 1fr;
  }
  @media (min-width: 640px) {
    .project-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (min-width: 960px) {
    .project-grid { grid-template-columns: 1fr 1fr 1fr; }
  }

  /* manufacturers: sticky product-lines menu + one section per category */
  .product-lines {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    margin-block-start: var(--space-xl);
  }
  @media (min-width: 960px) {
    .product-lines {
      grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
      align-items: start;
    }
    .product-lines__nav {
      position: sticky;
      inset-block-start: var(--space-l);
    }
  }
  .product-lines__heading {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--text-step-0);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-s);
  }
  .product-lines__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-inline-start: 1px solid var(--color-border-subtle);
  }
  .product-lines__link {
    display: block;
    min-height: var(--target-size-min);
    padding: var(--space-3xs) var(--space-s);
    margin-inline-start: -1px;
    border-inline-start: 2px solid transparent; /* lint-allow: 2px active-marker rule */
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: var(--text-step--1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
  }
  .product-lines__link:hover {
    color: var(--color-text-default);
  }
  .product-lines__link[aria-current] {
    color: var(--color-text-default);
    border-inline-start-color: var(--color-text-default);
  }
  .product-lines__count {
    margin-inline-start: 0.5em;
    font-size: 0.85em;
    color: var(--color-text-muted);
  }
  .product-lines__sections {
    display: grid;
    gap: var(--space-2xl);
  }
  .product-line {
    scroll-margin-block-start: var(--space-l);
  }
  .product-line__title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--text-step-3);
    line-height: var(--leading-tight);
    text-transform: uppercase;
    margin: 0;
  }
  .product-line__mark {
    color: var(--color-text-muted);
    margin-inline-end: 0.25em;
  }
  .product-line__body {
    max-width: var(--measure-prose);
    margin-block: var(--space-s) var(--space-m);
  }
  .product-line__group {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--text-step-1);
    text-transform: uppercase;
    margin: var(--space-m) 0 var(--space-s);
  }
  .product-line__note {
    margin-block-start: var(--space-s);
    color: var(--color-text-muted);
    font-size: var(--text-step--1);
  }
  @media (max-width: 959px) {
    /* below the two-column width the menu is a compact wrap of links */
    .product-lines__list {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3xs) var(--space-2xs);
      border: 0;
    }
    .product-lines__link {
      margin: 0;
      padding-inline: var(--space-2xs);
      border: 1px solid var(--color-border-subtle);
      border-radius: var(--radius-pill);
    }
    .product-lines__link[aria-current] {
      border-color: var(--color-border-subtle);
    }
  }

  /* offices grid — city/market name + photo, deliberately minimal */
  .offices-grid {
    list-style: none;
    margin: var(--space-xl) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-l);
    grid-template-columns: 1fr;
  }
  @media (min-width: 640px) {
    .offices-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (min-width: 960px) {
    .offices-grid { grid-template-columns: 1fr 1fr 1fr; }
  }
  .office-card {
    margin: 0;
  }
  /* the responsive-image pipeline wraps the image in <picture> */
  .office-card picture {
    display: block;
  }
  /* 8 / 5 matches the client's stylized map tiles (1600x1000) so their
     edge labels and coordinates are not cropped */
  .office-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    object-fit: cover;
  }
  .office-card__name {
    display: block;
    margin-block-start: var(--space-xs);
  }
  .office-card__address {
    margin-block-start: var(--space-3xs);
    font-style: normal;
    font-size: var(--text-step--1);
    color: var(--color-text-muted);
  }
  /* the offices page sits on the muted surface; drop the footer's top
     margin so no white band shows between the section and the footer */
  main:has(.offices-grid) + .site-footer {
    margin-block-start: 0;
  }

  /* numbered-service-cards list */
  .service-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-m);
  }

  /* small-eyebrow / kicker used on portfolio-detail above title */
  .kicker {
    font-family: var(--font-sans);
    font-size: var(--text-step--1);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* contact page split: founder column + form column */
  .contact-page__details {
    display: grid;
    gap: var(--space-l);
  }

  /* home contact: stacked single column (heading + lead, form, founder cards) */
  .home-contact {
    width: 100%;
    max-width: var(--measure-narrow);
    margin-inline: auto;
    display: grid;
    gap: var(--space-l);
  }
  .home-contact__header {
    display: grid;
    gap: var(--space-2xs);
  }
  .home-contact__lead {
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--text-step-1);
    margin: 0;
  }
  .home-contact__founders {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-l);
    margin-block-start: var(--space-m);
    padding-block-start: var(--space-m);
    border-top: 1px solid var(--color-border-subtle);
  }
  @media (min-width: 640px) {
    .home-contact__founders {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xl);
    }
  }

  /* services sidebar: intro + technical drawing as a stacked left rail */
  .services-sidebar {
    display: grid;
    gap: var(--space-l);
  }
  .services-sidebar__intro > * + * {
    margin-block-start: var(--space-s);
  }

  /* team grid: stacks at mobile, becomes a single bordered grid at desktop so
     the two bio rows share borders (no double-line gap between them).
     desktop: breaks out of the container so the divider lines extend full-bleed
     to the screen edges, matching the live site's edge-to-edge separators. */
  .team-grid {
    display: grid;
    gap: var(--space-2xl);
    margin-block-start: var(--space-2xl);
  }
  @media (min-width: 768px) {
    .team-grid {
      gap: 0;
      margin-block-start: var(--space-xl);
      width: 100vw;
      margin-inline: calc(50% - 50vw);
    }
  }
  /* pairs variant (team.md bioLayout: pairs): two bios per row at wide
     desktop, so each row reads photo, bio, photo, bio. each bio keeps its own
     top line; the grid draws the closing bottom line once so an even count
     doesn't leave the second-to-last bio open. */
  @media (min-width: 1024px) {
    .team-grid--pairs {
      grid-template-columns: 1fr 1fr;
      border-block-end: 2px solid var(--color-divider);
    }
    .team-grid--pairs .bio-block:last-child {
      border-block-end: 0;
    }
    .team-grid--pairs .bio-block:nth-child(even) {
      border-inline-start: 2px solid var(--color-divider);
    }
    .team-grid--pairs .bio-block__body {
      padding: var(--space-l);
    }
  }

  /* innovation grid: same pattern as .team-grid — alternating image/content
     rows separated by sharp full-bleed dividers, edge-to-edge media cells. */
  .innovation-grid {
    display: grid;
    gap: var(--space-2xl);
    margin-block-start: var(--space-2xl);
  }
  @media (min-width: 768px) {
    .innovation-grid {
      gap: 0;
      margin-block-start: var(--space-xl);
      width: 100vw;
      margin-inline: calc(50% - 50vw);
    }
  }

  /* sustainability figures: inline image + caption used to anchor the
     wap-summary, complex-glazing-report, and prototypical-design-example
     diagrams in the prose flow. */
  .sustainability-figure {
    margin: var(--space-l) 0;
    padding: var(--space-m);
    background-color: var(--color-surface-muted);
    border-radius: var(--radius-s);
    text-align: center;
  }
  .sustainability-figure img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-s);
  }
  .sustainability-figure figcaption {
    margin-block-start: var(--space-s);
    color: var(--color-text-muted);
    font-size: var(--text-step--1);
  }
  .sustainability-figure figcaption p {
    margin: 0;
  }
  .sustainability-figure figcaption p + p {
    margin-block-start: var(--space-3xs);
  }

  /* sustainability intro: stacks at mobile, becomes a 2-col grid on desktop —
     intro paragraphs on the left, "our difference" anchor list on the right. */
  .sustainability-intro {
    display: grid;
    gap: var(--space-l);
  }
  .sustainability-intro__list {
    list-style: none;
    margin: var(--space-s) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-2xs);
    color: var(--color-text-muted);
  }
  @media (min-width: 768px) {
    .sustainability-intro {
      grid-template-columns: 1fr minmax(auto, 22rem);
      gap: var(--space-2xl);
      align-items: start;
    }
  }

  /* engineered shading: copy on left, diagram on right at desktop, stacked at mobile */
  .engineered-shading__grid {
    display: grid;
    gap: var(--space-xl);
    align-items: start;
  }
  .engineered-shading__copy .prose__body > * + * {
    margin-block-start: var(--space-s);
  }
  .engineered-shading__diagram {
    margin: 0;
    text-align: center;
  }
  .engineered-shading__diagram img {
    max-width: 100%;
    height: auto;
  }
  @media (min-width: 768px) {
    .engineered-shading__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
      gap: var(--space-2xl);
    }
  }
}