/* ==========================================================================
   NEXT GEO — English front page (/en/), page-specific CSS.
   Loaded AFTER ng-sections.css, which this page now shares with the Turkish
   homepage instead of carrying its own copy of.

   THIS FILE USED TO BE 111 KB AND 286 RULES. 260 of those rules were
   byte-identical to ng-sections.css — verified selector by selector, zero
   differences — so the live Turkish homepage and the live English front page
   were rendering from two independent copies of one stylesheet. Every homepage
   fix would have had to be made twice, and the two would have drifted on the
   first fix somebody forgot. ng-v2.php now loads ng-sections.css for this page
   too (see NG_V2_SECTION_SLUGS) and what is left here is only what is genuinely
   unique to the English page.

   Also removed: a copy of the 768-1023px tap-target fix. Its own comment said
   to delete it if the fix ever landed in ng-mobile.css. It has — §6 of that
   file — so it is gone from here.
   ========================================================================== */

/* ==========================================================================
   ===== EN-ONLY: 10-voices — client statements =============================
   ==========================================================================
   Everything above this line is a verbatim copy of ng-sections.css. Everything
   below it is authored for the English front page and exists nowhere else.

   WHY THE COMPONENT EXISTS: the Turkish v2 homepage dropped four attributed,
   client-written statements that were live in both languages (see the long
   note at the top of pages/home/110-voices.html — the premise recorded in
   sections/9-relationships.html, that the quote bodies were empty, is wrong in
   both languages and was checked against _elementor_data on pages 25872 and
   22994). They are the least reproducible asset on the page and they are kept.

   WHY IT IS NOT `.ng-card` / `.ng-grid` FROM ng-shared: ng-shared IS loaded on
   this page, so those primitives are available — and they are the wrong shape.
   `.ng-card` is a link-or-content card with a 19px title and a 15px body;
   this is a pull quote with an attribution rail, and it needs the quote to be
   the largest thing in the box, not a title. Building it on `.ng-rel`'s
   geometry instead keeps it visually in the same family as the section
   directly above it, which is the section it is arguing from.

   SURFACE ROLE: raised (white + hairline + soft shadow, holds text) on the
   --ng-ground band, exactly like .ng-rel__cell. No third surface is invented.
   No hover state: nothing in a card is clickable and a lift on a
   non-interactive card is a false affordance — the same rule .ng-rel follows.

   TWO COLUMNS, NOT THREE. The quotes run 230-330 characters. At three columns
   in a 1120px container each card is ~350px wide, which puts these at ~9 lines
   and 38 characters a line — under the 45-character floor a paragraph needs to
   read as prose. Two columns give ~62 characters, which is inside the 45-75
   band. .ng-rel can be three-up because its cards hold logos, not sentences.

   THE ELLIPSIS between the two passages is a real element, not a text
   character inside a paragraph, because it has to be visible AND removable
   from the accessibility tree: a screen reader announcing "ellipsis" between
   two quoted passages is noise, but a sighted reader must be able to see that
   something was cut. aria-hidden on the element does both.
   ========================================================================== */

.ng-v2 .ng-voices{ background:var(--ng-ground); }

/* --- head. Same ladder as .ng-rel, so the two sections read as one argument
   in two moves rather than as two unrelated bands.                          */
.ng-v2 .ng-voices__title{
  margin-top:14px;
  max-width:24ch;
  text-wrap:balance;
}
/* Doubled class = (0,3,0). ng-foundation.css §8 lists every homepage heading
   here to beat the theme's `body .content-wrapper h2:not(:first-child)
   {margin-top:50px}` at (0,2,2); this class is new, so it is not in that list
   and has to carry its own copy of the fix. Without it the authored 14px gap
   between the eyebrow and the h2 renders at 50px. PATTERNS.md calls this out
   as the list to extend — this is the extension, kept local because
   ng-foundation.css is a shared file. */
.ng-v2 .ng-voices__title.ng-voices__title{ margin-top:14px; }

.ng-v2 .ng-voices__lede{
  margin:18px 0 0;
  font-size:18px; line-height:1.6;
  color:var(--ng-muted);            /* #5A5E86 on #FAFBFF — 6.01:1 */
  max-width:62ch;
}

/* --- grid ---------------------------------------------------------------- */
.ng-v2 .ng-voices__grid{
  margin:48px 0 0; padding:0; list-style:none;
  display:grid; gap:20px;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .ng-v2 .ng-voices__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
}

/* --- card ------------------------------------------------------------------
   The <li> IS the card, as in .ng-rel__cell. That is not cosmetic: Neuros
   ships a bare `ul>li` left padding to make room for a fontello chevron, and
   ng-components.css §10 kills the chevron but only zeroes that padding on the
   two components that have no padding of their own. Declaring real padding
   here at (0,2,0) is what stops these cards being inset by ~32px, the same way
   .ng-rel__cell and .ng-cred__stat do.
   align-items:stretch on the grid + flex column here means the two cards on a
   row are the same height whatever their quote length, and the attribution
   rail is pushed to the bottom edge with margin-top:auto so both rails land on
   one baseline. Without that the shorter quote's rail floats mid-card. */
.ng-v2 .ng-voices__cell{
  display:flex;
  padding:28px;
  background:var(--ng-surface);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  box-shadow:var(--ng-shadow-card);
}
.ng-v2 .ng-voice{
  margin:0;
  display:flex; flex-direction:column;
  flex:1 1 auto;
  min-width:0;
}

/* --- the quotation ---------------------------------------------------------
   The theme styles bare <blockquote> (indent, rule, italic) and can inject
   quote glyphs through the `quotes` property; all of it is neutralised rather
   than fought selector by selector, because this is the only blockquote on the
   page and none of the theme's treatment is wanted.
   16px/1.68 on --ng-ink: this is the page's only long-form reading block, and
   it is set one step above the 15px card body used elsewhere because a visitor
   reads these sentences rather than scanning them. Ink on white is 13.4:1. */
.ng-v2 .ng-voice__quote{
  margin:0; padding:0;
  border:0; background:none;
  font-style:normal;
  quotes:none;
}
.ng-v2 .ng-voice__quote::before,
.ng-v2 .ng-voice__quote::after{ content:none; }

/* The opening mark is a pseudo-element on the CARD, not a character inside the
   quotation: putting a curly quote in the markup would make the first quoted
   word start mid-line and would be read aloud, and the passages are already
   marked up as a blockquote. --ng-accent-display is legal here because the
   glyph renders at 52px — the token is barred below 24px only. */
.ng-v2 .ng-voice__quote{ position:relative; padding-top:34px; }
.ng-v2 .ng-voice__quote::first-letter{ font-kerning:normal; }
.ng-v2 .ng-voice::before{
  content:"\201C";
  display:block;
  font-family:var(--ng-font-display);
  font-weight:700;
  font-size:52px; line-height:1;
  height:0;                       /* takes no vertical space; the padding above
                                     the quote is what reserves the room, so a
                                     long quote and a short one start at the
                                     same y whatever the font swap does */
  color:var(--ng-accent-display);
  pointer-events:none;
}

.ng-v2 .ng-voice__p{
  margin:0;
  font-size:16px; line-height:1.68;
  color:var(--ng-ink);
}
/* font-weight is a SEPARATE rule at (0,3,0) because the theme bolds anything
   inside a blockquote: measured on the applied page, .ng-voice__p resolved to
   font-weight 600 while this file declared nothing, and four cards of 600-weight
   16px Inter read as four blocks of shouting rather than as quoted prose. The
   doubled-class idiom is the same one ng-foundation.css §8 uses to beat the
   theme's (0,2,2) heading margins — no !important, no ancestor assumed. */
.ng-v2 .ng-voice__p.ng-voice__p{ font-weight:400; }
.ng-v2 .ng-voice__p + .ng-voice__p{ margin-top:0; }

/* Omission marker. 16px so it is never read as small print, muted so it is
   clearly editorial apparatus and not part of the quotation, and tracked so
   three dots read as a deliberate mark rather than as a typo. */
.ng-v2 .ng-voice__gap{
  margin:10px 0;
  font-size:16px; line-height:1;
  letter-spacing:0.3em;
  color:var(--ng-muted);          /* #5A5E86 on #FFFFFF — 6.21:1 */
}

/* --- attribution rail ------------------------------------------------------
   Pushed to the bottom of the card and separated by the same hairline the rest
   of the system uses for a footnote rule. The portrait is 48px because it is
   identification, not a headshot gallery: at 48 the face is recognisable and
   the name still leads. The files are the site's own 150x150 thumbnails, so
   they are sharp at 2x and cost 3.7-6.2 KB each rather than the 60-435 KB of
   the originals the old carousel loaded.
   alt="" is correct: the person's name is the very next text node, so an alt
   carrying the name would make a screen reader say it twice. */
.ng-v2 .ng-voice__by{
  margin-top:auto; padding-top:22px;
  display:flex; align-items:center; gap:14px;
  border-top:1px solid var(--ng-hairline);
}
.ng-v2 .ng-voice__face{
  flex:none;
  width:48px; height:48px;
  border-radius:var(--ng-radius-pill);
  object-fit:cover;
  background:var(--ng-surface-sunken);   /* holds the box before the file lands */
}
.ng-v2 .ng-voice__who{ display:block; min-width:0; }
.ng-v2 .ng-voice__name{
  display:block;
  font-family:var(--ng-font-display); font-weight:600;
  font-size:15px; line-height:1.3;
  color:var(--ng-ink);
}
.ng-v2 .ng-voice__role{
  display:block;
  margin-top:2px;
  font-size:14px; line-height:1.4;
  color:var(--ng-muted);          /* #5A5E86 on #FFFFFF — 6.21:1 */
}

/* --- footnote. Same treatment as .ng-rel__note, one band above. ----------- */
.ng-v2 .ng-voices__note{
  margin:40px 0 0;
  padding-top:20px;
  border-top:1px solid var(--ng-hairline);
  font-size:14px; line-height:1.6;
  color:var(--ng-muted);
  max-width:78ch;
}

@media (max-width:640px){
  .ng-v2 .ng-voices__lede{ font-size:17px; }
  .ng-v2 .ng-voices__grid{ margin-top:32px; gap:14px; }
  .ng-v2 .ng-voices__cell{ padding:22px; }
  .ng-v2 .ng-voice::before{ font-size:44px; }
  .ng-v2 .ng-voice__quote{ padding-top:30px; }
  .ng-v2 .ng-voices__note{ margin-top:28px; }
}