/* Avanza Methods, components.
   Components never set section padding and never name a raw colour. */

/* ---------- Brand marks ---------- */

/* The primary lockup, used exactly as supplied in AMS-logo.svg, box included.
   It carries its own Dark Sea plate, so it needs no colour from context and no
   surface variant. Width and aspect ratio are declared so the header reserves
   its space and nothing shifts on load. */
.logo {
  display: block;
  width: clamp(164px, 18vw, 224px);
  aspect-ratio: 864 / 288;
  height: auto;
}

/* ---------- Navigation ---------- */

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(var(--space-12), 2.4vw, var(--space-32));
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  border-block-end: var(--border) solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}

.nav__link:hover { border-block-end-color: currentColor; }

/* The current page keeps its underline at rest. It was Golden Rod, which is
   2.13:1 on Wispy Clouds and fails the 3:1 floor for something carrying state,
   and it spent an accent moment in the header of every page. The state is
   still announced by aria-current. */
.nav__link[aria-current="page"] {
  border-block-end-color: currentColor;
}

/* ---------- Call to action. One label sitewide. ---------- */

.cta {
  display: inline-block;
  padding: var(--space-16) var(--space-32);
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}

/* Hover and active lighten the fill rather than darkening it. Darkening Golden
   Rod toward Dark Sea pulls the Dark Sea label under 4.5:1. Lightening keeps
   the label above it: 5.35:1 at rest, 5.78:1 on hover, 6.04:1 while pressed. */
.cta:hover {
  background-color: color-mix(in srgb, var(--accent) 88%, var(--paper));
}

.cta:active { background-color: color-mix(in srgb, var(--accent) 80%, var(--paper)); }

/* Mixed toward paper rather than the surface, so the control stays legible
   wherever it sits. No disabled call to action ships on the site. */
.cta:disabled {
  background-color: color-mix(in srgb, var(--accent) 40%, var(--paper));
  cursor: not-allowed;
}

/* ---------- Links in running copy ---------- */

.link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.link:hover { text-decoration-color: currentColor; }

/* ---------- Typographic roles ---------- */

/* Measure is counted in characters of the current size, so a lede or subhead
   carrying the .measure class ends up far wider than body copy. These roles
   carry their own, tighter measure instead. */
.lede {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: var(--lh-tight);
  max-width: 46ch;
  color: var(--text-soft);
}

.body-lg { font-size: var(--step-1); line-height: 1.5; }

.subhead {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: var(--lh-tight);
  max-width: 34ch;
}

.soft { color: var(--text-soft); }

.meta {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-soft);
}

/* The tagline. Home only, hero and closing. The rule under it stays neutral:
   both places it appears also carry the call to action, and a section gets one
   accent moment, which the call to action has first claim on. */
.tagline {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  padding-block-end: var(--space-8);
  border-block-end: var(--border) solid var(--rule);
}

/* Closes Home, Services, Insights and Contact. */
.closing-line {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
}

/* ---------- Term blocks ----------
   A bolded lead term and its sentence. Used for the Knowledge, Execution and
   AI sequence and for the outcome list. Deliberately not cards and not
   numbered, because neither is a sequence the reader has to follow in order. */

.terms { display: grid; gap: var(--space-48); }

.terms--tight { gap: var(--space-32); }

.term__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--lh-tight);
  max-width: var(--measure);
  margin-block-end: var(--space-8);
}

.term__body { max-width: var(--measure); color: var(--text-soft); }

@media (min-width: 900px) {
  .terms--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-64); }

  /* Three short terms read across rather than down. Text only, no boxes and no
     icons, so it stays a triptych rather than a row of feature cards. */
  .terms--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-64);
  }
  .terms--three .term__body { max-width: none; }
}

/* ---------- Timeline ----------
   The three engagements, drawn as one connected sequence. One of only three
   places on the site where numbering is used, because the order is a real
   dependency rather than decoration.

   This is a component, not a page style. Every colour comes from the section
   it sits in: --surface fills the node so it punches a hole in the line on
   whatever background it lands on, --rule draws the line, --text-soft carries
   the terms, and currentColor draws the node border. Dropping it onto a Dark
   Sea or Black Iris section on Services later needs no new rules.

   Geometry is driven by the two custom properties below, so the node size and
   the gutter change together and the line stays centred under the node. */

/* Only the geometry lives here. base.css already strips the list marker, the
   margin and the padding from any ol carrying a class, and re-declaring them
   would fight two rules that are doing their job: ol[class] outranks .tl on
   padding, and a margin reset here cancels the section's own stack spacing. */
.tl {
  --tl-node: 30px;
  --tl-gap: 14px;
}

/* The indent sits on the item rather than the list, so the node can be placed
   at offset zero inside it. Nothing is positioned with a negative offset,
   which means the nodes stay inside the content column instead of hanging out
   into the page gutter and overflowing once the gutter narrows. */
.tl-item {
  position: relative;
  padding-inline-start: calc(var(--tl-node) + var(--tl-gap));
  padding-block-end: var(--space-48);
}

.tl-item:last-child { padding-block-end: 0; }

/* The connector. It starts at the bottom edge of its own node and runs to the
   bottom of the item, which is exactly where the next node begins, so the line
   reads as continuous from node to node. There is no markup for it on the
   last item, so nothing trails below the end of the sequence.

   A real element rather than a ::before, as of 2026-09-12: timeline.js grows
   this into a sequence animation, and the Web Animations API needs a real
   node to call .animate() on. scaleY defaults to 1 (fully drawn) so the line
   is already complete for anyone with scripting off, reduced motion on, or a
   browser without the API. transform-origin sits at the top so a 0 to 1
   scale reads as the line growing downward from its own node, matching the
   direction the sequence reads in. */
.tl-connector {
  position: absolute;
  top: var(--tl-node);
  bottom: 0;
  inset-inline-start: calc(var(--tl-node) / 2 - var(--border) / 2);
  width: var(--border);
  transform-origin: top center;
  transform: scaleY(1);

  /* Stronger than --rule. That token is for hairlines that separate things,
     and this line is doing the opposite job: it is the spine of the component
     and has to read as one continuous run from node to node. Mixed against
     currentColor rather than a fixed hex so it holds up on an inverted
     surface too. Still 1px, per the border rule in section 5. */
  background: color-mix(in srgb, currentColor 32%, var(--surface));
}

.tl-node {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tl-node);
  height: var(--tl-node);

  border: var(--border) solid currentColor;
  border-radius: var(--radius-control);
  background: var(--surface);

  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* The endpoint. Border only: Golden Rod as a numeral on a light surface is
   2.13:1 and section 2 forbids it outright, so the digit stays in the section
   colour and the accent does its work as a rule, which section 5 permits. */
.tl-item:last-child .tl-node { border-color: var(--accent); }

.tl-title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--lh-tight);
  margin-block: 0 var(--space-8);
}

/* The terms. Set apart by weight and colour rather than by capitals and
   tracking, which section 9 lists among the banned patterns. */
.tl-meta {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-soft);
  margin-block: 0;
}

@media (min-width: 620px) {
  .tl {
    --tl-node: 36px;
    --tl-gap: 20px;
  }
}

/* ---------- Article summaries ---------- */

.articles { display: grid; gap: var(--space-48); }

/* Full length article entries on the Insights page need more air between them
   than the one line summaries on Home. */
.articles--full { gap: var(--space-96); }
.articles--full .article { gap: var(--space-16); }

/* The Home teaser, condensed 2026-09-12: titles only, no per article summary,
   set across three columns instead of stacked. Reuses the same
   min-width:900px column break as .terms--three rather than inventing a new
   one. */
@media (min-width: 900px) {
  .articles--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-64);
  }
}

.article { display: grid; gap: var(--space-12); }

.article__title,
.claim {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: var(--lh-tight);
  max-width: 30ch;
}

.article__lede {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.35;
  max-width: 46ch;
}

/* ---------- Rules, used as punctuation and never as a grid ---------- */

.rule {
  border: 0;
  border-block-start: var(--border) solid var(--rule);
}

.rule--accent {
  width: var(--space-64);
  border-block-start-color: var(--accent);
}

/* ---------- Form ---------- */

/* Constrained. A full width input is hard to scan and reads as unfinished. */
.form {
  display: grid;
  gap: var(--space-32);
  max-width: 34rem;
}

.field { display: grid; gap: var(--space-8); }

.field__label {
  font-size: var(--step-0);
  font-weight: 600;
}

.field__help {
  font-size: var(--step--1);
  color: var(--text-soft);
}

.field__control {
  width: 100%;
  padding: var(--space-12) var(--space-16);
  background: var(--paper-bright);
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.5;
  border: var(--border) solid var(--rule-light);
  border-radius: var(--radius-control);
  transition: border-color var(--dur-fast) var(--ease);
}

.field__control:hover { border-color: var(--text-secondary); }

textarea.field__control {
  min-height: 11em;
  resize: vertical;
}

select.field__control {
  appearance: none;
  padding-inline-end: var(--space-48);
}

/* Error. Signalled by weight, border strength and a message, never by colour
   alone, since the palette carries no red. */
.field__control[aria-invalid="true"] { border-color: var(--ink); }

.field__error {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
}

.field__error:empty { display: none; }

/* ---------- Footer ---------- */

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24);
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  border-block-end: var(--border) solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.footer-nav a:hover { border-block-end-color: currentColor; }

.legal {
  font-size: var(--step--1);
  color: var(--text-soft);
}

/* ---------- Additions for the interior pages ---------- */

/* Fine print, such as the note about who the flat price applies to. The source
   marks it italic, but no italic face ships, so it is set quiet rather than
   slanted by the browser. */
.note {
  font-size: var(--step--1);
  color: var(--text-soft);
  max-width: var(--measure);
}

/* Terms of an offer, stated as fact rather than as metadata. */
.offer-terms {
  font-size: var(--step-0);
  font-weight: 600;
}

/* A list that keeps its numbers. Used only where the content is genuinely a
   sequence or a checklist the reader works through. */
.numbered {
  display: grid;
  gap: var(--space-24);
  max-width: var(--measure);
  counter-reset: item;
}

.numbered > li {
  display: grid;
  grid-template-columns: 2.5ch minmax(0, 1fr);
  gap: var(--space-16);
}

.numbered > li::before {
  counter-increment: item;
  content: counter(item);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-body);
}

.credentials {
  display: grid;
  gap: var(--space-12);
  max-width: var(--measure);
}

.credentials li { font-weight: 600; }

/* The mark shown as a real image, beside the section that describes it. */
.mark-panel {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
}

/* The one photograph on the site. Never wider than its 2x source allows. */
.headshot {
  display: block;
  width: 100%;
  max-width: 432px;
  height: auto;
}

/* ---------- The amplification loop diagram ---------- */

/* Two drawings, one shown at a time. The swap is a media query rather than a
   script so the right one is chosen before first paint and the wrong one never
   flashes. The hidden one is display:none, which also keeps it out of the
   accessibility tree, so the description is announced once rather than twice. */

.diagram {
  margin: 0;
  max-width: 60rem;
}

/* Sizing only. Display is deliberately not set here: it belongs to the two
   rules below, and a `.diagram svg` selector would outrank them on specificity
   and leave both drawings on screen at once. One layer owns display. */
.diagram svg {
  width: 100%;
  height: auto;
}

/* Narrow first, matching the 640px break named in the animation spec. */
.diagram__wide   { display: none; }
.diagram__narrow { display: block; }

@media (min-width: 640px) {
  .diagram__wide   { display: block; }
  .diagram__narrow { display: none; }
}

.diagram figcaption {
  margin-block-start: var(--space-24);
  max-width: var(--measure);
  font-size: var(--step--1);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* The travelling arrowheads, created by diagram.js and only ever present while
   the sequence is being played. The tip of each triangle is drawn at the right
   edge of its own box, so the anchor below puts the tip, not the centre, on the
   path. fill-box scopes that to the shape rather than to the whole viewBox. */
.diagram__head {
  transform-box: fill-box;
  offset-rotate: auto;
  offset-anchor: 100% 50%;
  offset-distance: 0%;

  /* Hidden at rest. Each head is created up front but must not appear until
     its own step begins, or three arrowheads sit in empty space waiting for
     lines that have not been drawn yet. Its animation fills forwards only, so
     this is what shows during the delay. */
  opacity: 0;
}

/* The mark emblem, the boxed treatment tried in the Black Iris closing
   sections on 2026-09-12, is removed as of the same day. Angelo's call after
   seeing it live: it did not work. The rule itself, and the ambient motif it
   had replaced, are both out for now. Nothing currently renders any version
   of the mark as page decoration. The class name and the reasoning behind
   the attempt are kept here in history rather than in the stylesheet; see the
   handoff notes before trying either treatment again. */

/* ---------- Article thumbnails ----------
   One small photograph per article on Insights, added 2026-09-12. Sits above
   the title as a modest anchor for the piece, not a hero: a fixed width well
   short of the text column, never wider than its 2x source, matching the
   headshot's own rule against upscaling. Plain img, no caption pill, no
   overlay, no border. */
.article__image {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-block-end: var(--space-24);
}