/* AgentHour v2 shared layer, 2026-09-24.
   Sits on the locked UI v1 tokens (assets/ui-tokens.css) and controls (assets/ui-controls.css).
   Adds: display type scale with the wordmark's bold/light contrast, the colon glyph,
   the bone navigation with the real lockup, the Ink footer, and the colon progress rail. */

@font-face {
  font-family: Manrope;
  src: url("assets/manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Scroll Craft reads these. */
  --sc-canvas: var(--ah-bone);
  --sc-surface: var(--ah-surface);
  --sc-ink: var(--ah-ink);
  --sc-ink-soft: var(--ah-muted);
  --sc-accent: var(--ah-emerald);
  --sc-accent-ink: var(--ah-ink);
  --sc-font-display: var(--ah-font);
  --sc-font-text: var(--ah-font);
  --sc-ease-out: var(--ah-ease);

  --v2-bone-deep: #ece3d6;
  --v2-ink-raised: #141918;
  --v2-ink-line: rgb(243 236 227 / .14);
  --v2-bone-soft: #c8c1b4;
  --v2-text-soft: #3b3f3b;
  --v2-sand: #d9c7ab;
  --v2-stone: #c9c7bd;

  --v2-t-display: clamp(3rem, 1rem + 6.2vw, 6.5rem);
  --v2-t-h2: clamp(2.25rem, 1.1rem + 3.3vw, 4.5rem);
  --v2-t-h3: clamp(1.375rem, 1.15rem + .7vw, 1.875rem);
  --v2-t-lede: clamp(1.2rem, 1.02rem + .5vw, 1.5rem);
  --v2-t-task: clamp(2rem, 1rem + 3vw, 3.75rem);

  --v2-section: clamp(4rem, 2rem + 5vw, 7rem);
  --v2-max: 84rem;
  --v2-bleed: max(var(--ah-gutter), calc((100vw - var(--v2-max)) / 2));

  --v2-shadow-lg: 0 44px 88px -40px rgb(46 32 16 / .45), 0 14px 28px -14px rgb(46 32 16 / .2);
  --v2-shadow-md: 0 18px 40px -20px rgb(46 32 16 / .35);
  --v2-edge: inset 0 1px 0 rgb(255 255 255 / .07);
  --v2-ease: cubic-bezier(.16, 1, .3, 1);
}

html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ah-bone);
  color: var(--ah-ink);
  font-family: var(--ah-font);
  font-size: var(--ah-type-body);
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 600; }
ol, ul { margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
::selection { background: var(--ah-emerald); color: var(--ah-ink); }
:focus-visible { outline: 3px solid var(--ah-focus); outline-offset: 4px; border-radius: 4px; }
.ah-dark :focus-visible { outline-color: var(--ah-emerald); }
[hidden] { display: none !important; }

.v2-shell {
  width: 100%;
  max-width: calc(var(--v2-max) + 2 * var(--ah-gutter));
  margin-inline: auto;
  padding-inline: var(--ah-gutter);
  box-sizing: border-box;
}

/* Type: the wordmark pairs a bold "Agent" with a light "Hour". Headlines borrow that contrast. */
.w-bold { font-weight: 700; }
.w-light { font-weight: 300; }
.display { font-size: var(--v2-t-display); line-height: .98; letter-spacing: -.05em; text-wrap: balance; }
.h2 { font-size: var(--v2-t-h2); line-height: 1.03; letter-spacing: -.042em; text-wrap: balance; }
.h2 .w-light, .display .w-light { letter-spacing: -.035em; }
.lede { font-size: var(--v2-t-lede); line-height: 1.5; letter-spacing: -.012em; text-wrap: pretty; }
.v2-label {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}

/* The colon: the mark's two Emerald squares (28 units each, 90 units tall overall). */
.colon {
  --c: .34em;
  display: inline-flex; flex-direction: column; justify-content: space-between;
  width: var(--c); height: calc(var(--c) * 3.2143); flex: none;
}
.colon::before, .colon::after { content: ""; display: block; width: var(--c); height: var(--c); background: var(--ah-emerald); }

/* Links and actions. */
.v2-link {
  display: inline-flex; align-items: center; gap: .75rem; min-height: 48px;
  color: var(--ah-link); font-weight: 700; font-size: 1.0625rem; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-position: 0 calc(100% - .7rem); background-repeat: no-repeat;
}
.ah-dark .v2-link { color: var(--ah-emerald); }
.v2-link .arrow { display: inline-block; transition: transform 180ms var(--v2-ease); }
.v2-cta {
  min-height: 3.5rem; padding: .9rem 1.5rem; font-size: 1.0625rem; gap: 1.25rem;
  transition: background-color 160ms var(--v2-ease), transform 120ms var(--v2-ease);
}
.v2-cta:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .v2-link:hover .arrow, .v2-link:focus-visible .arrow { transform: translateX(4px); }
}

/* Interior navigation: solid bone bar, real horizontal lockup. */
.site-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: .75rem var(--ah-gutter);
  background: color-mix(in oklab, var(--ah-bone) 94%, white);
}
/* A solid Emerald bar under the header separates it from the Bone page below. */
.site-nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 4px; background: var(--ah-emerald); pointer-events: none; }
.site-wordmark { display: block; flex: none; margin-block: -.5rem; }
.site-wordmark img { display: block; width: auto; height: 3.25rem; }
.site-links { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem .25rem; }
/* Links and the chip share the homepage header's exact metrics, so they glide between pages cleanly. */
.site-links a {
  display: inline-flex; align-items: center; min-height: 2.75rem; border-radius: var(--ah-radius-control);
  font-size: .9375rem; font-weight: 650; color: var(--ah-ink); text-decoration: none; white-space: nowrap;
}
.site-links .nav-link { padding: 0 1rem; }
.site-links a[aria-current="page"]:not(.nav-cta) {
  text-decoration: underline; text-decoration-color: var(--ah-emerald);
  text-decoration-thickness: 2px; text-underline-offset: .5rem;
}
.site-links .nav-cta { gap: .7rem; padding: 0 1.1rem 0 .95rem; color: var(--ah-bone); background: var(--ah-ink); border-radius: var(--ah-radius-control); }
.site-links .nav-cta .colon { --c: .26em; }
.site-links .nav-cta[aria-current="page"] { box-shadow: 0 0 0 2px var(--ah-bone), 0 0 0 4px var(--ah-emerald); }
@media (hover: hover) and (pointer: fine) {
  .site-links a:not(.nav-cta):hover { background: rgb(11 13 14 / .06); }
  .site-links .nav-cta:hover { background: #1b2120; }
}

/* Ink footer: a compact sign-off. Brand, links and a direct line in one band, fine print below.
   The reversed lockup matches the header's size, and its built-in clear space is pulled back so the
   artwork lines up with the text edge. */
.v2-footer { background: var(--ah-ink); color: var(--ah-bone); padding-block: clamp(2.75rem, 2rem + 2vw, 3.75rem) 1rem; }
.v2-footer__main {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start;
  padding-bottom: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); border-bottom: 1px solid var(--v2-ink-line);
}
.v2-footer__brandcol { display: grid; gap: .85rem; justify-items: start; min-width: 0; }
.v2-footer__brand { display: block; margin: calc(3.25rem * -28 / 146); }
.v2-footer__brand img { display: block; width: auto; height: 3.25rem; }
.v2-footer__line { font-size: 1.0625rem; line-height: 1.4; letter-spacing: -.01em; color: var(--ah-bone); }
.v2-footer__line .w-light { color: var(--v2-bone-soft); }
.v2-footer__nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 2.5rem; align-content: start; margin-top: -.35rem; }
.v2-footer__nav a {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 40px;
  color: var(--v2-bone-soft); font-size: .9375rem; font-weight: 600; text-decoration: none;
}
.v2-footer__nav .v2-footer__cta { color: var(--ah-bone); }
.v2-footer__cta .colon { --c: .26em; }
.v2-footer__reach { display: grid; justify-items: start; margin-top: -.35rem; }
.v2-footer__phone {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: 1.375rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--ah-bone); text-decoration: none;
  background-image: linear-gradient(var(--ah-emerald), var(--ah-emerald)); background-repeat: no-repeat;
  background-size: 0 2px; background-position: 0 calc(100% - .2rem); transition: background-size 240ms var(--v2-ease);
}
.v2-footer__phone:focus-visible { background-size: 100% 2px; }
.v2-footer__detail { font-size: .875rem; line-height: 1.75; color: var(--v2-bone-soft); }
.v2-footer__time { color: #8f928b; }
.v2-footer__fine { display: flex; align-items: center; flex-wrap: wrap; gap: 0 1.5rem; padding-top: .5rem; font-size: .8125rem; color: #8f928b; }
.v2-footer__fine a { display: inline-flex; align-items: center; min-height: 40px; color: #8f928b; text-decoration: none; }
.v2-footer__fine .todo-note { margin-left: 0; }
.ah-dark .todo-note { color: #f3dc97; background: rgb(216 163 26 / .24); }
@media (hover: hover) and (pointer: fine) {
  .v2-footer__phone:hover { background-size: 100% 2px; }
  .v2-footer__nav a:hover, .v2-footer__fine a:hover { color: var(--ah-bone); }
}
@media (max-width: 1023px) {
  .v2-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-footer__brandcol { grid-column: 1 / -1; }
}

/* Colon progress rail (desktop only): the two squares travel as you read. */
.v2-rail {
  position: fixed; z-index: 15; right: clamp(.9rem, 1.4vw, 1.6rem); top: 50%;
  height: min(34vh, 18rem); width: 12px; margin-top: calc(min(34vh, 18rem) / -2);
  pointer-events: none; opacity: 0; transition: opacity 320ms var(--v2-ease);
}
.v2-rail.is-on { opacity: 1; }
.v2-rail__track { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgb(128 124 116 / .38); }
.v2-rail__thumb {
  position: absolute; left: 50%; top: 0; --c: 6px;
  transform: translate3d(-50%, calc(var(--rail, 0) * (min(34vh, 18rem) - 19.3px)), 0);
}
@media (max-width: 1023px) { .v2-rail { display: none; } }

/* Motion switches. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition: none !important; }

@media (max-width: 760px) {
  .site-nav { flex-wrap: wrap; gap: .25rem 1rem; padding-block: .5rem; }
  .site-wordmark img { height: 2.75rem; }
  .site-links { gap: .25rem 1.25rem; }
  .v2-footer__main { grid-template-columns: 1fr; gap: 1.5rem; }
  .v2-footer__nav { gap: 0 2rem; }
  .v2-footer__brand { margin: calc(2.75rem * -28 / 146); }
  .v2-footer__brand img { height: 2.75rem; }
}
@media (max-width: 560px) {
  .site-links a:not(.nav-cta) { font-size: .875rem; }
}

/* Main navigation: text links on larger screens, a small disclosure menu on phones (no modal). */
.nav-menu { position: relative; display: none; }
.nav-menu summary {
  list-style: none; display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.75rem; padding: 0 .85rem; border-radius: var(--ah-radius-control);
  font-size: .9375rem; font-weight: 650; color: var(--ah-ink); cursor: pointer; user-select: none;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after {
  content: ""; width: .42em; height: .42em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg); transition: transform 160ms var(--v2-ease);
}
.nav-menu[open] summary::after { transform: translateY(.12em) rotate(-135deg); }
.nav-menu__panel {
  position: absolute; right: 0; top: calc(100% + .55rem); z-index: 40; min-width: 12.5rem;
  display: grid; padding: .4rem; background: var(--ah-bone); border-radius: 12px;
  box-shadow: 0 24px 48px -24px rgb(11 13 14 / .55), 0 0 0 1px rgb(11 13 14 / .07);
}
.nav-menu__panel a {
  display: flex; align-items: center; min-height: 2.9rem; padding: 0 .85rem;
  border-radius: var(--ah-radius-control); color: var(--ah-ink); font-size: 1rem; font-weight: 650; text-decoration: none !important;
}
.nav-menu__panel a[aria-current="page"] { background: rgb(0 168 120 / .13); }
@media (hover: hover) and (pointer: fine) {
  .nav-menu summary:hover, .nav-menu__panel a:hover { background: rgb(11 13 14 / .06); }
}
@media (max-width: 760px) {
  .nav-menu { display: block; }
  .nav-link, .hero-link { display: none !important; }
}

/* Review-only markers for content Koal still owes. Remove before launch. */
.todo { background: rgb(216 163 26 / .16); box-shadow: inset 0 -2px 0 #c8950f; border-radius: 3px; padding: 0 .2em; }
.todo-note { display: inline-block; margin-left: .5rem; padding: .1rem .45rem; border-radius: 4px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: #6b4f00; background: rgb(216 163 26 / .18); vertical-align: middle; }

/* Interior nav on phones: one row (logo, Menu, Hours Check), never wrapping. */
@media (max-width: 760px) {
  .site-nav { flex-wrap: nowrap; gap: .5rem; }
  .site-links { width: auto; flex-wrap: nowrap; justify-content: flex-end; gap: .25rem; }
  .site-wordmark img { height: 2.4rem; }
  .site-links .nav-cta { padding: .5rem .8rem .5rem .7rem; font-size: .875rem; white-space: nowrap; }
  .nav-menu summary { padding: 0 .6rem; }
}
@media (max-width: 420px) { .site-links .cta-the { display: none; } }
@media (max-width: 360px) { .site-wordmark img { height: 2.1rem; } }

/* ---------- Page transitions ----------
   Moving between pages cross-fades softly instead of cutting, and the header travels from its
   homepage shape (the floating bar over the film) to its inner-page shape (the full-width bar) and
   back: the logo, links, menu and Hours Check chip glide to their new places. When the header is off
   screen at either end it stays out of it and the page simply cross-fades. Browsers without
   cross-document view transitions navigate exactly as before. */
@view-transition { navigation: auto; }
.site-nav, .hero-nav { view-transition-name: site-header; }
.site-wordmark, .hero-nav .brand { view-transition-name: site-logo; }
.site-links .nav-cta, .hero-cta { view-transition-name: site-cta; }
.nav-link[href="approach.html"], .hero-link[href="approach.html"] { view-transition-name: site-link-approach; }
.nav-link[href="about.html"], .hero-link[href="about.html"] { view-transition-name: site-link-about; }
.nav-link[href="contact.html"], .hero-link[href="contact.html"] { view-transition-name: site-link-contact; }
.site-nav .nav-menu, .hero-nav .nav-menu { view-transition-name: site-menu; }
.vt-no-header .site-nav, .vt-no-header .hero-nav, .vt-no-header .site-wordmark, .vt-no-header .hero-nav .brand,
.vt-no-header .site-links .nav-cta, .vt-no-header .hero-cta, .vt-no-header .nav-link, .vt-no-header .hero-link,
.vt-no-header .nav-menu { view-transition-name: none; }
::view-transition-old(root) { animation: vt-page-out 160ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-page-in 340ms cubic-bezier(.16, 1, .3, 1) 50ms both; }
::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
@keyframes vt-page-out { to { opacity: 0; } }
@keyframes vt-page-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Phone fixes from the mobile audit (September 24) ----------
   The Menu opens as a full-width panel under the header, so it can never run off a small screen,
   and every header and footer control is at least 44 px tall to tap. */
@media (max-width: 760px) {
  .nav-menu { position: static; }
  .nav-menu__panel { left: .75rem; right: .75rem; top: calc(100% + .5rem); min-width: 0; }
  .site-wordmark, .hero-nav .brand { display: flex; align-items: center; min-height: 44px; margin-block: 0; }
  .hero-link, .hero-cta { min-height: 44px; }
  .v2-footer__nav a, .v2-footer__phone, .v2-footer__fine a { min-height: 44px; }
}
/* Small phones: the inner header (logo, Menu, Hours Check) fits on one row down to 320 px, and the
   logo becomes the symbol under 340 px, as it does on the homepage. */
.site-wordmark picture { display: block; }
@media (max-width: 380px) {
  .site-nav { padding-inline: .9rem; gap: .35rem; }
  .site-links .nav-cta { padding: .5rem .6rem; gap: .45rem; font-size: .8125rem; }
  .nav-menu summary { padding: 0 .45rem; gap: .4rem; }
}
@media (max-width: 340px) {
  .site-wordmark, .hero-nav .brand { min-width: 44px; justify-content: center; }
}
/* Safety net: nothing (an arriving row, an edge-to-edge image) can make a page drag sideways on a
   phone. clip, unlike hidden, leaves the sticky header working. */
body { overflow-x: clip; }

/* Touch screens of any width (a phone held sideways, every iPad): header and footer controls stay at
   least 44 px tall, not only under 760 px. */
@media (pointer: coarse) {
  .hero-nav .brand { display: flex; align-items: center; min-height: 44px; }
  .hero-link, .hero-cta, .site-links a { min-height: 44px; }
  .v2-footer__nav a, .v2-footer__phone, .v2-footer__fine a { min-height: 44px; }
}

/* Wide screens: the inner-page header lines up with the content column instead of hugging the
   screen edges (on a 2560 px monitor the logo and the chip sat 2,400 px apart). */
.site-nav { padding-inline: max(var(--ah-gutter), calc((100% - var(--v2-max)) / 2)); }
@media (max-width: 380px) { .site-nav { padding-inline: .9rem; } }

/* Footer email (Sept 30): same Emerald underline as the phone number; 44 px tall on touch screens. */
.v2-footer__email {
  color: var(--ah-bone); text-decoration: none;
  background-image: linear-gradient(var(--ah-emerald), var(--ah-emerald)); background-repeat: no-repeat;
  background-size: 0 2px; background-position: 0 100%; transition: background-size 240ms var(--v2-ease);
}
.v2-footer__email:focus-visible { background-size: 100% 2px; }
@media (hover: hover) and (pointer: fine) { .v2-footer__email:hover { background-size: 100% 2px; } }
@media (pointer: coarse), (max-width: 1023px) { .v2-footer__email { display: inline-flex; align-items: center; min-height: 44px; } }