/***Smith+Nephew brand bar: row above the main nav, overlaying the hero *******/

/* Single source of truth. Both logos size themselves off the bar height, so
   changing --brand-bar-height per breakpoint scales the whole row at once. */
:root {
    --brand-bar-height: 72px;
    --brand-bar-gutter: 14px;
}

body main .cmn-banner {background-color: transparent; padding-bottom: 90px;}
.cmn-banner .title {text-transform: none;}
nav ol.breadcrumb {display: none;}
.brand-bar {padding-top: 12px;}

/* Promote the fixed/overlay behavior from .primary-navbar up to .header so the
   brand bar and the nav overlay the hero as one unit. main.min.css has no
   .header rule, so this is purely additive. */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
}

/* Was position:fixed;top:0;z-index:999 in main.min.css — .header owns that now. */
.header .primary-navbar {
    position: static;
}

.brand-bar {
    height: var(--brand-bar-height);
    display: flex;
    align-items: center;
}

/* Site logo left, Smith+Nephew wordmark right. */
.brand-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Cap both marks by the bar height instead of giving each a fixed pixel height:
   they stay vertically centred and can never overflow the row. width:auto lets
   the browser preserve each aspect ratio against the max-* constraints. */
.brand-bar__site-logo img,
.brand-bar__logo {
    max-height: calc(var(--brand-bar-height) - (var(--brand-bar-gutter) * 2));
    width: auto;
}

.brand-bar__site-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* The wordmark is 341x79 — far wider than tall. On narrow screens cap it by
   width too, so it gives way to the site logo instead of crowding it. */
.brand-bar__logo {
    /*max-width: 45%;*/
}

/* main.js adds .navbar-active to .primary-navbar past 100px of scroll, painting
   it black. Match the brand bar so the stuck header reads as one solid block
   instead of a black nav under a transparent strip. */
.header:has(.primary-navbar.navbar-active) .brand-bar {
    background-color: var(--black);
}

/* The site logo moved out of .navbar, leaving [menu, options]. Anchor them to
   the right edge: below 1200px main.min.css sets .navbar__menu to display:none,
   and the lone .navbar__options would otherwise drift left under space-between. */
.primary-navbar .navbar {
    justify-content: flex-end;
}

/* Left-align the menu items so they line up with the site logo now sitting
   above them. main.min.css used flex-end to seat them beside the old inline logo. */
.primary-navbar .navbar__menu > ul {
    justify-content: flex-start;
}

/* Clear the taller header. Base padding-top in main.min.css: .banner-two 260px,
   .cmn-banner 210px. */
.banner-two {
    padding-top: calc(260px + var(--brand-bar-height));
}

.cmn-banner {
    padding-top: calc(210px + var(--brand-bar-height));
}

/* main.min.css drops these to 180px / 160px here. This block must stay below
   the rules above: media queries add no specificity, so source order decides. */
@media only screen and (max-width: 991.98px) {
    .banner-two {
        padding-top: calc(180px + var(--brand-bar-height));
    }

    .cmn-banner {
        padding-top: calc(160px + var(--brand-bar-height));
    }
}

/* Tablet: shrink the bar (and with it both logos, via the calc above). */
@media only screen and (max-width: 767.98px) {
    :root {
        --brand-bar-height: 56px;
        --brand-bar-gutter: 10px;
    }
}

/* Phone: two wide marks in one row is the tight case — 126x40 site logo plus
   341x79 wordmark. At 32px tall they need ~240px, which clears a 320px viewport
   once the container gutters are subtracted. */
@media only screen and (max-width: 575.98px) {
    :root {
        --brand-bar-height: 48px;
        --brand-bar-gutter: 8px;
    }

    .brand-bar__inner {
        gap: 12px;
    }
}
/************************END S+N LOGO BANNER **********************************/


.primary-navbar .navbar__dropdown-label::after {
    content: "" !important;
    border: none;
    transition: none !important;
    font-size: inherit;
    transform: none !important;
}


.field.field--name-field-paragraphs.field--type-entity-reference-revisions.field--label-above .field__label {display: none;}
.blog-main .blog-main__single .meta__left{align-items: baseline !important;}

.blog-main .pagination a {
    width: 80px !important;
    height: 80px !important;
}

/* custom.css — targets only the home page */
.path-frontpage .node__content { margin-top: 0; }


/***** Editorial copy sections ***********************************************/

/* One base class shared by every centred orange-title + white-body section,
   plus a modifier per backdrop. Editors type both into the paragraph's CSS
   class field, e.g. "copy-section copy-section--mesh".
   Point sizes from the client spec convert at 96dpi (1pt = 1.333px) and are
   used as the desktop ceiling inside clamp(). --copy-title-max is the only
   thing most modifiers need to change. */
.copy-section {
    --copy-title-max: 48px;   /* 36pt */
    --copy-body-max: 27px;    /* 20pt */
    position: relative;
    padding: clamp(60px, 7vw, 120px) 0 clamp(48px, 5vw, 80px);
    text-align: center;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

/* Element selectors, not classes: this markup comes out of the editor's
   CKEditor body, where they pick Heading 2 / Paragraph / Heading 3 / Heading 4
   from the format dropdown. main.min.css sets margin:0 on every heading and p,
   so all vertical rhythm has to be declared here. */

/* Smith+Nephew "+" symbol. plugins.js (section 27) swaps the literal leading
   "+" in every .copy-section h2 for <span class="sn-plus"> and, on desktop,
   feeds it into the title stagger as the first item. This rule skins it.

   Sized in em, so it tracks the heading font-size at every breakpoint with no
   per-breakpoint rule. background-color + mask means the symbol takes the
   title's own color (currentColor = var(--primary-color)); to use the exact
   brand orange instead, drop background-color/mask and set
   `background: url(../images/custom/sn-symbol.svg) center/contain no-repeat`. */
.copy-section h2 .sn-plus,
.tt-title .sn-plus,
.feature-section__title .sn-plus {
    display: inline-block;
    width: 0.82em;
    height: 0.82em;
    margin-right: 0.28em;
    vertical-align: -0.06em;   /* seat it on the text's optical centre — tune to taste */
    background-color: currentColor;
    -webkit-mask: url(../images/custom/sn-symbol.svg) center / contain no-repeat;
            mask: url(../images/custom/sn-symbol.svg) center / contain no-repeat;
}

/* Carousel section title ("+ System features"). Reuses the orange title colour
   and the animated S+N "+" so it matches the copy-section headings, but lives
   in the .tt-section band above the wheel. The symbol is em-based (rule above),
   so it scales with whatever size this title renders at. Nothing here touches
   the slider. */
.tt-section__head {
    text-align: center;
    padding-top: clamp(40px, 7vw, 120px);
}
.tt-title {
    color: var(--primary-color);
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.3;
    font-weight: 400;
    margin: 0 auto;
    padding-bottom: 20px;
}

/* Orange title. */
.copy-section h2 {
    color: var(--primary-color);
    /*font-size: clamp(24px, 3.5vw, var(--copy-title-max));*/
    font-size: 2.9em;
    line-height: 1.3;
    font-weight: 400;
    /*max-width: 20em;*/
    margin: 0 auto;
}

/* White copy. */
.copy-section p {
    color: var(--white);
    font-size: clamp(16px, 1.7vw, var(--copy-body-max));
    line-height: 1.6;
    max-width: 90%;
    margin: clamp(20px, 2.5vw, 36px) auto 0;
}

/* Footnote markers such as *1,2 — zero line-height keeps the superscript from
   opening up the line it sits on. */
.copy-section sup {
    font-size: 0.55em;
    line-height: 0;
    vertical-align: super;
}

/* --- Modifier: mesh backdrop (first section) --- */
/* Body copy here is 18pt / 22pt line-height per the designer — slightly
   smaller than the 20pt base, with tighter leading. Setting the variable
   (rather than hardcoding font-size) keeps the responsive clamp: 18pt ceiling
   on desktop, easing to the shared 16px floor on narrow screens. */
.copy-section--mesh {
    --copy-body-max: 24px;   /* 18pt, down from the 27px/20pt base */
    background-color: #060b18;
    background-image: url(../images/custom/HomeMeshIntroBackdrop-med.jpg);
}

/* Leading is +2pt per the client: 22pt → 24pt at the 18pt body size, so the
   unitless ratio goes 22/18 (1.222) → 24/18 (1.333). Unitless keeps it a ratio
   of the font-size at every breakpoint. (Font size is unchanged — the earlier
   font-size bump was my mistake and is reverted.) */
.copy-section--mesh p {
    line-height: 1.333;
}

/* "INTRODUCING" — 20pt. The large top margin is what carries it down onto the
   mesh in the backdrop; text-indent offsets the trailing letter-space so the
   tracked-out line stays optically centred. */
.copy-section--mesh h3 {
    color: var(--white);
    font-size: clamp(15px, 1.7vw, 27px);
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-indent: 0.3em;
    margin: clamp(90px, 14vw, 220px) 0 0;
}

/* "THE TESSA SPATIAL SURGERY SYSTEM" — 30pt semi-bold (Inter 600 is loaded). */
.copy-section--mesh h4 {
    color: var(--white);
    font-size: clamp(20px, 2.6vw, 40px);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-indent: 0.12em;
    margin: clamp(10px, 1.2vw, 18px) 0 0;
}

/* --- Modifier: gradient backdrop ("The first step in Spatial Surgery") --- */
/* Titles here are 26pt. Body copy is 15pt / 19pt line-height per the designer
   (down from the 16pt it was). Variable keeps the responsive clamp. */
.copy-section--gradient {
    --copy-title-max: 35px;   /* 26pt */
    --copy-body-max: 20px;    /* 15pt, was 21px/16pt */
    background-color: #3b4e6d;
    background-image: linear-gradient(to bottom left, #3b4e6d 0%, #472d2f 100%);
}

/* Leading +2pt per the client: 19pt → 21pt at the 15pt body size → 21/15 = 1.4.
   Unitless so the leading tracks the font-size as the clamp scales it down. */
.copy-section--gradient p {
    line-height: 1.4;
}

section.ce-background-blocks { padding-top: 0px; padding-bottom: 60px;}
section.ce-background-blocks p { color: #FFF !important;}
section.ce-background-blocks .project-d-o__single p {color: #FFF; line-height: 1.3}
section.initial-searches-section {padding-bottom: 0px;}
section.section-inclusion-exclusion .criteria { gap: 20px;}
h2.section-title-block {padding-bottom: 20px; font-weight: normal;}
h3.h3-block-title {font-size: 20px; line-height: 30px; font-weight: normal;}

.section-title-block.conclusion {margin-left: -15px;}

section.section.feedback-s {padding: 50px 0px;}
section.section.feedback-s .content p {text-transform: none; line-height: 1.25;}

.project-d .project-d-o__single h5::before {
    content: "";   
    top: 0;
    left: 0;
    transform: none;
    width: 0;
    height: 0;
    border-radius: none;
    background-color: none;
}

.project-d .project-d-o__single h5 {padding-left: 0px;}

.project-d .project-d-o__single .thumb {background-color: transparent !important;}

 .transparent-card .content {
        max-width: 55%;
}

/***** END editorial copy sections *******************************************/


/***** Full-width video (video_section paragraph) ****************************/

/* Edge-to-edge band. Paragraph templates in this theme each supply their own
   .container when they want one, so a section with none spans the full width. */
.video-full {
    position: relative;
    width: 100%;
    background-color: #000;
}

/* Positioning context for the play overlay. */
.video-full__wrap {
    position: relative;
}

/* height:auto keeps the file's own aspect ratio rather than forcing 16:9 —
   nothing gets cropped or letterboxed whatever the source dimensions are.
   The poster attribute is drawn by the browser into this same box, so the
   still and the video are guaranteed to occupy identical space and nothing
   shifts when playback starts.
   display:block removes the inline-element baseline gap under the video. */
.video-full__player {
    display: block;
    width: 100%;
    height: auto;
}

/* Play overlay. The poster itself is clickable (handled in video-section.js),
   so this button is the affordance rather than the only hit target. */
.video-full__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: clamp(64px, 7vw, 96px);
    height: clamp(64px, 7vw, 96px);
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: clamp(20px, 2.2vw, 30px);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Optical centring: a play triangle's visual mass sits left of its glyph box,
   so nudge it right or it reads as off-centre inside the circle. */
.video-full__play i {
    transform: translateX(0.12em);
}

/* main.min.css has two global rules that hijack this on hover:
     a:hover, button:hover { color: var(--primary-color) }  → orange icon
     a:hover, button:hover { border: 0px }                  → ring removed
   Orange icon on an orange fill is invisible, so both have to be restated
   here. Dark icon on orange matches the theme's own .btn--secondary:hover. */
.video-full__play:hover {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: #000;
    transform: translate(-50%, -50%) scale(1.06);
}

.video-full__play:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* video-section.js adds .is-playing at first play, which also switches the
   native controls on — the overlay has to get out of their way. */
.video-full.is-playing .video-full__play {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .video-full__play {
        transition: none;
    }
    .video-full__play:hover {
        transform: translate(-50%, -50%);
    }
}
/***** END full-width video **************************************************/


/***** Global starfield body background **************************************/
/* Repeating star pattern behind the whole document. main.min.css already sets
   body { background-color: var(--theme-bg) } (black); this layers the tiling
   image over that base colour (kept as the fallback / letterbox).

   Longhand only, so the body padding and other props from main.min.css are
   untouched. Loaded via the global library, so it applies site-wide.

   The tile is 2000x2000 — at natural size the repeat is subtle (roughly one
   tile per desktop viewport). To make the tiling denser, add e.g.
   `background-size: 800px 800px;` (square keeps it seamless).

   background-attachment: fixed pins the pattern to the viewport, so it stays
   put while content scrolls over it (the "window into space" look). Body is not
   inside the transformed #smooth-content, so ScrollSmoother doesn't disturb the
   fixed positioning. Note: iOS Safari renders fixed backgrounds without true
   parallax and can be heavy — if mobile looks off, the fallback is to drop this
   line (back to scrolling) rather than fight it. */
body {
    background-color: var(--theme-bg);
    background-image: url(../images/custom/starrySky_RGB-patternMediumFaded.jpg);
    background-repeat: repeat;
    background-position: top center;
    background-attachment: fixed;
}
/***** END global starfield body background **********************************/


/***** "Designed around the surgeon" feature section *************************/
.feature-section {
    padding: clamp(40px, 6vw, 90px) 0;
}
.feature-section__head {
    text-align: center;
    margin-bottom: clamp(32px, 5vw, 64px);
}
/* Orange title with the animated S+N "+", matching the other section titles
   (see the .sn-plus rule and plugins.js section 27). */
.feature-section__title {
    color: var(--primary-color);
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.3;
    font-weight: 400;
    margin: 0 auto;
}

/* One block. Square corners; backdrop set inline from field_background_image.
   Two columns via flex; stacks on mobile. */
.feature-row {
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    padding: clamp(24px, 3.5vw, 56px);
    background-color: #12161f;      /* fallback behind the backdrop image */
    background-size: cover;
    background-position: center;
}

/* Space BETWEEN rows. Each row renders inside a field__item wrapper (from
   content.field_rows), so a margin-bottom on .feature-row misfires: :last-child
   matches every row because each is alone in its own field__item, which zeroed
   all the gaps. Put the spacing between the wrappers instead. */
.feature-section .field__item + .field__item {
    margin-top: clamp(28px, 4vw, 56px);
}

/* Per-row toggle: checked (field_video_first) puts the video on the LEFT on
   desktop. DOM order stays text-first for reading and the mobile stack;
   row-reverse only flips the desktop visual order. */
.feature-row--media-left {
    flex-direction: row-reverse;
}

.feature-row__text,
.feature-row__media {
    flex: 1 1 0;
    min-width: 0;
}

.feature-row__icon {
    display: block;
    width: clamp(120px, 15vw, 190px);
    height: auto;
    margin-bottom: clamp(16px, 2vw, 28px);
}

/* 20pt semibold teal, per the designer. */
.feature-row__title {
    color: #79cac1;
    font-size: clamp(20px, 2vw, 27px);
    line-height: 1.3;
    font-weight: 600;
    margin: 0 0 clamp(12px, 1.5vw, 20px);
}

/* 16pt white body. It comes from a Full HTML field, so it arrives <p>-wrapped;
   main.min.css sets p{font-size:16px;margin:0} directly on the element, which
   would beat an inherited size — so the body type is declared on the inner p
   too, and paragraph spacing is restored here. */
.feature-row__desc,
.feature-row__desc p {
    color: var(--white);
    font-size: clamp(16px, 1.7vw, 21px);
    line-height: 1.55;
}
.feature-row__desc p {
    margin: 0 0 1em;
}
.feature-row__desc p:last-child {
    margin-bottom: 0;
}
.feature-row__desc sup {
    font-size: 0.6em;
    line-height: 0;
    vertical-align: super;
}

/* Rounded video corners within the block. The radius + overflow:hidden go on
   the OUTER .feature-row__video box — that div is the .video-full element and
   carries a black background, so rounding only the inner wrap/<video> left the
   black square showing through at the corners. Clipping the outer box rounds
   the poster, the video, and the native controls together. Reuses .video-full
   + the xpovio/video-section behaviour. */
.feature-row__video {
    border-radius: 16px;
    overflow: hidden;
}

/* Tablet/mobile: stack. Both the default and the toggled row become plain
   `column` (never column-reverse), so the stack is always icon -> title ->
   text -> video regardless of the desktop toggle. */
@media (max-width: 991.98px) {
    .feature-row,
    .feature-row--media-left {
        flex-direction: column;
    }
    .feature-row__text,
    .feature-row__media {
        width: 100%;
    }
}
/***** END feature section ***************************************************/


/***** "Designed around the surgeon" — 3-up block variant *********************
   Three blocks side by side, each stacking icon | teal title | white copy.

   Authored as a Full HTML content block and dropped into the paragraph stream
   by the block_reference paragraph with field_css_class = "surgeon-grid", the
   same route as .copy-section / .criteria / .sn-video-grid. Rendered shape:

     section.surgeon-grid                      <- the paragraph; OUTER spacing
       .container > .row > .col-12.col-lg-10   <- widened to full width below
         h2.feature-section__title
         .row.surgeon-grid__cols               <- widths + stacking (Bootstrap)
           .col-12.col-md-4
             .surgeon-grid__row--0N            <- one block: backdrop + padding
               .surgeon-grid__icon / __title / __desc

   Two things about that shape are load-bearing:

   1. The inner wrapper is .surgeon-grid__cols, NOT a second .surgeon-grid.
      The <section> already carries .surgeon-grid from field_css_class, so a
      nested element with the same class took this section's vertical padding a
      SECOND time and the band came out roughly twice as tall as its
      neighbours. Everything meant for the paragraph wrapper is therefore
      written as `section.surgeon-grid`, which nothing inside the block body
      can claim.

   2. The block body is CLASSES ONLY — no style attributes. Inline styles were
      what pinned the blocks side by side, and inline `display:flex !important`
      cannot be overridden from a stylesheet at ANY specificity, so the layout
      had no way to stack on a phone. CKEditor 5 also drops style attributes
      when it normalises the body on save, so they are not a stable place to
      put layout in the first place. Backdrops live in the --01/--02/--03
      modifiers below; inner elements are matched by tag
      (.surgeon-grid__title h3) rather than by a class on the h3/p/img, because
      attributes survive on wrapper divs far more reliably than on inline
      content.

   Deliberately a separate namespace from .feature-row* — that section is
   untouched and still available for reuse. */

/* OUTER SPACING — the band above the title and below the blocks. Deliberately
   the same pair of clamps .copy-section uses, so the gap this section leaves
   against its neighbours ("+ System features" above, the video grid below) is
   the page's existing rhythm at every width rather than a third value: the
   larger opening clamp and the smaller closing one add up to the same total
   between any two sections. It was clamp(40px, 6vw, 90px) 0 — under half the
   run-in every other section gets, then doubled at the top by the duplicate
   .surgeon-grid class noted above. */
section.surgeon-grid {
    padding: clamp(60px, 7vw, 120px) 0 clamp(48px, 5vw, 80px);
}

/* paragraph--block-reference wraps its content in .col-12.col-lg-10, narrower
   than the full .container the feature_section version used. Widen it back so
   the redesign keeps today's measure; delete this rule for a narrower one. */
section.surgeon-grid > .container > .row > [class*="col-"] {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

/* Section heading. The <h2> carries .feature-section__title, which already
   supplies the orange colour, the S+N "+" symbol and the GSAP stagger (see the
   .sn-plus rule and plugins.js section 27 — both match on that class, not on
   the paragraph, so it works from inside a block). Only placement is set here.
   If the class ever gets stripped from the body, add `.surgeon-grid h2` to the
   two selector lists in plugins.js section 27 to restore the animation. */
section.surgeon-grid h2 {
    text-align: center;
    margin: 0 auto clamp(32px, 5vw, 64px);
}

/* THE 3-UP ROW. Plain Bootstrap does the layout: .row is already
   display:flex;flex-wrap:wrap with the default align-items:stretch, so
   col-12 col-md-4 gives three equal thirds on one line from 768px up and one
   full-width block per line below that — no media query needed here for either
   the widths or the stacking. Change col-md-4 to col-lg-4 in the block body if
   the thirds should hold on to 992px instead.

   Horizontal gutters are not declared: main.min.css forces
   `.row{margin:0 -15px !important}` + `.row>*{padding:0 15px !important}`
   site-wide, so the space between the blocks is a fixed 30px that a local
   --bs-gutter-x could not change anyway. That same override is what lines the
   blocks up with the container edge, and so with .sn-video-grid and the
   .copy-section copy elsewhere on the page.

   Equal height is the one thing Bootstrap does not finish. The COLUMNS already
   match — a stretch row sees to that — but the block inside each one sat at
   its natural height, so the backdrops ended ragged. Make the column a flex
   column and let the block grow into it; when
   the columns stack, each is alone on its line and the block goes back to auto
   height on its own. Same pattern as .ce-background-blocks and the conclusion
   cards further down this file. */
.surgeon-grid__cols > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

/* One block: icon over title over copy, backdrop from the --0N modifier.
   Vertical padding tops out at the designer's 80px and eases to 32px on a
   phone, where 80px of dead space above a 300px-wide block reads as a bug. */
.surgeon-grid__row {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(32px, 5vw, 80px) clamp(20px, 2.5vw, 40px);
    background-color: #12161f;      /* fallback behind the backdrop image */
    background-size: cover;
    background-position: center;
}

/* Space between the blocks once they stack. The .row gutter main.min.css
   forces is horizontal only, so without this the stacked blocks touch. Matched
   to that 30px so the gap reads the same in both directions. Scoped to the
   stacked width so it can never push a side-by-side block down — a margin-top
   on blocks 2 and 3 (left over from when these were full-width rows) is
   exactly what was making the first block's top edge sit higher than the other
   two. */
@media (max-width: 767.98px) {
    .surgeon-grid__cols > [class*="col-"] + [class*="col-"] {
        margin-top: 30px;
    }
}

/* Backdrops, keyed by position. These are the same files the feature_row
   version loads from field_background_image; paths are web-root absolute, so
   they do not resolve relative to this stylesheet. */
.surgeon-grid__row--01 { background-image: url(/sites/default/files/2026-07/keyFeaturesBackdrop01.jpg); }
.surgeon-grid__row--02 { background-image: url(/sites/default/files/2026-07/keyFeaturesBackdrop02.jpg); }
.surgeon-grid__row--03 { background-image: url(/sites/default/files/2026-07/keyFeaturesBackdrop03.jpg); }

/* All three icons are 99x82, so sizing by width keeps their heights equal too
   and the titles below them line up across the row. The 220px ceiling is the
   size they render at today; the floor keeps them from dominating a stacked
   block. Width is the one number to tune if they feel heavy. */
.surgeon-grid__icon img {
    display: block;
    width: clamp(120px, 15vw, 220px);
    height: auto;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
}

/* Was an 80px inline margin on the <img>. Kept as the desktop ceiling, but on
   the wrapper (so it survives an editor re-save) and fluid, so a phone does
   not spend a quarter of the block on white space. */
.surgeon-grid__icon {
    margin-bottom: clamp(28px, 5vw, 80px);
}

/* 20pt semibold teal — the same #79cac1 as .feature-row__title. */
.surgeon-grid__title {
    margin-bottom: clamp(16px, 2.2vw, 30px);
}
.surgeon-grid__title h3 {
    color: #79cac1;
    font-size: clamp(20px, 2vw, 27px);
    line-height: 1.3;
    font-weight: 600;
    margin: 0;
}

/* 16pt white body. main.min.css sets p{font-size:16px;margin:0} directly on
   the element, which beats an inherited size, so the type is declared on the
   inner p as well and paragraph spacing is restored here. */
.surgeon-grid__desc,
.surgeon-grid__desc p {
    color: var(--white);
    font-size: clamp(16px, 1.7vw, 21px);
    line-height: 1.55;
}
.surgeon-grid__desc p {
    margin: 0 0 1em;
}
.surgeon-grid__desc p:last-child {
    margin-bottom: 0;
}
.surgeon-grid__desc sup {
    font-size: 0.6em;
    line-height: 0;
    vertical-align: super;
}

/* The "93%" lead-in. Its own block-level wrapper rather than a <span> plus a
   <br> inside the paragraph: an editor re-save is far more likely to keep the
   class on a wrapper div than on inline content, and a block element gets the
   line break for free. 2em resolves against the body size set above, i.e. the
   same 2em the inline span asked for. Block 03 simply omits the div. */
.surgeon-grid__stat {
    color: var(--white);
    font-size: 2em;
    line-height: 1.2;
    margin-bottom: 0.15em;
}
/***** END surgeon-grid ******************************************************/


/***** Footer social: plain fixed white icons *******************************/
/* The theme styles .footer-two .social a as a 160x70 bordered pill whose icon
   is hidden (opacity:0) until hover, then fades in as an orange circle. We want
   static white icons: no pill, no outline, no hover animation. Same specificity
   as the theme rules (.footer-two .social a) but later in the cascade, so these
   win. */
.footer-two .social {
    gap: 22px;
}
.footer-two .social a {
    width: auto;
    min-width: 0;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
    gap: 0;
    color: var(--white);
}
.footer-two .social a i {
    width: auto;
    min-width: 0;
    height: auto;
    border-radius: 0;
    background: none;
    background-image: none;
    color: var(--white);
    font-size: 27px;          /* FA brand glyphs size by font-size */
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    animation: none;
    display: inline-flex;
}
.footer-two .social a svg {
    width: 27px;              /* match the FA glyph size */
    height: 27px;
    fill: currentColor;       /* = the white set on the anchor */
    transform: none;
    transition: none;
    animation: none;
}
/* Kill the hover animation entirely — icons stay fixed and white. */
.footer-two .social a:hover,
.footer-two .social a:hover i,
.footer-two .social a:hover svg {
    color: var(--white);
    background: none;
    background-image: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    animation: none;
}
/***** END footer social ****************************************************/


/***** Inclusion / Exclusion criteria — two columns, styled like the
       "Working UX Process" section (dark, border-separated rows) *************/
/* Pasted into a Full HTML content block as plain markup; all styling lives
   here. List items stay plain text (<li>Primary ACLR</li>) — the check / X
   markers replace the UX section's coloured squares and are drawn with
   ::before, so they can't be stripped by the editor. */
.criteria {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(32px, 6vw, 100px);
}
.criteria__col {
    flex: 1 1 340px;
    min-width: 0;
    /* Same box as the "Initial searches" block (.project-d-o__single):
       tertiary-colour background with a 1px #414141 border, square corners. */
    background-color: var(--tertiary-color);   /* #0e0e0e */
    border: 1px solid #414141;
    padding: clamp(24px, 3vw, 40px);
}

/* Block title — white, bold, capitalised. Sized a little smaller than the
   "Literature identified" title (.light-title-lg = 30px desktop): 26px ceiling. */
.criteria__col h3 {
    color: var(--white);
    font-weight: normal;
    text-transform: capitalize;
    font-size: clamp(18px, 2vw, 20px);
    line-height: 1.25;
    margin: 0 0 clamp(16px, 2.5vw, 32px);
}

.criteria__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Each item mirrors .ux-process .service-f-single: a border-separated row with
   white text and a marker on the left. No accordion toggle, so no right
   padding. Flex keeps the marker hanging at the top-left when an item wraps. */
.criteria__col li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(16px, 2vw, 24px) 0;
    border-top: 1px solid #414141;
    color: var(--white);
    font-size: 16px /*clamp(18px, 1.8vw, 24px)*/;
    line-height: 30px/*1.35*/;
}
/* The box border now closes the list, so the last row needs no bottom rule. */
.criteria__col li:last-child {
    border-bottom: 0;
}

/* Marker. Font Awesome Pro 6.4.0 is loaded site-wide: \f00c check, \f00d xmark;
   weight 900 = solid. Swap content for "\2713" / "\2717" if the glyphs miss. */
.criteria__col li::before {
    flex: 0 0 auto;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 20px;
    line-height: inherit;
    margin-top: 0.06em;
}
.criteria__col--include li::before {
    content: "\f00c";
    color: #7cb342;           /* green */
}
.criteria__col--exclude li::before {
    content: "\f00d";
    color: #d64545;           /* red */
}

/* Stack to one column on phones/tablets. */
@media (max-width: 767.98px) {
    .criteria__col {
        flex-basis: 100%;
    }
}
/***** END criteria **********************************************************/


/***** EIF study-design infographic *****************************************/
/* Dark box matching the "Literature identified" block (.project-d-group):
   tertiary background + padding, no border. Holds a title (sized like the
   Inclusion/Exclusion criteria titles) above the wide study-design SVG, which
   is white/teal art designed for a dark background. */
.eif-study {
    background-color: var(--tertiary-color);   /* #0e0e0e, same as the lit. block */
    padding: clamp(20px, 3vw, 32px);
    margin-top: 60px;
}
.eif-study__title {
    color: var(--theme-color);                 /* matches the page's headings (white) */
    font-weight: 700;
    font-size: clamp(18px, 2vw, 26px);         /* same as the criteria titles */
    line-height: 1.25;
    margin: 0 0 clamp(20px, 3vw, 32px);
}
/* Scales down to fit; capped at the SVG's native width so it never upscales
   blurry. Left-aligned to line up with the title. */
.eif-study__art {
    display: block;
    width: 100%;
    max-width: 1259px;
    height: auto;
    margin: 0;
}
/***** END EIF study-design **************************************************/


/***** Video grid — 2x2 of video-blog cards (one content block) *************/
/* Reuses the global .video-blog-card / .blog-two__slider-single card styling
   and the site-wide video-blog.js player (click a poster to play inline). The
   ONLY new styling is this grid, scoped to the unique .sn-video-grid wrapper —
   nothing here touches the real Home Video Blog slider or any other page. */
.sn-video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* 2 per row → 2x2 */
    gap: clamp(20px, 3vw, 40px);
    margin-top: clamp(20px, 3vw, 40px);      /* space above, matching the gap */
}

/* The cards here are ~half-width, so drop the slider's 360px min poster height
   to keep a clean 16:9. Scoped to .sn-video-grid, so the real slider keeps its
   own sizing. */
.sn-video-grid .video-blog__play img {
    min-height: 0;
}

/* Play button. CKEditor tends to strip the empty <i>/<span> play-icon markup on
   paste, so draw it with a pseudo-element instead — immune to that. Matches the
   slider's .video-blog__play-icon (72px circle). The real icon (if it survived
   the paste) is hidden so there's never a double button. Both are scoped to
   .sn-video-grid; the real slider keeps its own markup-driven button. */
.sn-video-grid .video-blog__play-icon {
    display: none;
}
.sn-video-grid .video-blog__play::after {
    content: "\f04b";                 /* Font Awesome play (solid) */
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 72px;
    height: 72px;
    padding-left: 4px;                /* optically centre the triangle */
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 24px;
    pointer-events: none;             /* clicks pass through to play the video */
    transition: background 0.25s ease, transform 0.25s ease;
}
.sn-video-grid .video-blog__play:hover::after {
    background: rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.08);
}

/* Stack to one column on small screens. */
@media (max-width: 767.98px) {
    .sn-video-grid {
        grid-template-columns: 1fr;
    }

    .video-blog-card .blog__single-content-desc p:last-child {
        padding-bottom: 50px;
    }

    .transparent-card .content {
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
    }

    .transparent-card .thumb {margin-left: auto; margin-right: auto;}
}

.section-surgeon-guided-videos .sn-video-grid {
   gap: clamp(20px, 3vw, 80px);
}

.video-blog-card .blog__single-content-desc p:last-child {line-height: 1.4;}
/***** END video grid *******************************************************/

/***  SN Emeric — Smith+Nephew brand face  **********************************/

/* Files live in ../fonts/ (theme-owned, deploys with the theme). One family
   across three weight ranges rather than three separate families, so the
   theme's existing numeric font-weights keep working untouched. */

@font-face {
    font-family: "SN Emeric";
    src: url("../fonts/SNEmericWeb-Book.woff2") format("woff2"),
         url("../fonts/SNEmericWeb-Book.woff")  format("woff");
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "SN Emeric";
    src: url("../fonts/SNEmericWeb-SemiBold.woff2") format("woff2"),
         url("../fonts/SNEmericWeb-SemiBold.woff")  format("woff");
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "SN Emeric";
    src: url("../fonts/SNEmericWeb-ExtraBold.woff2") format("woff2"),
         url("../fonts/SNEmericWeb-ExtraBold.woff")  format("woff");
    font-weight: 800 900;
    font-style: normal;
    font-display: swap;
}

/* main.min.css binds body to --theme-font but h1-h6/p to --inter. BOTH must be
   repointed or headings stay on Inter. Every other element in the theme
   inherits, so these two lines swap the whole site with no selector overrides.
   --inter keeps its name only because main.min.css references it by that name. */
:root {
    --sn-emeric:  "SN Emeric", Verdana, sans-serif;
    --theme-font: var(--sn-emeric);
    --inter:      var(--sn-emeric);
}
/***** END SN Emeric ********************************************************/


/***** Clinical-evidence "Background" blocks — equal height ******************/
/* The blocks sit in Bootstrap columns, and a Bootstrap .row is already a flex
   container (align-items: stretch) — so the COLUMNS are equal height per row.
   The gap is only that each .project-d-o__single sits at its natural height
   inside its column. Make the column a flex column and let the block grow to
   fill it: every block then matches the tallest in its row, and when the
   columns stack on mobile each is alone in its row → natural/auto height.
   No content changes, no marker classes. Scoped to this section;
   [class*="col-"] matches only the direct column children of the row. */
.ce-background-blocks .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}
.ce-background-blocks .project-d-o__single {
    flex: 1;
}

section.ce-background-blocks .project-d-o__single p {line-height: 1.3;}

.clinical-evidence-technical-error .project-d-group {padding-left: 0px; padding-top: 50px; }

.tech-error-div {padding-top: 50px;}
/***** END clinical-evidence background blocks *******************************/


/***** Collapsible panel (.sn-collapse) — References box, etc. ***************/
/* Pasted into a Full HTML content block as plain divs; the behaviour lives in
   assets/js/collapse-block.js, which turns the header into a real control at
   runtime (role/tabindex/aria-expanded) — none of which would survive a
   round-trip through CKEditor if it were written into the markup.

   The box copies the "Literature identified" panel on /clinical-context
   (.project-d-group with a tertiary background and 30px padding) and the +/-
   glyph from the ux-process accordion. It does NOT reuse that accordion's
   markup: its handler force-opens the first item on the page and closes
   siblings, which would fight a References panel. */
.sn-collapse {
    background-color: var(--tertiary-color);   /* #0e0e0e */
    padding: clamp(20px, 3vw, 30px);
}

/* paragraph--block-reference wraps its content in .col-12.col-lg-10, which is
   the width every other block on the site uses — so the panel needs no help to
   line up on a page like /clinical-context, and must NOT be widened there.

   The home page is the exception: the .surgeon-grid rows directly above it
   widen that same column back to the full .container (see the .surgeon-grid
   rule above), so a col-lg-10 panel reads as inset against them. Match it
   there only. Both paragraphs carry the same "references-section" class, so
   the page is what distinguishes them — .path-frontpage is a core Drupal body
   class, and custom.css already scopes a rule that way further up.

   If a full-width block ever lands above a references panel on another page,
   add "references-section--wide" to that paragraph's CSS class field rather
   than widening the base class. */
.path-frontpage .references-section > .container > .row > [class*="col-"],
.references-section--wide > .container > .row > [class*="col-"] {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

/* Text is hard-coded #fff rather than var(--white): --tertiary-color is never
   re-declared, so the panel is always near-black, but --white flips to black
   inside the light-theme scopes — which would render this box black on black
   wherever the block gets pasted. */
.sn-collapse__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.sn-collapse__header:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
}

/* Sizing comes from the theme's .light-title-lg (30px/40px, 24px/34px on
   mobile) so the header matches "Literature identified" exactly. Deliberately
   not .section-title-block — its padding-bottom would leave dead space under a
   collapsed header. */
.sn-collapse__title {
    margin: 0;
    font-weight: normal;
    color: #fff;
}

/* +/- marker. FA6 maps .fa-plus to the ASCII "\2b" and .fa-minus to "\f068",
   so with weight 900 both glyphs come from the same solid face. */
.sn-collapse__header::after {
    content: "\2b";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
    color: #fff;
    transition: color 0.3s ease;
}
.sn-collapse.is-open > .sn-collapse__header::after {
    content: "\f068";
    color: var(--primary-color);
}

/* Height animation without JS measurement: the body is a one-row grid that
   interpolates 0fr -> 1fr, and .sn-collapse__inner (inserted by the JS around
   whatever the editor left in the body) clips the overflow. Transitioning
   visibility keeps the collapsed content out of the tab order — it is a
   discrete property, so it flips only once the row has finished closing. */
.sn-collapse__body {
    display: grid;
    grid-template-rows: 1fr;
}
.sn-collapse__inner {
    min-height: 0;
    overflow: hidden;
}
/* The gap under the header goes on the inner wrapper's first CHILD, never on
   the wrapper itself. Bootstrap sets box-sizing: border-box globally, so
   padding on the wrapper is a floor its border-box cannot shrink below — the
   0fr row would then still resolve to the padding height and leave a dead band
   under the title while collapsed. A child margin is inside the wrapper's
   overflow: hidden (which is also a block formatting context, so it cannot
   collapse out), and clips away to nothing with everything else. */
.sn-collapse__inner > :first-child {
    margin-top: clamp(16px, 2.5vw, 24px);
}
/* is-ready is added by the JS, so the panel stays open when the script fails —
   readable references beat a title that will not open. */
.sn-collapse.is-ready > .sn-collapse__body {
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.4s ease, visibility 0.4s;
}
.sn-collapse.is-ready.is-open > .sn-collapse__body {
    grid-template-rows: 1fr;
    visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
    .sn-collapse.is-ready > .sn-collapse__body {
        transition: none;
    }
}

/* References skin: numbered list, a step smaller than the 16px/30px body copy
   used by .criteria__col li. */
.sn-collapse--references ol {
    /* main.min.css resets `ul,ol` to list-style-type: none, so the numbering
       has to be asked for explicitly or the references render unnumbered.
       Position outside + the padding below gives each entry a hanging indent,
       so wrapped lines align under the text rather than under the number. */
    list-style: decimal outside;
    margin: 0;
    padding-left: 1.9em;      /* room for two digits */
    color: #fff;
    font-size: 14px;
    line-height: 24px;
}
.sn-collapse--references li {
    padding-left: 0.4em;
    margin-bottom: 14px;
}
.sn-collapse--references li:last-child {
    margin-bottom: 0;
}
.sn-collapse--references a {
    color: var(--primary-color);
    text-decoration: underline;
    overflow-wrap: anywhere;   /* long DOIs must not widen the panel */
}
/***** END collapsible panel *************************************************/


/***** Conclusion cards — equal height per row *******************************/
/* The three .feedback-s__single cards under "Conclusion" sit in a Bootstrap
   .row, which is already a flex container with align-items: stretch — so the
   COLUMNS are equal height on each line already. The cards just sit at their
   natural height inside them. Make each card's column a flex column and let
   the card grow to fill it. Same fix as .ce-background-blocks above.

   Because this keys off flex LINES, the responsive behaviour is automatic:
     >=1200px  col-xl-6/3/3 -> all three on one line, all equal
     >=768px   col-md-6     -> cards 1+2 equal, card 3 alone and auto
     <768px    col-12       -> one per line, every card auto height

   Scoping: .feedback-s is a shared theme section — the testimonial view
   (views-view--testimonial--block-3.html.twig) emits it too — so the section
   class alone is too broad. :has(.conclusion) narrows it to this one block,
   and :has(> .feedback-s__single) skips the heading's own row. custom.css
   already relies on :has() for the sticky brand bar further up. */
.feedback-s:has(.conclusion) [class*="col-"]:has(> .feedback-s__single) {
    display: flex;
    flex-direction: column;
}
.feedback-s:has(.conclusion) [class*="col-"] > .feedback-s__single {
    flex: 1;
}
/***** END conclusion cards **************************************************/


/***** Clinical-context gradient panels **************************************/
/* Designer-supplied gradient backdrops for the four panels on
   /clinical-context. Each PNG is a 1px-TALL horizontal band, so it is
   stretched to the full box width and tiled down the box (repeat-y) to
   extrude a vertical gradient.

   gradient-inclusion (573px, #3B4E6D -> #424254) and gradient-exclusion
   (574px, #424052 -> #472E30) are the left and right halves of gradient-wide
   (1170px, #3B4E6D -> #472D2F), so the two criteria columns line up into one
   continuous band across the row — which is why each box gets 100% width
   rather than cover/contain. Same brand gradient as .copy-section--gradient
   further up (line ~297).

   TRANSPARENCY MODEL — the gradient must let the PAGE show through, not fade
   toward a solid colour. These panels sit over the fixed starfield body
   background (line ~444), so the effect wanted is a tinted window onto it:
   at --panel-gradient-opacity: 0 the panel is fully see-through, at 1 it is
   the solid designer gradient. That is only possible if the opaque
   background-color underneath is gone — otherwise lowering the opacity just
   walks the gradient toward #0e0e0e and the page never shows.

   Hence two things:

   1. background-color: transparent !important. The two wide panels carry
      background-color inline from their Full HTML content blocks, and inline
      styles win per-property, so !important is the only way to clear it from
      CSS. This is a deliberate exception to the file's usual avoid-!important
      rule — the alternative is editing four content blocks by hand.

   2. The gradient lives on a ::before overlay carrying the opacity, NOT on the
      element. opacity on the element would fade every descendant — headings,
      body copy, the check/X markers, the icon thumb — and would also fight the
      .fade-top entry animation that already drives opacity here. On an empty
      pseudo-element it only affects the gradient. Content is lifted above the
      overlay with z-index below; isolation: isolate keeps those z-indexes from
      escaping into the page's stacking order. The panels themselves have no
      ::before of their own (only their descendants do, lines ~319 and ~810),
      so the pseudo-element is free.

   The absolute positioning also keeps the overlay out of flow, which matters
   for .project-d-o__single — it is display:flex, so an in-flow ::before would
   become a flex item.

   No background-color fallback is possible any more, by definition. On local
   dev, where /sites/default/files is not synced, the PNGs 404 and the panels
   render fully transparent over the starfield rather than flat #0e0e0e. */
/* REUSABLE HOOK — add class="gradient-panel" to any box to give it the wide
   gradient. For the half-width variants add a modifier alongside the base
   class: class="gradient-panel gradient-panel--inclusion".

   The existing panels are matched by their own selectors as well, so no
   content block had to be edited; new boxes just take the class. That covers
   the four /clinical-context boxes plus .eif-study and .sn-collapse, both of
   which were already written to copy the "Literature identified" panel (see
   their sections above) and so take the wide gradient by default.

   .sn-collapse is matched unscoped, so every collapsible panel gets the
   gradient site-wide, not just the References box on /clinical-context — that
   is the component's look now. Scope it if a plain one is ever needed. Note it
   is wider on the home page, where .path-frontpage .references-section widens
   the column; background-size: 100% just re-fits the strip to each width.

   Scope note: this supplies the GRADIENT ONLY. Padding, border and text colour
   stay with the box's own classes, so the utility can be dropped onto an
   existing panel without fighting it. For the standard dark-panel chrome, pair
   it with padding + `border: 1px solid #414141` as .criteria__col does. */
.gradient-panel,
.eif-study,
.sn-collapse,
.literature-section .project-d-group,
.initial-searches-section .project-d-o__single,
.criteria__col--include,
.criteria__col--exclude {
    /* Single knob for every gradient panel. 1 = solid gradient, 0 = fully
       see-through to the starfield. */
    --panel-gradient-opacity: .8;
    /* Wide is the default, so the base class alone is enough; the variant
       rules at the end of this section override it. */
    --panel-gradient: url(/sites/default/files/2026-07/gradient-wide.png);
    position: relative;
    isolation: isolate;
    background-color: transparent !important;
}

.gradient-panel::before,
.eif-study::before,
.sn-collapse::before,
.literature-section .project-d-group::before,
.initial-searches-section .project-d-o__single::before,
.criteria__col--include::before,
.criteria__col--exclude::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--panel-gradient);
    /* Tile height pinned to 1px rather than auto: at auto the 1170px-wide
       strip scales to a sub-pixel row (~0.8px in a 950px column) and tiles a
       few hundred times, which can band on some GPUs. 1px is exact. */
    background-repeat: repeat-y;
    background-size: 100% 1px;
    opacity: var(--panel-gradient-opacity);
}

/* Lift the content above the overlay. Direct children only, so the markers
   and thumbs inside them come along without needing their own rules. */
.gradient-panel > *,
.eif-study > *,
.sn-collapse > *,
.literature-section .project-d-group > *,
.initial-searches-section .project-d-o__single > *,
.criteria__col--include > *,
.criteria__col--exclude > * {
    position: relative;
    z-index: 1;
}

/* Variants. Wide is the default above, so only the halves need declaring.
   These come last so they beat the default on source order. */
.criteria__col--include,
.gradient-panel--inclusion {
    --panel-gradient: url(/sites/default/files/2026-07/gradient-inclusion.png);
}
.criteria__col--exclude,
.gradient-panel--exclusion {
    --panel-gradient: url(/sites/default/files/2026-07/gradient-exclusion.png);
}
/***** END clinical-context gradient panels **********************************/


/***** Scroll-triggered slide-in *********************************************
   Generic reveal for hand-authored content blocks: the element starts offset to
   the right, then slides to its natural position and fades up as it scrolls
   into view. Added to the .feature-row blocks on /news-insights, but nothing
   here is feature-row specific — any block can take the class.

   The trigger is assets/js/slide-in.js (library xpovio/slide-in, loaded
   globally from xpovio.info.yml); it only adds .is-in — on scroll for blocks
   below the fold, and just after the preloader clears for blocks already on
   screen when the page opens (the timing of that release is a JS concern and
   lives there). Everything about how the motion LOOKS lives here, so retuning
   it needs no JS change. See that file for
   why a CSS-only trigger (animation-timeline: view()) cannot be used on this
   site — short version: ScrollSmoother's position:fixed wrapper means a view()
   timeline never advances.

   Do not combine with the theme's .fade-right (plugins.js section 28). That one
   is GSAP-driven and writes an inline transform, which would override the
   transform below. An element takes one or the other.

   Everything is scoped to html.js-slide, the class slide-in.js stamps on <html>
   as it runs, so a script that never loads costs the animation rather than the
   content.

   Below 576px the effect is off entirely. That matches how the theme's other
   scroll reveals are gated (plugins.js section 28 skips .fade-* at that width)
   and it avoids a horizontal scrollbar: above the breakpoint the offset is
   clipped by ScrollSmoother's overflow:hidden wrapper, below it there is no
   smoother and nothing to clip the overhang. */
@media (min-width: 576.02px) and (prefers-reduced-motion: no-preference) {
    html.js-slide .sn-slide-right {
        /* The two tuning knobs. Distance is viewport-relative so the block
           clears the right edge on a laptop without travelling absurdly far on
           an ultrawide; the clamp floor keeps it a real slide on small tablets.
           Override either on a single block with a modifier class if one row
           ever needs to differ. */
        --sn-slide-distance: clamp(120px, 25vw, 320px);
        --sn-slide-duration: 1s;

        opacity: 0;
        transform: translateX(var(--sn-slide-distance));
    }

    /* The transition lives HERE, on the revealed state, not on the hidden one
       above — deliberately, and it must stay that way.

       slide-in.js is a footer script, so a block above the fold has usually
       been painted at its resting position by the time html.js-slide lands.
       With the transition declared on the hidden rule, that first hide is
       itself animated: the block slides RIGHTWARD off its position and fades
       out (which looks like it is entering from the left), then the real reveal
       runs and it comes in from the right — a visible double-take on the top
       block only, since lower blocks do that off screen.

       Declaring it on .is-in means a transition only exists in the state being
       transitioned TO, so hiding snaps instantly and only the reveal animates.

       Decelerating ease — quick departure, soft landing. Opacity finishes at
       70% of the travel so the copy is readable while the last of the movement
       plays out. No will-change: browsers already composite transform/opacity
       transitions, and the hint would otherwise hold a layer for the life of
       the page. */
    html.js-slide .sn-slide-right.is-in {
        opacity: 1;
        transform: none;
        transition:
            transform var(--sn-slide-duration) cubic-bezier(.22, .61, .36, 1),
            opacity calc(var(--sn-slide-duration) * .7) ease-out;
    }
}
/***** END scroll-triggered slide-in *****************************************/