/* ==========================================================================
   Envevo 2026 refresh — site-wide styles
   --------------------------------------------------------------------------
   Loaded on every page by envevo/envevo-2026.php. Lives in the Salient theme
   at the client's instruction; the master copy is version-controlled in the
   Interactive-map repo under theme/salient/, so a theme update that wipes it
   can be restored from there.

   Where a rule has to beat Salient it matches Salient's own selector shape
   and wins on load order — this stylesheet is enqueued last (priority 100).
   There are two !important declarations in the file, both marked at the point
   of use: one on the hero headline, because Salient's responsive heading scale
   is itself !important and nothing else can outrank that, and one on the quote
   slider's height, because Salient's script writes that inline.
   ========================================================================== */

:root {
  --ev-navy: #013a71;
  /* The navy the client named for the two headlines they asked to recolour. It
     is one value off --ev-navy, which the footer and the rest of the refresh
     use, and it is the navy the map embed already uses for its panel titles.
     Raised with the client rather than quietly reconciled: having both on one
     page is the thing to avoid, and which one survives is their call. */
  --ev-navy-heading: #003a70;
  --ev-navy-deep: #071c3c;
  --ev-teal: #49c5b1;
  --ev-green: #068063;
  --ev-footer-link: #cbd9e8;
  --ev-footer-line: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   FOOTER — every page
   The client's requirement is that this design appears site-wide. It does so
   without any per-page work because Salient renders one footer from the theme
   for every template; the four columns are widget areas, so the content stays
   editable under Appearance → Widgets.
   ========================================================================== */

#footer-outer {
  position: relative;
  overflow: hidden;
  background-color: var(--ev-navy);
  color: #fff;
}

/* The mockup's network lines. A background image rather than markup, so no
   footer template is modified and nothing has to be kept in sync. */
#footer-outer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M-20 60 C160 10 320 110 500 50 C640 5 800 90 980 40 C1080 10 1150 50 1220 30' stroke='%2349C5B1' stroke-width='1'/%3E%3Cpath d='M-20 210 C170 260 340 150 520 220 C660 274 820 170 980 230 C1080 268 1150 220 1220 244' stroke='%2349C5B1' stroke-width='1'/%3E%3Ccircle cx='240' cy='220' r='4' fill='%2349C5B1'/%3E%3Ccircle cx='720' cy='180' r='3' fill='%2349C5B1'/%3E%3Ccircle cx='500' cy='50' r='4' fill='%2349C5B1'/%3E%3Ccircle cx='980' cy='40' r='3' fill='%2349C5B1'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.35;
  pointer-events: none;
}

/* Everything real sits above the line work. */
#footer-outer #footer-widgets,
#footer-outer .envevo-footer-legal {
  position: relative;
  z-index: 2;
}

/* The mockup runs the footer straight on from the enquiry band above it —
   8px, then the rule, then the columns — and this had grown a 52px lead-in on
   top of that. Reported as the footer being quite big, which it was: 541px
   against the mockup's ~290. Most of the difference was here and in the legal
   line below. */
#footer-outer #footer-widgets {
  padding: 8px 0 28px;
}
/* Both edges stated: Salient gives this row 75px underneath on its own, and
   only the top had been set here, so the columns floated a long way above the
   legal line. */
#footer-outer #footer-widgets .container > .row {
  padding: 28px 0 24px;
  border-top: 1px solid var(--ev-footer-line);
}

/* Column headings: small, spaced, teal — the mockup's, not Salient's 18px
   black. Matching Salient's own selector rather than out-specifying it, so
   this stays easy to trace when someone inspects the footer later. */
#footer-outer #footer-widgets .col .widget h4,
#footer-outer #footer-widgets .col .widget .widget-title {
  margin: 0 0 18px;
  font-family: 'Cabin', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ev-teal);
}

#footer-outer #footer-widgets .col .widget,
#footer-outer #footer-widgets .col .widget p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ev-footer-link);
}

/* Salient already sets list-style: none on footer menus, which is what the
   mockup wants — a plain stack, not bullets. Its material skin also gives each
   item 4px of padding top and bottom at the same specificity as anything
   written here, so the gap is tuned on the margin rather than fought over. */
#footer-outer #footer-widgets .col .widget ul li {
  margin: 0 0 6px;
  border: 0;
}
#footer-outer #footer-widgets .col .widget ul li:last-child {
  margin-bottom: 0;
}
#footer-outer #footer-widgets .col .widget a,
#footer-outer #footer-widgets .col .widget ul li a {
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ev-footer-link);
  text-decoration: none;
}
#footer-outer #footer-widgets .col .widget a:hover,
#footer-outer #footer-widgets .col .widget ul li a:hover {
  color: #fff;
}

/* Contact column: the icon and its line share a baseline rather than the icon
   sitting on its own row, which is what happens if the SVG is left inline. */
#footer-outer .envevo-footer-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
#footer-outer .envevo-footer-contact-item svg {
  flex: none;
  color: var(--ev-teal);
}
#footer-outer .envevo-footer-address {
  margin: 10px 0 0;
  color: var(--ev-footer-link);
}

/* --------------------------------------------------------------------------
   Legal bar
   Not on the mockup. A limited company has to show its registration and VAT
   numbers, so rather than delete them with the old footer they move to a
   quiet line underneath, with the accreditation badge alongside.
   -------------------------------------------------------------------------- */
#footer-outer .envevo-footer-legal {
  border-top: 1px solid var(--ev-footer-line);
  padding: 14px 0 20px;
}
#footer-outer .envevo-footer-legal .envevo-footer-legal-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
#footer-outer .envevo-footer-legal p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(203, 217, 232, 0.75);
}
#footer-outer .envevo-footer-legal a {
  color: rgba(203, 217, 232, 0.75);
  text-decoration: underline;
}
#footer-outer .envevo-footer-legal a:hover {
  color: #fff;
}
#footer-outer .envevo-footer-legal img {
  /* The accreditation badge set the height of this whole line. */
  height: 52px;
  width: auto;
  flex: none;
}

@media (max-width: 690px) {
  #footer-outer #footer-widgets {
    padding: 8px 0 20px;
  }
  #footer-outer #footer-widgets .container > .row {
    padding: 28px 0 16px;
  }
  #footer-outer .envevo-footer-legal .envevo-footer-legal-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   HOMEPAGE
   Section hooks come from the page builder: Salient's row element takes a
   `class` attribute (not WPBakery's el_class, which it drops), and columns
   take el_class. Everything below hangs off those, so the layout survives the
   client editing copy, swapping images or reordering cards.
   ========================================================================== */

/* Salient's generated stylesheet sizes headings as `.row .col h2` — two
   classes and an element. A single class on the heading itself loses to that,
   so section headings are matched the same way plus their own class. */
.row .col h2.envevo-section-title,
.row .col h1.envevo-section-title {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.envevo-section-intro {
  max-width: 600px;
  font-size: 15.5px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Hero
   The photo runs to the right edge of the screen, so the row leaves the site
   container and the copy column is padded back to where the container's
   gutter would have been. Matching the gutter to a measurement rather than a
   guess keeps the headline on the same left margin as every section below it.
   -------------------------------------------------------------------------- */
.envevo-hero .envevo-hero-copy > .vc_column-inner {
  padding: 64px max(32px, 5vw) 56px max(24px, calc((100vw - 1245px) / 2));
}
.envevo-hero .envevo-hero-copy h1 {
  font-size: 44px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
  color: var(--ev-navy-heading);
}
.envevo-hero .envevo-hero-copy p {
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 460px;
}
/* The button's padding is set on the element, where the client can reach it.
   Its type size is not an option there — it comes from the heading tag the CTA
   is built on — so the last part of making it smaller is here. */
.envevo-hero .nectar-cta .link_text {
  font-size: 16px;
}

/* Absolute rather than a chain of height:100% down through Salient's five
   image wrappers. Salient positions one of them (.hover-wrap, for its hover
   effects) and it collapses to zero height here, so it is taken out of the
   positioning chain — otherwise inset:0 resolves against a box with no height
   and the photo does not draw at all. */
.envevo-hero .envevo-hero-photo {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.envevo-hero .envevo-hero-photo > .vc_column-inner,
.envevo-hero .envevo-hero-photo .hover-wrap {
  position: static;
  margin: 0;
}
.envevo-hero img.envevo-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Trusted by — the logo marquee
   The logos stay where the client already manages them, in Salient's Clients
   element. envevo-2026.js clones the row once so the loop can run to -50% and
   meet itself; without the clone the strip visibly snaps back.
   -------------------------------------------------------------------------- */
.row .col h3.envevo-trusted-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
/* The clipping viewport the script wraps around the strip. The fade belongs
   here, on the static box, rather than on the track that is moving through it. */
.envevo-trusted .envevo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.envevo-trusted .clients.envevo-marquee-ready {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: 16px;
  animation: envevo-marquee 40s linear infinite;
}
/* The mockup puts each logo in a white chip, and that is not decoration: over
   half of Envevo's logo files are JPEGs with white baked in, so on the tinted
   band they were showing as white rectangles behind the mark. A white chip
   makes that background the chip, and the ones with transparency sit on it
   just as happily. */
.envevo-trusted .clients.envevo-marquee-ready > div {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 76px;
  margin: 0;
  padding: 0 22px;
  background: #fff;
  border: 1px solid #e3e8ea;
  border-radius: 10px;
}
/* Salient already greyscales these and lifts them on hover; the chip only has
   to stop the logo overflowing it. */
.envevo-trusted .clients.envevo-marquee-ready > div img {
  width: auto;
  max-width: 100%;
  max-height: 44px;
  margin: 0;
}
.envevo-trusted .clients.envevo-marquee-ready:hover {
  animation-play-state: paused;
}
@keyframes envevo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .envevo-trusted .clients.envevo-marquee-ready { animation: none; }
}

/* --------------------------------------------------------------------------
   Our Solutions
   -------------------------------------------------------------------------- */
.envevo-solutions .envevo-solution-card > .vc_column-inner {
  height: 100%;
  background: #fff;
  border: 1px solid #e3e8ea;
  border-radius: 16px;
  overflow: hidden;
}
.envevo-solutions img.envevo-solution-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  max-width: none;
}
/* Salient leaves 15px under every image for its hover effects; in a card the
   title's own margin sets that gap instead. */
.envevo-solutions .envevo-solution-card .hover-wrap {
  margin: 0;
}
.row .col h3.envevo-solution-title {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  margin: 20px 18px 8px;
}
.envevo-solutions .envevo-solution-card .wpb_text_column {
  margin: 0 18px 20px;
}
.envevo-solutions .envevo-solution-card p {
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 14px;
}
.envevo-solutions .envevo-solution-link {
  margin: 0;
}
.envevo-solutions .envevo-solution-link a {
  font-size: 13px;
  font-weight: 600;
  color: var(--ev-green);
}

/* --------------------------------------------------------------------------
   Map section
   -------------------------------------------------------------------------- */
.envevo-map-section .envevo-section-title {
  margin: 0 auto 32px;
  max-width: 640px;
}
/* The navy the client asked for, on every section heading that sits on a light
   band: the map's, Our Solutions, and the Trusted-by line. Not the enquiry
   CTA's — that one is white on navy already.

   Salient colours headings as `.row .col h2` — two classes and an element — so
   the layout rules above cannot carry the colour: they are a class short.
   `.col` is the column wrapper inside each of these rows, which is what puts
   these selectors ahead of it. */
.envevo-map-section .col h2.envevo-section-title,
.envevo-solutions .col h2.envevo-section-title,
.envevo-trusted .col h3.envevo-trusted-title {
  color: var(--ev-navy-heading);
}

@media (max-width: 999px) {
  .envevo-hero .envevo-hero-photo {
    clip-path: none;
    min-height: 280px;
  }
  .envevo-hero .envevo-hero-copy > .vc_column-inner {
    padding: 44px 24px 40px;
  }
  /* The file's one !important. Salient's responsive scale sets
     `.wpb_wrapper h1.vc_custom_heading` to 40.3px !important below 690px, and
     no selector can outrank that — a 40px headline on a 360px column runs to
     four lines. Scoped to the hero so the rest of the site keeps Salient's
     scale. */
  .row .col .envevo-hero-copy h1.vc_custom_heading { font-size: 32px !important; }
  .envevo-section-title h2, .envevo-section-title { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   Enquiry CTA — every page
   Built as a Salient Global Section pinned to the above-footer location, so
   it renders site-wide from one place and stays editable in the page builder.
   That also satisfies the standing requirement for a clear enquiry route on
   every page, not only the homepage.
   -------------------------------------------------------------------------- */
.nectar-global-section.before-footer {
  position: relative;
  overflow: hidden;
  background: var(--ev-navy);
  color: #fff;
}
.nectar-global-section.before-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 420' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M-20 220 C150 120 300 320 480 200 C620 110 760 280 900 190 C1000 130 1120 210 1220 150' stroke='%2349C5B1' stroke-width='1.5'/%3E%3Cpath d='M-20 300 C180 380 320 160 520 260 C660 330 820 140 980 240 C1080 300 1150 220 1220 260' stroke='%2349C5B1' stroke-width='1.5'/%3E%3Cpath d='M-20 120 C160 60 340 180 500 100 C640 30 800 130 960 70 C1060 30 1150 90 1220 60' stroke='%2349C5B1' stroke-width='1'/%3E%3Ccircle cx='150' cy='120' r='4' fill='%2349C5B1'/%3E%3Ccircle cx='480' cy='200' r='5' fill='%2349C5B1'/%3E%3Ccircle cx='900' cy='190' r='4' fill='%2349C5B1'/%3E%3Ccircle cx='1080' cy='300' r='4' fill='%2349C5B1'/%3E%3Ccircle cx='960' cy='70' r='4' fill='%2349C5B1'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.35;
  pointer-events: none;
}
.nectar-global-section.before-footer > .container {
  position: relative;
  z-index: 2;
}

/* The rule under the heading is the mockup's; a short teal bar rather than a
   full-width divider, so it reads as a mark and not as a section break. */
/* Salient leaves 27px of margin under every row. This one is the last thing
   before the footer, and the client asked for the two to sit closer. The
   selector is Salient's own — `.container-wrap .row > .wpb_row` with two
   :not() clauses, five classes of weight — plus this row's class, so it wins
   on specificity rather than hoping to on order. */
.container-wrap .row > .wpb_row.envevo-cta:not(.full-width-section):not(.full-width-content) {
  margin-bottom: 0;
}
.row .col h2.envevo-cta-title {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  max-width: 440px;
}
.envevo-cta .envevo-cta-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: var(--ev-teal);
  margin-top: 14px;
}
.envevo-cta .envevo-cta-copy p {
  margin: 4px 0 0;
  max-width: 420px;
  font-size: 15px;
  line-height: 1.6;
  color: #afc3dc;
}
.envevo-cta .envevo-cta-action {
  text-align: right;
}

@media (max-width: 999px) {
  .envevo-cta .envevo-cta-action {
    text-align: left;
    margin-top: 24px;
  }
}

/* --------------------------------------------------------------------------
   Client quotes
   The updated mockup's spotlight card: one narrow column — the client's logo,
   the quote, a short teal rule, then who said it and which project — with an
   outsized quotation mark ghosted into the corner. Salient's minimal slide is
   a flat blockquote whose children already come in that order (image, quote,
   name, subtitle), so the card is a flex column and nothing needs wrapping or
   reordering. The element stays the one the client already uses to add quotes.

   This replaces the two-panel card built from the first mockup, which put an
   image panel beside the quote. Nothing here wants a photograph: the panel is
   gone and the image slot is a small logo at the top of the card. The filter
   that told a logo from a photograph went with it.
   -------------------------------------------------------------------------- */
/* The slides box is a clipping window: Salient stacks the cards inside it with
   position:absolute and fades between them, so it has no content height of its
   own and Salient's script measures a card and writes a height on inline.

   That measurement cannot be relied on here, because the card takes its height
   from this box in turn — leave both to find their own level and they collapse
   together, to a 40px window over a clipped 78px card. So the window's height
   is stated, the card fills it, and the loop has a fixed point. It needs
   !important only because the value it replaces is an inline style. The mockup
   fixes the same height for the same reason: every card the same, whatever its
   quote.

   380 holds the longest of the three at five lines with about 15px to spare. A
   longer quote than these needs it raised — the tell is the attribution losing
   its descenders at the foot of the card. */
.envevo-testimonials .testimonial_slider .slides {
  max-width: min(640px, 100%);
  margin: 0 auto;
  padding-bottom: 0;
  height: 380px !important;
}
.envevo-testimonials .testimonial_slider blockquote {
  display: flex;
  flex-direction: column;
  /* No position here. Salient stacks these absolutely and fades between them;
     a `position: relative` took them out of that stack, so they flowed one
     under another and every card but the first sat below the window and was
     clipped away — the section went blank the moment you pressed next. The
     ghosted quotation mark below still has its containing block either way. */
  overflow: hidden;
  /* Fills the window Salient sized, so every card is exactly as tall as the
     tallest and each attribution lands on the same line — which is what the
     mockup's fixed height is for — and the prev/next arrows, which are centred
     on that same box, are centred on the card too. */
  height: 100%;
  padding: 40px 40px 36px;
  background: #f6f8f9;
  border-radius: 22px;
  border: 1px solid #e3e8ea;
  box-shadow: 0 20px 45px -28px rgba(7, 28, 60, 0.35);
  text-align: left;
}
/* The ghosted quotation mark the card is built around. A pseudo-element, not
   Salient's own .open-quote span: that one sits inside the paragraph and
   cannot be lifted out of the text flow into the corner. */
.envevo-testimonials .testimonial_slider blockquote::before {
  /* The character itself, not a `\201C` escape. The escape is correct CSS
     and was what went in here, but it did not survive the script that wrote
     this file — it came out as U+0081 followed by a literal C, which is a
     missing-glyph box beside a 220px letter C. That is what was sitting
     behind the logos instead of a quotation mark. */
  content: "“";
  position: absolute;
  /* Behind the card's contents. A positioned element paints above its static
     siblings whatever their source order, so without this the mark sat on top
     of the client's logo. The contents are lifted over it just below, which is
     what the mockup does too. */
  z-index: 0;
  /* Given a box of its own rather than shrink-to-fit. Left to itself the box
     came out 4px wide — the glyph's advance at this weight is almost nothing —
     and a 220px character then spilled out of it right across the card, so the
     mark appeared over the logo at the top left however it was anchored. With
     real dimensions the anchor means what it says and the mark sits in the top
     corner the mockup puts it in. */
  width: 180px;
  height: 200px;
  /* -46px, which is the mockup value, let the card overflow cut the top
     third of the glyph away. The ink of this character does not start at the
     top of its line box: measured in Cabin at 220px it runs from 31px to 88px
     below it, 57px of ink inside a 220px box. So the offset is that 31px less
     a 10px inset from the card edge, and the whole mark shows. */
  top: -20px;
  /* `left: auto` is doing real work. Salient has its own rule on this same
     pseudo-element — it draws the little pointer under a default-style quote —
     and it sets `left`. With left, right and width all resolved the box is
     over-constrained, and in a left-to-right document it is `right` that gets
     dropped: the mark went to the left of the card however it was anchored.
     Its borders are cleared for the same reason. */
  left: auto;
  right: 12px;
  border: 0;
  text-align: center;
  font-size: 220px;
  font-weight: 700;
  line-height: 1;
  color: var(--ev-navy-deep);
  opacity: 0.05;
  pointer-events: none;
}
/* The logo, at its own proportions. `contain` with a left-hand position lets a
   tall emblem and a wide wordmark share one line without either being
   stretched — Fleete's mark is portrait, First Bus's is three times as wide as
   it is tall. */
.envevo-testimonials .testimonial_slider blockquote .image-icon {
  flex: none;
  width: 100%;
  height: 34px;
  min-height: 0;
  margin: 0 0 22px;
  border-radius: 0;
  background-color: transparent;
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  box-shadow: none;
  /* Salient prints a quotation mark inside this div as its fallback. */
  font-size: 0;
  color: transparent;
}
/* Everything the card actually says sits above the ghosted quotation mark. */
.envevo-testimonials .testimonial_slider blockquote .image-icon,
.envevo-testimonials .testimonial_slider blockquote p,
.envevo-testimonials .testimonial_slider blockquote span.testimonial-name,
.envevo-testimonials .testimonial_slider blockquote span.title {
  position: relative;
  z-index: 1;
}
.envevo-testimonials .testimonial_slider blockquote p {
  flex: 0 1 auto;
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  font-style: normal;
  color: var(--ev-navy-deep);
}
/* The card carries its own quotation mark, so Salient's inline pair would be a
   second one — and the closing half would hang off the end of the copy. */
.envevo-testimonials .testimonial_slider blockquote p .open-quote,
.envevo-testimonials .testimonial_slider blockquote p .close-quote {
  display: none;
}
/* Salient sizes the two text lines from the theme options, as
   `body .testimonial_slider[data-style="minimal"] blockquote span.title` —
   three classes and three elements, which out-specifies a rule of this shape
   however late this stylesheet loads. Naming the element and the attribute
   here puts these a class ahead of it.

   margin-top:auto drops the attribution to the foot of the card, so it sits on
   the same line on every slide whatever the quote's length. The teal rule is
   attached to it rather than to the quote for the same reason — it has to
   travel with the attribution, not trail the copy. */
.envevo-testimonials .testimonial_slider[data-style="minimal"] blockquote span.testimonial-name {
  flex: none;
  margin-top: auto;
  padding: 0;
  /* Salient shrinks this one span with `transform: scale(0.8)`. As a flex item
     it is the full width of the card, so scaling pulled both its edges inward
     and the attribution and its teal rule sat indented from the quote above
     them while the project line below stayed put. */
  transform: none;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 800;
  font-style: normal;
  color: var(--ev-navy-deep);
  opacity: 1;
}
.envevo-testimonials .testimonial_slider blockquote span.testimonial-name::before {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  margin: 22px 0 14px;
  border-radius: 2px;
  background: var(--ev-teal);
}
/* No name, no rule: an element filled in with only a quote should not grow a
   stray teal dash where its attribution would have been. */
.envevo-testimonials .testimonial_slider blockquote span.testimonial-name:empty {
  display: none;
}
.envevo-testimonials .testimonial_slider[data-style="minimal"] blockquote span.title {
  flex: none;
  margin: 2px 0 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  color: #5a6b80;
  opacity: 1;
}

@media (max-width: 767px) {
  /* Taller: the same quote takes more lines in a narrower card. The mockup
     makes the same jump. */
  .envevo-testimonials .testimonial_slider .slides {
    height: 460px !important;
  }
  .envevo-testimonials .testimonial_slider blockquote {
    padding: 30px 26px 28px;
  }
  .envevo-testimonials .testimonial_slider blockquote p { font-size: 16px; }
  .envevo-testimonials .testimonial_slider blockquote::before {
    font-size: 150px;
    top: -30px;
  }
}

/* Salient already gives this slider a teal prev/next pair — the mockup's
   arrows, near enough — but parks them at the edges of the full content row,
   which is twice the card's width, and 40px above its middle. Pulled in to sit
   just outside the card and centred on it: the offset parent is the row, so
   half the card (320px) plus a 44px arrow and a 20px gap is 384 from centre.

   Salient's own selector carries four classes, so these have to name the style
   attribute and the wrapper to get ahead of it — the same specificity fight as
   the two text lines above. Its margins are zeroed rather than worked around,
   so the measurement here is the whole of the answer.

   The mockup has no slide counter, so Salient's goes. */
.envevo-testimonials .testimonial_slider .controls {
  display: none;
}
.envevo-testimonials .testimonial_slider[data-style="minimal"] .testimonial-next-prev .prev,
.envevo-testimonials .testimonial_slider[data-style="minimal"] .testimonial-next-prev .next {
  width: 44px;
  height: 44px;
  margin: 0;
}
.envevo-testimonials .testimonial_slider[data-style="minimal"] .testimonial-next-prev .prev {
  left: calc(50% - 384px);
  right: auto;
}
.envevo-testimonials .testimonial_slider[data-style="minimal"] .testimonial-next-prev .next {
  left: auto;
  right: calc(50% - 384px);
}
/* Below the width where the card and its two gutters still fit, the arrows
   come back inside the row's own edges. */
@media (max-width: 860px) {
  .envevo-testimonials .testimonial_slider[data-style="minimal"] .testimonial-next-prev .prev {
    left: 0;
  }
  .envevo-testimonials .testimonial_slider[data-style="minimal"] .testimonial-next-prev .next {
    right: 0;
  }
}