/* ==========================================================================
   BASE

   The pieces used on more than one page. This file loads everywhere, so
   anything in it is downloaded on every page of the site. Keep it to what is
   genuinely shared: widths, buttons, the page head, forms, the grid.

   Anything belonging to one surface goes in that surface's own file. Anything
   copied into two surface files belongs in here instead, because one copy will
   get fixed one day and the other will not.

   The design values are in style.css. Never write a raw colour or size below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page width

   Three widths, and every page is exactly one of them. Which one a page gets is
   decided in inc/page-head.php, in one list, and arrives here as a body class.

     full     a grid, a filter column, or pictures that run edge to edge
     default  the normal page
     narrow   a form, or a column of text somebody has to read

   Chad, 19 August: a form or a column of text at full width is simply hard to
   read. Only a page carrying a grid or a band of pictures needs the full width.
   -------------------------------------------------------------------------- */

.nex-width-full .site-content .container   { max-width: var(--width-full); }
.nex-width-default .site-content .container { max-width: var(--width-default); }
.nex-width-narrow .site-content .container  { max-width: var(--width-narrow); }

/* --------------------------------------------------------------------------
   2. Pages that paint their own bands

   The parent theme adds padding around the content on every page. On a page
   built edge to edge from the design that shows up as a gap between the header
   and the picture below it. One class, one rule, rather than a set of "remove
   the padding" selectors repeated in three stylesheets, each having to name
   every page type and each quietly going wrong the day one is added.
   -------------------------------------------------------------------------- */

/* GeneratePress puts the width limit on a different element depending on which
   container setting it is using: #page when it is on "separate containers",
   .site-content > .container when it is not. Both are named here so the rule
   holds whichever way the parent theme is set, rather than working today and
   quietly failing the day somebody changes that setting. */
/* The design's page is white. The parent theme's own default is a pale grey,
   which showed as a grey border around any picture that runs edge to edge. Set
   here as well as in inc/defaults.php, because colour is a design value rather
   than something the client changes, so it should not depend on what the
   Customizer happens to have saved. */
body,
.nex-full-layout #page {
    background-color: var(--page);
}

/* BODY TEXT IS SET HERE, NOT LEFT TO THE PARENT THEME.

   The Figma export gives body copy as 18px on a 1.6 line height with a little
   letter spacing, and the site was running at the parent theme's own default,
   which is smaller. Measured against the design exports the paragraphs came
   out about a tenth short, which is exactly the difference.

   Only body copy moves. Every heading was already within a pixel or two of the
   export and none of them are touched, which is why this sets the one value
   rather than scaling the whole page up. */
body {
    font-size: var(--size-base);
    line-height: 1.6;
    letter-spacing: 0.03em;
}

.nex-full-layout #page,
.nex-full-layout .site-content,
.nex-full-layout .site-content > .container {
    max-width: none;
    padding: 0;
    margin: 0;
}

.nex-full-layout .site-content > main,
.nex-full-layout .site-content > .container > main {
    width: 100%;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   3. The page head

   The breadcrumb and title on any page that has not got a design of its own.
   It sits inside the content rather than in a band of its own: the header and
   the announcement bar are already tall, and a third band pushes the actual
   content a long way down the screen. Chad rejected the separate band on
   19 August for exactly that reason.

   The spacing below the breadcrumb matches the product page's, so a customer
   moving between the two does not see the content jump.
   -------------------------------------------------------------------------- */

.nex-page-head {
    padding-block: var(--space-6) var(--space-4);
}

.nex-breadcrumb {
    font-size: var(--size-sm);
    color: var(--ink-soft);
    margin-bottom: var(--space-3);
}

.nex-breadcrumb a {
    color: var(--ink-soft);
    text-decoration: none;
}

.nex-breadcrumb a:hover,
.nex-breadcrumb a:focus-visible {
    color: var(--brand);
    text-decoration: underline;
}

.nex-breadcrumb__sep {
    color: var(--line);
    margin-inline: var(--space-1);
}

/* Deliberately restrained. WordPress's own heading on the basket and the
   account is enormous, and on a page that is mostly a table or a form the
   heading should not be the loudest thing on it. */
.nex-page-head__title {
    font-size: var(--size-2xl);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    margin: 0;
}

/* The plain pages open with the breadcrumb, which carries its own spacing. The
   theme's padding above it comes off, or the two are added together and the
   trail sits a long way below the header on one kind of page and tight under it
   on another. */
.nex-plain-page .site-content {
    padding-top: 0;
}

/* --------------------------------------------------------------------------
   4. Corners

   ONE ROUNDING FOR EVERYTHING. Buttons, cards, badges, form fields, tick boxes
   and paging all take the same value. Picture tiles are the deliberate
   exception and take the large one.

   Set here rather than per component, because a rounding that is on some things
   and not others gets noticed immediately and then takes several passes to make
   consistent. It did on Vibe Vision, on 12 August.
   -------------------------------------------------------------------------- */

button,
input,
select,
textarea,
.button,
.nex-button,
.wp-block-button__link,
.nex-card,
.nex-badge,
.nex-panel {
    border-radius: var(--radius);
}

.nex-tile,
.nex-tile img {
    border-radius: var(--radius-large);
}

/* --------------------------------------------------------------------------
   5. Forms

   Fields and their button read as one piece rather than as two things that
   happen to be next to each other. Chad, 19 August, on the newsletter sign-up:
   the field's rounding was larger than the button's and it looked wrong even
   though both were individually fine.
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    background: var(--page);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--size-base);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-color: var(--brand);
}

/* --------------------------------------------------------------------------
   6. Buttons

   Every state (hover, focus, the moment right after a click) is spelled out
   for each variant, rather than relying on the base declaration to carry
   through. GeneratePress prints its own site-wide "a:hover, a:focus, a:active"
   colour rule, which is slightly more specific than a plain ".nex-button"
   class on its own, so without this a button's background stayed right but
   its text could flip to GeneratePress's link colour after a click. Chad,
   31 August, on Talk to us: closing the popup left it black text on a dark
   button.
   -------------------------------------------------------------------------- */

.nex-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--brand);
    color: var(--page);
    font-weight: var(--weight-medium);
    text-decoration: none;
    border: 1px solid var(--brand);
    cursor: pointer;
}

.nex-button:hover,
.nex-button:focus,
.nex-button:focus-visible,
.nex-button:active {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: var(--page);
}

.nex-button--quiet {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}

/* A quiet button still has to be findable. Chad, 18 August: the secondary
   buttons on the product page were disappearing into the page. */
.nex-button--quiet:hover,
.nex-button--quiet:focus,
.nex-button--quiet:focus-visible,
.nex-button--quiet:active {
    background: var(--panel);
    color: var(--ink);
    border-color: var(--ink);
}

/* The design's own three. Every button in it is a full pill, which is why
   --radius is 999px rather than a few pixels.

     (default)  the dark brand fill, e.g. Talk to us
     --accent   the coral fill, which is the primary action nearly everywhere
     --ghost    an outline on a dark picture, e.g. Download the company profile */

.nex-button--accent {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--page);
}

.nex-button--accent:hover,
.nex-button--accent:focus,
.nex-button--accent:focus-visible,
.nex-button--accent:active {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--page);
}

.nex-button--ghost {
    background: transparent;
    border-color: var(--page);
    color: var(--page);
}

.nex-button--ghost:hover,
.nex-button--ghost:focus,
.nex-button--ghost:focus-visible,
.nex-button--ghost:active {
    background: var(--page);
    border-color: var(--page);
    color: var(--brand);
}

/* --------------------------------------------------------------------------
   6.5. Smooth scrolling

   Every link on the site that points at a #section on the page it is already
   on glides there rather than jumping. Somebody who has asked their device for
   less motion gets the jump back, in the reduced-motion rule below.
   -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   7. Accessibility

   Never remove a focus outline without replacing it. Somebody using a keyboard
   needs to be able to see where they are.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   8. The contact popup

   Every "talk to us" style button on the site opens this rather than sending
   somebody to a page. The page behind it blurs, which is the same glass
   material as the header pill (see --glass-bg in style.css), and the card
   itself sits on its own lighter glass so the form stays easy to read.

   Printed once, from inc/header.php, so it exists on every page the header
   does rather than being rebuilt per surface.
   -------------------------------------------------------------------------- */

.nex-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: rgba(0, 62, 78, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
}

.nex-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Chad, 31 August: the frosted blur belongs to the page behind the popup, not
   the card itself. The overlay above does that job. The card is a plain solid
   white panel sitting on top of it, so the form stays easy to read. */
.nex-modal {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100svh - var(--space-12));
    overflow-y: auto;
    padding: var(--space-12) var(--space-8) var(--space-8);
    border-radius: var(--radius-large);
    background: var(--page);
    box-shadow: var(--shadow-lifted);
    transform: translateY(12px);
    transition: transform 0.2s ease;
}

.nex-modal-overlay.is-open .nex-modal {
    transform: translateY(0);
}

.nex-modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

/* Same GeneratePress collision as the buttons above, on a plain <button> this
   time rather than an <a>: its own hover/focus colour rule for buttons is more
   specific than our unconditional ".nex-modal-close" one, and we were not
   restating the colour here to defend it, so hovering the close button turned
   its icon a pale, near-invisible white. Chad, 31 August. */
.nex-modal-close:hover,
.nex-modal-close:focus,
.nex-modal-close:focus-visible,
.nex-modal-close:active {
    background: var(--band);
    color: var(--ink);
}

.nex-modal-close svg {
    width: 18px;
    height: 18px;
}

.nex-modal-heading {
    margin: 0 0 var(--space-2);
    color: var(--brand);
    font-family: var(--font-display);
    font-size: var(--size-2xl);
    font-weight: var(--weight-normal);
}

.nex-modal-intro {
    margin: 0 0 var(--space-6);
    color: var(--ink);
    line-height: 1.6;
}

.nex-modal-field {
    margin-bottom: var(--space-4);
}

.nex-modal-field label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--ink);
    font-size: var(--size-sm);
    font-weight: var(--weight-medium);
}

/* The site-wide rule in Corners, above, rounds every field into a full pill,
   which is right for a single short field next to a button but stretches a
   tall textarea into an odd capsule shape. This form is stacked fields with a
   label above each, not that pairing, so it takes the same normal rounding as
   a card instead. */
.nex-modal-field input,
.nex-modal-field textarea {
    border-radius: var(--radius-large);
}

.nex-modal-field textarea {
    resize: vertical;
    min-height: 100px;
}

/* The honeypot. Left in the form for a bot to fill in and hidden from
   everybody else, including a screen reader. */
.nex-modal-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.nex-modal-submit {
    width: 100%;
    margin-top: var(--space-2);
}

.nex-modal-note {
    margin: var(--space-4) 0 0;
    color: var(--ink-soft);
    font-size: var(--size-xs);
    line-height: 1.6;
}

.nex-modal-note.is-error {
    color: var(--error);
}

/* The thank you state replaces the form rather than sitting below it, so
   there is nothing left to accidentally submit twice. */
.nex-modal-success {
    display: none;
    text-align: center;
    padding: var(--space-8) 0;
}

.nex-modal.is-sent .nex-modal-form {
    display: none;
}

.nex-modal.is-sent .nex-modal-success {
    display: block;
}

.nex-modal-success h3 {
    margin: 0 0 var(--space-2);
    color: var(--brand);
    font-weight: var(--weight-normal);
}

.nex-modal-success p {
    margin: 0;
    color: var(--ink);
}

@media (max-width: 600px) {
    .nex-modal {
        padding: var(--space-8) var(--space-6) var(--space-6);
    }
}


/* ==========================================================================
   THE PAGE FURNITURE BELOW

   Everything from here down was written for the home page and then moved here
   on 3 September, when About Nexeva, Meet The Team and Contact Us turned out
   to need the identical bands, headings, cards and closing panel.

   It lives in base.css rather than being copied into four surface files
   because a rule copied into two files is a bug waiting to happen: one copy
   always gets fixed and the other does not. The rule is at the top of this
   file and this is it being followed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   9. Sections and bands

   Every section on every page is a band: full width, its own background, with
   the wording held to the same column the hero uses so the whole page shares
   one left edge.
   -------------------------------------------------------------------------- */

/* Half the gap above and half below, so two plain sections meeting add up to one
   gap rather than two. See --space-band in style.css for where the number came
   from.

   Chad, 31 August: the gap between the What Sets Us Apart button and The
   partners we represent was about twice what the design shows. It was, because
   every section was carrying a whole gap on each side. */
.nex-band {
    padding-block: var(--space-band);
}

/* THE PAGE COLUMN. One width, one place, and everything that has to line up
   down the left hand edge of the page uses it: the header, the hero, an inner
   page's title panel, every band, and the footer.

   Chad, 3 September: the title on an inner page was lining up with the logo
   rather than with the page below it, because the header was on a wider column
   than everything else. Four files each declaring their own width is exactly
   how that happens, so they no longer do. Change the width here and the whole
   page moves together.

   The backgrounds are deliberately NOT on this column: the hero picture and the
   pale bands are separate elements that still run the full width of the window,
   so nothing gets cropped.

   THE HEADER IS DELIBERATELY NOT ON THIS COLUMN. Chad, 3 September, having seen
   it both ways: the header belongs to the picture panel it floats over, not to
   the column of words below it, so it runs the full width of that panel with a
   margin of its own. Its width is in header.css and that is the only thing on
   the site allowed to set its own. Do not "fix" it back into this list.

   Chad, 31 August: the four Why Nexeva cards were reading far too wide, which
   is why the column is 1400 and not the 1694 the design's own gutter implies. */
.nex-col,
.nex-hero-inner,
.nex-pagehero-inner,
.nex-footer-inner {
    width: min(100% - (var(--space-8) * 2), var(--width-default));
    margin-inline: auto;
}

/* One section on the About page, Leadership, is drawn narrower than everything
   else. Measured off the design: it comes to about four fifths of the column.
   It is a modifier rather than its own width so it still sits on the same
   centre line and still shrinks with everything else on a small screen. */
.nex-col--narrow {
    width: min(100% - (var(--space-8) * 2), calc(var(--width-default) * 0.81));
}

/* A band with a background of its own is a boundary in its own right, so it
   keeps a full gap outside it as well as inside. Without the margin the coloured
   edge lands too close to the section above it. */
.nex-band--filled {
    margin-block: var(--space-band);
    padding-block: calc(var(--space-band) * 2);
}

/* Chad, 3 September: the last thing on a page must not add space below itself
   as well. The gap between whatever ends a page and the footer is the design's
   own card to card spacing, and the footer sets it once for every page. Without
   this, Meet The Team ended on a band that added its own gap on top and the
   footer sat three times further down than on the other pages. */
#nex-main > :last-child {
    margin-bottom: 0;
}

/* The pale mint band behind What we do runs right to the edges of the window
   with square corners, which is how the design draws it. The inset rounded
   treatment further down the page belongs to the numbers band, not this one. */
.nex-band--tint {
    background: var(--band);
}

/* The numbers band is the inset one: it sits in from the edge on the same gutter
   as the hero picture, with the same rounding, on a gradient that lifts towards
   the top right. */
/* Chad, 31 August: this floating panel and the one Let's Talk uses should carry
   the same inset on every side, not the wider gap the general band spacing
   uses top and bottom. Overrides the margin ".nex-band--filled" sets above.

   Chad, 3 September: the space above and below it is the card gap, not the
   gutter. On the home page these panels stack, and with the gutter here and
   the card gap on the footer the three gaps down the bottom of that page were
   all different sizes. Every gap between two of these floating panels is now
   the same number, whatever the design happens to draw on a given page. */
.nex-band--panel {
    margin-block: var(--card-gap);
    margin-inline: var(--gutter-bleed);
    border-radius: var(--radius-large);
    background: linear-gradient(45deg, var(--band-pale) 0%, var(--band-deep) 100%);
}

.nex-centre {
    display: flex;
    justify-content: center;
    margin-top: var(--space-12);
}

/* --------------------------------------------------------------------------
   10. Section headings

   The small coral label, then the heading itself. Every heading on the site
   runs from the dark brand colour on the left into the light one on the right.
   Done as a gradient poured through the letters rather than by splitting the
   words into coloured spans, so the wording stays one editable string.
   -------------------------------------------------------------------------- */

/* 20px, not 12. The design sets the little coral line above a heading at the
   same size as a small heading, which is a good deal larger than it reads as a
   caption. Measured off the design and confirmed by the Figma token file, which
   has it at 20 with two pixels of letter spacing. */
.nex-kicker {
    margin: 0 0 var(--space-6);
    color: var(--accent);
    font-size: var(--size-lg);
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.nex-kicker--centred {
    text-align: center;
}

.nex-heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--size-3xl);
    font-weight: var(--weight-normal);
    line-height: 1.16;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-light) 78%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.nex-heading--centred {
    text-align: center;
    max-width: 17em;
    margin-inline: auto;
}

/* The What we do heading is a sentence rather than a title, so it is set smaller
   and allowed to run wider. Both numbers are measured off the design, where the
   sentence is set at 30px across 1125px, which is what lands it on three lines
   breaking after "OEM" and after "delivers". */
.nex-heading--lead {
    font-size: var(--size-lead);
    max-width: 34em;
}

.nex-lede {
    max-width: 62ch;
    margin: var(--space-8) auto 0;
    color: var(--ink);
    text-align: center;
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   11. The two column split

   Heading on the left, paragraph and button on the right.
   -------------------------------------------------------------------------- */

.nex-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}

/* The heading takes the whole of its half of the split rather than being held
   in narrower than the column it sits in.

   Chad, 3 September, on About Nexeva: held in at 14.5em the About heading fell
   onto four lines with a ragged edge, in a column that had room for three.
   There is no reason to set a width here at all: the column is already the
   width, and holding it in again only breaks the wording early. */
.nex-split .nex-heading {
    max-width: none;
    /* With the width off, the browser fills each line to the end and leaves
       whatever is left over on the last one, which on the home page left a
       heading reading "partner, not / just a distributor." This asks it to
       even the lines up instead, so the wording breaks where a person would
       break it. An older browser that does not know the word ignores it and
       gets the ordinary breaks, which is no worse than before. */
    text-wrap: balance;
}

.nex-split-body p {
    margin: 0 0 var(--space-8);
    line-height: 1.7;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   12. The cards

   The first is filled with the brand gradient, the rest are white and separated
   by a shadow rather than a border, which is what the design shows.
   -------------------------------------------------------------------------- */

.nex-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-12);
}

/* All four cards are the same card. On hover it fills with the brand gradient,
   which is what the design's own export showed permanently on the first one,
   more likely a Figma component caught mid-hover than an intended static
   difference. See the comment above the $reasons array in front-page.php.

   Chad, 31 August: the fade needs to be smooth, not a snap. A browser cannot
   fade a plain colour into a gradient no matter what transition is set on it,
   they are two different kinds of value, so the gradient is a separate layer
   sitting behind the white card that fades in on its own opacity instead,
   which is something a browser can animate smoothly. */
.nex-card {
    position: relative;
    isolation: isolate;
    padding: var(--space-8);
    border-radius: var(--radius-large);
    background: var(--panel);
    box-shadow: var(--shadow-lifted);
}

.nex-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(100deg, var(--brand) 0%, var(--brand-light) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.nex-card:hover::before {
    opacity: 1;
}

.nex-card h3 {
    margin: 0 0 var(--space-4);
    color: var(--accent);
    font-size: var(--size-lg);
    font-weight: var(--weight-normal);
    transition: color 0.35s ease;
}

.nex-card p {
    margin: 0;
    color: var(--ink);
    line-height: 1.7;
    font-size: var(--size-sm);
    transition: color 0.35s ease;
}

.nex-card:hover h3,
.nex-card:hover p {
    color: var(--page);
}


/* --------------------------------------------------------------------------
   13. The closing call to action band

   A rounded picture panel like the hero, inset on the same gutter, but the
   wording sits centred over an even wash rather than to one side, which is how
   the design draws this one.

   Chad, 31 August: the same inset on all four sides, matching the numbers
   panel above it, rather than the wider top and bottom gap most sections use.
   -------------------------------------------------------------------------- */

/* Chad, 1 September: margin-bottom is 0 here, not the gutter, because the
   footer sets its own top margin of the same amount right below it. Two
   gutters back to back read as double the gap everywhere else on the page.

   Chad, 3 September: the top margin is the card gap, so the space above this
   panel matches the space below it and the space above the footer. */
/* The brand gradient sits behind the picture, not instead of it. On a page
   whose photograph has not been supplied yet the panel still reads as designed
   and the white wording on it is still legible, which a panel with no
   background at all is not: it comes out as an empty white gap. */
.nex-cta {
    position: relative;
    background: linear-gradient(100deg, var(--brand) 0%, var(--brand-light) 100%);
    margin: var(--card-gap) var(--gutter-bleed) 0;
    padding: var(--space-24) var(--space-8);
    border-radius: var(--radius-large);
    overflow: hidden;
    display: flex;
    justify-content: center;
    isolation: isolate;
}

.nex-cta-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

/* THE WASH ON THIS ONE IS PART OF THE PICTURE, NOT PART OF THE CSS.

   The designer exports this panel with the coral to teal wash already burnt
   into the file, so anything added here lands on top of a wash that is already
   there and the result comes out far darker than the design. Chad, 3
   September, on exactly that.

   All this layer does now is take the very top off the brightest areas so the
   white wording keeps its contrast wherever the picture happens to be pale.
   If a future picture arrives clean, with no wash on it, put the wash in the
   picture rather than raising this number. */
.nex-cta-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 50, 62, 0.12);
}

.nex-cta-inner {
    position: relative;
    width: min(100%, 46em);
    text-align: center;
    color: var(--page);
}

/* 48, the same as a page's opening heading rather than a section heading.
   This one closes the page and the design sets it larger to match. */
.nex-cta-heading {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display);
    font-size: var(--size-4xl);
    font-weight: var(--weight-normal);
}

.nex-cta-body {
    margin: 0 0 var(--space-8);
    line-height: 1.7;
}

.nex-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

@media (max-width: 1200px) {
    .nex-cta {
        padding: var(--space-16) var(--space-6);
    }
}


/* --------------------------------------------------------------------------
   14. The shared furniture on smaller screens

   One breakpoint for all of it, so a band, a heading and a card never disagree
   about where a phone starts.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .nex-band {
        padding-block: var(--space-16);
    }

    .nex-col,
    .nex-hero-inner,
    .nex-pagehero-inner,
    .nex-footer-inner {
        width: min(100% - (var(--space-6) * 2), var(--width-default));
    }

    /* Narrowing a section is a wide screen idea. Once the column is the width
       of the screen there is nothing left to give away. */
    .nex-col--narrow {
        width: min(100% - (var(--space-6) * 2), var(--width-default));
    }

    .nex-split,
    .nex-cards {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    /* The heading sizes themselves are not set here any more. Chad,
       3 September: doing it heading by heading is exactly why half of them
       were still full size on a phone. The whole type scale comes down in
       style.css instead, so every heading follows without being named. */
    .nex-heading--centred,
    .nex-split .nex-heading {
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   15. The picture panel an inner page opens with

   The same treatment as the home page's hero: a wide photograph inset on the
   gutter, rounded, with the floating header sitting over it. Shorter, and it
   carries one line of wording at the bottom left rather than a heading, a
   paragraph and buttons.

   The wording sits on the picture, so it needs a wash behind it. The wash is
   strongest at the bottom left where the words actually are and clears
   entirely at the top right, which keeps the photograph readable.
   -------------------------------------------------------------------------- */

.nex-pagehero {
    position: relative;
    margin: var(--gutter-bleed) var(--gutter-bleed) 0;
    border-radius: var(--radius-large);
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 480px;
}

.nex-pagehero-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
}

/* Two washes, doing two different jobs.

   THE TOP ONE IS FOR THE LOGO AND THE MENU. Chad, 3 September, on Meet The Team
   on a phone: the logo had disappeared into a bright window in the photograph.
   The frosted pill behind the menu protects the menu but nothing was protecting
   the logo, and which photograph a page opens on is the client's to change
   later, so the header cannot depend on the one that happens to be there today.
   It is strongest at the very top and gone by a third of the way down, so it
   sits behind the header and nothing else.

   THE BOTTOM ONE IS FOR THE WORDING, and is measured off the design rather
   than guessed. The design puts the white wording straight onto the photograph
   with no wash at all, so this is the least that keeps it readable if a future
   photograph happens to be pale in the bottom left corner. Chad, 3 September:
   do not raise these numbers to fix a legibility problem on one photograph.
   Crop or change that photograph instead. */
.nex-pagehero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0, 50, 62, 0.55) 0%,
            rgba(0, 50, 62, 0.22) 16%,
            rgba(0, 50, 62, 0) 34%
        ),
        linear-gradient(
            30deg,
            rgba(0, 50, 62, 0.30) 0%,
            rgba(0, 50, 62, 0.10) 40%,
            rgba(0, 50, 62, 0) 70%
        );
}

/* The picture has not been supplied yet. The brand gradient stands in, so the
   page reads as designed rather than as broken, and the wording keeps the same
   contrast it will have once the photograph lands. */
.nex-pagehero--nopicture {
    background: linear-gradient(100deg, var(--brand) 0%, var(--brand-light) 100%);
}

/* The indenting is the page column's job, above. This only decides how much
   room there is above and below the wording. */
.nex-pagehero-inner {
    position: relative;
    padding: var(--space-24) 0 var(--space-16);
}

/* The one heading on the page that is bigger than a section heading, at 48.

   Held to 768 across. Chad, 3 September, on About Nexeva: at its old width the
   wording ran the best part of a thousand pixels and the end of the first line
   landed across the woman's face. Narrower it stays over the quiet blurred
   half of the picture on all three inner pages, which is the standing rule
   about wording never crossing somebody's face. It costs a third line on the
   longest of the three headings, which is no loss at this size. */
.nex-pagehero-heading {
    margin: 0;
    max-width: 16em;
    color: var(--page);
    font-family: var(--font-display);
    font-size: var(--size-4xl);
    font-weight: var(--weight-normal);
    line-height: 1.16;
}

@media (max-width: 1200px) {
    .nex-pagehero {
        min-height: 340px;
    }

    .nex-pagehero-inner {
        padding: var(--space-24) 0 var(--space-12);
    }

    /* The wording keeps to the left hand side from here down, so whoever is in
       the photograph has the other side to themselves. Chad, 3 September: a
       long heading ran straight across a face, and that is never what we
       want. Each page's own focal point, below, is what moves the subject
       into the space this leaves. */
    .nex-pagehero-heading {
        max-width: 58%;
    }

    /* Same reason as the home page's hero: a wide photograph in a tall narrow
       panel loses both its sides, and on these the subject is not in the
       middle. Each page sets its own focal point next to the picture it
       belongs to. */
    .nex-pagehero-media {
        background-position: var(--focus, center) center;
    }
}

/* Chad, 3 September: on a phone the opening line was still running to six
   lines and filling most of the screen before you had read anything. A step
   smaller again, and the panel comes down with it so the wording keeps the
   same amount of room around it.

   Chad, again, on About Nexeva: a long line at that size ran clean across the
   woman's face. Whoever is in the photograph is the point of it, so the
   wording is now held to the left hand two thirds and the panel keeps a clear
   band across the top. Between them there is always somewhere for a face to
   be. This is a rule rather than a fix for one picture, because Nexeva change
   these photographs themselves. */
@media (max-width: 700px) {
    .nex-pagehero {
        min-height: 300px;
    }

    .nex-pagehero-inner {
        padding: calc(var(--space-24) + var(--space-6)) 0 var(--space-8);
    }

    /* The one heading that keeps a size of its own rather than taking the
       scale's. It is the only heading on the site squeezed into two thirds of
       the width so it stays off a face, and at the scale's own size a long one
       came out eight lines deep and filled the whole panel. */
    .nex-pagehero-heading {
        max-width: 62%;
        font-size: var(--size-lg);
        line-height: 1.3;
    }
}

/* --------------------------------------------------------------------------
   16. A heading that is a name rather than a sentence

   Most headings on the site run from the dark brand colour into the light one.
   A one or two word heading sitting over a section, "Our Team", "Commercial",
   is too short for a gradient to read as anything but a smudge, so those are
   set in the flat brand colour instead. The design does the same.
   -------------------------------------------------------------------------- */

.nex-heading--plain {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--brand);
}

/* --------------------------------------------------------------------------
   17. A link that reads as a link

   The underlined coral "View more" the design uses inside a card, where a
   button would be too heavy.
   -------------------------------------------------------------------------- */

.nex-textlink {
    display: inline-block;
    color: var(--accent);
    font-size: var(--size-sm);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nex-textlink:hover,
.nex-textlink:focus,
.nex-textlink:focus-visible {
    color: var(--brand);
}

/* --------------------------------------------------------------------------
   18. A list somebody reads

   The small round bullets the design uses, rather than the browser's own.
   -------------------------------------------------------------------------- */

.nex-list {
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
}

.nex-list li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-3);
    color: var(--ink);
    line-height: 1.7;
    font-size: var(--size-sm);
}

.nex-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--brand-light);
}

/* --------------------------------------------------------------------------
   19. A person's card

   Used on About Nexeva for Simon and on Meet The Team for everybody. One card,
   defined once, because the design draws the same one in both places.

   The photograph fills the card and the name sits over the bottom of it under a
   wash, so a card with a busy background still reads. The card is a fixed
   shape rather than the photograph's own, because a grid of portraits at
   whatever proportions each was cropped to looks like an accident.
   -------------------------------------------------------------------------- */

.nex-person {
    position: relative;
    margin: 0;
    border-radius: var(--radius-large);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--band-deep);
    isolation: isolate;
}

.nex-person-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The wash under the name. On the card itself rather than on the photograph, so
   the placeholder silhouette gets it too. */
.nex-person::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    /* 0.36, taken off the design by comparing the card's own colour at the top
       of the wash with its colour at the bottom. It used to be 0.72, which is
       twice as dark as drawn. */
    background: linear-gradient(180deg, rgba(0, 62, 78, 0) 0%, rgba(0, 50, 62, 0.36) 100%);
}

.nex-person-caption {
    position: absolute;
    left: var(--space-6);
    right: calc(var(--space-6) + 48px);
    bottom: var(--space-6);
    z-index: 1;
    color: var(--page);
}

.nex-person-name {
    display: block;
    font-size: var(--size-lg);
    line-height: 1.25;
}

.nex-person-role {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--size-xs);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    opacity: 0.85;
}

.nex-person-linkedin {
    position: absolute;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: var(--page);
}

.nex-person-linkedin svg {
    width: 18px;
    height: 18px;
}

.nex-person-linkedin:hover,
.nex-person-linkedin:focus,
.nex-person-linkedin:focus-visible {
    background: var(--page);
    color: var(--brand);
}

@media (max-width: 700px) {
    .nex-person-caption {
        left: var(--space-4);
        right: calc(var(--space-4) + 44px);
        bottom: var(--space-4);
    }

    .nex-person-linkedin {
        right: var(--space-4);
        bottom: var(--space-4);
        width: 34px;
        height: 34px;
    }
}