@charset "UTF-8";
/* =====================================================================
   MarkNtel Advisors - Home page, HERO VARIANT: centred, no right column

   A third direction for the hero band only, for review beside the other
   two. Load it AFTER page.css; it overrides the hero's grid and adds one
   component. Every other band on the page is untouched.

     index.html           flat navy hero, copy left, evidence panel right
     index-textured.html  the same layout on a textured ground
     index-centered.html  this - one centred axis, no right column

   WHAT CHANGED, AND WHY IT IS NOT JUST "CENTRE THE TEXT"

   Dropping the stratigraphy panel drops the evidence band with it, and
   that band carries the headline's argument. So it stays in the
   document, and is presented one item at a time in an open band under
   the lede: one every three seconds, each wiped in from the left and
   wiped out to the right, in list order, forever.

   WHAT IS IN THE BAND (2026-08-28, requested): the ten questions a
   client arrives with, replacing the five evidence phrases that were
   here. Ten unordered questions, so the markup is a <ul>; see
   index-centered.html.

   The four things that decided the implementation:

     1. No script. The whole effect is ten staggered CSS animations on
        one 30s cycle (10 questions x 3s) plus a 3s sweep along the
        band's lower rule. 30 is a whole multiple of 3, so the two never
        drift.
     2. Nothing may be visible only after animation runs. All ten
        questions are in the markup as a plain <ul>. With CSS off, or
        with animation unsupported, the reader gets the plain list.
     3. WCAG 2.2.2 is NOT met, on request. Content that auto-updates for
        longer than five seconds needs a mechanism to stop it, and the
        control that provided one was removed on 2026-08-27. See the
        block by the wipe below, and NOTES.md, Accessibility.
     4. prefers-reduced-motion is the BASE state here, not an override.
        Outside the no-preference query the band is a static list with
        hairline separators, which is also what a browser without CSS
        animation support would render - and it is what bounds point 3.

   The wipe is clip-path plus a 10px slide, both on the line itself. It
   is not a light sweep over the text: that idea was already measured and
   rejected on the sibling hero (see page.css section 8) because the
   alpha needed to see the sweep drops the type under AA.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. One axis

   The hero's two-column query in page.css puts the copy in track 2 and
   the panel in track 4. Both are cancelled here: the band goes back to
   its own three-track template and every child returns to the content
   column. Same (0,2,0) specificity as the rules being replaced, so the
   later file settles it - no !important, no id.
   --------------------------------------------------------------------- */
@media (min-width:1024px){
  .mn-hero--center.mn-hero{
    grid-template-columns:
      [full-start] minmax(0,1fr)
      [content-start] var(--measure)
      [content-end] minmax(0,1fr) [full-end];
  }
  .mn-hero--center.mn-hero>*{grid-column:content;}
}

/* The centring itself. Each block keeps the measure it already had - the
   headline's 14ch, the lede's 54ch - and is centred within the column
   rather than re-sized, so the type does not change shape between the
   three variants. */
.mn-hero--center{text-align:center;}
.mn-hero--center>h1,
.mn-hero--center>.mn-hero__lede{margin-inline:auto;}
/* The single CTA, centred on the same axis (2026-09-10). Was
   justify-content on a flex row of two buttons; with the row gone the
   anchor is the grid item, so it is justify-self that centres it. */
.mn-hero--center>.mn-hero__cta{justify-self:center;}

/* ---------------------------------------------------------------------
   2. The cycling evidence line - static base

   This is what a reduced-motion visitor sees, and what any browser that
   cannot run the animations falls back to: all ten questions, stacked
   between the band's two rules with hairline separators. That stack is
   about twice the height the five-line version was, which is the visible
   cost of the longer list and is accepted. Nothing below this point is
   required for the content to read.
   --------------------------------------------------------------------- */
/* OPEN RULES, NOT A TAB (2026-08-27, requested).

   The previous treatment was a shrink-wrapped box: `fit-content` width,
   a 1px border on all four sides, a radius and a filled ground. Those
   four things together are the recipe for a button, and it sat a few
   pixels above two real calls to action on the same axis, so it was read
   as the first of three controls rather than as the evidence it is.

   What replaces it is a band, not a box: hairlines above and below, no
   side borders, no radius, no fill, and a measure taken from the column
   rather than from the words. A button is never open-sided and never
   full-measure, so the silhouette stops reading as a control.

   THE MEASURE. 54ch matches .mn-hero__lede exactly, so the two hairlines
   land on the lede's own edges rather than on a third measure invented
   for this block - on a centred hero that alignment is the only thing
   holding the band to the rest of the copy.

   Which is why `font-size` is set HERE and not only on the items: `ch`
   resolves against the element's OWN font-size, so a 54ch cap on a list
   that inherited 16px would come out ~150px short of the lede it is
   supposed to match. The list carries the lede's size for the cap to
   resolve against; the items override it with their own below. Same trap
   that produced the .mn-decline bug - see NOTES.md. */
.mn-cycle{
  position:relative;
  /* The margin the <figure> used to carry. */
  margin-block-start:clamp(30px,3.4vw,46px);
  max-inline-size:54ch;
  /* The lede's size, from the token on .mn-hero, so the 54ch above
     resolves against exactly what the lede resolves against. Was the
     same clamp written out a second time; when the lede was reduced on
     phones (2026-09-10) that duplicate would have silently held the old
     value and pushed this band 40px wider than the lede at 320. */
  font-size:var(--mn-hero-lede);
  /* inline-size:100% is not redundant beside the auto margins. With the
     <figure> gone this <ol> IS the grid item, and on a grid item auto
     inline margins suppress the default stretch - the box falls back to
     max-content, and the band shrank to the width of its longest line:
     322px against the lede's 508px at 1280. A definite 100%, capped by
     the 54ch above, restores the lede's measure and leaves the auto
     margins doing only the centring. Correct as a plain block too, so it
     holds whether or not the grid query is in play. */
  inline-size:100%;
  margin-inline:auto;
  padding-block:clamp(16px,1.9vw,24px);
  border-block:1px solid var(--dark-rule);
  overflow:hidden;
}
/* Inter, not the serif (2026-08-27, requested): the same family as the
   `Clarity | Strategy | Results` tagline above the headline, so the two
   pieces of evidence framing the h1 speak in one voice.

   Sentence case and the existing size are both kept deliberately. The
   tagline is three words and can carry uppercase at .14em tracking; these
   are ten sentence-length questions, and uppercase at that length costs
   more in legibility than the match is worth. Family only.

   Note the optical effect, which is not a bug: Inter's x-height is
   larger than Source Serif 4's at the same px value, so the lines read a
   step bigger than they did without the number changing. The size is the
   size that was there before. */
.mn-cycle>li{
  padding-block:clamp(9px,1vw,12px);
  border-block-end:1px solid rgba(175,192,212,.14);
  font-family:var(--ui);
  font-size:clamp(15.5px,1.35vw,20px);
  line-height:1.45;
  letter-spacing:-.01em;
  color:#FFFFFF;
}
.mn-cycle>li:last-child{border-block-end:0;}
/* No counters on the lines (2026-08-27, requested). The <ol> still
   carries the order, because the order is the argument - it is simply
   not drawn. Nothing else needs to change for that: the numbers were a
   CSS counter on the list, never markup. */

/* ---------------------------------------------------------------------
   3. The rotation

   Timing, in one place so it cannot drift:

     3s   per line          - the brief's interval, and the sweep's period
     30s  per full cycle    - 10 questions x 3s
     0.5s wipe in, 2s hold, 0.5s wipe out, 27s off screen

   As percentages of the 30s cycle, 1s is 3.333%: the line is fully in at
   1.667%, starts leaving at 8.333%, and is gone at 10%. Each line's delay
   is its index x 3s, so question 02 takes over exactly as question 01
   finishes leaving.

   ONE COUNT, THREE PLACES. The line count lives in the 30s duration, the
   keyframe percentages and the --i list below. Adding or removing a
   question means editing all three together; the 3s a line and the
   sweep's 3s period are what stay fixed.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  /* The figure stays in normal flow: the band, then the caption under it,
     both centred by the hero's own text-align. It was a three-track grid
     while the band carried a stop control on the caption's row; with the
     control gone (2026-08-27, requested) there is nothing to place, and
     a grid that lays out two stacked blocks is a grid for its own sake. */
  .mn-cycle{display:grid;}

  /* All ten questions in one grid cell. The cell is sized by the tallest
     of them at the current width, so the band does not resize as the
     questions change. Measured at every width on the ladder, none of the
     ten wraps: the longest, "Does this investment thesis hold up?", still
     sits on one line at 320px, so the cell is one line tall throughout. */
  .mn-cycle>li{
    grid-area:1 / 1;
    padding-block:0;
    border-block-end:0;
    animation:mn-cycle-line 30s cubic-bezier(.5,0,.15,1) both infinite;
    animation-delay:calc(var(--i) * 3s);
  }
  /* Fixed positions in a fixed list, so --i is set in the sheet rather
     than injected as an inline style - same convention as page.css. */
  .mn-cycle>li:nth-child(1){--i:0;}
  .mn-cycle>li:nth-child(2){--i:1;}
  .mn-cycle>li:nth-child(3){--i:2;}
  .mn-cycle>li:nth-child(4){--i:3;}
  .mn-cycle>li:nth-child(5){--i:4;}
  .mn-cycle>li:nth-child(6){--i:5;}
  .mn-cycle>li:nth-child(7){--i:6;}
  .mn-cycle>li:nth-child(8){--i:7;}
  .mn-cycle>li:nth-child(9){--i:8;}
  .mn-cycle>li:nth-child(10){--i:9;}

  /* The three-second beat, drawn. A hairline that fills the band left to
     right once per line and fades as the line hands over, so the
     direction of the wipe is legible before the wipe happens and the
     visitor can see how long is left. Decorative, and a pseudo-element,
     so it costs no DOM and carries no meaning a screen reader needs. */
  .mn-cycle::after{
    content:"";
    position:absolute;
    inset-inline:0;
    inset-block-end:0;
    block-size:2px;
    transform-origin:0 50%;
    /* Solid --aqua, not the --cyan -> --aqua ramp it was, and the reason
       is the open rules above. The sweep used to sit on the tab's
       rgba(4,11,52,.72) fill, where --cyan measured 5.4:1. With the fill
       gone it sits on the hero ground, and the cyan end drops to 2.17:1
       - under the 3:1 this file has held it to since it was built.
       Measured on the ground it actually occupies, --aqua is 3.85:1.
       A ramp between two passing colours was the alternative; one token
       is less to keep true. */
    background:var(--aqua);
    animation:mn-cycle-sweep 3s linear infinite;
  }

  /* THERE IS NO STOP CONTROL. Removed 2026-08-27 on request; it was an
     "Auto-advance" checkbox on the caption's row. WCAG 2.2.2 asks for a
     pause / stop / hide mechanism on anything that auto-updates for more
     than five seconds, and this tab does. Nothing in CSS substitutes for
     it: hover and focus are not mechanisms under that criterion, and the
     three-second interval is the brief.

     The exception is recorded in NOTES.md, Accessibility, and is bounded
     - a visitor who asks for reduced motion gets no animation at all, so
     the band never auto-updates for them. To restore compliance, put back
     the checkbox: a native input before the list, styled with
     accent-color, driving animation-play-state through `~`. It costs
     eleven lines of CSS and no script. */

  /* The wipe. clip-path travels left to right on the way in and on the
     way out, so the motion never reverses - the line is uncovered from
     its leading edge, then covered from the same edge. The 10px slide
     rides with it; it is the difference between a shutter and a line
     that arrives. */
  @keyframes mn-cycle-line{
    0%{clip-path:inset(0 100% 0 0);transform:translateX(-10px);}
    1.667%{clip-path:inset(0 0 0 0);transform:translateX(0);}
    8.333%{clip-path:inset(0 0 0 0);transform:translateX(0);}
    10%,100%{clip-path:inset(0 0 0 100%);transform:translateX(10px);}
  }
  /* Transform and opacity only, so the sweep stays off the main thread
     and cannot move anything around it. */
  @keyframes mn-cycle-sweep{
    0%{transform:scaleX(0);opacity:.92;}
    84%{opacity:.92;}
    100%{transform:scaleX(1);opacity:0;}
  }
}

/* ---------------------------------------------------------------------
   4. The spine reaches in to the tagline

   The page's spine is a hairline down the left gutter with a dot where
   each band's eyebrow begins (page.css section 5). On a centred hero the
   dot marks nothing - the label it points at is in the middle of the
   band - so it read as a stray speck on the left edge.

   The first fix stood the line up on the centre axis and dropped it from
   the top of the band. Rejected on review (2026-08-27): it kept the
   motif but abandoned the left-hand line, so the hero had a mark of its
   own rather than the page's mark in the right place.

   This is the other answer, and the better one. The dot stays exactly
   where it belongs, on the spine, at the eyebrow's height. From it a
   hairline runs INBOARD along that height until it reaches the tagline.
   Nothing new is invented: the existing line simply reaches in and hands
   over to the words it names.

   WHY THE RULE IS A FLEX ITEM AND NOT AN ABSOLUTE BOX

   The words are centred, so the distance from the column's edge to the
   first word is `(column - string) / 2` - it depends on the rendered
   width of the string, which is not a value CSS can name. An absolutely
   positioned rule cannot know where to stop. As a flex item it does not
   need to: the flex line lays out `rule | Clarity | Strategy | Results`
   and the rule takes whatever is left.

   The counterweight is what keeps the words centred on the page's axis
   rather than pushed right - an ::after with the same flex, no
   background, that exists only to balance the rule. Both are
   pseudo-elements, so the DOM is still ul > li and the deepest text node
   is still level 4.
   --------------------------------------------------------------------- */

/* Extending the list by the spine's inset ON BOTH SIDES is what lets the
   rule start exactly on the hairline without a negative margin on the
   pseudo-element itself. Widening one edge would move the list's centre
   by half the inset and take the centred words with it; widening both
   leaves the centre where it was. The right-hand overhang is invisible
   and lands inside the gutter, which is never narrower than the inset -
   see --spine-inset in page.css. */
.mn-hero--center>.mn-eyebrow--values{
  margin-inline:calc(-1 * var(--spine-inset));
  /* Not centre: the flex line is `rule | words | counterweight` and the
     two outer items do the centring themselves. */
  justify-content:flex-start;
}

.mn-hero--center>.mn-eyebrow--values::before,
.mn-hero--center>.mn-eyebrow--values::after{
  content:"";
  flex:1 1 0;
  block-size:1px;
}
/* The rule. Its gap goes on the INNER side only - one gap comes from the
   list's own `gap`, this doubles it, so the rule is clearly separated
   from the word rather than reading as an em dash attached to it, while
   the outer end stays exactly on the spine.

   Brightest where it leaves the dot and softening as it travels, so it
   reads as moving toward the words rather than sitting between two
   things. `90deg` because there is no logical keyword for a gradient
   axis; on an RTL build this is the one declaration to mirror. */
.mn-hero--center>.mn-eyebrow--values::before{
  margin-inline-end:var(--values-gap);
  background:linear-gradient(90deg,
    rgba(111,224,238,.62) 0%,
    rgba(111,224,238,.34) 55%,
    rgba(175,192,212,.26) 100%);
}
/* The counterweight. No background: it is layout, not a mark. */
.mn-hero--center>.mn-eyebrow--values::after{margin-inline-start:var(--values-gap);}

/* The same load gesture the stratigraphy rail uses on the other two
   variants (page.css section 8), turned on its side: the rule draws out
   from the dot. Transform only, so nothing reflows and the words never
   move. Outside this query the rule is simply drawn. */
@media (prefers-reduced-motion:no-preference){
  .mn-hero--center>.mn-eyebrow--values::before{
    transform-origin:0 50%;
    animation:mn-reach 900ms cubic-bezier(.32,.72,.32,1) both;
  }
  @keyframes mn-reach{from{transform:scaleX(0);}to{transform:scaleX(1);}}
}