/* index.html — hero2's two-stage tear, then 02-07 as ordinary
   scrolling sections.

   all2 keeps 01-05 on one fixed stage and cross-fades between them; all3
   keeps only the hero there and lets everything below it scroll past
   normally, which is the layout the mock asks for.

   NAMING. The components copied out of css/all2-transition.css keep their
   `a2-` class names -- the type ramp, the icon card, the capability table,
   the company rows, the form and the case modal. They are the same
   components with the stage machinery (absolute placement, opacity-0 start
   poses, .a2-static branches) taken out, and keeping the names means the
   markup in all2/index.html and all3/index.html stays directly comparable,
   and js/A2CaseModal.js drives the modal here unmodified. Classes that are
   all3's own -- the section layout, the flow connectors, the tinted case
   tiles, the scroll reveal -- are `a3-`.
   The two files are never loaded together, so nothing here can reach all2.

   Tokens and type are the same subset of docs/UI_DESIGN_GUIDELINES_v1.0.md
   all2 carries, copied for the same reason it copied them. */

:root {
  /* Guidelines 7.1 */
  --a2-text: #111827;
  --a2-text-soft: #3e4758;
  --a2-muted: #697386;
  --a2-navy: #101b3f;
  --a2-violet: #6b4eff;
  --a2-violet-dark: #4d35c5;
  --a2-border: #d9dce5;
  --a2-line: #b8bfcc;
  --a2-paper: #f4f5f8;
  --a2-surface: #ffffff;
  /* Form validation only -- the palette in 7.1 has no error colour. */
  --a2-error: #b3261e;

  /* Guidelines 8.1 */
  --a2-font-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --a2-font-body: "Inter", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;

  --a2-motion-fast: 180ms;
  --a2-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
}

body.a3-body {
  margin: 0;
  /* Only ever visible in the sliver below the last section on a very tall
     window; the stage and .a3-after cover everything else. */
  background: #0b0b0c;
  font-family: var(--a2-font-body);
}

/* ---- CTA (Guidelines 9.2) ------------------------------------------------ */
.btn-primary {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 1px solid var(--a2-violet);
  border-radius: 4px;
  color: #fff;
  background: var(--a2-violet);
  font-family: var(--a2-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--a2-motion-fast) ease,
    border-color var(--a2-motion-fast) ease,
    transform var(--a2-motion-fast) var(--a2-ease-standard);
}
.btn-primary:hover {
  border-color: var(--a2-violet-dark);
  background: var(--a2-violet-dark);
  transform: translateY(-2px);
}

/* ============ 01 Hero ====================================================
   The stage is hero2's, verbatim, driven by js/hero2-tear.js. Only the copy
   on the white panel is dressed here. */

/* #intact is masked away to nothing by the tear, but a mask does not take an
   element out of the hit path -- at z-index 6 it goes on covering the whole
   stage. It has nothing to click at any point in this page's life, and while
   it is in the way the hero's own CTA is not clickable either. Same for the
   scroll hint, which is faded out by the time anything else wants that space. */
.a3-body .paper,
.a3-body .scroll-hint {
  pointer-events: none;
}

/* Once the tear has finished, #intact is spent: it is the pre-tear sheet,
   and the only thing it still carries is the opening line, "Japan is hard to
   see from the outside." js/hero2-tear.js masks it away rather than removing
   it, and that mask ends on a stop past 100% -- so the far corner of the
   gradient never reaches full transparency and the sheet, with its dark
   vignette and that line on it, can still show through against the gray band
   at the top of the stage while 02 scrolls up. Taking it out of the render
   is the only way to be sure; nothing reads it after this point.
   The scroll hint is already at opacity 0 by then and goes with it. */
.a3-body.a3-hero-done .paper,
.a3-body.a3-hero-done .scroll-hint {
  display: none;
}
/* css/hero2-tear.css turns the whole layer off; the CTA is the one thing on
   it the visitor is meant to reach. */
.a3-body .white-text .hero-cta {
  pointer-events: auto;
}
.a3-body .white-text .hero-cta {
  margin-top: 1.6em;
}

/* The colour-stage headline. hero2 centres it on the whole viewport, which
   is right when the viewport is all photo; here the second tear takes the
   left third for the white panel and a centred line runs straight over the
   copy standing on it -- at 1440 the two overlapped by about 130px.
   Moved onto the photo it belongs to and sized as a caption on it rather
   than as a second headline competing with the copy underneath. The mask
   js/hero2-tear.js puts on this layer is a viewport-wide gradient and does
   not care where the text inside sits, so the line still arrives with the
   first tear exactly as it did. */
.a3-body .final-text {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 34vh 4vw 0 50vw;
}
.a3-body .final-text .bg-content {
  text-align: left;
}
.a3-body .final-text .bg-content .bg-title {
  font-size: clamp(17px, 1.9vw, 27px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin-bottom: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

/* Sits inside the white panel the second tear opens. With
   data-peel-shift-x="-0.09" that tear runs from ~29% of the width at the top
   to ~41% at the bottom -- but the copy block is vertically centred, so what
   it actually has to clear is the tear alongside ITS OWN extent, which at
   1440x900 starts around 32%. 5.5vw of padding plus a 26vw measure puts the
   right edge at ~31.5%, close enough to the tear to read as one composition
   with it rather than as type parked at the far edge of the window.

   The padding is derived from that target rather than set: the measure is
   capped at 374px so the body copy keeps a readable line length, and with a
   fixed padding the block therefore drifted away from the tear as the window
   grew (measured 24% of the width at 1920, against a tear at ~32%). Stating
   the right edge and letting the padding be whatever is left over keeps the
   two together at every width. The max() is the floor for narrow windows;
   below 900px the block stops being a column at all, see the media query. */
.a3-body .white-text {
  --a3-hero-measure: min(26vw, 374px);
  padding-left: max(1.5rem, calc(31.5vw - var(--a3-hero-measure)));
}
.a3-body .white-text .wt-content {
  max-width: var(--a3-hero-measure);
}

/* ---- One type ramp for every section header ------------------------------
   Guidelines 9.1's label / H2 / one-line description, at 8.2's sizes. The
   hero's .wt-* trio is listed alongside so it sets in the same ramp as the
   six sections below it -- css/hero2-tear.css styles those for the
   standalone hero and is overridden here. */
.a2-eyebrow,
.a3-body .wt-eyebrow {
  font-family: var(--a2-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a2-violet);
  margin-bottom: 1.4em;
}

/* The rule that trails every section label. inline-block rather than a flex
   child so the label can still wrap onto a second line at narrow widths
   (the hero's is long enough to need it) and so a centred label carries the
   rule with it. currentColor: it is part of the label, not a separate mark.

   `vertical-align: middle` is the wrong middle here: it centres on the x
   height, and these labels are all caps, so the rule sat visibly low against
   them. An explicit 0.29em puts the 2px bar's centre at ~0.36em above the
   baseline, which is the middle of the cap height. */
.a2-eyebrow::after,
.a3-body .wt-eyebrow::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  margin-left: 0.8em;
  vertical-align: 0.29em;
  background: currentColor;
}

.a2-title,
.a3-body .wt-triad {
  font-family: var(--a2-font-display);
  font-size: clamp(25px, 2.55vw, 36px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--a2-navy);
  margin-bottom: 0.6em;
}

/* The hero's triad runs larger than the section H2s: it is the first thing
   on the page and it has a panel to itself, where they each share a row with
   a figure. Ceiling set by the longest line -- "Create the future." on one
   line inside the 374px measure above; at 44px it breaks mid-phrase. */
.a3-body .wt-triad {
  font-size: clamp(28px, 2.95vw, 41px);
  line-height: 1.1;
}

.a2-lead,
.a3-body .wt-lead {
  font-family: var(--a2-font-body);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--a2-text-soft);
}

/* The hero carries one more paragraph than the section-header pattern has a
   slot for; Body (8.2) under a slightly heavier lead separates the two
   without a second type size. */
.a3-body .wt-lead {
  font-weight: 600;
  color: var(--a2-navy);
  margin-bottom: 0.9em;
}
.a3-body .wt-body {
  font-family: var(--a2-font-body);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--a2-text-soft);
}

/* ---- The handover from the stage to the page ----------------------------
   .scene is `position: fixed` and stays fixed for the life of the page.
   js/hero2-tear.js collapses .scroll-runway to 0 when the second tear ends,
   and without something in its place .a3-after would start at the top of the
   document and bury the hero the instant it finished. This is the one
   viewport of nothing that lets the finished hero be looked at, and it is
   what 02 scrolls up over. */
.a3-stage-hold {
  height: 100vh;
  pointer-events: none;
}

/* ============ 02-07: the page over the stage =============================
   Solid background, above .scene in the stacking order, scrolling normally.
   Nothing has to un-fix at the handover and there is no seam to time.
   z-index 30 clears .scene's children (1-6, which are in the root stacking
   context -- .scene sets no z-index and creates no context of its own) and
   stays under the case modal at 60. */
.a3-after {
  position: relative;
  z-index: 30;
  background: var(--a2-surface);
}

.a3-section {
  border-top: 1px solid var(--a2-border);
  /* The header nav is fixed and about 68px tall, so an anchor jump from it
     would otherwise land with the section's first line under the bar. */
  scroll-margin-top: clamp(60px, 7vh, 72px);
}
.a3-section--tint {
  background: var(--a2-paper);
}

.a3-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(88px, 12vh, 156px) clamp(24px, 4vw, 56px);
}
.a3-inner--wide {
  max-width: 1320px;
}

/* Header beside its figure. The header column is held to about a third so
   the type keeps the measure it has everywhere else on the page instead of
   stretching to whatever is left over. */
.a3-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
/* 03 and 06 put the figure on the left and the header on the right. Done
   with `order` rather than by moving the markup: the header names the
   section, so it reads first whatever side it is drawn on. */
.a3-split--rev {
  grid-template-columns: minmax(0, 2fr) minmax(0, 0.85fr);
}
.a3-split--rev .a3-head {
  order: 2;
}

.a3-head--center {
  max-width: 46em;
  margin: 0 auto clamp(40px, 6vh, 68px);
  text-align: center;
}

/* ============ The icon card =============================================
   Guidelines 9.3's card -- pale surface, hairline border, small radius, no
   shadow. 02's three services and 04's five flow steps are the same card at
   two sizes, which is what keeps them reading as one figure changing rather
   than two designs. On the page (rather than on all2's photo) the surface is
   solid. */
.a2-fig-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.3vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.a2-fig-col {
  height: 100%;
  padding: clamp(24px, 2.1vw, 32px) clamp(18px, 1.7vw, 26px);
  border: 1px solid var(--a2-border);
  border-radius: 8px;
  background: var(--a2-surface);
}
.a3-section--tint .a2-fig-col {
  background: var(--a2-surface);
}

.a2-fig-ico {
  display: grid;
  width: clamp(56px, 4.6vw, 72px);
  height: clamp(56px, 4.6vw, 72px);
  place-items: center;
  margin: 0 auto clamp(16px, 1.8vh, 24px);
  border: 1.5px solid var(--a2-violet);
  border-radius: 50%;
  color: var(--a2-violet);
}
.a2-fig-ico svg {
  display: block;
  width: 42%;
  height: 42%;
}

.a2-fig-num {
  font-family: var(--a2-font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--a2-violet);
  margin-bottom: 0.6em;
}

/* Card H3 (guidelines 8.2). */
.a2-fig-title {
  font-family: var(--a2-font-display);
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--a2-navy);
}

.a2-fig-rule {
  display: block;
  width: 30px;
  height: 2px;
  margin: clamp(14px, 1.8vh, 22px) auto;
  background: var(--a2-violet);
}

.a2-fig-body {
  font-family: var(--a2-font-body);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.75;
  color: var(--a2-text-soft);
}

/* ---- 02 What We Do: the service card ------------------------------------
   The three services carry a good deal more than the five flow steps do --
   an outcome line and the deliverables behind it -- so this card sets left
   and reads top to bottom, rather than the centred stack the flow keeps.
   Everything below is scoped to .a2-fig--services; the base card above is
   still what 04 gets. */
/* The figure carries five stacked blocks per card and needs every pixel of
   measure it can get, so this split runs wider than the page default and
   gives more of the row to the cards. `start` rather than the shared
   `center`: the cards are two and a half times the header's height here, and
   a centred header floats in the middle of the row with nothing beside it.
   The header's top padding is the card's, so the eyebrow sits on the same
   line as the numbers. */
.a3-split--svc {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.25fr);
  align-items: start;
}
.a3-split--svc .a3-head {
  padding-top: clamp(26px, 2.2vw, 34px);
}

/* One shared set of rows for all three cards, so the titles, bodies, outcome
   boxes and dividers each land at one height across the row however deep the
   copy above them wrapped. Two levels of subgrid because the reveal wrapper
   (`li`) sits between the track owner and the card.
   Row gap has to go: the five tracks are the card's internals, and the
   column gap is the only one that separates cards. Spacing between the
   blocks stays on the blocks themselves.
   Without subgrid support this degrades to three independently sized cards
   -- the same thing a plain flex column would have given. */
.a2-fig--services .a2-fig-cols {
  grid-template-rows: repeat(5, auto);
  row-gap: 0;
}
.a2-fig--services .a2-fig-cols > li,
.a2-fig--services .a2-fig-col {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
}

.a2-fig--services .a2-fig-col {
  padding: clamp(22px, 1.9vw, 30px) clamp(18px, 1.6vw, 24px) clamp(22px, 1.9vw, 28px);
}

/* Number at the left edge, icon on the card's centre line. `1fr auto 1fr`
   with an empty third cell, rather than a two-cell row: the middle column
   is centred on the CARD, so the ring does not drift with the width of the
   number beside it. */
.a3-svc-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: clamp(14px, 1.8vh, 22px);
}

.a2-fig--services .a2-fig-num {
  margin: 0;
  font-size: clamp(17px, 1.35vw, 20px);
  letter-spacing: 0.02em;
  text-align: left;
}

/* A filled disc rather than the flow section's open ring. This icon has a
   row to itself with only the number for company, and the pale fill is what
   gives it enough weight to hold that row. */
.a2-fig--services .a2-fig-ico {
  margin: 0;
  border: 0;
  background: color-mix(in srgb, var(--a2-violet) 10%, #fff);
}

.a2-fig--services .a2-fig-title {
  margin: 0 0 0.5em;
  text-align: left;
}

.a2-fig--services .a2-fig-body {
  margin: 0;
}

/* What the service leaves the client with -- violet on a pale wash of the
   same violet, so it reads as the card's conclusion without a heading to
   announce it. */
.a3-svc-outcome {
  display: flex;
  align-items: start;
  gap: 10px;
  margin: clamp(16px, 2vh, 22px) 0 clamp(18px, 2.2vh, 26px);
  padding: 14px 16px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--a2-violet) 8%, #fff);
  font-family: var(--a2-font-body);
  font-size: clamp(13px, 0.98vw, 15px);
  font-weight: 600;
  line-height: 1.55;
  color: var(--a2-violet-dark);
}
.a3-svc-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.08em;
}

/* The deliverables, under a hairline. The hairline lands at one height across
   the row because this is the last of the five shared subgrid rows, not
   because of anything measured here. */
.a3-svc-list {
  margin: 0;
  padding: clamp(18px, 2.2vh, 26px) 0 0;
  border-top: 1px solid var(--a2-border);
  list-style: none;
}
.a3-svc-list li {
  position: relative;
  padding-left: 18px;
  font-family: var(--a2-font-body);
  font-size: clamp(13px, 0.98vw, 15px);
  line-height: 1.5;
  color: var(--a2-text);
}
.a3-svc-list li + li {
  margin-top: 0.75em;
}
.a3-svc-list li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--a2-violet);
}

/* ---- 04 Execution Flow: the same card, five up --------------------------
   A fifth of the row is about 220px, so ring, padding, rule and type all
   step down one notch rather than the copy setting the card's width. */
.a2-fig--flow {
  /* The gap is named because the connectors below span exactly it. */
  --a3-flow-gap: clamp(10px, 1.1vw, 20px);
}
.a2-fig--flow .a2-fig-cols {
  grid-template-columns: repeat(5, 1fr);
  gap: var(--a3-flow-gap);
}
.a2-fig--flow .a2-fig-col {
  padding: clamp(18px, 1.6vw, 26px) clamp(12px, 1vw, 18px);
}
.a2-fig--flow .a2-fig-ico {
  width: clamp(44px, 3.4vw, 56px);
  height: clamp(44px, 3.4vw, 56px);
  margin-bottom: clamp(10px, 1.2vh, 16px);
}
.a2-fig--flow .a2-fig-num {
  font-size: 13px;
}
.a2-fig--flow .a2-fig-title {
  font-size: clamp(15px, 1.2vw, 19px);
}
.a2-fig--flow .a2-fig-rule {
  width: 22px;
  margin: clamp(10px, 1.2vh, 16px) auto;
}
.a2-fig--flow .a2-fig-body {
  font-size: clamp(12px, 0.88vw, 14px);
  line-height: 1.65;
}

/* The route between the steps. Drawn in the grid gap at the height of the
   icon rings, so it reads as one line threaded through five stops rather
   than five cards that happen to be in a row. The offset is the card's own
   top padding plus half a ring -- both are clamps, so it tracks them. */
.a2-fig--flow .a2-fig-cols > li {
  position: relative;
}
.a2-fig--flow .a2-fig-cols > li + li::before {
  content: "";
  position: absolute;
  top: calc(clamp(18px, 1.6vw, 26px) + clamp(22px, 1.7vw, 28px));
  right: 100%;
  width: var(--a3-flow-gap);
  border-top: 1.5px dashed var(--a2-violet);
  opacity: 0.55;
}

/* ============ 03 Our Advantage: the capability table ===================== */
.a2-tbl-card {
  overflow: hidden;
  border: 1px solid var(--a2-border);
  border-radius: 8px;
  background: var(--a2-surface);
}

.a2-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  /* Fixed, or the four partner columns size to their headings and the widest
     ("Translation Agency") takes the row. */
  table-layout: fixed;
  font-family: var(--a2-font-body);
}

/* Off-screen but still read out. The table's caption and every cell's
   wording behind its mark use this. */
.a2-tbl-caption,
.a3-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.a2-tbl th,
.a2-tbl td {
  padding: clamp(11px, 1.3vh, 17px) clamp(6px, 0.6vw, 12px);
  border-right: 1px solid var(--a2-border);
  border-bottom: 1px solid var(--a2-border);
  color: var(--a2-text-soft);
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  vertical-align: middle;
}
.a2-tbl tr > *:last-child {
  border-right: 0;
}
.a2-tbl tbody tr:last-child > * {
  border-bottom: 0;
}

.a2-tbl thead th {
  color: var(--a2-navy);
  background: rgba(240, 241, 245, 0.75);
  font-family: var(--a2-font-display);
  font-size: clamp(12px, 0.92vw, 15px);
  font-weight: 700;
  line-height: 1.3;
}

.a2-tbl th:first-child {
  width: 27%;
  padding-left: clamp(12px, 1.1vw, 20px);
  text-align: left;
}

.a2-tbl th[scope="row"] {
  color: var(--a2-navy);
  font-weight: 600;
  text-align: left;
}

/* The braveCtw column: the one thing on this table that is not a hairline on
   paper. what-we-are/ reveals it with a WebGL tear; there is no tear to
   spare on this page, so it is simply the filled column. */
.a2-tbl .a2-adv {
  border-right-color: transparent;
  background: var(--a2-violet);
  color: #fff;
}
.a2-tbl thead .a2-adv {
  background: var(--a2-violet-dark);
  color: #fff;
}

/* The "Other Partners" column only exists for the narrow layout; the full
   table names the three partner types outright. */
.a2-tbl .a3-tbl-others {
  display: none;
}

/* The marks. Set well above the row text they replaced -- at cell size a
   check and a triangle read as punctuation rather than as a rating -- and in
   navy, so the column that is not navy (braveCtw, where they inherit its
   white) is still the one the eye lands on. */
.a3-mark {
  display: inline-block;
  font-size: clamp(16px, 1.3vw, 21px);
  font-weight: 400;
  line-height: 1;
  color: var(--a2-navy);
}
.a2-tbl .a2-adv .a3-mark {
  color: inherit;
}
/* The dash is a typographic character and sits on the baseline; the other
   two are geometric and sit centred. Lifting it puts all three on one line
   down the column. */
.a3-mark--no {
  position: relative;
  top: -0.08em;
  /* Recessive against the other two, but not a hairline: at --a2-line it read
     as a rendering artefact rather than as an answer. */
  color: var(--a2-muted);
  font-size: clamp(18px, 1.5vw, 24px);
}
.a2-tbl .a2-adv .a3-mark--no {
  color: inherit;
}

/* What the three marks mean. Without this the table is a grid of symbols
   nobody has been told how to read. aria-hidden in the markup: every cell
   already carries its own wording for a screen reader, so this would only
   repeat the vocabulary a third time. */
.a3-tbl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em clamp(14px, 1.6vw, 26px);
  margin-top: clamp(14px, 1.8vh, 20px);
  font-family: var(--a2-font-body);
  font-size: 13px;
  line-height: 1;
  color: var(--a2-muted);
}
.a3-tbl-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.a3-tbl-legend .a3-mark {
  font-size: 15px;
  font-style: normal;
}
.a3-tbl-legend .a3-mark--no {
  font-size: 17px;
}

/* ============ 05 Case Studies ============================================
   PLACEHOLDER TILES. The mock puts a photograph behind each category; there
   are none in assets/ and no approved case content to caption them with, so
   each tile is its category's tint with the icon carried large behind the
   label. The tint set and the tile proportions are the mock's, so real
   photography drops in behind the label without the layout moving. */
.a3-case-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.a3-case-cols > li {
  transition: transform var(--a2-motion-fast) var(--a2-ease-standard);
}
.a3-case-cols > li:hover {
  transform: translateY(-6px);
}

.a3-case-card {
  position: relative;
  display: flex;
  width: 100%;
  min-height: clamp(150px, 19vh, 200px);
  height: 100%;
  overflow: hidden;
  flex-direction: column;
  padding: clamp(16px, 1.5vw, 24px);
  /* A resting hairline and a shallow shadow. With a transparent border and no
     shadow these read as six coloured panels and nothing said they could be
     pressed until the pointer was already on one -- which is no help to
     anyone deciding whether to move the pointer there. */
  border: 1px solid rgba(16, 27, 63, 0.1);
  border-radius: 8px;
  /* Per-tile, set on the <li> in the markup. */
  background: var(--a3-tint, var(--a2-paper));
  box-shadow: 0 1px 2px rgba(16, 27, 63, 0.07);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--a2-motion-fast) ease,
    box-shadow var(--a2-motion-fast) ease;
}
.a3-case-card:hover {
  border-color: var(--a2-violet);
  box-shadow: 0 14px 30px rgba(16, 27, 63, 0.16);
}
.a3-case-card:focus-visible {
  outline: 2px solid var(--a2-violet);
  outline-offset: 3px;
}

/* Where the photograph goes. Big, low-contrast and bled off two edges, so it
   reads as the tile's image rather than as an icon that has been enlarged. */
.a3-case-art {
  position: absolute;
  left: -4%;
  bottom: -12%;
  width: 62.4%;
  color: var(--a2-navy);
  opacity: 0.13;
  pointer-events: none;
}
.a3-case-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.a3-case-label {
  position: relative;
  display: block;
  font-family: var(--a2-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a2-muted);
  margin-bottom: 0.9em;
}

.a3-case-name {
  position: relative;
  display: block;
  font-family: var(--a2-font-display);
  font-size: clamp(16px, 1.35vw, 21px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--a2-navy);
}

/* The thing that says "press me". A bare arrow floating at the bottom of a
   coloured panel is decoration; the same arrow in a violet ring is the
   control, and the ring is the shape this page already uses for every icon
   (.a2-fig-ico), so it arrives as part of the design rather than as a badge
   stuck on. Filling on hover and on keyboard focus confirms the press
   target, not just the card. */
.a3-case-arrow {
  position: relative;
  display: grid;
  width: clamp(36px, 2.9vw, 42px);
  height: clamp(36px, 2.9vw, 42px);
  place-items: center;
  /* Bottom-right, opposite the artwork now sitting bottom-left. */
  align-self: flex-end;
  margin-top: auto;
  border: 1.5px solid var(--a2-violet);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  color: var(--a2-violet);
  font-size: 17px;
  line-height: 1;
  transition:
    background-color var(--a2-motion-fast) ease,
    color var(--a2-motion-fast) ease;
}
.a3-case-card:hover .a3-case-arrow,
.a3-case-card:focus-visible .a3-case-arrow {
  background: var(--a2-violet);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .a3-case-cols > li,
  .a3-case-card,
  .a3-case-arrow {
    transition: none;
  }
  .a3-case-cols > li:hover {
    transform: none;
  }
}

/* ============ 06 Company Overview ========================================
   Details, map and header side by side, as the mock has them. */
.a3-co-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 0.9fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.a3-co-grid .a3-head {
  order: 3;
}

.a2-co-details {
  margin: 0;
}

.a2-co-row {
  display: grid;
  grid-template-columns: 22px minmax(84px, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(8px, 0.9vw, 14px);
  align-items: start;
  padding: clamp(12px, 1.6vh, 18px) 0;
  border-bottom: 1px solid var(--a2-border);
}
.a2-co-row:first-child {
  border-top: 1px solid var(--a2-border);
}

.a2-co-ico {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--a2-violet);
}
.a2-co-ico svg {
  display: block;
  width: 100%;
  height: 100%;
}

.a2-co-row dt {
  font-family: var(--a2-font-body);
  font-size: clamp(12px, 0.92vw, 14px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--a2-navy);
}
.a2-co-row dd {
  margin: 0;
  font-family: var(--a2-font-body);
  font-size: clamp(12px, 0.92vw, 14px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--a2-text-soft);
}
/* Street number and postal code must never break across lines. */
.a2-co-nowrap {
  white-space: nowrap;
}
.a2-co-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--a2-border);
  transition: color .25s ease, border-color .25s ease;
}
.a2-co-link:hover,
.a2-co-link:focus-visible {
  color: var(--a2-violet);
  border-bottom-color: var(--a2-violet);
}

.a2-co-map {
  overflow: hidden;
  border: 1px solid var(--a2-border);
  border-radius: 8px;
  background: var(--a2-surface);
}
.a2-co-map iframe {
  display: block;
  width: 100%;
  height: clamp(300px, 42vh, 420px);
  border: 0;
}

/* ============ 07 Contact ================================================= */
.a2-form {
  display: grid;
  max-width: 900px;
  margin: 0 auto;
  gap: clamp(16px, 2vh, 22px);
}

/* Two to a row at most; Message gets its own full-width row in the markup. */
.a3-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  align-items: start;
}

.a2-field {
  display: grid;
  gap: 8px;
  align-content: start;
}

.a2-field-label {
  font-family: var(--a2-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--a2-navy);
}
.a2-field-label span {
  color: var(--a2-violet);
}

.a2-field input,
.a2-field select,
.a2-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--a2-border);
  border-radius: 4px;
  background: var(--a2-surface);
  color: var(--a2-text);
  font-family: var(--a2-font-body);
  font-size: 15px;
  line-height: 1.5;
}
.a2-field textarea {
  resize: vertical;
}
.a2-field input:focus-visible,
.a2-field select:focus-visible,
.a2-field textarea:focus-visible {
  outline: 2px solid var(--a2-violet);
  outline-offset: 2px;
}

.a3-form-submit {
  justify-self: center;
  min-width: 220px;
}
.a3-form-submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* .a2-form is the grid; this wrapper takes its place as the single grid item
   so js/contactForm.js has one node to hide on success. It repeats the gap
   rather than inheriting it -- grid gap does not cascade. */
.a3-form-fields {
  display: grid;
  gap: clamp(16px, 2vh, 22px);
}
.a3-form-fields[hidden] {
  display: none;
}

/* Shown between the form fading out and the receipt fading in. The element is
   built by js/contactForm.js; only its look is here. */
.cf-spinner {
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: clamp(24px, 4vh, 48px) 0;
  font-family: var(--a2-font-body);
  font-size: 13px;
  color: var(--a2-text-soft);
}
.cf-spinner[hidden] {
  display: none;
}
.cf-spinner-ring {
  width: 38px;
  height: 38px;
  border: 3px solid var(--a2-border);
  border-top-color: var(--a2-violet);
  border-radius: 50%;
  animation: cf-spin 0.8s linear infinite;
}
@keyframes cf-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Still turning -- it is the only thing saying the request is alive -- but
   slowly enough not to read as motion. */
@media (prefers-reduced-motion: reduce) {
  .cf-spinner-ring {
    animation-duration: 2.4s;
  }
}

/* Receipt shown in the field set's place. */
.a3-form-status {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  padding: clamp(24px, 4vh, 48px) 0;
  font-family: var(--a2-font-body);
  color: var(--a2-text-soft);
}
.a3-form-status[hidden] {
  display: none;
}
.a3-form-status-title {
  font-family: var(--a2-font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  color: var(--a2-navy);
}

/* Per-field message, revealed only once that field has been flagged. */
.cf-error {
  display: none;
  font-family: var(--a2-font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--a2-error);
}
.a2-field[data-invalid] .cf-error {
  display: block;
}
.a2-field[data-invalid] input,
.a2-field[data-invalid] select,
.a2-field[data-invalid] textarea {
  border-color: var(--a2-error);
}

/* Whole-submission failure (network down, SMTP refused). */
.cf-error-summary {
  font-family: var(--a2-font-body);
  font-size: 13px;
  text-align: center;
  color: var(--a2-error);
}
.cf-error-summary[hidden] {
  display: none;
}

/* Moved off-screen rather than display:none, because some bots skip fields
   they can tell are not rendered. */
.cf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.a3-form-note {
  margin: 0;
  font-family: var(--a2-font-body);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  color: var(--a2-muted);
}

/* ============ Case study modal ===========================================
   Driven by js/A2CaseModal.js unmodified: it works off ids and data-
   attributes, not these class names. Above .a3-after (30) -- while it is
   open it is the only thing on the page. */
.a2-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vh, 48px) clamp(16px, 4vw, 48px);
}
.a2-modal[hidden] {
  display: none;
}

.a2-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 20, 0.62);
}

.a2-modal-dialog {
  position: relative;
  display: flex;
  width: min(1100px, 100%);
  max-height: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: var(--a2-surface);
  box-shadow: 0 30px 80px rgba(8, 10, 20, 0.4);
  /* The open animation scales this box out of the tile that was clicked, so
     the centre is the anchor at both ends. */
  transform-origin: center center;
  will-change: transform;
}

.a2-modal-close {
  position: absolute;
  z-index: 2;
  top: clamp(10px, 1.4vh, 18px);
  right: clamp(10px, 1vw, 18px);
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--a2-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--a2-navy);
  cursor: pointer;
  place-items: center;
  transition:
    border-color var(--a2-motion-fast) ease,
    background-color var(--a2-motion-fast) ease;
}
.a2-modal-close:hover {
  border-color: var(--a2-violet);
  background: #fff;
  color: var(--a2-violet);
}
.a2-modal-close:focus-visible {
  outline: 2px solid var(--a2-violet);
  outline-offset: 2px;
}
.a2-modal-close svg {
  display: block;
  width: 18px;
  height: 18px;
}

.a2-modal-body {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  overflow: hidden;
}

/* The title panel takes the tint of the tile that was opened, so the sheet
   reads as that tile grown to full size rather than as a generic dialog the
   tile happened to trigger -- which is the whole point of the open animation
   in js/A2CaseModal.js. The tint is copied off the clicked card's computed
   background by js/all3.js; the fallback is the page's own paper, for a
   dialog opened some other way. All2's version of this panel is a dimmed
   photo with white type, and the type here goes navy to suit the pastel. */
.a2-modal-side {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vh, 48px) clamp(22px, 2.4vw, 36px);
  background: var(--a3-modal-tint, var(--a2-paper));
  color: var(--a2-navy);
  transition: background-color var(--a2-motion-fast) ease;
}

.a2-modal-title {
  margin: 0;
  font-family: var(--a2-font-display);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--a2-navy);
}

.a2-modal-rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: clamp(24px, 4vh, 48px) 0 clamp(16px, 2.4vh, 26px);
  background: rgba(16, 27, 63, 0.28);
}

.a2-modal-scope {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--a2-font-body);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.9;
  color: var(--a2-text-soft);
}

.a2-modal-side-note {
  margin: auto 0 0;
  padding-top: 24px;
  font-family: var(--a2-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a2-muted);
}

.a2-modal-main {
  display: grid;
  padding: clamp(24px, 4vh, 44px) clamp(22px, 2.4vw, 40px);
  gap: clamp(14px, 2vh, 22px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  overflow-y: auto;
}

.a2-modal-shot {
  margin: 0;
}
.a2-modal-shot--lead {
  grid-column: 1 / -1;
}

.a2-modal-ph {
  display: grid;
  height: clamp(120px, 20vh, 190px);
  border: 1px dashed var(--a2-border);
  border-radius: 6px;
  background: var(--a2-paper);
  color: var(--a2-muted);
  font-family: var(--a2-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  place-items: center;
}
.a2-modal-shot--lead .a2-modal-ph {
  height: clamp(180px, 30vh, 280px);
}

.a2-modal-shot figcaption {
  padding-top: 10px;
  font-family: var(--a2-font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--a2-text-soft);
}

.a2-modal-note {
  margin: 0;
  grid-column: 1 / -1;
  font-family: var(--a2-font-body);
  font-size: 13px;
  line-height: 1.7;
  color: var(--a2-muted);
}

/* ============ Header nav =================================================
   Held off the page until What We Do is on it (js/all3.js sets .a3-nav-on on
   the body), then dropped in from the top. z-index 50 clears .a3-after (30)
   and stays under the case modal (60), so an open case sheet still covers
   the whole page.

   `visibility` is transitioned alongside the transform rather than left
   alone: translated off the top the bar is still laid out, and without this
   its five links and two controls are tabbable while the hero -- which is a
   gesture sequence with nothing else to reach -- is the whole page. The
   delay only applies on the way out, so the bar stays visible for the length
   of its own exit. */
.a3-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  border-bottom: 1px solid var(--a2-border);
  /* Near-solid rather than a light frost. At 0.92 the contact form's fields
     read as ghost boxes through the bar wherever backdrop-filter is not
     applied (and it is not, in software rendering); this keeps the blur for
     the browsers that do it and stays a clean white bar in the ones that
     don't. */
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  transform: translateY(-100%);
  visibility: hidden;
  transition:
    transform 0.34s var(--a2-ease-standard),
    visibility 0s linear 0.34s;
}
body.a3-nav-on .a3-nav {
  transform: none;
  visibility: visible;
  transition:
    transform 0.34s var(--a2-ease-standard),
    visibility 0s linear 0s;
}

.a3-nav-inner {
  display: flex;
  max-width: 1320px;
  height: clamp(60px, 7vh, 72px);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 56px);
  align-items: center;
  gap: clamp(10px, 1.4vw, 20px);
}

/* The wordmark. Two colours out of the palette rather than a lockup file:
   there is no logo asset in assets/, and a placeholder box would be worse
   than the name set in the page's own display face. */
.a3-nav-logo {
  padding: 0;
  border: 0;
  background: none;
  color: var(--a2-navy);
  font-family: var(--a2-font-display);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1;
  cursor: pointer;
}
.a3-nav-logo span {
  color: var(--a2-violet);
}
.a3-nav-logo:focus-visible,
.a3-nav-toggle:focus-visible,
.a3-lang-btn:focus-visible,
.a3-nav-links a:focus-visible,
.a3-nav-cta:focus-visible {
  outline: 2px solid var(--a2-violet);
  outline-offset: 3px;
}

.a3-nav-links {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: clamp(12px, 1.7vw, 28px);
}
.a3-nav-links a {
  position: relative;
  padding: 6px 0;
  color: var(--a2-text-soft);
  font-family: var(--a2-font-body);
  font-size: clamp(12px, 0.95vw, 13.5px);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--a2-motion-fast) ease;
}
/* Grown from the middle on hover. A link that only changes colour on a bar
   this quiet is easy to miss; a rule that arrives under it is the same
   confirmation the case tiles give with their ring. */
.a3-nav-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.5px;
  background: var(--a2-violet);
  transform: scaleX(0);
  transition: transform var(--a2-motion-fast) var(--a2-ease-standard);
}
.a3-nav-links a:hover {
  color: var(--a2-navy);
}
.a3-nav-links a:hover::after {
  transform: scaleX(1);
}

.a3-nav-actions {
  display: flex;
  margin-left: clamp(10px, 1.6vw, 26px);
  align-items: center;
  gap: clamp(8px, 0.9vw, 14px);
}

/* .btn-primary's own colours at a height that belongs on a 68px bar -- the
   shared CTA is min-height 54px, which is the size for the bottom of a
   section, not for a nav. */
.a3-nav-cta {
  display: inline-flex;
  height: 40px;
  padding: 0 clamp(12px, 1.2vw, 20px);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--a2-violet);
  border-radius: 4px;
  background: var(--a2-violet);
  color: #fff;
  font-family: var(--a2-font-body);
  font-size: clamp(12px, 0.95vw, 13.5px);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--a2-motion-fast) ease,
    border-color var(--a2-motion-fast) ease;
}
.a3-nav-cta:hover {
  border-color: var(--a2-violet-dark);
  background: var(--a2-violet-dark);
}

/* Two segments in one pill, so it reads as one control with a current value
   rather than as two more buttons on the bar. */
.a3-lang {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--a2-border);
  border-radius: 999px;
  background: var(--a2-surface);
}
.a3-lang-btn {
  padding: 0 clamp(8px, 0.8vw, 11px);
  height: 30px;
  border: 0;
  background: none;
  color: var(--a2-muted);
  font-family: var(--a2-font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--a2-motion-fast) ease,
    color var(--a2-motion-fast) ease;
}
.a3-lang-btn:hover {
  color: var(--a2-navy);
}
.a3-lang-btn.is-on {
  background: var(--a2-violet);
  color: #fff;
}

/* Narrow only; display:none until the media query turns it on. */
.a3-nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  /* place-items rather than a margin on the bar: the two pseudo-bars are
     positioned off the middle one, so it has to be in the middle of the
     button or they hang off the top of it. */
  place-items: center;
  padding: 0;
  border: 1px solid var(--a2-border);
  border-radius: 4px;
  background: var(--a2-surface);
  cursor: pointer;
}
/* One bar drawn three times: the element itself plus its two pseudos, so the
   middle one can fade and the outer two cross into an X. */
.a3-nav-toggle span,
.a3-nav-toggle span::before,
.a3-nav-toggle span::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--a2-navy);
  transition:
    transform 0.22s var(--a2-ease-standard),
    opacity 0.12s ease;
}
.a3-nav-toggle span {
  position: relative;
}
.a3-nav-toggle span::before,
.a3-nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}
.a3-nav-toggle span::before {
  top: -5.5px;
}
.a3-nav-toggle span::after {
  top: 5.5px;
}
.a3-nav.is-open .a3-nav-toggle span {
  opacity: 0;
}
.a3-nav.is-open .a3-nav-toggle span::before {
  transform: translateY(5.5px) rotate(45deg);
  opacity: 1;
}
.a3-nav.is-open .a3-nav-toggle span::after {
  transform: translateY(-5.5px) rotate(-45deg);
  opacity: 1;
}

/* ============ Footer =====================================================
   The corporate block the page ends on: navy ground, violet hairline across
   the top, wordmark and address on the left, the link columns on the right,
   and a rule above the copyright line. Deliberately conventional -- it is
   the one part of the page nobody should have to read twice. */
.a3-foot {
  border-top: 3px solid var(--a2-violet);
  background: var(--a2-navy);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--a2-font-body);
}

.a3-foot-inner {
  display: grid;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(48px, 7vh, 80px) clamp(24px, 4vw, 56px) clamp(32px, 4vh, 48px);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: clamp(32px, 4vw, 72px);
}

.a3-foot-logo {
  margin: 0 0 0.7em;
  color: #fff;
  font-family: var(--a2-font-display);
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1;
}
/* Lifted off the navy: --a2-violet at 20% luminance contrast against #101b3f
   is legible as an accent but not as type, and this is the one place the
   mark sits on the dark ground. */
.a3-foot-logo span {
  color: #a394ff;
}

.a3-foot-tag {
  max-width: 34ch;
  margin: 0 0 1.4em;
  font-size: 13.5px;
  line-height: 1.75;
}

.a3-foot-addr {
  margin: 0;
  font-size: 13px;
  font-style: normal;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.58);
}

.a3-foot-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
}

.a3-foot-head {
  margin: 0 0 1.2em;
  color: #fff;
  font-family: var(--a2-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.a3-foot-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.a3-foot-col li + li {
  margin-top: 0.85em;
}
.a3-foot-col a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
  line-height: 1.5;
  text-decoration: none;
  transition: color var(--a2-motion-fast) ease;
}
.a3-foot-col a:hover {
  color: #fff;
}
.a3-foot-col a:focus-visible,
.a3-foot-top:focus-visible {
  outline: 2px solid #a394ff;
  outline-offset: 3px;
}

.a3-foot-bar {
  display: flex;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(16px, 2vh, 22px) clamp(24px, 4vw, 56px) clamp(22px, 3vh, 30px);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.a3-foot-copy {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.52);
}

.a3-foot-top {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--a2-font-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--a2-motion-fast) ease;
}
.a3-foot-top:hover {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .a3-nav,
  .a3-nav-links a::after,
  .a3-nav-toggle span,
  .a3-nav-toggle span::before,
  .a3-nav-toggle span::after {
    transition: none;
  }
}

/* ============ Scroll reveal ==============================================
   The sections rise in as they arrive, on the same short, eased ramp the
   panel sections use in all2. Gated on the .a3-js mark that js/all3.js sets
   before first paint, so a page whose scripts never run shows everything
   rather than a column of invisible cards. */
html.a3-js .a3-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.62s var(--a2-ease-standard),
    transform 0.62s var(--a2-ease-standard);
  /* Set per item in the markup; the row arrives left to right. */
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.a3-js .a3-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.a3-js .a3-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============ Narrow ===================================================== */
@media (max-width: 1099px) {
  .a2-fig--flow .a2-fig-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 1.3vw, 22px);
  }
  /* The connectors are a horizontal thread through one row; once the row
     wraps they would join steps that are not next to each other. */
  .a2-fig--flow .a2-fig-cols > li + li::before {
    content: none;
  }
}

@media (max-width: 899px) {
  .a3-split,
  .a3-split--rev,
  .a3-co-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .a3-split--rev .a3-head,
  .a3-co-grid .a3-head {
    order: 0;
  }
  .a3-head {
    margin-bottom: clamp(24px, 4vh, 40px);
  }
  .a2-fig-cols,
  .a3-case-cols,
  .a3-form-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .a2-fig--flow .a2-fig-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked, the services cards have nothing to line up with, and the shared
     rows would only fight the gap that has to come back between them. */
  .a2-fig--services .a2-fig-cols {
    grid-template-rows: none;
    row-gap: clamp(12px, 1.3vw, 22px);
  }
  .a2-fig--services .a2-fig-cols > li,
  .a2-fig--services .a2-fig-col {
    display: block;
    grid-row: auto;
  }
  .a2-modal-body {
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
  }
  .a2-modal-main {
    grid-template-columns: minmax(0, 1fr);
    overflow-y: visible;
  }

  /* The hero. The second tear opens a white panel about a third of the
     width, which is not a column at this size, so the copy becomes a card
     on the photo instead -- it still arrives with the panel (.revealed) and
     still reads as the thing the tear uncovered. */
  .a3-body .white-text {
    justify-content: center;
    padding-left: 0;
  }
  .a3-body .white-text .wt-content {
    max-width: min(88vw, 460px);
    padding: clamp(22px, 5vw, 34px);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(8, 10, 20, 0.28);
  }

  /* The colour-stage headline and the copy card want the same middle of the
     screen at this width -- there is no photo column left to put the line on,
     and measured at 390px the two sat on top of each other. So the line
     belongs to the tear here and leaves with it, which is what all2 does with
     it on every width. Keyed on the mark js/all3.js sets at heroSequenceDone,
     the same moment the card is told to come up. */
  .a3-body .final-text {
    padding: 22vh 6vw 0;
    transition: opacity 0.45s ease;
  }
  .a3-body.a3-hero-done .final-text {
    opacity: 0;
  }

  /* The table cannot be reflowed into a column -- the comparison IS the
     columns -- and at this width five of them do not fit. It used to scroll
     sideways here, which meant the braveCtw column, the whole point of the
     figure, started off screen. Instead the three partner types collapse
     into the one "Other Partners" column carried in the markup, leaving a
     three-column table that fits: scope, them, us.
     The three named columns and their cells are positions 2 to 4 of every
     row; position 1 is the scope, 5 is Other Partners, 6 is braveCtw. */
  .a2-tbl tr > *:nth-child(-n + 4):not(:first-child) {
    display: none;
  }
  .a2-tbl .a3-tbl-others {
    display: table-cell;
  }
  /* Two mark columns instead of four, so the scope column can take the room
     it was short of -- "Sales Handover & Accountability" was wrapping to four
     lines at 27%. */
  .a2-tbl th:first-child {
    width: 46%;
  }
  /* Nothing should overflow now that the table fits, but a card that clips
     silently is worse than one that scrolls. */
  .a2-tbl-card {
    overflow-x: auto;
  }

  /* ---- The header nav at narrow widths ----
     Five section links, the CTA and the language switch do not fit on one
     bar here. The CTA and the switch stay -- they are what the bar is for --
     and the links drop into a panel under it, opened by the toggle. */
  .a3-nav-toggle {
    display: grid;
  }
  .a3-nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    margin: 0;
    padding: 4px clamp(16px, 4vw, 56px) 14px;
    gap: 0;
    border-bottom: 1px solid var(--a2-border);
    background: var(--a2-surface);
    box-shadow: 0 18px 34px rgba(16, 27, 63, 0.14);
    /* Collapsed rather than display:none, so opening and closing is a move
       and not a flash. The panel is out of the tab order while it is shut. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition:
      opacity 0.2s ease,
      transform 0.22s var(--a2-ease-standard),
      visibility 0s linear 0.22s;
  }
  .a3-nav.is-open .a3-nav-links {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity 0.2s ease,
      transform 0.22s var(--a2-ease-standard),
      visibility 0s linear 0s;
  }
  .a3-nav-links a {
    padding: 13px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--a2-border);
  }
  .a3-nav-links a:last-child {
    border-bottom: 0;
  }
  /* The sliding rule is for a row of links on a bar; in a stacked list it
     would draw over the divider under each row. */
  .a3-nav-links a::after {
    content: none;
  }
  .a3-nav-actions {
    margin-left: auto;
  }

  /* ---- The footer at narrow widths ---- */
  .a3-foot-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .a3-foot-tag {
    max-width: none;
  }
  .a3-foot-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* The three footer columns become two; below this the CTA and the switch are
   what the bar has room for, so the wordmark gives up some of its size. */
@media (max-width: 599px) {
  /* Two columns and a wrapped third row: the row gap has to be bigger than
     the column gap or the heading of the wrapped column sits as close to the
     list above it as its own items are to each other. */
  .a3-foot-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }
  .a3-nav-inner {
    gap: 8px;
  }
  .a3-nav-logo {
    font-size: 16px;
  }
  .a3-nav-cta {
    height: 36px;
    padding: 0 11px;
    font-size: 12px;
  }
  .a3-lang-btn {
    height: 28px;
    padding: 0 7px;
    font-size: 11px;
  }
  .a3-nav-toggle {
    width: 34px;
    height: 34px;
  }
}