/* ============================================================================
   Base — reset, typography defaults, and the shared interface language:
   containers, eyebrows, buttons, header, footer. Page sections live in their
   own stylesheet (home.css, notfound.css).
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s7));
}

body {
  background-color: var(--paper);
  background-image: var(--grain), var(--wash);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--w-reg);
  line-height: var(--lh-body);
  letter-spacing: var(--track-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Selection is the palette, not the browser's blue: ink ground, paper type.
   On the inverted band that would be invisible, so it turns over there. */
::selection {
  background: var(--ink);
  color: var(--paper);
}

.section--dark ::selection {
  background: var(--paper);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --- Layout -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--pad-section);
  border-top: 1px solid var(--rule);
}

/* One ground per deck, each a tint of the mark's palette. The wash and the
   grain ride on top of all of them, so the decks differ in hue while the light
   across the page and its tooth stay continuous. The ground switcher still
   drives the base — hero, contact, footer — which is what the decks sit
   between. */
.section--tint,
.section--lavande,
.section--sable,
.section--verdeau {
  background-image: var(--grain), var(--wash);
}

.section--tint    { background-color: var(--paper-2); }
.section--lavande { background-color: var(--deck-approach); }
.section--sable   { background-color: var(--deck-team); }
.section--verdeau { background-color: var(--deck-contact); }

.section--dark {
  background-color: var(--ink);
  background-image: var(--grain-dark);
  color: var(--on-ink);
  border-top-color: transparent;
}

.measure {
  max-width: var(--measure);
}

/* --- Type ---------------------------------------------------------------- */

.eyebrow {
  display: block;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--w-reg);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.section--dark .eyebrow {
  color: var(--on-ink-2);
}

.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--w-reg);
  letter-spacing: var(--track-h2);
  text-wrap: balance;
}

.lede {
  color: var(--ink-2);
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  letter-spacing: var(--track-text);
  text-wrap: pretty;   /* no orphan on the closing line */
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 40px;
  padding-inline: 18px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-reg);
  letter-spacing: var(--track-text);
  white-space: nowrap;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.btn:hover {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}

.btn--primary {
  border-color: var(--action);
  background: var(--action);
  color: var(--paper);
}

.btn--primary:hover {
  border-color: var(--action-hover);
  background: var(--action-hover);
  color: var(--paper);
}

/* drawn, not typed: no bundled face carries an arrow glyph, so a character
   here would silently fall back to a system font */
.btn__arrow {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--fast) var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* --- Header --------------------------------------------------------------
   Two floating panels rather than one bar: the menu rides in a panel that
   flexes to fill, and the action sits in its own panel to the right, with a
   hinge of space between them. Separating the action from the navigation says
   they are different kinds of thing before the labels are even read. */

.header {
  position: sticky;
  top: var(--s3);
  z-index: 20;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--max);
  margin: var(--s3) auto 0;
}

.header__row {
  display: flex;
  gap: 6px;               /* the hinge */
}

.header__bar,
.header__cta {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: color-mix(in srgb, var(--paper) 76%, transparent);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow:
    0 1px 2px rgba(14, 17, 22, .04),
    0 12px 32px -14px rgba(14, 17, 22, .16);
}

.header__bar,
.header__cta {
  height: var(--header-h);
}

/* brand left, menu on the panel's centre line */
.header__bar {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s5);
  padding-inline: var(--s5);
}

/* The panel is the action — a filled button inside a panel was a card within a
   card, and the black fill outweighed everything else in the header. */
.header__cta {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: var(--s5);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  /* the face carries no smcp table, so these are synthesised caps — they need
     a little tracking to sit evenly */
  font-variant-caps: small-caps;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.header__cta:hover,
.header__cta:focus-visible {
  border-color: var(--rule-strong);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
}

/* leaves the page, so it leans out rather than down */
.header__cta-arrow {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--ink-3);
  transition: transform .3s var(--ease), color var(--fast) var(--ease);
}

.header__cta:hover .header__cta-arrow,
.header__cta:focus-visible .header__cta-arrow {
  color: var(--ink);
  transform: translate(1px, -1px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* The wordmark is part of the logo, so it is set in the lockup's face and does
     NOT follow the body font or the development switcher — see
     agents/logo/evolocity-lockup-caslon-black.svg. Mark and gap are that file's
     own proportions: measured off it, the mark is 1.326x the wordmark's CAP
     height and the gap 0.597x, with the mark centred on the cap band. Libre
     Caslon's cap is 0.69 of its size, so at 24px that is a 22px mark and a 10px
     gap. */
  font-family: "Libre Caslon Display", var(--font);
  font-size: var(--fs-brand);
  line-height: var(--lh-brand);
  font-weight: var(--w-reg);
  letter-spacing: -.02em;
}

.brand__mark {
  position: relative;
  top: var(--mark-nudge);
  flex: none;             /* a flex item, so it would otherwise shrink to nothing */
  width: 22px;
  height: 22px;
  color: var(--ink);
  transition: transform var(--slow) var(--ease);
}

.brand:hover .brand__mark {
  transform: rotate(-24deg);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
}

/* Each item carries a chevron because each one leads to something below it —
   two to their sections, Research to the note that opens under it. The
   indicator states where the item goes, it does not decorate. All three are
   one rule, so the pending item is the same object as the links, not a
   near-match kept in step by hand. */
.nav a,
.nav__pending {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--track-h3);
  transition: color var(--fast) var(--ease);
}

.nav__label {
  position: relative;
}

/* On hover a rule is drawn in from the left and the chevron leans the way the
   link goes — the page's only motion, and it says where you are headed. */
.nav__label::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}

.nav__arrow {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform .3s var(--ease);
}

.nav a:hover,
.nav a:focus-visible,
.nav__pending:hover,
.nav__pending:focus-visible {
  color: var(--ink);
}

.nav a:hover .nav__label::after,
.nav a:focus-visible .nav__label::after,
.nav__pending:hover .nav__label::after,
.nav__pending:focus-visible .nav__label::after {
  transform: scaleX(1);
}

.nav a:hover .nav__arrow,
.nav a:focus-visible .nav__arrow,
.nav__pending:hover .nav__arrow,
.nav__pending:focus-visible .nav__arrow {
  transform: translateY(2px);
}

/* deliberately not a link until there is somewhere to go — it reads as one and
   answers on hover instead. tabindex makes that answer reachable without a
   mouse; aria-describedby carries it to a reader whether or not the box shows. */
.nav__pending {
  position: relative;
  cursor: default;
}

/* the note is the header panel again at one quarter the size: same hairline,
   same translucency and blur, same two-stage shadow */
.nav__note {
  position: absolute;
  /* clears the bar rather than the item: half the bar's vertical slack, then
     the same 6px hinge that separates the bar from the CTA. The border needs
     no term — it takes a pixel off the centred slack and adds it back outside,
     so half the border-box height lands exactly on the bar's outer edge. */
  top: calc(100% + (var(--header-h) - var(--lh-h3)) / 2 + 6px);
  left: 50%;
  z-index: 1;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 76%, transparent);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow:
    0 1px 2px rgba(14, 17, 22, .04),
    0 12px 32px -14px rgba(14, 17, 22, .16);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  letter-spacing: var(--track-text);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -4px);
  transition:
    opacity var(--fast) var(--ease),
    transform var(--fast) var(--ease),
    visibility 0s linear var(--fast);
}

.nav__pending:hover .nav__note,
.nav__pending:focus-visible .nav__note {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--s6);
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.footer__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}

.footer a {
  transition: color var(--fast) var(--ease);
}

.footer a:hover {
  color: var(--ink);
}

@media (max-width: 720px) {
  /* at the clamp floor the fluid roles get px line-heights, so the grid holds
     at both anchor widths */
  .h2 {
    line-height: 32px;
  }

  .nav {
    gap: var(--s4);
  }

  /* hide the menu itself, not just its children, so the bar collapses to a
     single column and the brand gets the whole width */
  .nav {
    display: none;
  }

  .header__bar {
    grid-template-columns: 1fr;
    padding-inline: var(--s4);
  }

  .footer__in {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s3);
  }
}

/* --- Quality floor ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}