/* all3/index.html only — 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;

  /* 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 H1 competing with the one 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 h1 {
  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);
}
.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);
}

/* ---- 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 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;
  right: -4%;
  bottom: -12%;
  width: 52%;
  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;
  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);
}

.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-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);
}

/* ============ 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);
  }
  .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 is the one figure that cannot be reflowed into a column: five
     columns of comparison ARE the point of it. It scrolls sideways in its
     own card instead of setting the width of the page. */
  .a2-tbl-card {
    overflow-x: auto;
  }
  .a2-tbl {
    min-width: 620px;
  }
}

/* The table's own scroll is a scroll the visitor has to find. Say so where
   it is the only way to read the rest of the row. */
.a3-tbl-hint {
  display: none;
  margin-top: 0.9em;
  font-family: var(--a2-font-body);
  font-size: 13px;
  color: var(--a2-muted);
}
@media (max-width: 899px) {
  .a3-tbl-hint {
    display: block;
  }
}