/* ==========================================================================
   Arch Metrics — homepage stylesheet
   Scoped to index.php only. Does not affect header.php / newcss.css pages.
   No framework, no build step, no external CSS dependencies.
   ========================================================================== */

/* --- Brand display face (local, wordmark only). The repo copy sits at the
       web root; the legacy production path was /fonts/. Try the root first,
       then /fonts/, then fall back to a system Copperplate/serif. ---------- */
@font-face {
  font-family: 'Copperplate Gothic AM';
  src: url('/Copperplate-Gothic-Std-33-BC.woff') format('woff'),
       url('/fonts/Copperplate-Gothic-Std-33-BC.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  --ink:        #0f1c2e;
  --ink-2:      #33465f;
  --muted:      #64788f;
  --muted-2:    #8a9bb0;

  --brand:      #074b83;   /* historic Arch Metrics blue */
  --brand-600:  #0a5fa5;
  --accent:     #2b7fc4;

  --line:       #dde5ee;
  --line-soft:  #eef2f7;

  --bg:         #ffffff;
  --bg-alt:     #f6f8fb;
  --dark:       #0a2138;
  --dark-2:     #102f4d;
  --on-dark:    #e8eef5;
  --on-dark-2:  #9fb4c9;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mark: 'Copperplate Gothic AM', Copperplate, 'Copperplate Gothic Light', Georgia, serif;

  --maxw: 1180px;
  --gut: 24px;
  --nav-h: 86px;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.18; letter-spacing: -0.015em; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--accent); }

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

/* --- Layout primitives -------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.section { padding: 92px 0; }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line-soft); }
/* Selected Work is the centerpiece — more air than the sections around it. */
.section--feature { padding: 118px 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand); color: #fff; padding: 12px 18px; font-size: 14px;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

/* --- Section heading pattern -------------------------------------------- */
.eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.section-head { max-width: 720px; margin-bottom: 56px; }

.section-head h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.section-head p { color: var(--ink-2); font-size: 19px; }

.section-head--feature { max-width: 860px; margin-bottom: 68px; }
.section-head--feature h2 { font-size: clamp(32px, 4.1vw, 50px); letter-spacing: -0.026em; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-600); color: #fff; }

.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: #fff; }

.btn--light { background: #fff; color: var(--dark); }
.btn--light:hover { background: var(--on-dark); color: var(--dark); }

.btn--onDark { border-color: rgba(255,255,255,.28); color: #fff; }
.btn--onDark:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.07); }

.btn .arw { transition: transform .18s ease; }
.btn:hover .arw { transform: translateX(3px); }

/* --- Navigation --------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.nav.is-stuck { box-shadow: 0 1px 14px rgba(15,28,46,.08); border-color: var(--line); }

.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand { display: flex; align-items: center; gap: 13px; color: var(--ink); flex: none; }
.brand:hover { color: var(--ink); }
.brand img { height: 42px; width: 42px; }
.brand__name {
  font-family: var(--mark);
  font-size: 21px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--brand);
}

.nav__links { display: flex; align-items: center; gap: 30px; margin-left: auto; }

.nav__links a {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.nav__links a:hover { color: var(--brand); }

/* Quiet utility link — deliberately lower contrast than the section links. */
.nav__signin {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  padding-left: 26px;
  border-left: 1px solid var(--line);
  flex: none;
}
.nav__signin:hover { color: var(--brand); }

.nav .btn { padding: 12px 22px; font-size: 14.5px; }

.nav__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 9px 11px;
  cursor: pointer;
  color: var(--ink);
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  display: block; width: 18px; height: 1.5px; background: currentColor; content: '';
}
.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after  { transform: translateY(4.5px); }

.nav__mobile { display: none; border-top: 1px solid var(--line-soft); background: #fff; }
.nav__mobile.is-open { display: block; }
.nav__mobile ul { padding: 8px 0 18px; }
.nav__mobile a {
  display: block;
  padding: 13px var(--gut);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-soft);
}
.nav__mobile .m-cta { padding: 18px var(--gut) 4px; }
.nav__mobile .m-cta .btn { width: 100%; justify-content: center; }

/* --- Hero ---------------------------------------------------------------
   No decorative graphic: the headline itself carries the space. The meta row
   splits the pillars and the lede so the full measure stays occupied. ------ */
.hero { padding: 104px 0 0; }

.hero__ident {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 30px;
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 5.9vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  max-width: 23ch;
  text-wrap: balance;
}

.hero__meta {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 48px;
  margin-top: 48px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.hero__pillars {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--brand);
  letter-spacing: 0.02em;
}

.hero__lede {
  font-size: 19.5px;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 660px;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }

/* Credibility strip below the hero */
.proofbar {
  margin-top: 76px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.proofbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 40px;
  padding: 22px 0;
  font-size: 15px;
  color: var(--ink-2);
}
.proofbar__inner strong { color: var(--ink); font-weight: 600; }
.proofbar__sep { color: var(--line); }

/* --- Approach (What Arch Metrics Does) ---------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
  border-top: 1px solid var(--line);
  padding-top: 34px;
}

.step h3 {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: -0.018em;
  margin-bottom: 12px;
}

.step p { font-size: 16.5px; color: var(--muted); line-height: 1.6; }

.note {
  margin-top: 52px;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  font-size: 16.5px;
  color: var(--ink-2);
  max-width: 820px;
}
.note strong { color: var(--ink); font-weight: 600; }

/* --- Selected work ------------------------------------------------------ */
.case {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: 56px;
  padding: 66px 0;
  border-top: 1px solid var(--line);
}
.case:first-of-type { border-top-width: 2px; border-top-color: var(--ink); }
.case:last-of-type { border-bottom: 1px solid var(--line); }

.case__label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 18px;
}

.case__rail h3 {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.024em;
  margin-bottom: 22px;
}

.case__framing {
  font-size: 15px;
  font-weight: 600;
  color: var(--brand);
  line-height: 1.45;
  padding-top: 16px;
  border-top: 2px solid var(--brand);
  display: inline-block;
}

.case__body p + p { margin-top: 16px; }
.case__body p { color: var(--ink-2); font-size: 18px; }

/* Metric grid.
   12 columns so an odd count still fills the row: the first four cells take
   3 columns (a row of 4), the remainder take 4 columns (a row of 3). Adjust
   the nth-child threshold if the number of metrics changes. */
.metrics {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 30px;
}
.metric { grid-column: span 3; background: #fff; padding: 20px 18px; }
.metric:nth-child(n+5) { grid-column: span 4; }
.section--alt .metric { background: var(--bg-alt); }

.metric__val {
  display: block;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.metric__lbl {
  display: block;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 6px;
}

/* Process / data-flow strip.
   Reads as evidence architecture: hairline-ruled band, small tracked labels,
   typographic arrows only — no icons, no boxes, no illustration. */
.flow {
  margin-top: 34px;
  padding: 26px 0 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.flow__cap {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 20px;
}

/* Six steps never fit one line inside the case column, so the sequence is laid
   out as a deliberate 3x2 grid rather than being left to wrap raggedly. */
.flow__seq {
  list-style: none;
  display: grid;
  /* Columns are weighted, not equal: the first holds the longest labels in
     both flows and the middle the shortest, so this keeps every step on one
     line at full size while the connectors stay evenly spaced. */
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr) minmax(0, 1fr);
  gap: 20px 0;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.45;
}

.flow__seq li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-right: 8px;
}

.flow__seq li::after {
  content: '\2192';                     /* → */
  color: var(--muted-2);
  font-weight: 400;
}

/* No connector at the end of a row or at the end of the sequence. */
.flow__seq li:nth-child(3n) { padding-right: 0; }
.flow__seq li:nth-child(3n)::after,
.flow__seq li:last-child::after { content: none; }

/* The terminal step is the output the work produces — carry the brand color. */
.flow__seq li:last-child { color: var(--brand); }

/* Client quote */
.quote {
  margin: 30px 0 0;
  padding: 26px 30px;
  background: var(--bg-alt);
  border-left: 3px solid var(--brand);
}
.section--alt .quote { background: #fff; }

.quote p {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.quote footer {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Capability chips (primary research) */
.caps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.caps li {
  font-size: 14.5px;
  color: var(--ink-2);
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 2px;
  padding: 7px 13px;
}

/* --- Selected products & systems ---------------------------------------- */
.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.product {
  background: var(--bg);
  padding: 34px 32px 32px;
  display: flex;
  flex-direction: column;
}
.section--alt .product { background: var(--bg-alt); }

.product h3 {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.018em;
  margin-bottom: 6px;
}

.product__kind {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
}

.product p { font-size: 16.5px; color: var(--ink-2); line-height: 1.6; }

.product__ev {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
}
.product__ev li { padding-top: 14px; border-top: 1px solid var(--line); min-width: 92px; flex: 1 1 auto; }
.product__ev .v {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.product__ev .l { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-top: 3px; }

/* --- About -------------------------------------------------------------- */
.about { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px; }

.about__rail h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.about__since {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.about__mark { margin-top: 28px; width: 76px; height: 76px; opacity: .92; }

.about__body p { font-size: 18.5px; color: var(--ink-2); }
.about__body p + p { margin-top: 18px; }
.about__body strong { color: var(--ink); font-weight: 600; }

/* --- Final CTA ---------------------------------------------------------- */
.cta {
  background: var(--dark);
  color: var(--on-dark);
  padding: 96px 0;
  text-align: center;
}
.cta h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 4.6vw, 54px);
  letter-spacing: -0.028em;
  color: #fff;
  margin-bottom: 22px;
}
.cta p {
  font-size: 19px;
  color: var(--on-dark-2);
  max-width: 640px;
  margin: 0 auto 36px;
  line-height: 1.6;
}
.cta__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* --- Footer ------------------------------------------------------------- */
.foot { background: var(--dark-2); color: var(--on-dark-2); padding: 56px 0 34px; font-size: 15px; }

.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.foot__mark img { height: 26px; width: auto; }
.foot__blurb { margin-top: 16px; max-width: 320px; line-height: 1.6; font-size: 14.5px; }

.foot h4 {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.foot li + li { margin-top: 10px; }
.foot a { color: var(--on-dark-2); }
.foot a:hover { color: #fff; }

.foot__bottom {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 13px;
  color: #7f96ad;
}

/* --- Responsive --------------------------------------------------------- */
/* The nav carries five labels plus a CTA at a larger scale now, so it needs
   ~1110px of content width and collapses to the menu button below that. */
@media (max-width: 1160px) {
  .nav__links, .nav__signin, .nav .btn { display: none; }
  .nav__toggle { display: block; }
}

@media (max-width: 900px) {
  .hero { padding-top: 60px; }
  .hero h1 { max-width: none; }
  .hero__meta { grid-template-columns: 1fr; gap: 22px; margin-top: 36px; padding-top: 28px; }
  .hero__cta { margin-top: 36px; }

  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { padding: 24px 0; border-bottom: 1px solid var(--line-soft); }
  .step:last-child { border-bottom: 0; padding-bottom: 0; }

  .section--feature { padding: 68px 0; }
  .section-head--feature { margin-bottom: 44px; }
  .case { padding: 40px 0; }

  .proofbar { margin-top: 56px; }
  .proofbar__sep { display: none; }        /* stray rules once the row wraps */
  .proofbar__inner { gap: 8px 28px; }

  .section { padding: 68px 0; }

  .case, .about { grid-template-columns: 1fr; gap: 28px; }
  .case__framing { margin-bottom: 4px; }

  .products { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }

  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric, .metric:nth-child(n+5) { grid-column: span 1; }
  .metric:last-child { grid-column: span 2; }
}

@media (max-width: 620px) {
  body { font-size: 17px; }
  :root { --gut: 20px; }

  /* Stack the flow vertically rather than letting arrows strand at line ends.
     Each step reads as its own line with a clear connector beneath it, kept
     tight enough that six steps do not run away vertically. */
  .flow__seq { grid-template-columns: 1fr; gap: 10px; font-size: 14px; }
  .flow__seq li,
  .flow__seq li:nth-child(3n) { display: block; padding-right: 0; }
  .flow__seq li::after,
  .flow__seq li:nth-child(3n)::after {
    content: '\2193';                   /* ↓ */
    display: block;
    line-height: 1;
    margin-top: 7px;
  }
  .flow__seq li:last-child::after { content: none; }

  .proofbar__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero__cta .btn, .cta__btns .btn { width: 100%; justify-content: center; }
  .quote { padding: 22px 20px; }
  .foot__top { grid-template-columns: 1fr; }
}

/* --- Motion / print ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --- Product note (card with no numeric evidence) ----------------------- */
.product__note {
  margin-top: auto;
  padding-top: 22px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}
.product__note::before {
  content: '';
  display: block;
  width: 92px;
  border-top: 1px solid var(--line);
  margin-bottom: 14px;
}

/* --- Cookie consent banner ---------------------------------------------- */
[hidden] { display: none !important; }

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 22px rgba(15,28,46,.10);
}

.consent__inner {
  display: flex;
  align-items: center;
  gap: 20px 32px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.consent p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

.consent__btns { display: flex; gap: 10px; margin-left: auto; flex: none; }
.consent .btn { padding: 10px 20px; font-size: 14px; }

@media (max-width: 720px) {
  .consent__inner { flex-direction: column; align-items: stretch; }
  .consent__btns { margin-left: 0; }
  .consent__btns .btn { flex: 1 1 0; justify-content: center; }
}

/* --- Media slot ---------------------------------------------------------
   Real product screenshots belong only in "Selected Products & Systems".
   Inside an <article class="product">, after its <p> and before .product__ev:

     <figure class="product__media">
       <img src="…" alt="…" width="…" height="…" loading="lazy">
       <figcaption>Short caption.</figcaption>
     </figure>

   Ship at 2x the CSS width and always set width/height on the <img> so the
   grid does not reflow while it loads. ----------------------------------- */
.product__media { margin: 22px 0 4px; }

.product__media img {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
}

.product__media figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}