/* Site-level additions on top of /css/tokens.css and /css/components.css (copies of design/, see scripts/sync-design.sh). Tokens only. */

/* Skip link */
.aw-skip { position: absolute; left: -9999px; top: 0; padding: var(--space-2) var(--space-4); background: var(--surface-inverse); color: var(--ink-inverse); font-size: 15px; }
.aw-skip:focus { left: var(--space-4); top: var(--space-4); outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }

/* Section heading in cols 1–3, full-width rows under the body */
.aw-section > .aw-h2 { grid-column: 1 / span 3; align-self: start; }
.aw-section > .aw-section__full { grid-column: 1 / -1; margin-top: var(--space-12); }
@media (max-width: 860px) { .aw-section > .aw-section__full { margin-top: var(--space-8); } }
@media (min-width: 1024px) { .aw-section { padding-bottom: var(--space-32); } }
.aw-small { margin: var(--space-6) 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Services: top-align card content so headings line up across the row */
.aw-service { justify-content: flex-start; }

/* Services: bullet list inside each block (no markers, hairlines) */
.aw-service__text { display: flex; flex-direction: column; gap: var(--space-4); }
.aw-service__list { margin: var(--space-2) 0 0; padding: 0; list-style: none; border-top: var(--stroke-hair) solid var(--line); }
.aw-service__list li { padding: var(--space-2) 0; border-bottom: var(--stroke-hair) solid var(--line); font-size: 14px; line-height: 20px; color: var(--ink); }

/* Lab: slot content; only the live status spends the section accent */
.aw-slot { justify-content: flex-start; }
.aw-slot__text { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-6) 0; }
.aw-slot .aw-label--status { margin-top: auto; }
.aw-slot .aw-label--status.aw-label--live::before { background: var(--accent); }
/* Lab: equal card heights per row; 4:3 stays the minimum (aspect-ratio alone lets a card with less text end up shorter) */
@media (min-width: 861px) {
  .aw-lab { grid-auto-rows: minmax(calc((min(100vw - 2 * var(--page-margin), var(--layout-max)) - 2 * var(--layout-gutter)) / 4), auto); }
  .aw-slot { aspect-ratio: auto; }
}

/* Process: captions under the capsule row */
.aw-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--layout-gutter); margin: var(--space-8) 0 0; padding: 0; }
.aw-steps > div { border-top: var(--stroke-hair) solid var(--line); padding-top: var(--space-4); }
.aw-steps dt { font-size: 17px; line-height: 26px; font-weight: 500; color: var(--ink); }
.aw-steps dd { margin: var(--space-1) 0 0; color: var(--ink-muted); }
@media (max-width: 1023.98px) { .aw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-6); } }
@media (max-width: 639.98px) { .aw-steps { grid-template-columns: 1fr; } }

/* Contact (dark block) */
.aw-contact { margin: 0 0 var(--space-24); }
.aw-contact .aw-h2 { max-width: 13em; }
.aw-contact .aw-link { color: var(--ink-inverse); text-decoration-color: var(--line-strong); }
.aw-contact .aw-link:hover { color: var(--ink-inverse); text-decoration-color: var(--ink-inverse); }
.aw-contact .aw-link:focus-visible { outline-color: var(--surface); }

/* Footer */
.aw-footer-line { margin: var(--space-8) 0 var(--space-6); color: var(--ink); }
/* Display wordmark: clip only sideways, so the glyph bottoms are not cut at small widths */
.aw-footer-word { overflow: visible; overflow-x: clip; }
/* Tap targets >= 40px (DESIGN.md, Accessibility) */
.aw-logo { min-height: 40px; }
@media (min-width: 721px) { .aw-nav a:not(.aw-btn) { display: inline-flex; align-items: center; min-height: 40px; } }
.aw-footer nav a { display: inline-flex; align-items: center; min-height: 40px; }
.aw-footer a:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }

/* Simple pages (privacy, terms, 404) */
.aw-page { padding: var(--space-32) 0 var(--space-24); }
.aw-page .aw-btn { margin-top: var(--space-8); }
@media (max-width: 640px) { .aw-page { padding: var(--space-16) 0 var(--space-12); } }

/* Hero visual: whole object visible at every width (the render has margins on all sides), no bleed.
   Desktop: cols 7–12 (~50% of the container), vertically centred against the text. Mobile: under the text, container width. */
.aw-hero__visual { display: block; margin: 0; }
@media (min-width: 900px) {
  .aw-hero__visual { grid-column: 7 / -1; align-self: center; margin: 0; }
}
@media (min-width: 900px) and (max-width: 1023.98px) {
  .aw-hero__text { grid-column: 1 / span 6; }
  .aw-hero__visual { grid-column: 7 / -1; }
}
@media (max-width: 899.98px) { .aw-hero__visual { margin: var(--space-8) auto 0; max-width: 640px; } }

/* Hero motion (owner request): slow float, gentle tilt on hover. CSS only; transform-only, so no layout shift. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes aw-hero-float {
    from { transform: translateY(-5px) rotate(-0.75deg); }
    to { transform: translateY(5px) rotate(0.75deg); }
  }
  .aw-hero__visual { animation: aw-hero-float 9s ease-in-out infinite alternate; will-change: transform; }
  .aw-hero__visual img { transition: transform 600ms ease-out; transform-origin: 50% 50%; }
  .aw-hero__visual:hover img { transform: scale(1.03) rotate(-2deg); }
}

/* Long-form pages (about, privacy, terms): readable measure and rhythm */
.aw-page > :where(h2, h3, p, ul, ol, dl, details) { max-width: 70ch; }
.aw-page h2 { margin: var(--space-12) 0 var(--space-4); font-size: 32px; line-height: 36px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.aw-page h2:not(.aw-h1 + h2, :first-child) { margin-top: 56px; }
.aw-page h3 { margin: var(--space-8) 0 var(--space-2); font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.aw-page p, .aw-page .aw-body { margin: 0 0 var(--space-4); }
.aw-page :is(h2, h3) + :is(p, ul, ol) { margin-top: 0; }
.aw-page .aw-h1 + .aw-lead { margin-bottom: 0; }
.aw-page ul, .aw-page ol { margin: 0 0 var(--space-6); padding-left: 1.25em; }
.aw-page li { margin-bottom: var(--space-2); }
.aw-page li::marker { color: var(--ink-muted); }
.aw-page .aw-h1 + * { margin-top: var(--space-6); }
/* FAQ: question/answer pairs as h3 + p, or <details> */
.aw-page details { border-top: var(--stroke-hair) solid var(--line); padding: var(--space-4) 0; }
.aw-page details:last-of-type { border-bottom: var(--stroke-hair) solid var(--line); }
.aw-page summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 500; color: var(--ink); }
.aw-page summary:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.aw-page details > :not(summary) { margin-top: var(--space-2); }
@media (max-width: 640px) { .aw-page h2 { font-size: 26px; line-height: 32px; } .aw-page h2:not(.aw-h1 + h2, :first-child) { margin-top: var(--space-12); } }

/* Header nav text links: About · Services · Why Ardwins (hidden < 720px by components.css, button stays) */
.aw-nav a:not(.aw-btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: transparent; transition: color var(--duration-fast), text-decoration-color var(--duration-fast); white-space: nowrap; }
.aw-nav a:not(.aw-btn):hover { color: var(--ink); text-decoration-color: var(--accent); }
.aw-nav a.aw-btn { margin-left: var(--space-2); white-space: nowrap; }
@media (max-width: 900px) and (min-width: 721px) { .aw-nav { gap: var(--space-6); } }

/* Site footer: wordmark, 4-column grid, bottom row */
.aw-site-footer { margin-top: 0; }
.aw-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12) var(--layout-gutter); padding: var(--space-16) 0 var(--space-16); }
.aw-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); font-size: 15px; line-height: 22px; color: var(--ink); min-width: 0; }
.aw-footer-about { gap: 0; padding-right: var(--space-12); }
.aw-footer-about .aw-footer-line { margin: 0 0 var(--space-6); font-size: 18px; line-height: 27px; color: var(--ink); max-width: 30em; }
.aw-footer-legal { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-muted); max-width: 60ch; }
.aw-footer-head { margin: 0 0 var(--space-3); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink-muted); }
.aw-footer-col > a, .aw-footer-col > span { color: var(--ink); text-decoration: none; padding: var(--space-1) 0; overflow-wrap: anywhere; }
.aw-footer-col > a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: transparent; transition: color var(--duration-fast), text-decoration-color var(--duration-fast); }
.aw-footer-col > a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.aw-footer-col a:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.aw-footer-col > span { color: var(--ink-muted); }
.aw-site-footer .aw-footer { padding: var(--space-6) 0 var(--space-12); }
@media (max-width: 1023.98px) {
  .aw-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aw-footer-about { grid-column: 1 / -1; padding-right: 0; }
}
@media (max-width: 639.98px) {
  .aw-footer-grid { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-12) 0; }
  .aw-footer-col { gap: 0; }
  .aw-footer-col > a { display: inline-flex; align-items: center; min-height: 40px; padding: 0; }
  .aw-footer-col > span { padding: var(--space-2) 0; }
  .aw-footer-head { margin-bottom: var(--space-1); }
}

/* ===== About page v4: designed layout (hero, fact strip, sticky section heads, cards, engines, tiles, FAQ accordion) ===== */

/* Hero: H1 + lead left (cols 1–7), small copper band right (cols 8–12). The band is the hero's one accent. */
.aw-ahero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--layout-gutter); align-items: center; padding: var(--space-24) 0 var(--space-12); }
.aw-ahero__text { grid-column: 1 / span 7; }
.aw-ahero__text .aw-lead { margin-top: var(--space-6); }
.aw-ahero__text .aw-actions { margin-top: var(--space-8); gap: var(--space-3) var(--space-8); }
.aw-ahero__text .aw-actions .aw-link { display: inline-flex; align-items: center; min-height: 40px; }
.aw-ahero__visual { grid-column: 8 / -1; display: block; width: 100%; height: auto; }
@media (max-width: 899.98px) {
  .aw-ahero { display: block; padding: var(--space-12) 0 var(--space-8); }
  .aw-ahero__visual { margin: var(--space-6) auto 0; max-width: 420px; }
}

/* At a glance: 4 white cards, label + value */
.aw-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--layout-gutter); margin: 0 0 var(--space-24); }
.aw-fact { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8); min-height: 144px; box-sizing: border-box; padding: var(--space-6); border-radius: var(--radius-md); background: var(--surface-raised); }
.aw-fact dt { font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink-muted); }
.aw-fact dd { margin: 0; font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
@media (max-width: 1023.98px) { .aw-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .aw-facts { gap: var(--space-3); margin-bottom: var(--space-16); } .aw-fact { min-height: 112px; padding: var(--space-4) var(--space-4) var(--space-6); gap: var(--space-6); } .aw-fact dd { font-size: 20px; line-height: 26px; } }

/* Sections: heading cols 1–4 (sticky on desktop), content cols 5–12 */
.aw-asec { padding-bottom: var(--space-24); }
.aw-asec > .aw-h2 { grid-column: 1 / span 4; padding-right: var(--space-6); }
.aw-asec > .aw-section__body { grid-column: 5 / -1; min-width: 0; }
@media (min-width: 861px) { .aw-asec > .aw-h2 { position: sticky; top: var(--space-8); } }
@media (min-width: 861px) and (max-width: 1023.98px) { .aw-asec > .aw-h2 { font-size: 32px; line-height: 36px; } }
@media (max-width: 639.98px) { .aw-asec { padding-bottom: var(--space-16); } }
.aw-asec .aw-lead + * { margin-top: var(--space-8); }
.aw-lead--ink { color: var(--ink); }

/* Two engines: capsule heads, one ink, one surface-muted */
.aw-engines { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-gutter); }
.aw-engine { display: flex; flex-direction: column; gap: var(--space-4); }
.aw-engine__cap { display: flex; align-items: center; height: 96px; box-sizing: border-box; padding: 0 var(--space-8); border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--ink); font-size: 28px; line-height: 1; font-weight: 500; letter-spacing: -0.025em; white-space: nowrap; }
.aw-engine__cap--ink { background: var(--surface-inverse); color: var(--ink-inverse); }
.aw-engine .aw-body { padding: 0 var(--space-2); }
@media (max-width: 1023.98px) { .aw-engine__cap { height: 72px; font-size: 22px; padding: 0 var(--space-6); } }
@media (max-width: 639.98px) { .aw-engines { grid-template-columns: 1fr; gap: var(--space-6); } .aw-engine__cap { height: 64px; font-size: 21px; } .aw-engine .aw-body { padding: 0; } }

/* Hairline rows (statements) */
.aw-rows { margin: var(--space-12) 0 0; padding: 0; list-style: none; border-top: var(--stroke-hair) solid var(--line); }
.aw-rows li { padding: var(--space-4) 0; border-bottom: var(--stroke-hair) solid var(--line); color: var(--ink); }

/* Services: 2×2 white cards */
.aw-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-gutter); margin: 0; padding: 0; list-style: none; }
.aw-card { display: flex; flex-direction: column; gap: var(--space-4); box-sizing: border-box; padding: var(--space-8); border-radius: var(--radius-md); background: var(--surface-raised); }
.aw-card .aw-index { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; margin-bottom: var(--space-4); }
.aw-card .aw-body { font-size: 16px; line-height: 24px; }
@media (max-width: 639.98px) { .aw-cards { grid-template-columns: 1fr; gap: var(--space-3); } .aw-card { padding: var(--space-6); } .aw-card .aw-index { margin-bottom: 0; } }

/* Own products: numbered rows (2 columns), then one status note (the section's accent) */
.aw-numrows li { grid-template-columns: 56px 1fr; align-items: baseline; }
.aw-numrows li:first-child { padding-top: var(--space-6); }
.aw-numrows { border-top: var(--stroke-hair) solid var(--line); }
.aw-numrows .aw-index { line-height: 26px; }
.aw-numrows .aw-body { color: var(--ink); max-width: none; }
.aw-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin: var(--space-8) 0 0; }
.aw-note .aw-label--status { font-size: 15px; line-height: 20px; padding: 10px 16px; }
@media (max-width: 639.98px) { .aw-numrows li { grid-template-columns: 40px 1fr; } .aw-note .aw-label--status { border-radius: var(--radius-md); align-items: flex-start; } .aw-note .aw-label--status::before { margin-top: 7px; flex: none; } }

/* How: two columns divided by a hairline on top */
.aw-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-gutter); }
.aw-pair__col { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); border-top: var(--stroke-hair) solid var(--line); }
.aw-pair .aw-index { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 639.98px) { .aw-pair { grid-template-columns: 1fr; gap: var(--space-8); } }

/* Team + Markets: two large tiles, display number / chips */
.aw-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-gutter); margin: 0 0 var(--space-24); }
.aw-tile { display: flex; flex-direction: column; gap: var(--space-4); box-sizing: border-box; padding: var(--space-8); border-radius: var(--radius-md); background: var(--surface-raised); }
.aw-tile__title { margin: 0; font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink-muted); }
.aw-big { margin: var(--space-6) 0 var(--space-2); font-size: 160px; line-height: 0.85; font-weight: 500; letter-spacing: -0.055em; color: var(--ink); font-variant-numeric: tabular-nums; }
.aw-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0 var(--space-2); padding: 0; list-style: none; }
.aw-chips li { display: inline-flex; align-items: center; height: 56px; box-sizing: border-box; padding: 0 var(--space-6); border-radius: var(--radius-pill); border: var(--stroke-hair) solid var(--line-strong); font-size: 21px; line-height: 1; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.aw-chips li:first-child { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--ink-inverse); }
.aw-tile .aw-body { margin-top: auto; }
.aw-tile .aw-chips + .aw-body { margin-top: auto; }
@media (max-width: 1023.98px) { .aw-big { font-size: 120px; } .aw-chips li { height: 48px; font-size: 18px; padding: 0 var(--space-4); } }
@media (max-width: 639.98px) { .aw-duo { grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-16); } .aw-tile { padding: var(--space-6); } .aw-big { font-size: 112px; } .aw-chips li { height: 44px; font-size: 17px; } }

/* FAQ: native <details> accordion, full-width rows, CSS plus that rotates into a minus */
.aw-faq { border-top: var(--stroke-hair) solid var(--line); }
.aw-faq__item { border-bottom: var(--stroke-hair) solid var(--line); }
.aw-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 40px; padding: var(--space-6) 0; list-style: none; cursor: pointer; font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); transition: color var(--duration-fast); }
.aw-faq__item summary::-webkit-details-marker { display: none; }
.aw-faq__item summary:hover { color: var(--ink-muted); }
.aw-faq__item summary:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.aw-faq__sign { position: relative; flex: none; width: 40px; height: 40px; box-sizing: border-box; border-radius: var(--radius-pill); border: var(--stroke-control) solid var(--line-strong); transition: background-color var(--duration-fast), border-color var(--duration-fast); }
.aw-faq__sign::before, .aw-faq__sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -0.75px 0 0 -7px; background: var(--ink); transition: transform 250ms ease, background-color var(--duration-fast); }
.aw-faq__sign::after { transform: rotate(90deg); }
.aw-faq__item[open] .aw-faq__sign { background: var(--surface-inverse); border-color: var(--surface-inverse); }
.aw-faq__item[open] .aw-faq__sign::before, .aw-faq__item[open] .aw-faq__sign::after { background: var(--ink-inverse); }
.aw-faq__item[open] .aw-faq__sign::after { transform: rotate(0deg); }
.aw-faq__item > .aw-body { margin: 0; padding: 0 var(--space-16) var(--space-6) 0; font-size: 18px; line-height: 28px; max-width: 40em; }
@media (prefers-reduced-motion: no-preference) {
  @supports selector(::details-content) {
    .aw-faq { interpolate-size: allow-keywords; }
    .aw-faq__item::details-content { block-size: 0; overflow: clip; transition: block-size 250ms ease, content-visibility 250ms allow-discrete; }
    .aw-faq__item[open]::details-content { block-size: auto; }
  }
}
@media (max-width: 639.98px) {
  .aw-faq__item summary { font-size: 19px; line-height: 26px; padding: var(--space-4) 0; gap: var(--space-4); }
  .aw-faq__item > .aw-body { padding-right: 0; font-size: 17px; line-height: 26px; }
}

/* About: contact block sits right above the footer */
.aw-ahero ~ .aw-contact { margin-bottom: 0; }
/* About v4 polish: the section hairline already sits above; no second line at the top of How and FAQ */
.aw-faq { border-top: 0; }
.aw-faq__item:first-child summary { padding-top: 0; }
.aw-pair__col { border-top: 0; padding-top: 0; }
@media (max-width: 639.98px) { .aw-pair__col + .aw-pair__col { border-top: var(--stroke-hair) solid var(--line); padding-top: var(--space-6); } }

/* Footer wordmark centred on wide screens (owner) */
.aw-footer-word .aw-display { text-align: center; }