/* en/index.html and ja/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, centred on the stage as hero2 has it: at the
   point it arrives the stage is the whole screen and this line is the only
   thing on it. Both documents.

   It used to sit in the right half instead (34vh from the top, 50vw in), off
   the columns the white panel takes when the second tear opens underneath --
   centred, the two overlapped by about 130px at 1440. What resolves that now
   is time rather than position: js/all3.js takes the line off across that
   tear, the way the narrow layout below already did at .a3-hero-done, so by
   the time the panel's copy is there this is gone.

   The mask js/hero2-tear.js puts on the 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.

   The size is a headline's on both documents. It was a caption's -- 27px --
   which was a consequence of the placement above and not of anything about the
   line: tucked beside the panel's copy it had to stay quieter than it. Centred
   on a stage of its own there is nothing for it to be quieter than. /ja/ sets
   the face and the weight below; the size is shared. */
.a3-body .final-text {
  align-items: center;
  justify-content: center;
  padding: 0 4vw;
}
.a3-body .final-text .bg-content {
  text-align: center;
}
.a3-body .final-text .bg-content .bg-title {
  font-size: clamp(22px, 3.5vw, 50px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  margin-bottom: 0;
}

/* ---- The lift under the stage copy ---------------------------------------
   Both screens, both documents. Each already carried a shadow -- 8px of blur
   on screen 1 from css/style.css, 14px on screen 2 here -- and both were set
   when the type was 27px and 57.6px. Under 82px and 50px a blur that size sits
   inside the strokes and does nothing.

   In em, so it is the same shadow at every size the two screens take and at
   every width: at 82px it works out to 2.5px down and 16px of blur, at the
   22px floor to 0.7 and 4.4. Declared on the lines themselves rather than on
   .bg-content, which is where css/style.css has it: an em length is resolved
   against the font-size of the element it is written on, and .bg-content is
   16px -- inherited from there it would be the 8px blur again.

   One soft layer at half black. The photographs behind both screens are
   already darkened (a vignette on screen 1) and this only has to keep white
   type off the lighter parts of them. */
.a3-body .paper .bg-content .bg-title,
.a3-body .final-text .bg-content .bg-title {
  text-shadow: 0 0.03em 0.2em rgba(0, 0, 0, 0.5);
}

/* ---- The two stage screens on /ja/ --------------------------------------
   Japanese says each of these in about a third of the characters English
   needs, and short lines can be set as the display type they are. Both are
   set in the page's display face at the weight the section H2s use, rather
   than the 400 of the Helvetica stack css/style.css left them at for the
   standalone hero. /en/ keeps everything above: at 30-plus characters a line,
   none of this would fit. */
.a3-body:lang(ja) .paper .bg-content .bg-title,
.a3-body:lang(ja) .final-text .bg-content .bg-title {
  font-family: var(--a2-font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Screen 1, before the first tear: an opening line over two large ones.
   「日本市場の実態は」 is eight characters and takes 46% of the width at 5.7vw,
   which is what sets the size -- the block is the middle of the picture, clear
   of both edges at every width. 「海外からでは、」 runs at half that: it is the
   lead-in to the statement, not a third line of it. */
.a3-body:lang(ja) .paper .bg-content .bg-title {
  font-size: clamp(30px, 5.7vw, 82px);
  line-height: 1.24;
  margin-bottom: 0;
}
.a3-body:lang(ja) .paper .bg-title-lead {
  display: block;
  /* Half of the lines under it, until that would take it under the size a
     line of Japanese is comfortable at: at the 30px floor, half is 15px. */
  font-size: max(17px, 0.5em);
  line-height: 1.4;
  margin-bottom: 0.5em;
  /* Re-stated so the em resolves against this line's own size; inherited it
     would arrive as the px the line above it computed. */
  text-shadow: 0 0.03em 0.2em rgba(0, 0, 0, 0.5);
}

/* Screen 2 needs nothing of its own any more: the placement and the size are
   shared above, and the face and the 700 come from the rule at the top of this
   block. */

/* Sits inside the white panel the second tear opens. With
   data-peel-shift-x="0.01" that tear has its waist at 45% of the width, so
   the panel the block has to live in runs from the left edge of the window to
   there. The block is centred in it: the gutter is half of whatever the
   measure leaves over, which puts the same air on both sides at every width
   instead of pinning the right edge to the tear and letting the left margin
   take up the slack. The max() is the floor for narrow windows; below 900px
   the block stops being a column at all, see the media query.

   Centring is also what pays for the measure. It was 482px with the right
   edge pinned at 41.5%, all of the spare room sitting on the left; splitting
   that room in two lets the measure grow with the right edge staying clear of
   the tear, which alongside the block's own vertical extent starts around 43%.
   40vw / 580px is where it is now, right edge at ~42.5%: the triad below runs
   at 5.55vw / 81px and its longest Japanese line is seven characters, so the
   measure has to hold 38.85vw / 567px or the line the break was written for
   comes apart. The body copy under it is the other user of this measure and
   580px is still well inside a readable line: about 36 characters at its 18px,
   where 65 is the ceiling. */
.a3-body .white-text {
  --a3-hero-measure: min(40vw, 580px);
  --a3-hero-gutter: max(1.5rem, calc((45vw - var(--a3-hero-measure)) / 2));
  padding-left: var(--a3-hero-gutter);
}
.a3-body .white-text .wt-content {
  max-width: var(--a3-hero-measure);
}

/* The hero wordmark, set as the block's first line. In flow rather than
   pinned to the top of the stage: it takes the column's left edge from the
   same padding the copy does, and moves with the block as the panel centres
   it. The margin is the gap to the label under it, not a type measure, so it
   is a length rather than an em.

   The label reads as the mark's line rather than as the triad's, so this gap
   is the close one and the block's air sits under the label instead -- see the
   eyebrow's own margin below. */
.a3-body .white-text .wt-logo {
  display: block;
  width: clamp(170px, 12vw, 190px);
  height: auto;
  margin-bottom: clamp(12px, 1.2vw, 18px);
}

/* ---- 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. It now runs at half again the 3.7vw / 54px it was, which is a size
   asked for as display rather than one derived from the column, and the column
   was widened to 40vw / 580px under it to keep the Japanese lines whole: the
   longest is seven characters, 38.85vw / 567px here, and it sits inside that
   measure at every width down to the card.

   The floor moves with the rest, 28px to 42px: below ~780px the copy is a card
   on the photo, not a column, and seven characters at 42px is 294px against
   the card's ~299px of inner width at 390px -- the narrowest it gets. */
.a3-body .wt-triad {
  font-size: clamp(42px, 5.55vw, 81px);
  line-height: 1.1;
  /* The triad is the block's own statement, so it is given room on both sides
     of it rather than sitting tight under the label and over the sentence. The
     gap above is the eyebrow's margin below; this is the one under. */
  margin-bottom: 0.78em;
}

/* /en/ takes the same step up only as far as its longest line allows. The size
   above is a Japanese size: seven characters at 81px is 567px, inside the
   580px measure, where "Create the future." is ~9.1em at this weight and would
   want 737px. So the English triad is sized by that line instead -- 60px is
   546px against the 580px cap and 4.1vw is ~37.3vw against the 40vw measure,
   both leaving it the ~6% the setting had before any of this, which is the
   margin a font substitution needs. It is larger than the 54px it was, just
   not half again larger: the line is what it is.

   The floor stays at the 28px it was for the same reason it was untouched
   there -- below ~780px the card, not the column, is the constraint. */
.a3-body:lang(en) .wt-triad {
  font-size: clamp(28px, 4.1vw, 60px);
}

/* The label is close to the mark above it and open to the triad below, which
   is the gap the triad's top side wants. An em of the eyebrow's own 14px would
   not follow the triad up, so it is a length. */
.a3-body .white-text .wt-eyebrow {
  margin-bottom: clamp(26px, 2.3vw, 34px);
}

.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's is the one sentence on the panel and it carries the whole
   proposition, so it runs heavier and in the navy the H2s use. (It used to
   have a second, lighter paragraph under it listing the services; that list
   is 02's, and the hero now stops at who this is for and what they get.) */
.a3-body .wt-lead {
  font-weight: 600;
  color: var(--a2-navy);
  margin-bottom: 0.9em;
}

/* ---- Japanese line breaking ---------------------------------------------
   Only /ja/ takes this, and it is about the language rather than the layout.
   strict is the kinsoku set: no small kana or long-vowel mark at the start of
   a line, on top of the punctuation rules every browser already applies.

   pretty is for the last line. Set solid, a paragraph here ended on 「す。」 --
   two characters, the rest of the word left on the line above. It keeps the
   lines as full as they were and pulls enough back to end on something whole:
   ...新たな需要をつくりま / す。 becomes ...新たな需要をつくり / ます。 `balance` was
   the other candidate and is the wrong one for this document -- it evens the
   lines out at 60-70% of the measure, which is the ragged setting Japanese
   should not have.

   Both go on everything. */
.a3-body:lang(ja) {
  line-break: strict;
  text-wrap: pretty;
}

/* Display type also breaks by phrase (bunsetsu) rather than wherever the line
   runs out, so a heading never comes apart inside a word -- グローバルチーム / を
   / 支えます。 was what this page did at 36px in a narrow column.

   Display type only. Japanese body copy sets solid: every character is a
   break opportunity, a line fills to its end, and a particle at the head of
   the next line is what a Japanese paragraph has always looked like. Asking
   for phrases there does the opposite of what it does above -- 04's captions
   are ~12 characters to a line, and holding each phrase whole left the first
   line of three of them a little over half full. So the list below is the
   large type and nothing else.

   Chromium and WebKit take auto-phrase; a browser that does not sets solid
   throughout, which is what all of them did before this. */
.a3-body:lang(ja) :is(
  .bg-title,
  .wt-eyebrow,
  .wt-triad,
  .a2-title,
  .a2-fig-title,
  .a3-case-name,
  .a2-modal-title
) {
  word-break: auto-phrase;
}

/* Two breaks that only make sense at one end of the range, so each is drawn
   only there.

   .a3-br-narrow is for the narrow layout. 02's H2 is 29 characters; on a phone
   that is three lines, and no arrangement of them fits 「営業成果へつなげます。」 --
   14 characters of room, 11 for the phrase after the one before it -- so the
   break landed after 営業成果 and left へ at the head of a line. This says where
   the third line starts instead. Above the breakpoint the whole heading is one
   line and a break would be wrong.

   .a3-br-wide is the opposite: the hero paragraph reads best broken at its
   comma, and both halves fit the panel's measure from 1200px up (the measure
   is 40vw and the second half is 27 characters). Below that the second half
   wraps anyway, and the break would put 「まで、」 alone on a line of its own. */
.a3-br-narrow,
.a3-br-wide {
  display: none;
}
@media (max-width: 899px) {
  .a3-br-narrow {
    display: inline;
  }
}
@media (min-width: 1200px) {
  .a3-br-wide {
    display: inline;
  }
}

/* ---- Japanese: the header spans the row rather than taking a column ------
   The rule above can only move a break to a phrase boundary if the phrase
   fits the line, and in the third-width header column of 02, 03, 05 and 06 --
   ~302px at 1440 -- most of them do not. A heading came apart into a stack of
   fragments with the rest of every line empty:

     有望な見込み顧客 / （MQL）を / 生み出し、 / 営業成果へ / つなげます。
     日本に根ざし、 / グローバルチーム / を / 支えます。

   English is ragged like that between words and reads as intended; Japanese
   sets solid and a line ending early reads as a mistake. So Japanese takes
   the width instead of the breaks: the header goes above its figure, where
   every H2 on this page is one line at 1440 and needs no <br> at all, and
   the figure beside it gets the column back.

   Not a new layout -- it is the one every section already switches to below
   900px, which is why that media query is where this stops. The figure keeps
   its own arrangement; only 06 has more than one thing to its name, and there
   the two stay side by side under the header. */
@media (min-width: 900px) {
  .a3-body:lang(ja) .a3-split,
  .a3-body:lang(ja) .a3-split--rev,
  .a3-body:lang(ja) .a3-split--svc {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 06 keeps its details and map in a row; the header sits over both. */
  .a3-body:lang(ja) .a3-co-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr);
  }
  .a3-body:lang(ja) .a3-co-grid .a3-head {
    grid-column: 1 / -1;
  }
  /* Both of these draw the header second in the row; stacked, it is the
     section's opening again. */
  .a3-body:lang(ja) .a3-split--rev .a3-head,
  .a3-body:lang(ja) .a3-co-grid .a3-head {
    order: 0;
  }
  /* The top padding aligned the eyebrow with the card numbers beside it. */
  .a3-body:lang(ja) .a3-split--svc .a3-head {
    padding-top: 0;
  }
  .a3-body:lang(ja) .a3-head {
    margin-bottom: clamp(28px, 4vh, 48px);
  }
  /* The H2 spans the row, but the sentence under it is body copy and keeps a
     measure: 42em is about 42 Japanese characters, inside the 35-45 a line
     wants. Without it the lead runs the width of the section. */
  .a3-body:lang(ja) .a3-head .a2-lead {
    max-width: 42em;
  }
}

/* ---- 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 84px tall, so an anchor jump from it
     would otherwise land with the section's first line under the bar. */
  scroll-margin-top: clamp(74px, 8.5vh, 86px);
}
.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);
}

/* One shared set of rows for the five cards, the same way 02's three carry
   theirs. The cards are the same height without it -- the grid stretches them
   -- but the rule and the body inside each one sit wherever the title above
   them stopped, and the titles do not all take the same number of lines: in
   Japanese "MQL選定" and "営業連携" are one line where the other three are two,
   which left those two cards' dividers 21px above the rest of the row. Five
   tracks, one per child (icon, number, title, rule, body), and two levels of
   subgrid because the reveal wrapper (`li`) sits between the track owner and
   the card.

   Only while the five are in one row. Below 1100px they wrap to two columns
   and then to one, where there is no row to line up with and `row-gap: 0`
   would take away the gap that separates the cards themselves. Without
   subgrid support this degrades to what it looked like before: five cards
   each measuring its own internals. */
@media (min-width: 1100px) {
  .a2-fig--flow .a2-fig-cols {
    grid-template-rows: repeat(5, auto);
    row-gap: 0;
  }
  .a2-fig--flow .a2-fig-cols > li,
  .a2-fig--flow .a2-fig-col {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
  }
}
.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-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 ===========================================
   Opened and closed by js/A2CaseModal.js, which works off ids and data-
   attributes rather than these class names; filled by js/A3CaseStudies.js,
   which does use them. 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;
  /* The sheet takes the whole screen bar this margin. The padding here is
     what that margin is: the dialog inside is 100% of what is left, so the
     gap is stated once and both axes read from it. */
  padding: 50px;
}
.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;
  /* Everything inside the .a2-modal padding, on both axes. The 1100px cap it
     used to carry was for a sheet of three empty frames; a gallery wants the
     width, and a fixed height is what lets .a2-modal-main be the scroller
     rather than the sheet growing past the screen. */
  width: 100%;
  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;
}

/* The only scroller in the sheet, and only below 900px, where the two panes
   have stacked and the whole thing is taller than the screen. Above that
   nothing in here scrolls: the panel is a quarter, the project fills the
   rest, and both are sized to the screen. `overscroll-behavior` is what lets
   js/A2CaseModal.js leave a gesture that started inside the dialog to the
   browser -- without it, a pane scrolled to its end passes the rest of the
   wheel or the swipe on to the page behind, which is pinned. */
.a2-modal-body {
  display: grid;
  width: 100%;
  /* A quarter and the rest. A fraction rather than a fixed 300px because the
     sheet is now the width of the screen: a column that does not grow with it
     is a narrower and narrower strip the wider the display gets. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Written by js/A3CaseStudies.js, which shows an element only once it has
   something in it -- so `hidden` has to hold against the display any of these
   are given below. */
.case-modal-content [hidden] {
  display: none;
}

/* 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);
}

/* `auto` above it: the scope tags below the rule are set at the foot of the
   panel, and the rule travels with them, so the space a case with little in
   it leaves over falls between the title and the pair of them. */
.a2-modal-rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: auto 0 clamp(16px, 2.4vh, 26px);
  background: rgba(16, 27, 63, 0.28);
}

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

/* The project on show, and nothing else on either axis: one column, one row,
   and no scrollbar. The sheet is as tall as the screen, so a gallery that
   asked the visitor to scroll would be asking them to scroll a full screen of
   photographs to reach one more -- the projects are switched between in the
   side panel instead, and each one is sized to the pane it is in. */
/* The scroller. It used to be a pane the gallery exactly filled, because a
   composition placed by hand is a whole thing and half of one is not a smaller
   version of it. The gallery is not placed by hand any more and the number of
   photographs in a project is whatever somebody uploaded, so a fixed height
   can only crop the end off. Rows take the height they need and the pane
   scrolls past them. */
.a2-modal-main {
  display: grid;
  padding: clamp(24px, 4vh, 44px) clamp(22px, 2.4vw, 40px);
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
}

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

/* ---- The case, written from data/case-studies.json -----------------------
   The scope, as tags. It is a list of seven short things that are true of
   every case rather than a paragraph about this one, and set as a column of
   sentences it read like the more important half of the panel. Set as tags at
   the foot of it, it reads as what it is: the labels that apply. */
.case-modal-services {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 6px;
  list-style: none;
}

.case-modal-services li {
  padding: 5px 11px;
  border: 1px solid rgba(16, 27, 63, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  font-family: var(--a2-font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--a2-navy);
}

/* ---- The projects, and the switch between them ----
   Every project of the case is built, and all but one is display:none, so
   switching is a class away and nothing is fetched twice. */
.case-modal-project-nav {
  display: grid;
  margin: clamp(18px, 2.6vh, 26px) 0 0;
  padding: 0;
  list-style: none;
}

.case-modal-project-switch {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border: 0;
  border-top: 1px solid rgba(16, 27, 63, 0.16);
  background: none;
  font-family: var(--a2-font-body);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  color: var(--a2-text-soft);
  cursor: pointer;
  transition: color var(--a2-motion-fast) ease;
}
.case-modal-project-nav li:last-child .case-modal-project-switch {
  border-bottom: 1px solid rgba(16, 27, 63, 0.16);
}
.case-modal-project-switch:hover {
  color: var(--a2-violet);
}
.case-modal-project-switch:focus-visible {
  outline: 2px solid var(--a2-violet);
  outline-offset: 2px;
}
/* The one on screen. Weight rather than a background, because this list sits
   on the tile's own tint and a filled row would read as a second colour. */
.case-modal-project-switch[aria-current="true"] {
  color: var(--a2-navy);
  font-weight: 700;
}

.case-modal-project-switch-mark {
  margin-left: auto;
  font-size: 16px;
  line-height: 1;
}

.case-modal-projects {
  display: grid;
  grid-auto-rows: auto;
  min-height: 0;
}

/* The gallery and nothing else -- there is no heading over it. */
.case-modal-project {
  display: grid;
  grid-template-rows: auto;
  min-height: 0;
}

/* ---- The gallery ---------------------------------------------------------
   Columns, filled top to bottom, with every photograph at its own
   proportions.

   This was a twenty-by-twenty grid with each image carrying the rectangle of
   it to fill. It composed well and it was the wrong thing to keep: case
   studies are the part of this site that changes most, and under that grid
   adding a photograph meant finding a free rectangle, writing four corners,
   and moving its neighbours when it did not fit. Nothing here is placed now.
   The order of the images is the order they pack in, and their shapes are
   their own -- which is also why they are no longer cropped.

   `columns` rather than a grid: a grid would have to be told how tall each
   image is to pack them tightly, and it does not know. Column layout does
   this by flowing, and `break-inside: avoid` is what keeps a photograph from
   being cut in half at the foot of a column. */
.case-gallery {
  columns: 3;
  column-gap: 8px;
  min-height: 0;
}

.case-gallery-item {
  /* A figure that column layout may not split, holding an image and possibly
     a caption. The margin is the vertical gutter; column-gap is the other. */
  margin: 0 0 8px;
  padding: 0;
  break-inside: avoid;
  /* Safari honours the old name and not always the new one, and a photograph
     sawn across a column boundary is the one failure worth two lines. */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

.case-gallery-image {
  display: block;
  width: 100%;
  /* Its own proportions. object-fit has nothing left to do: the box is the
     shape of the photograph rather than the photograph being cut to the shape
     of a box. */
  height: auto;
  border-radius: 6px;
  background: var(--a2-paper);
}

/* Under the photograph, in the flow, taking the height it needs. It used to be
   one grid cell and one line, ended with an ellipsis if it did not fit --
   there was nowhere for a second line to go. There is now, so a caption is
   allowed two before it is cut, and most take one. */
.case-gallery-caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  padding-top: 6px;
  overflow: hidden;
  font-family: var(--a2-font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--a2-text-soft);
}

/* ============ 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;
  /* Tall enough to clear the wordmark at its full size with air above and
     below; the bar is sized off the logo, not the other way round. */
  height: clamp(74px, 8.5vh, 86px);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 56px);
  align-items: center;
  gap: clamp(10px, 1.4vw, 20px);
}

/* The wordmark, as the supplied lockup. The button carries no box of its own
   so the mark sits on the bar exactly as tall as the image is drawn. */
.a3-nav-logo {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
}
.a3-nav-logo img {
  width: auto;
  height: clamp(50px, 4.5vw, 62px);
}
.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);
}
/* Links, not buttons -- each language is its own document. A button centres
   its label in the 30px on its own; an anchor has to be told to. */
.a3-lang-btn {
  display: inline-flex;
  align-items: center;
  padding: 0 clamp(8px, 0.8vw, 11px);
  height: 30px;
  border: 0;
  background: none;
  color: var(--a2-muted);
  text-decoration: none;
  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);
}

/* The footer sits on navy, so it gets the reversed lockup -- "brave" and "tw"
   in white, the C lifted to #d68fc4 so the accent still reads at this size
   against #101b3f. */
.a3-foot-logo {
  margin: 0 0 1.1em;
  line-height: 0;
}
.a3-foot-logo img {
  width: auto;
  height: clamp(52px, 4.4vw, 62px);
}

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

/* Two columns, so the shared rows above are gone and a card with a one-line
   title -- MQL選定 and 営業連携 on /ja/ -- carried its rule and body 18px above
   the card beside it. Two lines' worth of title box holds them level. Not
   below 900px, where the cards are stacked one per row and the same box would
   only be a gap over the rule. */
@media (min-width: 900px) and (max-width: 1099px) {
  .a2-fig--flow .a2-fig-title {
    min-height: 2.4em;   /* two lines at this line-height */
  }
}

@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;
  }
  /* Stacked, so the sheet as a whole is the scroller and the right-hand pane
     is no longer one of its own.

     `align-content: start` because the sheet now has a fixed height: without
     it the two rows share whatever is left over, and a case with one short
     note in it opens as half a screen of tint. Spare space at the foot is the
     dialog's own surface, which is what the lower pane is painted in anyway,
     so it reads as the pane simply carrying on. */
  .a2-modal-body {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    overflow-y: auto;
  }
  /* The panel is only as tall as what is in it here, so there is no space
     left over for the `auto` above the rule to take, and it needs a measured
     one of its own. */
  .a2-modal-rule {
    margin-top: clamp(24px, 4vh, 40px);
  }
  .a2-modal-main {
    grid-auto-rows: auto;
    gap: clamp(14px, 2vh, 22px);
    align-content: start;
    overflow: visible;
  }

  /* Stacked, the sheet is the scroller again. The rows below were already
     `auto` here before the gallery stopped being placed by hand; they are that
     everywhere now, and the rules are kept only so this block still reads as
     the whole of what changes at this width.

     Two columns rather than three: a third of a stacked sheet is not a
     photograph, it is a thumbnail. */
  .case-modal-projects {
    grid-auto-rows: auto;
  }
  .case-modal-project {
    grid-template-rows: auto;
  }
  .case-gallery {
    columns: 2;
  }

  /* 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;
  }
  /* Inside the card now, so it has white under it at this width too. The
     label still rides close to the mark, just not quite as close: the card's
     padding is the only air above the mark here, and the two lines running
     tight together against it read as one crowded corner. */
  .a3-body .white-text .wt-logo {
    margin-bottom: clamp(16px, 3vw, 22px);
  }
  .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 Handoff & 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 img {
    height: 48px;
  }
  .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;
  }

  /* 50px a side is a third of a 375px screen. The sheet keeps the same idea
     -- the whole screen bar a margin -- at the largest margin this width can
     spare. */
  .a2-modal {
    padding: 16px;
  }

  /* One column. Two across a phone is a pair of 150px photographs, which is a
     contact sheet rather than a gallery -- and with nothing placed by hand
     there is no composition being broken up by showing them one at a time. */
  .case-gallery {
    columns: 1;
  }
}