/* Maison Agentic — site styles.
   Tokens come from tokens.css. No literal colour or size values below.
   Elementor supplies structure only; every visual decision lives here so page
   edits in the builder cannot drift from the Design System. */

/* ---------------------------------------------------------------- base */
body{
  background:var(--surface-page);
  color:var(--text-primary);
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--leading-relaxed);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.entry-title,.elementor-heading-title{
  font-family:var(--font-display);
  font-weight:var(--weight-regular);
  letter-spacing:var(--tracking-tight);
  color:var(--text-primary);
}
h1,.elementor-widget-heading h1.elementor-heading-title{
  font-size:clamp(2.25rem,5.5vw,var(--text-4xl));line-height:var(--leading-tight);
}
h2,.elementor-widget-heading h2.elementor-heading-title{
  font-size:clamp(1.75rem,3.6vw,var(--text-3xl));line-height:1.08;
}
h3,.elementor-widget-heading h3.elementor-heading-title{
  font-size:var(--text-md);line-height:var(--leading-snug);
}
p{margin:0 0 var(--space-4)}
p:last-child{margin-bottom:0}
a{color:inherit}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto}

/* ------------------------------------------------- Elementor structure */
/* Elementor's container defaults fight the Design System's spacing scale. */
.elementor-section,.e-con{--e-con-transition:none}
.ma-section{padding-block:clamp(3.5rem,8vw,var(--space-9))}
.ma-section{--content-pad:clamp(1.5rem,4vw,4rem)}

/* ---------------------------------------------------------- typography */
.ma-eyebrow,.ma-eyebrow .elementor-heading-title{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--text-secondary);
  line-height:var(--leading-normal);
}
.ma-lede,.ma-lede p{
  font-size:clamp(1rem,1.6vw,var(--text-md));
  line-height:var(--leading-relaxed);
  color:var(--text-secondary);
}
.ma-lede{max-width:62ch}
.ma-body,.ma-body p{color:var(--text-secondary)}
.ma-body{max-width:64ch}
.ma-kicker,.ma-kicker .elementor-heading-title{
  font-family:var(--font-display);
  font-size:clamp(1.25rem,2.4vw,var(--text-xl));
  line-height:var(--leading-snug);
  color:var(--text-primary);
}

/* ------------------------------------------------------------ buttons */
/* Spec: components/core/Button.jsx */
.elementor-button,.ma-btn{
  font-family:var(--font-sans);
  font-weight:var(--weight-medium);
  text-transform:uppercase;
  letter-spacing:var(--tracking-wide);
  border-radius:var(--radius-sm);
  border:var(--border-w) solid transparent;
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-2);
  text-decoration:none;
  font-size:13px;
  padding:0 var(--space-6);
  height:48px;
  white-space:nowrap;
  transition:background-color var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard);
}
.elementor-button:focus-visible,.ma-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.elementor-button .elementor-button-content-wrapper{gap:var(--space-2)}

.ma-btn-primary .elementor-button,a.ma-btn-primary{
  background:var(--accent);color:var(--text-on-brand);border-color:var(--accent);
}
.ma-btn-primary .elementor-button:hover,a.ma-btn-primary:hover{
  background:var(--accent-hover);border-color:var(--accent-hover);color:var(--text-on-brand);
}
.ma-btn-secondary .elementor-button,a.ma-btn-secondary{
  background:var(--surface-raised);color:var(--text-primary);border-color:var(--border-strong);
}
.ma-btn-secondary .elementor-button:hover,a.ma-btn-secondary:hover{
  background:var(--surface-sunken);color:var(--text-primary);
}
/* ------------------------------------------------------- 01 hero */
.ma-hero-art img{width:100%;height:auto;display:block}
@media(max-width:900px){
  .ma-hero-art{max-width:440px}
  /* Equal-width CTAs once the hero stacks. Explicit tracks, not auto-fit: auto-fit's
     repetition count overflowed the viewport when this was first built. */
  .ma-hero-ctas{display:grid;grid-template-columns:1fr 1fr;max-width:500px;gap:var(--space-4)}
  .ma-hero-ctas .elementor-widget-button{width:100%}
  .ma-hero-ctas .elementor-button{width:100%}
}
/* Must follow the 900px block: both match on a phone and the later rule wins. */
@media(max-width:560px){
  .ma-hero-ctas{grid-template-columns:1fr}
}

/* --------------------------------------------------- 02 problem beats */
.ma-beats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:var(--border-w) solid var(--border-default);
  margin-top:var(--space-7);
}
.ma-beat{
  padding:var(--space-5) var(--space-5) var(--space-6) 0;
  border-right:var(--border-w) solid var(--border-default);
}
.ma-beat:last-child{border-right:0}
/* Bleeds to the card's divider rather than sitting inset, so it reads as a photo
   capping the card and not a thumbnail floating inside it. */
.ma-beat-art{margin:0 calc(-1 * var(--space-5)) var(--space-5) 0}
.ma-beat-art img{width:100%;height:auto;display:block}
.ma-beat .n{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--accent);letter-spacing:var(--tracking-eyebrow);
}
.ma-beat .t{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  display:block;margin:var(--space-1) 0 var(--space-3);
}
.ma-beat p{color:var(--text-secondary);font-size:.9375rem;margin:0}
@media(max-width:760px){
  .ma-beats{grid-template-columns:1fr}
  .ma-beat{border-right:0;border-bottom:var(--border-w) solid var(--border-default);padding-right:0}
  .ma-beat:last-child{border-bottom:0}
  .ma-beat-art{margin-right:0}
}

/* ------------------------------------------------------- 03 diagram */
.ma-diagram svg{width:100%;height:auto}
/* Specificity must beat `.ma-diagram svg`, or both variants render at once. */
.ma-diagram .ma-svg-desktop{display:block}
.ma-diagram .ma-tiers{display:none}
@media(max-width:760px){
  .ma-diagram .ma-svg-desktop{display:none}
  .ma-diagram .ma-tiers{display:block}
}
.ma-caption{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--text-muted);margin-top:var(--space-4);letter-spacing:.02em;
}

/* Phones get `.ma-tiers`, real markup, not a scaled drawing. The mobile SVG that
   used to sit here had a fixed 380x600 viewBox, so it cost 570px of scroll to
   carry eleven labels at 9px, and it had already dropped the tier descriptions
   the desktop drawing carries. The roof and the foundation rule are the only
   two parts of the drawing kept, so the house still reads. */
.ma-tiers-roof{display:block;width:100%;height:auto}
.ma-tier{
  border:1px solid var(--stone);
  padding:var(--space-3) var(--space-4);
  background:var(--paper);
}
.ma-tier + .ma-tier{border-top:0}
.ma-tiers-base{height:3px;background:var(--ink)}
.ma-tier-head{
  display:flex;align-items:baseline;gap:.65rem;margin:0;
  font-family:var(--font-mono);font-size:11px;line-height:1.2;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
}
.ma-tier-n{color:var(--oxblood)}
.ma-tier-note{
  margin:.4rem 0 0;
  font-family:var(--font-sans);font-size:12.5px;line-height:1.45;
  color:var(--text-muted);
}
/* Reset rather than inherit: `.elementor` and Blocksy both style lists. */
.ma-chips{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:.65rem 0 0;padding:0;list-style:none;
}
.ma-chips li{
  margin:0;padding:5px 9px;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  font-family:var(--font-mono);font-size:10px;line-height:1.2;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}

/* --------------------------------------------- 04/05 audience blocks */
.ma-aud{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
        gap:clamp(2rem,5vw,5rem);align-items:start}
.ma-benefits{list-style:none;margin:0;padding:0;
             border-top:var(--border-w) solid var(--border-default)}
.ma-benefits li{padding:var(--space-5) 0;
                border-bottom:var(--border-w) solid var(--border-default)}
.ma-benefits strong{display:block;font-weight:var(--weight-medium);margin-bottom:.35rem;}
.ma-benefits p{color:var(--text-secondary);font-size:.9375rem;margin:0}

/* The picture under the SME founders CTA. Added 2026-08-12.

   Its gap is set here rather than in the builder deliberately. This column's
   existing rhythm is a 20px padding-block-start written onto each widget as a
   builder setting, which is the thing SPACING AUTHORITY exists to stop, and
   the new widget naturally had none, so it sat flush against the button.
   Matching the mistake would have spread it. The picture takes the 48px step
   rather than the 20px one because it is a separate object below a call to
   action, not the next widget in a stack. [class] takes this to 0,2,0 so
   Elementor's own per-element rules cannot win it back.

   No max-width. One was written and then removed after being measured as
   inert at every width: .ma-aud computes to display:flex, not grid, so its
   grid-template-columns never apply and the two columns simply narrow instead
   of stacking. The picture's column measured 461px at 1440, 503 at 1180, 374
   at 900, 314 at 768 and 342 at 390, so a cap never binds. The picture fills
   its column at every width by design. */
.ma-aud-art[class]{margin-block-start:var(--space-7)}
.ma-aud-art img{width:100%;height:auto;display:block}
@media(max-width:860px){ .ma-aud{grid-template-columns:1fr;gap:var(--space-6)} }

/* ------------------------------------------------ 05 talent carousel */
.ma-talent{position:relative;overflow:hidden}
.ma-talent-col{position:absolute;top:-18%;height:136%;width:200px;
               display:flex;flex-direction:column;gap:var(--space-4);
               pointer-events:none;z-index:0}
.ma-talent-left{left:clamp(-70px,-3vw,-20px)}
.ma-talent-right{right:clamp(-70px,-3vw,-20px)}
/* --rail-drift, not the global --drift: the rails are the only consumer and want
   more travel than the restrained default, while --drift stays the motion-register
   baseline for anything scrubbed later. */
.ma-talent-left.ma-scrub{transform:translateY(calc((.5 - var(--p,.5)) * var(--rail-drift,var(--drift))))}
.ma-talent-right.ma-scrub{transform:translateY(calc((var(--p,.5) - .5) * var(--rail-drift,var(--drift))))}
/* Placeholder slot. 3:4 portrait so real images drop in with zero layout shift. */
.ma-ph{aspect-ratio:3/4;border:var(--border-w) solid var(--border-strong);
       background:var(--stone);position:relative;flex:0 0 auto;overflow:hidden}
.ma-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ma-ph::after{content:attr(data-slot);position:absolute;left:8px;bottom:6px;
              font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;
              color:var(--text-secondary)}
.ma-ph:has(img)::after{content:none}
.ma-talent-col.is-inset{width:150px;padding-top:9rem;opacity:.85}
.ma-talent-left.is-inset{left:clamp(90px,9vw,170px)}
.ma-talent-right.is-inset{right:clamp(90px,9vw,170px)}
@media(max-width:1420px){ .ma-talent-col.is-inset{display:none} }
.ma-talent-inner{position:relative;z-index:1}
.ma-talent .ma-aud{max-width:760px;margin:0 auto;grid-template-columns:1fr;gap:var(--space-6)}
/* Window and track are deliberately separate elements. Transforming the element
   that also carries overflow:hidden moves the clipping window along with the
   content, so the tiles slide out past the left edge of the section and leave
   dead space on the right. The strip is the fixed window; only the track moves.
   5 tiles at 120px plus 4 gaps at 16px is 664px of content. */
.ma-talent-strip{display:none!important;margin-top:var(--space-6);
                 margin-bottom:var(--space-6);overflow:hidden!important;
                 padding:0!important;width:100%!important;--strip-content:664px}
/* Elementor containers default to flex-direction:column AND flex-wrap:wrap, so
   both have to be said out loud. Left alone, the five tiles came out as a
   2-per-row grid: measured at only two distinct x positions instead of five. */
.ma-talent-track{display:flex!important;flex-direction:row!important;
                 flex-wrap:nowrap!important;
                 gap:var(--space-4)!important;padding:0!important;width:100%!important}
.ma-talent-strip .ma-ph{flex:0 0 120px!important}
/* Elementor gives every container a transform transition (measured: 0.4s ease).
   A scroll-scrubbed element has to track the scroll frame for frame, so an eased
   transition makes the rails and the strip lag behind the page and feel rubbery.
   The plain divs these replaced had no transition, so this restores that. */
.ma-talent-col.ma-scrub,
.ma-talent-track.ma-scrub{transition:none!important}
@media(max-width:1180px){
  .ma-talent-col{display:none!important}
  /* A pan, not a nudge. --drift is 80px, so the old formula moved the strip 40px
     either side of centre and tiles 4 and 5 were never reachable. --p sweeps 0
     to 1 as the section crosses the viewport, so the travel has to be the whole
     overflow: content width minus the visible box. max() pins it at rest when
     the window is wider than the content, which is the case between 1181px and
     1240px where all five already fit and any pan would run backwards.
     The strip is display:block so the track fills it and 100% resolves to the
     window width rather than to the 664px of content inside the track. */
  .ma-talent-strip{display:block!important}
  /* Two classes, not one. Elementor's frontend.min.css sets a transform on every
     .e-con from its own --e-con-transform-* chain, at equal specificity to a
     single class, and it loads after this file. A plain .ma-talent-track rule
     silently lost and the strip never panned. The rails above already dodge this
     with .ma-talent-left.ma-scrub, which is why their drift kept working. */
  .ma-talent-track.ma-scrub{
    transform:translateX(calc(-1 * var(--p,0) * max(0px, var(--strip-content) - 100%)))}
}

/* ------------------------------------------------- 06 the engagement */
/* Replaced the flat .ma-phases table on 2026-08-12. That version was six
   full-width rows of body copy under one headline, which on a phone was the
   longest unbroken block on the site. This is the same copy, unchanged, in an
   alternating timeline: the copy column on the left, the phases threaded on a
   dotted rail to the right of it.

   Geometry, so the path is understandable rather than magic. Every item is a
   three column grid, [marker] [body] [marker]. Odd items take the left marker
   column, even items the right, and the body column is the same width either
   way, so the blocks line up and only the marker side alternates. That is what
   makes the rail a descending zigzag instead of a straight line.

   The rail is two pseudo elements per item:
     ::before  the vertical, on that item's own marker column, running from the
               crossing above it to the crossing below it
     ::after   the horizontal crossing, sitting in the row gap beneath the item,
               spanning between this item's marker and the next one's

   Both crossings sit at exactly half the row gap, so consecutive items meet
   without any element needing to know its neighbour's height. Corners are
   square, not rounded as in the reference layout, because the Design System
   is sharp cornered everywhere else.

   The path descends monotonically, which is why a top down wipe is a true
   trace of it rather than an approximation. See the scroll draw block below. */

.ma-tl{
  --mark:2.75rem;                    /* marker diameter, and column width */
  --rail-w:2px;
  --tl-gap:clamp(2.5rem,5vw,4.5rem); /* vertical space between items */
  --cross:calc(var(--tl-gap) / 2);   /* where the horizontal sits inside it */
  /* Must match the section ground, so the marker can mask the rail behind it.
     .ma-stone is #eeeae3, which is exactly --surface-sunken/--neutral-100. */
  --tl-ground:var(--surface-sunken);
  /* Oxblood, the same colour the numerals carry. Drawn in --border-default
     first, which is the correct token for a hairline but disappeared at this
     dot size against the section ground: the rail is the thing the eye is
     meant to follow, so it is accent rather than furniture. */
  --dot:var(--accent);
}
.ma-tl-list{list-style:none;margin:0;padding:0;padding-inline-start:0;
            display:grid;row-gap:var(--tl-gap)}

.ma-tl-item{
  position:relative;
  display:grid;
  grid-template-columns:var(--mark) minmax(0,1fr) var(--mark);
  column-gap:var(--space-5);
  align-items:start;
}
.ma-tl-item:nth-child(odd)  > .ma-tl-mark{grid-column:1}
.ma-tl-item:nth-child(even) > .ma-tl-mark{grid-column:3}
.ma-tl-item > .ma-tl-body{grid-column:2;grid-row:1}
.ma-tl-item:nth-child(even) > .ma-tl-body{text-align:right}

/* --- marker ---------------------------------------------------------- */
.ma-tl-mark{
  grid-row:1;
  position:relative;z-index:1;
  width:var(--mark);height:var(--mark);
  display:grid;place-items:center;
  /* the ring is part of the rail, not a hairline around an unrelated object,
     so it takes --dot. Left at --border-strong first, and against an oxblood
     rail a grey ring read as a break in the line rather than a station on it. */
  border:var(--border-w) solid var(--dot);
  border-radius:var(--radius-pill);
  /* opaque, so the rail passes behind it and reads as starting at its edge */
  background:var(--tl-ground);
}
.ma-tl-mark .n{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--accent);letter-spacing:var(--tracking-wide);line-height:1;
}

/* --- body ------------------------------------------------------------ */
.ma-tl-body .t{
  display:block;
  font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-primary);
  /* optically centres the label against the marker beside it */
  padding-block-start:calc((var(--mark) - 1.25rem) / 2);
}
.ma-tl-body p{
  margin:var(--space-3) 0 0;
  color:var(--text-secondary);font-size:.9375rem;line-height:1.65;
  max-width:52ch;
}
.ma-tl-item:nth-child(even) .ma-tl-body p{margin-inline-start:auto}

/* --- the rail -------------------------------------------------------- */
.ma-tl-item::before,
.ma-tl-item::after{content:"";position:absolute;pointer-events:none}

/* vertical: the height of the item, half a gap proud at each end so it meets
   the crossings above and below it */
.ma-tl-item::before{
  width:var(--rail-w);
  top:calc(-1 * var(--cross));
  bottom:calc(-1 * var(--cross));
  background:repeating-linear-gradient(to bottom,
    var(--dot) 0 3px, transparent 3px 9px);
}
.ma-tl-item:nth-child(odd)::before{left:calc((var(--mark) - var(--rail-w)) / 2)}
.ma-tl-item:nth-child(even)::before{right:calc((var(--mark) - var(--rail-w)) / 2)}
/* the first item's rail starts at its marker, not above it */
.ma-tl-item:first-child::before{top:calc(var(--mark) / 2)}

/* horizontal crossing, in the gap below the item, between the two marker centres */
.ma-tl-item::after{
  height:var(--rail-w);
  left:calc((var(--mark) - var(--rail-w)) / 2);
  right:calc((var(--mark) - var(--rail-w)) / 2);
  bottom:calc(-1 * var(--cross) - (var(--rail-w) / 2));
  background:repeating-linear-gradient(to right,
    var(--dot) 0 3px, transparent 3px 9px);
}

/* "A clear end." The last item terminates in a solid crossbar rather than
   handing off to another crossing. The headline makes that promise, so the
   drawing keeps it. */
.ma-tl-item:last-child::before{bottom:0}
.ma-tl-item:last-child::after{
  height:var(--border-w);width:2rem;left:auto;right:auto;bottom:0;
  /* the terminus of the rail, so it takes the rail's colour, not a hairline's */
  background:var(--dot);
}
.ma-tl-item:last-child:nth-child(odd)::after{left:calc((var(--mark) - 2rem) / 2)}
.ma-tl-item:last-child:nth-child(even)::after{right:calc((var(--mark) - 2rem) / 2)}

/* --- the two optional retainers -------------------------------------- */
/* Deliberately outside the numbered rail. The headline promises four phases
   and a clear end, and these sit after that end, so they get no numeral, no
   filled marker, and no length of dotted line. */
.ma-tl-optional{
  margin-top:var(--space-8);padding-top:var(--space-7);
  border-top:var(--border-w) solid var(--border-default);
  display:grid;row-gap:var(--space-6);
}
.ma-opt{
  display:grid;grid-template-columns:var(--mark) minmax(0,1fr);
  column-gap:var(--space-5);align-items:start;
}
.ma-opt::before{
  content:"";width:.5rem;height:.5rem;border-radius:var(--radius-pill);
  border:var(--border-w) solid var(--border-strong);
  justify-self:center;margin-block-start:.45rem;
}
/* continuous oxblood glow once the retainers scroll into view */
@keyframes ma-opt-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(168,56,43,.5)}
  50%{box-shadow:0 0 10px 3px rgba(168,56,43,.55)}
}
.ma-tl-optional.is-in .ma-opt::before{
  border-color:var(--accent);
  animation:ma-opt-glow 2.4s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){
  .ma-opt::before{border-color:var(--accent);box-shadow:0 0 6px 2px rgba(168,56,43,.4)}
}
.ma-opt .t{
  display:block;
  font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-muted);
}
/* The label stays muted, because these two are subordinate to the four phases.
   The body copy does not: it reads at the same weight as the phase descriptions
   above it, so it takes the same --text-secondary. Muted body here was a step
   too far and made the two retainers look like a disclaimer. */
.ma-opt p{margin:var(--space-3) 0 0;color:var(--text-secondary);
          font-size:.9375rem;line-height:1.65;max-width:60ch}

/* --- the copy column ------------------------------------------------- */
/* The copy column is short and the track is long, so left alone it leaves
   half a screen of dead space beside the later phases. Sticking it keeps the
   headline and the picture with the phases they belong to. Position only, no
   motion, which is why it is not in motion.css.

   align-self has to beat Elementor: .e-con declares --align-self and consumes
   it at one class in a file that loads after this one, so [class] is here to
   take the specificity to 0,2,0 rather than to shout with !important. */
.ma-engage-copy[class]{align-self:flex-start}
@media(min-width:1001px){
  .ma-engage-copy[class]{position:sticky;top:calc(77px + var(--space-7))}
}
.ma-engage-art{max-width:420px}
.ma-engage-art img{width:100%;height:auto;display:block;
                   aspect-ratio:1/1;object-fit:cover}

/* --- scroll draw ------------------------------------------------------
   motion.js sets --p on every .ma-scrub, 0 to 1 across that element's pass
   through the viewport. Remapped here into two later, shorter windows, so the
   vertical finishes about when the item reaches reading position and the
   crossing draws just after it, handing off to the next item.

   The fallback in var(--p,1) is doing real work. With no JavaScript, or under
   prefers-reduced-motion where motion.js returns before it sets anything, both
   progresses resolve to 1 and the whole path is simply drawn. Nothing is ever
   hidden waiting on a script, which is the same rule the reveals follow. */
.ma-tl-item{
  --q:clamp(0, calc((var(--p,1) - .10) / .34), 1);
  --qx:clamp(0, calc((var(--p,1) - .44) / .10), 1);
}
.ma-tl-item::before{clip-path:inset(0 0 calc((1 - var(--q)) * 100%) 0)}
/* the crossing draws in the direction it travels, so odd items wipe left to
   right and even items right to left */
.ma-tl-item:nth-child(odd)::after{clip-path:inset(0 calc((1 - var(--qx)) * 100%) 0 0)}
.ma-tl-item:nth-child(even)::after{clip-path:inset(0 0 0 calc((1 - var(--qx)) * 100%))}
/* the terminal crossbar is 1px tall, so a vertical wipe has nothing to reveal.
   It opens from its centre on the vertical's own progress instead, so it lands
   as the rail arrives rather than after it. */
.ma-tl-item:last-child::after{clip-path:none;transform:scaleX(var(--q))}

@media(prefers-reduced-motion:reduce){
  .ma-tl-item::before,
  .ma-tl-item::after{clip-path:none!important;transform:none!important}
}

/* --- stacked --------------------------------------------------------- */
/* Below 861 the zigzag has nowhere to zig. Everything moves onto a single left
   rail, which is the same design at a different width rather than a fallback. */
@media(max-width:860px){
  .ma-tl{--tl-gap:2.25rem}
  .ma-tl-item{grid-template-columns:var(--mark) minmax(0,1fr);
              column-gap:var(--space-4)}
  .ma-tl-item:nth-child(even) > .ma-tl-mark{grid-column:1}
  .ma-tl-item:nth-child(even) > .ma-tl-body{text-align:left}
  .ma-tl-item:nth-child(even) .ma-tl-body p{margin-inline-start:0}
  .ma-tl-item:nth-child(even)::before{
    right:auto;left:calc((var(--mark) - var(--rail-w)) / 2)}
  .ma-tl-item::after{display:none}
  .ma-tl-item:last-child::after{
    display:block;left:calc((var(--mark) - 2rem) / 2);right:auto}
  .ma-opt{column-gap:var(--space-4)}
}
@media(max-width:420px){
  .ma-tl{--mark:2.25rem}
  .ma-tl-body .t{font-size:var(--text-xs)}
}

/* ----------------------------------------------------- 07 statement */
.ma-statement{background:var(--surface-ink)}
.ma-statement h2,.ma-statement .elementor-heading-title{
  color:var(--text-on-ink);max-width:20ch;
}
.ma-statement p{color:rgba(247,243,236,.72);max-width:56ch}
.ma-statement .ma-cut{
  border-top:var(--border-w) solid var(--border-on-ink);
  padding-top:var(--space-5);margin-top:var(--space-6);
}
.ma-statement .ma-cut p:last-child{color:var(--text-on-ink)}
.ma-statement strong{color: var(--brand-200);}

/* ---------------------------------------------------- 07b statement FAQ
   The statement section is two columns: the manifesto cut on the left, the
   questions on the right. Native <details>/<summary>, no JavaScript, so the
   answers are readable and openable even when nothing loads. The exclusive
   `name` attribute on the details elements is what makes it an accordion
   rather than five independent toggles; an engine without it degrades to
   independent toggles, which nobody notices.

   Left column keeps the 20ch headline and the 56ch measure it already had.
   The FAQ measure is its own, set on .ma-faq-a, so widening one never
   silently rewraps the other. */
.ma-faq{--faq-indent:calc(1.75rem + var(--space-4))}
.ma-faq-eyebrow{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--brand-200);
  margin:0 0 var(--space-5);
}
.ma-faq-item{border-top:var(--border-w) solid var(--border-on-ink)}
.ma-faq-item:last-of-type{border-bottom:var(--border-w) solid var(--border-on-ink)}

/* summary is display:list-item and paints a disclosure triangle. Both resets
   are needed: ::-webkit-details-marker for older Safari, list-style:none for
   everything current. */
.ma-faq-q{
  display:flex;align-items:baseline;gap:var(--space-4);
  padding:var(--space-5) 0;cursor:pointer;list-style:none;
  color:var(--text-on-ink);
}
.ma-faq-q::-webkit-details-marker{display:none}
.ma-faq-q:focus-visible{outline:2px solid var(--brand-200);outline-offset:4px}
/* --brand-200 is the only accent that clears AA on Ink at this size. See the
   accent-on-dark note in the Design System; --brand-300 measures 3.6:1. */
.ma-faq-n{
  flex:0 0 1.75rem;
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-wide);color:var(--brand-200);
}
.ma-faq-t{
  flex:1 1 auto;margin:0;
  font-family:var(--font-sans);font-size:var(--text-md);
  font-weight:var(--weight-medium);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-normal);color:inherit;
  transition:color var(--duration-fast) var(--ease-standard);
}
.ma-faq-q:hover .ma-faq-t{color:var(--brand-200)}
/* chevron drawn from two borders, so the accordion needs no asset and no icon
   font. Rotating a square is also why it stays crisp at any zoom. */
.ma-faq-i{
  flex:0 0 auto;align-self:center;width:8px;height:8px;
  border-right:var(--border-w) solid rgba(247,243,236,.72);
  border-bottom:var(--border-w) solid rgba(247,243,236,.72);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--duration-base) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard);
}
.ma-faq-item[open] .ma-faq-i{transform:rotate(-135deg) translateY(-2px)}
.ma-faq-q:hover .ma-faq-i{border-color:var(--brand-200)}
.ma-faq-a{padding:0 0 var(--space-5) var(--faq-indent)}
.ma-faq-a p{
  margin:0 0 var(--space-4);
  color:rgba(247,243,236,.72);font-size:.9375rem;
  line-height:var(--leading-relaxed);max-width:46ch;
}
.ma-faq-a p:last-child{margin-bottom:0}

/* Height animation is progressive: without ::details-content support the panel
   simply appears, which is the pre-2024 behaviour and perfectly usable. */
@supports (interpolate-size:allow-keywords){
  .ma-faq{interpolate-size:allow-keywords}
  .ma-faq-item::details-content{
    block-size:0;overflow:hidden;
    transition:block-size var(--duration-base) var(--ease-standard),
               content-visibility var(--duration-base) var(--ease-standard) allow-discrete;
  }
  .ma-faq-item[open]::details-content{block-size:auto}
}
@media(prefers-reduced-motion:reduce){
  .ma-faq-i,.ma-faq-t{transition:none}
  .ma-faq-item::details-content{transition:none}
}
@media(max-width:600px){
  /* The answer loses its hanging indent and the question drops a step. At 274px
     of measure an 18px question ran to two lines on every one of the five. */
  .ma-faq{--faq-indent:0px}
  .ma-faq-t{font-size:var(--text-base)}
  .ma-faq-q{gap:var(--space-3)}
}

/* ------------------------------------------------------- 08 closing */
.ma-closing{text-align:center}
.ma-closing .ma-lede{margin-inline:auto}
.ma-closing .elementor-widget-button{text-align:center}

/* ------------------------------------------------------------ blog */
/* The article styles live in the ARTICLE block at the end of this file,
   next to the grid that positions them. This stub used to hold a partial
   copy of them and is deliberately empty now. */

/* ------------------------------------------------- Blocksy corrections */
/* Blocksy ships rounded cards and resting shadows; the Design System calls for
   sharp corners, hairline borders and no shadow until something truly floats. */
/* Blocksy's boxed card. This block used to be written as .entries .entry-card,
   which is the same 0,2,0 specificity as entries.min.css's
   [data-cards="boxed"] .entry-card and loses the tie because that file loads
   after the child theme. Measured on the live archive: the hairline never
   appeared and the resting shadow the Design System forbids was still there,
   0px 12px 18px -6px rgba(34,56,101,.04). [class] on the second selector breaks
   the tie without reaching for !important.

   The card inset is a variable, not a padding, and it is the same lesson as
   every other framework fight in this file. Blocksy computes BOTH the card
   padding and the boundless image's negative inline margins from
   --card-inner-spacing:

     .entry-card              padding:var(--card-inner-spacing,30px)
     .boundless-image         width:calc(100% + var(--card-inner-spacing,30px)*2)
                              margin-inline:calc(var(--card-inner-spacing,30px)*-1)

   Zeroing the padding with a plain rule moved the text onto the container edge
   and left the image bleeding 30px past it, because the margin still read 30
   from the variable. Set the variable and the two agree: every card element,
   image included, sits on the same left edge, which is what puts the first card
   on the logo and the last one on the header CTA.

   Row gap replaces the vertical padding that went with it. 30px of grid gap
   alone is too tight between cards this tall. */
.entries{--card-inner-spacing:0px}
/* The gap needs the attribute on the selector for the same reason. Blocksy sets
   both gaps from [data-layout*="grid"], which is also 0,1,0 and also later, so a
   plain .entries{row-gap} computed straight back to its 30px. Its own variable
   is no use here because one value drives both axes and the rows need three
   times what the columns do. */
.entries[data-layout]{
  column-gap:var(--space-6);
  row-gap:var(--space-9);
}
.entries .entry-card[class]{
  border-radius:var(--radius-none);
  box-shadow:none;
  border:0;
}

/* Pagination. Blocksy renders it already, and correctly: it is inside the same
   <section> as the cards, so the container rule above already lines it up with
   the logo and the header CTA. This only brings it onto the Design System.
   Blocksy ships 2px borders, a 4px radius and the body face; the system calls
   for hairlines, radius-sm on controls and the mono face for UI labels.

   The attribute is on the selector for the usual reason: pagination.min.css
   sets all of this at [data-pagination="simple"] .page-numbers, which is 0,2,0
   and loads after the child theme, so a two-class rule computes straight back
   to Blocksy's values.

   The numbers are spaced with margins rather than a gap, and their wrapper is
   left alone: it carries .ct-hidden-sm, which is how Blocksy drops the numbers
   on a phone and leaves Prev and Next. Setting display on it would undo that. */
/* margin-top needs the attribute too. pagination.min.css sets it as
   .ct-pagination{margin-top:var(--spacing,60px)}, same 0,1,0, later file, so a
   plain rule here computed back to its 60px and sat in the file doing nothing.
   padding-top and the rule land on a plain selector because Blocksy only sets
   those under [data-divider], which this markup does not carry. */
.ct-pagination[data-pagination]{
  align-items:center;
  margin-top:var(--space-9);
}
.ct-pagination{
  padding-top:var(--space-6);
  border-top:var(--border-w) solid var(--border-default);
}
/* Auto margins keep the numbers centred on page 1 too, where Blocksy renders no
   Prev link and space-between would otherwise pull them flush left. */
.ct-pagination[data-pagination] > div{margin-inline:auto}

.ct-pagination[data-pagination] .page-numbers{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--text-secondary);
  height:40px;
  border:var(--border-w) solid transparent;
  border-radius:var(--radius-sm);
  text-decoration:none;
  transition:color var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             background-color var(--duration-fast) var(--ease-standard);
}
.ct-pagination[data-pagination] > div .page-numbers{
  flex:0 0 40px;width:40px;margin:var(--space-1);
  border-color:var(--border-default);
}
.ct-pagination[data-pagination] .page-numbers:not(.dots):not(.current):hover{
  border-color:var(--border-strong);
  color:var(--text-primary);
}
.ct-pagination[data-pagination] .page-numbers.current{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--text-on-brand);
}
.ct-pagination[data-pagination] :is(.prev,.next){border-color:transparent}
.ct-pagination[data-pagination] :is(.prev,.next):hover{
  color:var(--accent);
  border-color:transparent;
}

/* Card headline. The base h2 caps at --text-3xl, which is a page-headline size
   and far too loud inside a 342px card. Scoped to h2.entry-title inside a card,
   which only ever renders on a listing page, so it cannot reach a section
   heading on Home or About or the article title, which is .ma-article-title.
   The curve below the cap is left alone, so phones are unchanged at 1.75rem. */
.entries .entry-card h2.entry-title{
  font-size:clamp(1.75rem,3.6vw,2rem);
}

/* Listing pages: line the container up with the header.
   Blocksy sizes .ct-container from --theme-container-width, which is 90vw, so
   the archive measured 1290px starting at x=67 while the header container is
   1200px with the logo at x=170 and the CTA ending at 1255. The first card sat
   103px outside the logo and the last one 102px outside the button.
   This is the same rule #header .ct-container already carries, and it has to be
   scoped by body class rather than applied to main .ct-container: the Elementor
   pages use that same wrapper, and there .ma-section > .e-con-inner already owns
   the 1200px cap and the inset, so a second one would double the gutter. */
body.blog main .ct-container,
body.archive main .ct-container,
body.search main .ct-container{
  width:100%;
  max-width:1200px;
  padding-inline:clamp(1.5rem,4vw,4rem);
}

/* =====================================================================
   ELEMENTOR RECONCILIATION
   Corrections found by measuring the rendered page rather than assuming.
   ===================================================================== */

/* vertical rhythm: container flex gaps are 0 in the builder so spacing is
   decided here, not by whoever last touched a container in Elementor. */
.ma-section .elementor-widget:not(:last-child){margin-bottom:var(--space-5)}
.ma-section .ma-eyebrow{margin-bottom:var(--space-4)}
.ma-section .ma-lede:not(:last-child){margin-bottom:var(--space-6)}
.ma-kicker{margin-top:var(--space-6)}
.ma-beat .elementor-widget{margin-bottom:0}
.ma-beats{margin-top:var(--space-7)}

/* 05 talent carousel. Three measured faults, all Elementor-specific:
   1. Elementor forces overflow:visible on containers, so the columns escaped
      downward into section 06.
   2. Elementor sets position:relative on .e-con-inner, so it became the
      containing block and left/right measured from the 1200px wrapper.
   3. height:136% cannot resolve against an auto-height parent, collapsed to 0,
      and let the placeholders spill out unclipped. */
.ma-talent{position:relative;overflow:hidden!important}
.ma-talent > .e-con-inner{position:static}
/* The rails are Elementor containers now, not plain divs, so every layout
   property here is contested. frontend.min.css loads after this file and sets
   position, width, padding, gap and display on .e-con, some plainly and some
   through variables it outranks us on (.e-con.e-flex is two classes, .ma-talent-col
   is one). Measured unforced: 1085px wide, position:relative, 20px gap, 10px
   padding. Forced here rather than left to a specificity race we lose. */
.ma-talent-col{
  position:absolute!important;
  /* Anchored to the section's content top, not bled past it. As plain divs the
     rails hung off a zero-height HTML widget, so top:-8% resolved to 0px and the
     first tile sat fully visible below the section padding. As real containers
     the percentage resolves against a real height and pulled the rail 84px above
     the top edge, clipping the first face at every scroll position, which also
     killed the reference edge that made the drift readable. --space-9 is 96px,
     exactly the section's padding-block: its clamp(3.5rem,8vw,6rem) is pinned to
     the 6rem maximum at every width these rails are visible at (1241px and up),
     and it clears the +/-40px drift so the first tile never clips.
     bottom:auto lets the stack overflow downward only, as it did before. */
  top:var(--rail-anchor);bottom:auto;height:auto!important;
  width:200px!important;
  display:flex!important;flex-direction:column!important;
  flex-wrap:nowrap!important;
  gap:var(--space-4)!important;
  padding:0!important;
  pointer-events:none;z-index:0;
}
.ma-talent-col > .ma-ph{flex:0 0 auto!important}
/* The flanking columns are anchored to the copy column, not to the container
   edge, so the gutter is a decision rather than a leftover. Anchored to the
   edge, a 200px column at -40px kept 160px inside the container while the
   760px centred copy needed 156px of clearance, and the two overlapped by 4px
   at every width. Both now derive from the same two variables. The 50%
   resolves against the HTML widget wrapping the columns, which is the same box
   the copy is centred in, so they share one centre line. */
/* All talent-section dials in one place.
   --rail-drift is derived from the anchor rather than set free-hand. The first
   tile rests --rail-anchor below the section top and the scrub moves it by HALF
   the drift, so anything above 2x the anchor clips the first face again, which is
   exactly the bug this section already had once. 1.5 keeps a quarter of the
   anchor as margin: 96px anchor, 144px drift, +/-72px travel, 24px clearance at
   the extreme. Raise the multiplier for more movement, never past 2. */
.ma-talent{--talent-copy:760px;--talent-gutter:clamp(1.5rem,3vw,3rem);
           --rail-anchor:var(--space-9);--rail-drift:calc(var(--rail-anchor) * 1.5)}
.ma-talent .ma-aud{max-width:var(--talent-copy)}
.ma-talent-left{right:calc(50% + var(--talent-copy) / 2 + var(--talent-gutter));left:auto}
.ma-talent-right{left:calc(50% + var(--talent-copy) / 2 + var(--talent-gutter));right:auto}
/* The inset second column could not clear the 760px copy column at any width
   this layout is actually used at. Removed rather than kept on a breakpoint
   that only held on very wide monitors. */
.ma-talent-col.is-inset{display:none!important}
@media(max-width:1240px){
  .ma-talent-col{display:none!important}
  .ma-talent-strip{display:block!important}
  /* Saving from an Elementor tab that was opened before an external edit writes
     the tab's stale copy back over the page, which has already dropped the track
     wrapper once. Without the track the tiles are direct children of a block
     element and stack vertically, which is far uglier than simply losing the pan.
     Lay them out on the strip itself when the track is absent. */
  .ma-talent-strip:not(:has(.ma-talent-track)){display:flex!important;
    flex-direction:row!important;gap:var(--space-4)!important}
}
@media(min-width:1241px){
  .ma-talent-strip{display:none!important}
}

/* header: the logo SVG already contains the wordmark, so Blocksy's separate
   site title rendered it a second time. */
.site-title-container{display:none}
/* Menu link typography, colour and hover live in the HEADER block near the
   end of this file. Blocksy writes them into per-element --theme-* variables
   from its generated global.css, so a plain .ct-menu-link rule never lands. */

.menu-item.ma-nav-cta > .ct-menu-link{
  background:var(--accent);
  color:var(--text-on-brand);
  border:var(--border-w) solid var(--accent);
  border-radius:var(--radius-sm);
  padding:0 var(--space-5);
  height:40px;
  display:inline-flex;align-items:center;
  text-transform:uppercase;
  letter-spacing:var(--tracking-wide);
  font-size:12px;
  font-weight:var(--weight-medium);
}
.menu-item.ma-nav-cta > .ct-menu-link:hover{
  background:var(--accent-hover);border-color:var(--accent-hover);color:var(--text-on-brand);
}

/* --- footer -----------------------------------------------------------
   Ported from the mockup's footer: hairline top rule, Paper ground, 2rem
   padding-block, logo left at 22px/.8 opacity, mono tagline right.
   Every mockup value maps to an existing token: --border-default IS --stone
   and --text-muted IS --neutral-500, so nothing new is invented here.

   Blocksy renders #footer.ct-footer, never .site-footer, so the rules that
   used to sit here matched nothing at all. Scoped to #footer rather than
   .ct-footer for the same reason the header rules are scoped to #header:
   .ct-footer is reused on other Blocksy surfaces. */
#footer.ct-footer{background:var(--surface-page)}
#footer [data-row="bottom"]{
  border-top:var(--border-w) solid var(--border-default);
  padding-block:var(--space-6);
}
/* .ct-container is sized from --theme-container-edge-spacing and centred, so it
   does not line up with the Elementor sections. Match their measure instead. */
#footer .ct-container{
  width:100%;max-width:1200px;margin-inline:auto;
  padding-inline:clamp(1.5rem,4vw,4rem);
}
/* The bottom row is two Blocksy columns now: social icons left, copyright
   right. Horizontal placement therefore comes from the items' own Alignment
   controls in the Customizer and NOT from CSS, so the controls keep working.

   The mockup's mono tagline treatment moved onto .ct-footer-copyright itself
   rather than a span inside the text. The text is a Customizer field, so any
   styling that depends on markup the user types is one edit away from being
   lost. --leading-relaxed (1.65) matches the mockup's paragraph box exactly.
   margin:0 is load-bearing: Blocksy puts margin-top:6px on this element. */
#footer .ct-footer-copyright{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.02em;
  color:var(--text-muted);
  line-height:var(--leading-relaxed);
  margin:0;
}
/* Icon size, spacing and colour are Blocksy options on the socials item, so
   they are deliberately not set here. Only the hover transition is ours; the
   colours themselves come from the item's Icons Color control, set to the
   --text-muted / --accent pair the rest of the footer uses. */
#footer .ct-footer-socials .ct-social-box a{
  transition:color var(--duration-fast) var(--ease-standard);
}
/* On mobile the bottom row's two columns (socials, copyright) stack, but each
   keeps its desktop --horizontal-alignment (flex-start / flex-end from the
   Customizer), so the copyright paragraph stays right-aligned once it wraps
   to 2-3 lines — the ragged look in the bug report. Recenter both columns
   at Blocksy's own mobile breakpoint rather than hardcoding text-align,
   since --horizontal-alignment also drives the social icons' justify-content. */
@media(max-width:689.98px){
  #footer [data-row="bottom"] [data-column]{
    --horizontal-alignment:center;
  }
  #footer .ct-footer-copyright{
    text-align:center;
  }
}
/* --- Blocksy theme variables -----------------------------------------
   Blocksy colours everything through its own custom properties, e.g.
     nav[class*=menu] .ct-menu-link{color:var(--theme-link-initial-color)}
   which outranks a plain .ct-menu-link override. Setting the variables is
   the theme-native fix and corrects links, borders and text site-wide in
   one place instead of chasing selectors. */
:root{
  --theme-palette-color-1:#2B2622!important;
  --theme-palette-color-2:#A8382B!important;
  --theme-palette-color-3:#6A655F!important;
  --theme-palette-color-4:#2B2622!important;
  --theme-palette-color-5:#D4CFC4!important;
  --theme-palette-color-6:#EEEAE3!important;
  --theme-palette-color-7:#F7F3EC!important;
  --theme-palette-color-8:#F7F3EC!important;

  --theme-link-initial-color:#2B2622!important;
  --theme-link-hover-color:#A8382B!important;
  --theme-link-active-color:#A8382B!important;
  --theme-text-color:#6A655F!important;
  --theme-headings-color:#2B2622!important;
  --theme-border-color:#D4CFC4!important;
  --theme-content-background-color:#F7F3EC!important;
  --theme-font-family:var(--font-sans)!important;
}

/* --- hero rhythm ------------------------------------------------------
   The display headline needs more air beneath it than the default step. */
.ma-hero h1,
.ma-hero .elementor-widget-heading:has(h1){margin-bottom:var(--space-6)}
.ma-hero .ma-lede{max-width:54ch}
/* --- responsive containers -------------------------------------------
   Elementor stores flex-direction per breakpoint in the builder. Rather than
   depend on those settings being right in three places, the stacking rules
   live here with the rest of the layout. */
@media(max-width:900px){
  .ma-hero > .e-con-inner{flex-direction:column;align-items:stretch}
  .ma-hero > .e-con-inner > .e-con{width:100%!important;max-width:100%}
  .ma-hero-art{max-width:440px}
}
@media(max-width:860px){
  .ma-aud{grid-template-columns:1fr;gap:var(--space-6)}
  .ma-aud > .e-con{width:100%!important;max-width:100%}
}
@media(max-width:760px){
  .ma-beats > .e-con{width:100%!important}
}
/* Elementor drives container layout through custom properties, not plain
   declarations, so setting flex-direction on .e-con-inner is ignored. Set the
   variable the builder itself reads. Same lesson as the Blocksy palette. */
@media(max-width:900px){
  .ma-hero{--flex-direction:column;--align-items:stretch}
  .ma-hero > .e-con-inner{flex-direction:column!important;align-items:stretch!important}
  .ma-hero > .e-con-inner > .e-con{--width:100%;width:100%!important;max-width:100%!important}
}
@media(max-width:860px){
  .ma-aud > .e-con{--width:100%;width:100%!important;max-width:100%!important}
}
/* The statement stacks a step earlier than the hero. Its right column is a
   list of questions rather than an image, so it turns into a cramped rag long
   before the two columns actually collide. */
@media(max-width:1000px){
  .ma-statement{--flex-direction:column;--align-items:stretch}
  .ma-statement > .e-con-inner{flex-direction:column!important;align-items:stretch!important}
  .ma-statement > .e-con-inner > .e-con{--width:100%;width:100%!important;max-width:100%!important}
  .ma-statement-copy{max-width:64ch}
  /* SPACING AUTHORITY sets a plain row-gap:!important on every .e-con-inner, so
     the --row-gap variable above is inert here and this has to be said the same
     way. Stacked, the two blocks are separate thoughts rather than one column of
     widgets, so they take the 48px step, not the 24px widget rhythm.
     Two classes, because the SPACING AUTHORITY rule is also !important, also
     0,2,0, and sits later in the file. A media query adds no specificity. */
  .ma-statement.ma-section > .e-con-inner{row-gap:var(--space-7)!important}
}
/* The engagement stacks at the same width as the statement, and for the same
   reason: its right column is a timeline that needs room to zigzag, and it
   turns into a cramped rag well before the two columns actually collide.
   Stacked, the copy column and the track are separate thoughts, so they take
   the 48px step. Two classes, because the SPACING AUTHORITY row-gap is also
   !important and also 0,2,0, and a media query adds no specificity. */
@media(max-width:1000px){
  .ma-engage{--flex-direction:column;--align-items:stretch}
  .ma-engage > .e-con-inner{flex-direction:column!important;align-items:stretch!important}
  .ma-engage > .e-con-inner > .e-con{--width:100%;width:100%!important;max-width:100%!important}
  .ma-engage.ma-section > .e-con-inner{row-gap:var(--space-7)!important}
  .ma-engage-art{max-width:360px}
}
/* =====================================================================
   MOCKUP RECONCILIATION - measured against the approved mockup
   ===================================================================== */

html,body{overflow-x:clip}

/* Section rules. Elementor uses ::before on containers for its background
   overlay and frontend.min.css loads AFTER the child theme, so at equal
   specificity it won content and height and the hairline disappeared.
   Two classes beat it. left/width make it span the viewport, as in the
   mockup where the rule sat on a full-width section. */
.ma-section.ma-ruled::before{
  content:""!important;
  position:absolute;
  top:0;bottom:auto;
  left:calc(50% - 50vw);right:auto;
  width:100vw;height:1px!important;
  background:var(--border-default);
  transform:scaleX(1);
  transform-origin:left center;
  transition:transform var(--rule-dur) var(--ease-out);
  z-index:1;pointer-events:none;
}
html.ma-js .ma-section.ma-ruled::before{transform:scaleX(0)}
html.ma-js .ma-section.ma-ruled.is-in::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .ma-section.ma-ruled::before{transform:scaleX(1)!important;transition:none!important}
}

/* Content measure. The mockup wrap is max-width:1200px INCLUDING its inline
   padding, so the text column is narrower than Elementor's bare 1200px inner.
   Padding goes through the variables Elementor actually reads. */
.ma-section > .e-con-inner{
  max-width:1200px;
  padding-inline:clamp(1.5rem,4vw,4rem);
}
.ma-section{
  --padding-block-start:clamp(3.5rem,8vw,6rem);
  --padding-block-end:clamp(3.5rem,8vw,6rem);
  --padding-inline-start:0px;
  --padding-inline-end:0px;
  padding-block:clamp(3.5rem,8vw,6rem);
  padding-inline:0;
}
/* first section on any page: 30% less top padding on mobile, so the header
   doesn't leave as much dead air above the eyebrow. Bottom padding and every
   other section's rhythm are untouched. */
@media(max-width:760px){
  #main > .elementor > .ma-section:first-of-type{
    --padding-block-start:clamp(2.45rem,5.6vw,4.2rem)!important;
    padding-block-start:clamp(2.45rem,5.6vw,4.2rem)!important;
  }
  /* Elementor's own frontend.min.css also reads --padding-block-start on the
     section's auto-generated .e-con-inner wrapper (.e-con>.e-con-inner{padding-
     block-start:var(--padding-block-start)}), and that variable inherits, so
     the section's top padding was silently doubled: the wrapper reapplied the
     exact same value on top of the section's own padding-block. Zeroed here so
     the section's own padding is the only source, which is what makes the 30%
     cut above actually land as a single clean reduction instead of a diluted
     one. Scoped to the first section's own wrapper only; every other section
     on the site keeps its existing (already measured/approved) rhythm. */
  #main > .elementor > .ma-section:first-of-type > .e-con-inner{
    padding-block-start:0!important;
  }
}

/* Header: Paper background, hairline bottom rule, 28px logo, centred menu. */
.ct-header,
.ct-header [data-row],
.ct-header [data-row="middle"]{background:var(--surface-page)}
/* The container is sized like a section wrapper rather than by Blocksy's
   --theme-container-edge-spacing, which is 88vw on phones and centred it,
   insetting the logo 22.5px further than the copy below. */
#header .ct-container{width:100%;max-width:1200px;padding-inline:clamp(1.5rem,4vw,4rem)}
/* Logo size, bar height and the logo/menu/CTA layout all live in the HEADER
   block near the end of this file. */
/* Header background comes from Blocksy's palette slot 8, not a plain rule, so
   the override has to happen there. Belt and braces on the row itself. */
.ct-header [data-row],
.ct-header [data-row="middle"],
.ct-header [data-row="middle"] > .ct-container{
  background-color:var(--surface-page)!important;
}

/* --- widget rhythm ---------------------------------------------------
   Elementor spaces widgets with --widgets-spacing and container gaps with
   --row-gap / --column-gap. Plain margin rules lose to those, which is why
   the hero lede sat flush against the buttons. Set the variables, then pin
   the three points the mockup is explicit about. */
.ma-section{--widgets-spacing:var(--space-5);--widgets-spacing-row:var(--space-5)}
.ma-section > .e-con-inner{--row-gap:var(--space-5);--column-gap:0px}
.ma-hero > .e-con-inner{--column-gap:clamp(2rem,5vw,5rem);--row-gap:var(--space-6)}
.ma-hero > .e-con-inner > .e-con{--row-gap:var(--space-5);--column-gap:0px}
.ma-aud{--column-gap:clamp(2rem,5vw,5rem);--row-gap:var(--space-6)}
/* The engagement is two columns, so it has to put --column-gap back by name
   for exactly the reason .ma-hero and .ma-aud do: the rule above zeroes it on
   .e-con-inner, where the builder's own gap setting does not reach.

   Nothing here touches align-items. A rule for it was written and then removed
   after being measured as inert: Elementor's own selector is .e-con.e-flex >
   .e-con-inner, which ties on specificity and loads later, so .ma-engage.ma-
   section > .e-con-inner lost. It was not needed either way. The row is left
   stretching and only the copy column opts out, with align-self further up in
   the 06 block, which is what gives the sticky column room to move. */
.ma-engage > .e-con-inner{--column-gap:clamp(2rem,5vw,5rem);--row-gap:var(--space-6)}
.ma-engage > .e-con-inner > .e-con{--row-gap:var(--space-5);--column-gap:0px}
/* The statement became a two-column section when the FAQ was added, so it has
   to restore the column gap by name like every other one. Set on .e-con-inner,
   the element that consumes the variable, not on the section: the zero above
   is declared directly there and a declaration beats an inherited value. */
.ma-statement > .e-con-inner{--column-gap:clamp(2rem,5vw,5rem);--row-gap:var(--space-6)}
.ma-statement > .e-con-inner > .e-con{--row-gap:var(--space-5);--column-gap:0px}
.ma-beats{--row-gap:0px;--column-gap:0px}

/* mockup: eyebrow 24, headline 24, lede 32 */
.ma-section .elementor-widget.ma-eyebrow{margin-bottom:var(--space-5)!important}
.ma-hero .elementor-widget-heading:has(h1){margin-bottom:var(--space-5)!important}
.ma-section .elementor-widget.ma-lede:not(:last-child){margin-bottom:var(--space-6)!important}
.ma-section .elementor-widget.ma-body:not(:last-child){margin-bottom:var(--space-6)!important}
/* --- final alignment to mockup measurements --------------------------
   Measured targets at a common viewport:
     logo height 26, eyebrow->h1 24, h1->lede 24, lede->buttons 32,
     section padding-block 56, content inset clamp(1.5rem,4vw,4rem).
   The h1 element carried its own bottom margin ON TOP of Elementor's widget
   spacing, which doubled the gap to 56. Spacing belongs to the widget
   wrapper only. */
.ma-hero h1,
.ma-section h1,.ma-section h2,.ma-section h3{margin-bottom:0!important}
.ma-hero .elementor-widget-heading:has(h1){margin-bottom:var(--space-5)!important}

/* Elementor's own inner padding was winning over the shorthand. */
.ma-section > .e-con-inner{
  padding-inline:clamp(1.5rem,4vw,4rem)!important;
  --padding-inline-start:clamp(1.5rem,4vw,4rem);
  --padding-inline-end:clamp(1.5rem,4vw,4rem);
}


/* Nested containers were adding their own inline padding on top of the
   section inset, pushing content 45px in against a 25px target. The inset
   belongs to the section wrapper alone. */
.ma-section > .e-con-inner > .e-con,
.ma-section .e-con-inner .e-con{
  --padding-inline-start:0px;
  --padding-inline-end:0px;
  padding-inline:0!important;
}
/* The eyebrow is a <p> inside a heading widget; zero the element margin so
   only the widget wrapper contributes the 24px step. */
.ma-eyebrow p,
.ma-eyebrow .elementor-heading-title{margin:0!important}
.ma-section .elementor-widget.ma-eyebrow{margin-bottom:var(--space-5)!important}
/* Elementor writes per-element padding into post-25.css, which loads after
   this file, so the outer container kept a 10px inline padding on top of the
   section inset. Only !important wins that ordering. */
.ma-section{padding-inline:0!important}

/* The hero column is a flex container. Spacing it with a single row-gap is
   predictable; per-widget margins landed inconsistently against Elementor's
   own widget spacing. */
.ma-hero > .e-con-inner > .e-con{row-gap:var(--space-5)!important}
.ma-hero .elementor-widget{margin-bottom:0!important}
.ma-hero .elementor-widget.ma-lede{margin-bottom:var(--space-2)!important}

/* =====================================================================
   HEADER - measured against the approved mockup.
   Every header decision lives here and nowhere else.

   Blocksy drives the bar through generated CSS variables in
   wp-content/uploads/blocksy/css/global.css, which loads BEFORE this file.
   The overrides below therefore repeat its selectors and reset the
   variables rather than the plain properties, which never win.
   ===================================================================== */

/* Sticky. Blocksy free has no sticky-header option and the mockup pins the
   bar. #main-container uses overflow:clip rather than hidden, so sticky
   still resolves against the viewport. */
#header.ct-header{position:sticky;top:0;z-index:100}

/* Bar height: 76 plus the 1px rule, as in the mockup. --height is what
   Blocksy computes the row from; min-height pins the box the items centre
   in, so the two are set together. */
[data-header*="type-1"] .ct-header [data-row*="middle"]{--height:76px}
[data-header*="type-1"]{--header-height:77px}
#header [data-row="middle"]{min-height:77px}

/* The hairline under the bar - the same Stone rule the sections draw.
   Blocksy paints it with `#header [data-row]{border-bottom:var(--theme-border-bottom)}`
   and its generated CSS sets that variable to none. An ID selector and the
   variable are both needed; a plain .ct-header border-bottom never landed. */
#header [data-row="middle"]{--theme-border-bottom:var(--border-w) solid var(--border-default)}

/* Logo. Blocksy's anchor is a block whose line box is taller than the
   image, which floated the logo above the menu's bottom edge. Flex makes it
   hug the 26px image, so logo and menu share a bottom edge. */
.site-branding,
.site-logo-container{display:flex;align-items:center}
.site-logo-container .default-logo,
.site-logo-container img{height:26px!important;max-height:26px!important;width:auto!important}

/* Layout: logo | links | CTA.
   Blocksy lays the row out as a two column grid under #header, an ID, so
   the flex override carries the same ID to win. As a flex line the start
   column shrinks to the logo, which puts the list's left edge exactly at
   the logo's right edge. The two auto margins inside the list then split
   the free space in half, landing the links centred between logo and CTA -
   the same result space-between gives in the mockup, where all three are
   siblings.

   The 32px separation is a left margin rather than the list's `gap`
   because `gap` also applies in front of the CTA, which made the right
   side 32px wider than the left. */
#header [data-column-set] > .ct-container{display:flex;align-items:center}
#header [data-column-set] > .ct-container > [data-column="start"]{display:flex;align-items:center;flex:0 0 auto}
#header [data-column-set] > .ct-container > [data-column="end"]{display:flex;align-items:center;flex:1 1 auto;min-width:0}
#header [data-column="end"] > [data-items="primary"]{width:100%}
#header [data-items] > *{--margin:0}
#header nav[class*=menu]{flex:1 1 auto;min-width:0;--menu-items-spacing:0px;--menu-item-height:26px}
/* Scoped to #header, not .ct-header. The offcanvas drawer carries the
   .ct-header class too, so a .ct-header rule reaches it - which is what
   laid the mobile menu out as a horizontal row. */
#header nav[class*=menu] > ul{display:flex;align-items:center;gap:0;width:100%}
#header nav[class*=menu] > ul > li + li{margin-left:var(--space-6)}
#header nav[class*=menu] > ul > li:first-child{margin-left:auto}
#header nav[class*=menu] > ul > li.ma-nav-cta{margin-left:auto}

/* Blocksy trims the trailing padding off the last menu item so a text menu
   sits flush with the container edge. The CTA is a filled button, and it
   became the last item once the search icon was removed, so its right
   padding has to be put back. */
#header [data-column="end"] [data-items="primary"] [data-menu] > ul > li.ma-nav-cta > .ct-menu-link{
  padding-inline:var(--space-5);
}
/* Menu typography. global.css writes 12px/700/uppercase into per-element
   --theme-* variables at this exact selector, so the fix is the same
   selector in a later file with the mockup's values. */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a{
  --theme-font-weight:var(--weight-regular);
  --theme-text-transform:none;
  --theme-font-size:.875rem;
  --theme-line-height:1;
  --theme-letter-spacing:var(--tracking-normal);
  --theme-link-initial-color:var(--text-primary);
}

/* Hover and current colours. Scoped away from the CTA: a rule that reached
   it would repaint the label Ink on Oxblood, 2.3:1 and invisible on hover. */
#header nav[class*=menu] > ul > li:not(.ma-nav-cta) > .ct-menu-link:hover,
#header nav[class*=menu] > ul > li:not(.ma-nav-cta).current-menu-item > .ct-menu-link{color:var(--accent)}

/* Hover marker: an oxblood dot above the label, centred on the text width.
   Restrained register - one short fade with 3px of travel, no bounce. */
#header nav[class*=menu] > ul > li:not(.ma-nav-cta) > .ct-menu-link::after{
  content:"";
  position:absolute;
  left:50%;top:-3px;
  width:4px;height:4px;
  margin-left:-2px;
  border-radius:var(--radius-pill);
  background:var(--accent);
  opacity:0;
  transform:translateY(3px);
  transition:opacity var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard);
}
#header nav[class*=menu] > ul > li:not(.ma-nav-cta) > .ct-menu-link:hover::after,
#header nav[class*=menu] > ul > li:not(.ma-nav-cta) > .ct-menu-link:focus-visible::after{
  opacity:1;
  transform:none;
}
@media(prefers-reduced-motion:reduce){
  #header nav[class*=menu] > ul > li:not(.ma-nav-cta) > .ct-menu-link::after{
    transform:none;transition:none;
  }
}

/* --- mobile drawer ----------------------------------------------------
   Blocksy's offcanvas ships near-black with 20px bold white links, which is
   not this site. Paper ground, Ink text, and the items stacked and divided
   by the same Stone hairline the sections use. The rules run the full width
   of the drawer with the labels inset, exactly as the page rules run the
   full viewport with the copy inset. */
[data-header*="type-1"] #offcanvas .ct-panel-inner{background-color:var(--surface-page)}
#offcanvas{--panel-padding:clamp(1.5rem,4vw,4rem)}
#offcanvas .ct-panel-content-inner{padding-inline:0;width:100%}

/* The close icon fills from --theme-icon-color, which Blocksy sets to white
   for the dark panel. Plain `color` has no effect on it. */
#offcanvas .ct-toggle-close{--theme-icon-color:var(--text-primary)}

/* Off canvas logo, top left, above the menu list. Blocksy's own item, so it
   already reads the header's custom_logo attachment and its image already
   matches the header's 26px sizing via the unscoped `.site-logo-container
   img` rule above. .ct-panel-content-inner has padding-inline:0, so the
   logo needs its own inset to land on the same left edge as the menu
   labels, which get theirs from --menu-item-padding instead of the panel. */
#offcanvas a.site-logo-container[data-id="offcanvas-logo"]{
  display:flex;
  padding:var(--space-5) clamp(1.5rem,4vw,4rem) var(--space-4);
}

[data-header*="type-1"] [data-id="mobile-menu"]{
  --theme-font-weight:var(--weight-regular);
  --theme-font-size:var(--text-md);
  --theme-line-height:var(--leading-normal);
  --theme-link-initial-color:var(--text-primary);
}
#offcanvas .mobile-menu > ul{border-block-start:var(--border-w) solid var(--border-default)}
#offcanvas .mobile-menu > ul > li{border-block-end:var(--border-w) solid var(--border-default)}
#offcanvas .mobile-menu > ul > li > .ct-menu-link{
  --menu-item-padding:var(--space-4) clamp(1.5rem,4vw,4rem);
  min-height:56px;
}

/* The CTA is a button, not a row in the list. */
#offcanvas .mobile-menu > ul > li.ma-nav-cta{
  border-block-end:0;
  margin-block-start:var(--space-6);
  margin-inline:clamp(1.5rem,4vw,4rem);
}
#offcanvas .mobile-menu > ul > li.ma-nav-cta > .ct-menu-link{
  height:48px;min-height:48px;width:100%;
  justify-content:center;
  padding:0 var(--space-5);
}
/* The mockup's compact bar on small screens. */
@media(max-width:560px){
  [data-header*="type-1"] .ct-header [data-row*="middle"]{--height:64px}
  [data-header*="type-1"]{--header-height:65px}
  #header [data-row="middle"]{min-height:65px}
  /* 26px, up 30% from the 20px this bar originally used. The logo and the
     burger are centred on the same line by the row's own alignment, so the
     height is the only thing that needs saying here. Width stays auto: the
     wordmark is 578x95, so 26px tall is ~158px wide and still clears the
     trigger at 333px by a wide margin on a 375px screen. */
  .site-logo-container .default-logo,
  .site-logo-container img{height:26px!important;max-height:26px!important}
}
/* SPACING AUTHORITY - last block wins, deliberately.
   Earlier passes stacked per-widget margins AND container row-gap, so the two
   added together and every gap drifted. Vertical rhythm is decided in exactly
   one place: zero every widget margin, then space with row-gap. */
.ma-section .elementor-widget[class]{margin-block-end:0!important}
.ma-section > .e-con-inner{row-gap:var(--space-5)!important}
.ma-hero > .e-con-inner > .e-con{row-gap:var(--space-5)!important}
.ma-hero > .e-con-inner > .e-con > .elementor-widget.ma-lede[class]{margin-block-end:var(--space-2)!important}

/* The engagement's copy column, same treatment and for the same reason as the
   hero column directly above. Setting --row-gap on it looked correct and
   measured back to 0: Elementor consumes that variable on .e-con-inner, and a
   column with content_width:full has no .e-con-inner, so the widgets sat flush
   against each other. The plain property is what lands.

   24px between the eyebrow and the headline is the site rhythm every other
   section uses. The picture then takes the 48px step instead, because it is a
   separate object rather than the next line of copy, which is the same
   distinction .ma-statement makes when it stacks. :has(h2) is needed because
   the eyebrow is also a heading widget and would otherwise take the extra. */
.ma-engage > .e-con-inner > .e-con{row-gap:var(--space-5)!important}
.ma-engage-copy > .elementor-widget-heading[class]:has(h2){margin-block-end:var(--space-5)!important}

/* The display headline sets line-height 1.05, so the rendered text sits ~14px
   proud of its widget box. Row-gap measures the boxes, which left the optical
   gap under the h1 at 10px against a 24px target. Compensate on that widget
   only, so the SEEN spacing matches the mockup rather than the computed box. */
.ma-hero .elementor-widget-heading[class]:has(h1){margin-block-end:14px!important}

/* =====================================================================
   ABOUT PAGE
   Section order mirrors the reference layout: intro, beliefs, founder,
   team, what you keep, closing. Elementor supplies the containers and the
   copy; every visual decision is a token, as everywhere else.
   ===================================================================== */

/* --- intro: statement left, standfirst right ------------------------- */
/* .ma-section > .e-con-inner zeroes --column-gap for the single-column
   sections, and it sits on .e-con-inner where Elementor's own per-element gap
   does not reach, so the two-column sections have to put it back by name.
   Same restoration .ma-hero and .ma-aud already make above. */
.ma-about-hero > .e-con-inner,
.ma-founder > .e-con-inner{--column-gap:clamp(2rem,5vw,5rem)}
.ma-about-hero > .e-con-inner{align-items:start}
.ma-about-hero h1{max-width:14ch}
.ma-about-hero .ma-lede{max-width:50ch}
/* Elementor drives container layout through custom properties, so the stack
   is set the same way the home hero sets it: the variable, then the property. */
@media(max-width:900px){
  .ma-about-hero{--flex-direction:column;--align-items:stretch}
  .ma-about-hero > .e-con-inner{flex-direction:column!important;align-items:stretch!important}
  .ma-about-hero > .e-con-inner > .e-con{--width:100%;width:100%!important;max-width:100%!important}
  .ma-about-hero h1{max-width:none}
}

/* --- the five beliefs -------------------------------------------------
   Same numbered-row grammar as the home page's four phases, with a wider
   title column: phase titles are two words, belief titles are clauses.
   Plain divs inside an HTML widget rather than containers, because Elementor
   sets display:var(--display) on every .e-con from a file that loads after
   this one, so a display:grid rule on a container silently loses to it. */
.ma-beliefs{margin-top:var(--space-7);
            border-top:var(--border-w) solid var(--border-default)}
.ma-belief{
  display:grid;grid-template-columns:5.5rem minmax(0,17rem) minmax(0,1fr);
  gap:var(--space-5);padding:var(--space-6) 0;align-items:start;
  border-bottom:var(--border-w) solid var(--border-default);
}
.ma-belief .n{font-family:var(--font-mono);font-size:var(--text-sm);
              color:var(--accent);letter-spacing:var(--tracking-eyebrow)}
.ma-belief .t{font-family:var(--font-mono);font-size:var(--text-sm);
              letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
              line-height:var(--leading-snug)}
.ma-belief p{color:var(--text-secondary);font-size:.9375rem;margin:0}
@media(max-width:860px){
  .ma-belief{grid-template-columns:1fr;gap:var(--space-2);padding:var(--space-5) 0}
}

/* --- what you keep ----------------------------------------------------
   Four bordered cards, not a list: the copy read as a wall of text at four
   paragraphs deep against a mostly-empty column on the other side of the
   page. Same hairline/no-shadow grammar as .ma-beat. Icons are inline SVG,
   line weight 1.5, so they inherit currentColor and need no image request.

   The markup still carries .ma-scrub from an earlier horizontal-pan build;
   harmless now since nothing here reads --p, left in rather than touching
   the widget again for a class with no effect. */
.ma-section .ma-keep-grid{margin-top:var(--space-6)}
.ma-keep-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-4);
}
.ma-keep-card{
  border:var(--border-w) solid var(--border-default);
  border-radius:var(--radius-sm);
  padding:var(--space-5);
  transition:border-color var(--duration-base) var(--ease-standard),
             background-color var(--duration-base) var(--ease-standard),
             transform var(--duration-base) var(--ease-standard);
}
.ma-keep-card:hover{
  border-color:var(--accent);
  background:var(--surface-sunken);
  transform:translateY(-4px);
}
.ma-keep-icon{
  width:32px;height:32px;margin-bottom:var(--space-4);
  color:var(--ink);
  transition:color var(--duration-base) var(--ease-standard);
}
.ma-keep-icon svg{width:100%;height:100%;display:block}
.ma-keep-card:hover .ma-keep-icon{color:var(--accent)}
.ma-keep-card h3{
  font-family:var(--font-sans);font-size:var(--text-md);
  font-weight:var(--weight-medium);margin:0 0 var(--space-2);
  color:var(--text-primary);
}
.ma-keep-card p{color:var(--text-secondary);font-size:.9375rem;margin:0;
                line-height:var(--leading-relaxed)}
@media(max-width:960px){
  .ma-keep-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Below 760px, plain stacked cards. A horizontal auto-panning rail was tried
   here and cut cards off mid-scroll, so this is a single column instead,
   same as every other stacked section on the page. */
@media(max-width:760px){
  .ma-keep-grid{grid-template-columns:1fr}
}

/* --- full bleed figure ------------------------------------------------
   The one section on this page that is not type on Paper, and the reason the
   reference design does not read as a wall of text. The section container is
   already viewport wide (only .e-con-inner is boxed), so a background on it
   bleeds without any of the left:calc(50% - 50vw) machinery.

   The photograph is a builder setting so it can be swapped without touching
   CSS, exactly like the portrait. The overlay, the measure and the colour are
   decided here. */
.ma-figure{
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  --padding-block-start:clamp(5rem,12vw,9rem);
  --padding-block-end:clamp(5rem,12vw,9rem);
  padding-block:clamp(5rem,12vw,9rem)!important;
}
/* .e-con sets --min-height:initial and then min-height:var(--min-height), so a
   plain min-height computes to 0. Setting the variable is not enough either:
   .e-con is also one class and loads later, so its `initial` wins a tie and the
   custom property comes back empty. Two classes, like the section hairlines. */
.ma-section.ma-figure{--min-height:clamp(420px,48vw,600px)}
/* .e-con-inner is flex-grow:1 inside the column-direction section, so it owns
   the full band height and centring happens there, not on the section.
   !important rather than --justify-content: the variable inherits down into
   every widget, and Elementor reads it on .elementor-widget too. */
.ma-figure > .e-con-inner{justify-content:center!important;--min-height:initial}
/* Two classes and content forced. Elementor owns .e-con::before for its own
   background overlay and sets content:var(--background-overlay), which is
   empty by default, from a file that loads after this one. Same fix the
   section hairlines already needed.

   Weighted to the left rather than a flat scrim: the copy sits left, so the
   right of the photograph keeps its detail instead of being flattened. */
.ma-section.ma-figure::before{
  content:""!important;
  position:absolute;inset:0;
  width:auto!important;height:auto!important;
  /* Stops chosen against the copy, not by eye. The h2 ends at 42% of the
     viewport and the body at 45%, so the scrim only has to hold contrast that
     far: Paper on .74 Ink over the photograph's cream wall measures about
     6:1, and 9:1 at the left edge. Past that it opens up to .30 so the subject
     is a photograph rather than a silhouette. */
  background:linear-gradient(90deg,
    rgba(43,38,34,.90) 0%,
    rgba(43,38,34,.74) 42%,
    rgba(43,38,34,.30) 100%);
  z-index:0;pointer-events:none;
}
.ma-figure > .e-con-inner{position:relative;z-index:1}
/* h2 only, not .elementor-heading-title. The eyebrow is a <p> carrying that
   same class, so the broader selector put a 16ch measure on it and wrapped
   `Who we work with` onto two lines. */
.ma-figure h2{color:var(--text-on-ink);max-width:16ch}
.ma-figure .ma-body,.ma-figure .ma-body p{color:rgba(247,243,236,.80);max-width:52ch}
/* Oxblood itself is about 2.3:1 on Ink, which is why the dark sections have had
   no accent until now. --brand-200 is the same ramp, light enough to carry
   12px text on the scrim: measured against the composited band it is 5.3:1 at
   the eyebrow's darkest point. --brand-300 was tried first and came out at
   3.6:1, under AA for text this small. A ramp value, not an invented colour. */
.ma-figure .ma-eyebrow,.ma-figure .ma-eyebrow .elementor-heading-title{color:var(--brand-200)}
@media(max-width:760px){
  .ma-section.ma-figure{--min-height:initial}
  /* No room to weight it sideways once the copy runs full width. */
  .ma-section.ma-figure::before{
    background:linear-gradient(180deg,rgba(43,38,34,.88) 0%,rgba(43,38,34,.82) 100%);
  }
}

/* --- tinted panel -----------------------------------------------------
   A second, quieter tonal step so the page is not one continuous sheet of
   Paper. --surface-sunken is the only ground the system puts between Paper
   and Ink, so this is as far as a tint goes without inventing a token.
   The section drops ma-ruled: its own edge is the divider, and a hairline
   sitting on top of a tone change reads as a mistake. */
.ma-tinted{background:var(--surface-sunken)}

/* --- home: tonal rhythm -------------------------------------------------
   Same principle as About's .ma-tinted: Paper and Stone alternate down the
   page so a scroller reads chapters instead of one continuous sheet. The
   section drops ma-ruled for the same reason — its own edge against the
   Paper section either side is already the divider. */
.ma-stone{background:#eeeae3;}

/* --- founder: copy left, portrait right ------------------------------ */
.ma-founder .ma-role,.ma-founder .ma-role p{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--accent);margin:0;
}
.ma-founder .ma-body{max-width:56ch}
@media(max-width:860px){
  .ma-founder{--flex-direction:column;--align-items:stretch}
  .ma-founder > .e-con-inner{flex-direction:column!important;align-items:stretch!important}
  .ma-founder > .e-con-inner > .e-con{--width:100%;width:100%!important;max-width:100%!important}
}

/* Portrait slot. 4:5 vertical, the same Stone ground and hairline as the
   talent placeholders, so the real photograph drops straight in with no
   layout shift. object-fit means whatever crop gets uploaded still fills the
   frame instead of changing the section height.
   Scoped through .elementor because Elementor's own `.elementor img{border:none}`
   reset matches at the same specificity from a file that loads later, which
   stripped the hairline off the portrait while the rest of the rule applied. */
.elementor .ma-portrait img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  border:var(--border-w) solid var(--border-strong);
}
@media(max-width:860px){ .ma-portrait{display:block;max-width:380px} }

/* --- team -------------------------------------------------------------
   Hidden until there is a team to show. The section container carries
   Elementor's Hide On Desktop, Tablet and Mobile switches, so it is turned
   back on in the builder under Advanced > Responsive rather than by editing
   CSS. Styled now so it lands finished on the day it is unhidden. */
.ma-team{background:var(--surface-ink)}
.ma-team h2,.ma-team .elementor-heading-title{color:var(--text-on-ink)}
.ma-team .ma-eyebrow,.ma-team .ma-eyebrow .elementor-heading-title{color:rgba(247,243,236,.62)}
.ma-team .ma-body,.ma-team .ma-body p{color:rgba(247,243,236,.72)}
.ma-team-grid{margin-top:var(--space-7);
              padding-top:var(--space-7)!important;
              border-top:var(--border-w) solid var(--border-on-ink)}
.ma-member .ma-portrait img{border-color:var(--border-on-ink)}
.ma-member .ma-member-name p{margin:0}
.ma-member strong{display:block;margin-top:var(--space-4);
                  font-family:var(--font-display);
                  font-weight:var(--weight-regular);font-size:var(--text-md);
                  color:var(--text-on-ink)}
.ma-member span{display:block;margin-top:var(--space-2);
                font-family:var(--font-mono);font-size:var(--text-xs);
                letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
                color:rgba(247,243,236,.62)}
@media(max-width:860px){
  .ma-team-grid{flex-wrap:wrap!important}
  .ma-team-grid > .e-con{--width:calc(50% - 12px);width:calc(50% - 12px)!important}
}
@media(max-width:520px){
  .ma-team-grid > .e-con{--width:100%;width:100%!important}
}

/* SPACING AUTHORITY, extended to the About sections. Same treatment as the
   home hero: widget margins are already zeroed above, so each column is
   spaced by one row-gap and nothing else. */
.ma-about-hero > .e-con-inner > .e-con,
.ma-founder > .e-con-inner > .e-con,
.ma-member{row-gap:var(--space-5)!important}
/* The role line belongs to the name, not to the next block, so it is pulled
   back off the shared 24px step to an 8px one. A negative margin rather than
   a per-item gap because row-gap applies to every item in the column. */
.ma-founder > .e-con-inner > .e-con > .elementor-widget.ma-role[class]{
  margin-block-start:calc(var(--space-2) - var(--space-5))!important;
}


/* =====================================================================
   ARTICLE  (single post)
   Template: single-post.php. Plain markup, not Elementor, so none of the
   --flex-direction / .e-con-inner machinery above applies here and real
   grid works.

   One column system for the whole article, declared once as --ma-grid and
   reapplied by every band so the crumbs, the title, the body and the
   footer all share the same left edge. Three usable spans:

     content   the reading measure
     wide      the featured image and the related cards
     full      edge to edge, for alignfull blocks and the tonal bands

   The content track is a definite min(), not a minmax(). With minmax the two
   1fr edge tracks took a share of the free space before the measure had its
   own, and at 390 the reading column collapsed to 114px between two 138px
   margins. Measured, not assumed.

   The measure is deliberately narrower than the 1200px page container.
   Reference proportions, measured: title 65px over an 896px measure,
   featured image 1.22x the measure, body 18px at 1.8. Rebuilt on the
   Design System scale rather than copied, so the numbers differ but the
   relationships hold.
   ===================================================================== */

.ma-article{
  --measure:40rem;
  --wide:56rem;
  --pad:clamp(1.5rem,4vw,4rem);
  --ma-grid:
    [full-start] minmax(var(--pad),1fr)
    [wide-start] minmax(0,calc((var(--wide) - var(--measure)) / 2))
    [content-start] min(100% - (var(--pad) * 2),var(--measure)) [content-end]
    minmax(0,calc((var(--wide) - var(--measure)) / 2)) [wide-end]
    minmax(var(--pad),1fr) [full-end];
  padding-block-start:clamp(2.5rem,6vw,4rem);
}

.ma-grid{display:grid;grid-template-columns:var(--ma-grid)}
.ma-grid > *{grid-column:content;min-width:0}
.ma-grid > .is-wide{grid-column:wide}
.ma-grid > .is-full{grid-column:full}

/* --- head ------------------------------------------------------------ */
.ma-crumbs{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--text-secondary);
  line-height:var(--leading-normal);
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--space-2);
}
.ma-crumbs a{text-decoration:none}
.ma-crumbs a:hover{color:var(--accent)}
.ma-crumbs span{color:var(--border-strong)}

/* The reference sets a rule between the crumbs and the title. Reproduced as
   a real <hr> so it is one element to move, and reset because the UA sheet
   gives hr a 3D border and an em-based margin. */
.ma-article-rule{
  border:0;height:1px;background:var(--border-default);
  margin:var(--space-4) 0 0;
}

.ma-article-title{
  font-size:clamp(2rem,4.4vw,3.25rem);
  line-height:1.1;
  letter-spacing:var(--tracking-tight);
  margin:var(--space-6) 0 0;
}
.ma-article-lede{
  font-size:clamp(1.0625rem,1.9vw,var(--text-lg));
  line-height:var(--leading-relaxed);
  color:var(--text-secondary);
  margin:var(--space-5) 0 0;
}
.ma-article-meta{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--text-muted);
  line-height:var(--leading-normal);
  margin:var(--space-5) 0 0;
}
/* Square, not round: the Design System has no pill or circle below 999px. */
.ma-dot{
  display:inline-block;width:3px;height:3px;
  background:var(--border-strong);
  vertical-align:middle;
  margin:0 var(--space-3) 2px;
}
/* At phone widths the eyebrow tracking on .ma-article-meta was enough extra
   width per character to force "By NAME . DATE . N min read" onto a second,
   ragged row. Drop the tracking and keep the row from wrapping at all — the
   abbreviated M j, Y date above already buys back most of the width this needs.
   Still not enough on the narrowest phones: the dot's --space-3 side margins
   (24px per dot, two dots) were the next-biggest chunk, so shrink those too. */
@media(max-width:38rem){
  .ma-article-meta{
    letter-spacing:normal;
    white-space:nowrap;
  }
  .ma-article-meta .ma-dot{
    margin-inline:var(--space-1);
  }
}

/* --- featured figure -------------------------------------------------- */
.ma-article-figure{margin-top:clamp(2rem,5vw,3rem)}
.ma-article-figure figure{margin:0}
/* Built for a landscape featured image, as the reference layout is. The cap is
   a guard rather than a crop: a 3:2 photograph at the wide track is about 600px
   tall and never reaches it, while a portrait upload would otherwise push the
   whole article below the fold. */
.ma-article-image{
  display:block;width:100%;height:auto;
  max-height:80vh;object-fit:cover;object-position:50% 50%;
}
.ma-article-figure figcaption,
.ma-post-body figcaption{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-wide);
  line-height:var(--leading-normal);
  color:var(--text-muted);
  margin-top:var(--space-3);
  text-align:left;
}

/* --- body ------------------------------------------------------------
   Styles the block editor's own output, so a new post inherits all of this
   with nothing to select in the builder. Grid items do not collapse their
   margins, so every gap below is the gap that renders. */
.ma-post-body{
  margin-top:clamp(2.5rem,6vw,3.5rem);
  font-size:var(--text-md);
  line-height:var(--leading-relaxed);
  color:var(--text-secondary);
}
.ma-post-body > *{margin-block:0 var(--space-5)}
.ma-post-body > *:last-child{margin-bottom:0}

.ma-post-body a:not(.elementor-button):not(.ma-btn){
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
}
.ma-post-body a:not(.elementor-button):not(.ma-btn):hover{color:var(--accent-hover)}
.ma-post-body strong,.ma-post-body b{color:var(--text-primary);font-weight:var(--weight-semibold)}

.ma-post-body > h2{
  font-size:clamp(1.5rem,2.8vw,var(--text-xl));
  line-height:var(--leading-snug);
  color:var(--text-primary);
  margin-block:var(--space-7) var(--space-4);
}
.ma-post-body > h3{
  font-size:var(--text-lg);
  line-height:var(--leading-snug);
  color:var(--text-primary);
  margin-block:var(--space-6) var(--space-3);
}
.ma-post-body > h4{
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--text-secondary);
  margin-block:var(--space-6) var(--space-3);
}
.ma-post-body > *:first-child{margin-top:0}

.ma-post-body ul,.ma-post-body ol{padding-left:var(--space-5)}
.ma-post-body li{margin-bottom:var(--space-3)}
.ma-post-body li::marker{color:var(--text-muted)}
.ma-post-body li:last-child{margin-bottom:0}

/* Quote: hairlines top and bottom rather than a tinted panel with a heavy
   left bar. Same treatment the section rules use elsewhere on the site. */
.ma-post-body blockquote{
  font-family:var(--font-display);
  font-size:clamp(1.375rem,2.4vw,var(--text-xl));
  line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tight);
  color:var(--text-primary);
  border:0;
  border-top:var(--border-w) solid var(--border-default);
  border-bottom:var(--border-w) solid var(--border-default);
  padding:var(--space-6) 0;
  margin-block:var(--space-7);
  background:none;
}
.ma-post-body blockquote p{font-size:inherit;line-height:inherit;color:inherit}
.ma-post-body blockquote cite,
.ma-post-body blockquote .wp-block-quote__citation{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  font-style:normal;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--text-muted);
  margin-top:var(--space-4);
}
.ma-post-body .wp-block-pullquote{
  border-top:var(--border-w) solid var(--border-default);
  border-bottom:var(--border-w) solid var(--border-default);
  padding:var(--space-6) 0;
  margin-block:var(--space-7);
  background:none;text-align:left;
}

.ma-post-body figure{margin:0}
.ma-post-body img{display:block;width:100%;height:auto}
.ma-post-body .wp-block-image,
.ma-post-body .wp-block-gallery,
.ma-post-body .wp-block-embed,
.ma-post-body .wp-block-video{margin-block:var(--space-7)}
.ma-post-body .wp-block-image img{border:0}

.ma-post-body hr,
.ma-post-body .wp-block-separator{
  border:0;height:1px;background:var(--border-default);
  margin-block:var(--space-7);width:100%;max-width:none;opacity:1;
}

.ma-post-body code,.ma-post-body kbd{
  font-family:var(--font-mono);font-size:.875em;
  background:var(--surface-sunken);
  border:var(--border-w) solid var(--border-default);
  border-radius:var(--radius-sm);
  padding:.1em .35em;
}
.ma-post-body pre{
  font-family:var(--font-mono);font-size:var(--text-sm);
  line-height:var(--leading-normal);
  background:var(--surface-sunken);
  border:var(--border-w) solid var(--border-default);
  border-radius:var(--radius-sm);
  padding:var(--space-5);
  overflow-x:auto;
  margin-block:var(--space-6);
}
.ma-post-body pre code{background:none;border:0;padding:0}

.ma-post-body table{
  width:100%;border-collapse:collapse;
  font-size:var(--text-sm);margin-block:var(--space-6);
}
.ma-post-body th,.ma-post-body td{
  border-bottom:var(--border-w) solid var(--border-default);
  padding:var(--space-3) var(--space-4) var(--space-3) 0;
  text-align:left;vertical-align:top;
}
.ma-post-body th{
  font-family:var(--font-mono);font-size:var(--text-xs);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-secondary);
  border-bottom-color:var(--border-strong);
}

/* Editor alignments map onto the shared tracks. */
.ma-post-body > .alignwide{grid-column:wide}
.ma-post-body > .alignfull{grid-column:full}
.ma-post-body > .alignfull img{width:100%}
/* An alignfull figure runs to the viewport edge, so its caption needs the page
   inset putting back and pulling in to the wide track. An alignwide one already
   stops there and has to stay flush with its own image. */
.ma-post-body > .alignfull > figcaption{
  max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad);
}

.ma-page-links{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-muted);
  border-top:var(--border-w) solid var(--border-default);
  padding-top:var(--space-4);margin-top:var(--space-6);
}
.ma-page-links a{color:var(--text-secondary);text-decoration:none}
.ma-page-links a:hover{color:var(--accent)}

/* --- foot: tags and sharing ------------------------------------------ */
.ma-article-foot-inn{
  border-top:var(--border-w) solid var(--border-default);
  margin-top:clamp(2.5rem,6vw,3.5rem);
  padding-top:var(--space-5);
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;
  gap:var(--space-4) var(--space-6);
}
.ma-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0}
.ma-tags li{margin:0}
.ma-tags a{
  display:inline-block;
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-secondary);text-decoration:none;
  border:var(--border-w) solid var(--border-default);
  border-radius:var(--radius-sm);
  padding:var(--space-1) var(--space-3);
  transition:border-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard);
}
.ma-tags a:hover{border-color:var(--border-strong);color:var(--accent)}
.ma-share{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-secondary);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);
  margin:0;
}
.ma-share-label{color:var(--text-muted)}
.ma-share a{text-decoration:none}
.ma-share a:hover{color:var(--accent)}

/* --- author ----------------------------------------------------------- */
.ma-author-card{
  background:var(--surface-sunken);
  border:var(--border-w) solid var(--border-default);
  padding:clamp(1.5rem,4vw,2rem);
  margin-top:clamp(2.5rem,6vw,3.5rem);
}
.ma-author-name{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tight);
  color:var(--text-primary);
  margin:var(--space-3) 0 var(--space-3);
}
.ma-author-bio{font-size:.9375rem;color:var(--text-secondary);margin:0;max-width:60ch}

/* --- the ask ----------------------------------------------------------
   Ink ground. Oxblood is 2.3:1 on Ink, so the eyebrow uses the ramp value
   that measures 5.3:1 there, the same one the About figure scrim uses. */
.ma-article-cta{
  background:var(--surface-ink);
  padding-block:clamp(3.5rem,8vw,var(--space-9));
  margin-top:clamp(3.5rem,8vw,var(--space-9));
}
/* The two closing bands are site furniture rather than part of the article's
   reading column, so they line up with the same 1200px container every
   Elementor section uses. Everything above them stays on the measure. */
.ma-article-cta-inn,
.ma-related-inn{
  grid-column:full;
  width:100%;max-width:1200px;margin-inline:auto;
  padding-inline:var(--pad);
}

.ma-article-cta .ma-eyebrow{color:var(--brand-200);margin:0 0 var(--space-4)}
.ma-article-cta h2{
  color:var(--text-on-ink);
  font-size:clamp(1.75rem,3.6vw,var(--text-3xl));
  line-height:1.08;
  max-width:18ch;margin:0;
}
.ma-article-cta .ma-lede{
  color:rgba(247,243,236,.72);
  max-width:52ch;
  margin:var(--space-5) 0 var(--space-6);
}
.ma-article-cta .ma-btn{text-decoration:none}

/* --- previous and next ------------------------------------------------ */
.ma-postnav-inn{
  border-top:var(--border-w) solid var(--border-default);
  padding-top:var(--space-5);
  margin-block:clamp(3.5rem,8vw,var(--space-9)) 0;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);
}
.ma-postnav-link{display:block;text-decoration:none}
.ma-postnav-link.is-next{text-align:right}
.ma-postnav-label{
  display:block;
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:var(--space-2);
}
.ma-postnav-title{
  display:block;
  font-family:var(--font-display);
  font-size:var(--text-md);
  line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tight);
  color:var(--text-primary);
  transition:color var(--duration-fast) var(--ease-standard);
}
.ma-postnav-link:hover .ma-postnav-title{color:var(--accent)}

/* --- related ----------------------------------------------------------- */
.ma-related{
  background:var(--surface-sunken);
  border-top:var(--border-w) solid var(--border-default);
  padding-block:clamp(3.5rem,8vw,var(--space-9));
  margin-top:clamp(3.5rem,8vw,var(--space-9));
}
.ma-related .ma-eyebrow{margin:0 0 var(--space-6)}
.ma-related-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-6);
}
.ma-related-card a{display:block;text-decoration:none}
.ma-related-art{
  display:block;background:var(--stone);
  aspect-ratio:3 / 2;overflow:hidden;margin-bottom:var(--space-4);
}
.ma-related-art img{width:100%;height:100%;object-fit:cover;display:block}
.ma-related-meta{
  display:flex;flex-wrap:wrap;gap:var(--space-3);
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:var(--space-2);
}
.ma-related-cat{color:var(--accent)}
.ma-related-title{
  display:block;
  font-family:var(--font-display);
  font-size:var(--text-md);
  line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tight);
  color:var(--text-primary);
  transition:color var(--duration-fast) var(--ease-standard);
}
.ma-related-card a:hover .ma-related-title{color:var(--accent)}

/* --- responsive -------------------------------------------------------- */
@media(max-width:56rem){
  .ma-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ma-related-card:nth-child(3){display:none}
}
@media(max-width:38rem){
  .ma-related-grid{grid-template-columns:1fr;gap:var(--space-7)}
  .ma-related-card:nth-child(3){display:block}
  .ma-postnav-inn{grid-template-columns:1fr;gap:var(--space-5)}
  .ma-postnav-link.is-next{text-align:left}
  .ma-postnav-link.is-empty{display:none}
  .ma-article-foot-inn{justify-content:flex-start}
}