/*
Theme Name:   MediCenter Child
Theme URI: https://1.envato.market/medicenter-responsive-medical-wordpress-theme
Description:  MediCenter Child Theme
Author: QuanticaLabs
Author URI: https://1.envato.market/quanticalabs
Template:     medicenter
Version:      1.2
Text Domain:  medicenter
*/
/* Homepage */
.info-box {
    padding: 0;
}
.about_service_1:after{
	content:'';
	background-color:#000;
}
.about_service_1:after {
    content: '';
    background-color: #006DB9;
    position: absolute;
    right: 0;
    top: 50%;
    height: 70px;
    width: 30px;
    transform: translate(30px, -50%);
}

.about_service_2:after {
    content: '';
    background-color: #421F56;
    position: absolute;
    right: 0;
    top: 50%;
    height: 70px;
    width: 30px;
    transform: translate(30px, -50%);
}
.recent_news  .box-header.elementor-widget-heading .elementor-heading-title::after {
    margin-inline: auto;
}
.recent_news .gallery-box {
    display: none !important;
}
.recent_news .gallery-box-1, .recent_news .gallery-box-2, .recent_news .gallery-box-3, .recent_news .gallery-box-4 {
    display: block !important;
}
.icon-single.circle .features-play  {
    background: #006688;
    opacity: .8;
}
.yellow_frame_icon .yellow_icon {
    background: #FFF879;
    height: 44px;
    float: right;
    width: 20px;
    position: absolute;
    right: 0;
    bottom: -21px;
}
.header-top-sidebar-container .icons-list {
    position: relative;
    display: flex;
    gap: 100px;
}
.header-icon {
    color: #BAC0C5;
    font-size: 14px;
}
.header {
    padding: 1px 0;
}
.header-icon.template-mail {
    text-decoration: underline;
}
.footer-banner-box-container .footer-banner-box:nth-child(3n+2) {
    background-color: #00ABDC !important;
}
.footer-banner-box-container .footer-banner-box:nth-child(3n+3) {
    z-index: 1;
    background: #525670;
}
.footer-container .footer-banner-box:first-child::before {
    content: '';
    background-image: url("https://ceryvyn.heyrook.live/wp-content/uploads/2026/04/linkedin-icon.svg");
    height: 48px;
    width: 48px;
    background-position: center;
    background-size: cover;
}
.footer-container,.copyright-area-container {
    background-color: #343846;
}
.copyright-area-container {
    border-top: 1px solid #bac0c54f;
}
#medicenter_contact_details-2 p:empty {
    padding: 0;
}
.footer .widget .contact-data li.template-mail .value a{
	    color: #BAC0C5;
}
.footer .menu li {
    width: 100%;
}
.wp-block-tnp-minimal {
    padding: 0 !important;
}
.wp-block-tnp-minimal p {
    color: #FFF;
    font-family: "Source Sans Pro", Sans-serif;
    font-size: 18px;
    line-height: 1.55556;
    padding: 0;
    padding-bottom: 20px;
}
.wp-block-tnp-minimal p:after{
	content: "";
    display: block;
    bottom: 0;
    width: 50px;
    height: 2px;
    background: #42B3E5;
    margin-top: 7px;
}

.footer-box-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1.8fr;
    justify-content: space-between;
    gap: 30px;
}
.footer-box-container:before, .footer-box-container:after{
	display:none;
}
.footer-box-container.vc_row .vc_col-sm-3, .footer-box-container .vc_col-sm-6.vc_col-sm-6 {
    width: fit-content;
}
.wp-block-group.newsletter_group {
    height: 100%;
}
.wp-block-group.newsletter_group .wp-block-group-is-layout-constrained {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 50px;
}
.wp-block-group.newsletter_group .wp-block-group-is-layout-constrained .wp-block-image {
    margin: 0;
}
.blog_header_titles::before {
    background: #F8FF9B;
    height: 44px;
    float: right;
    width: 20px;
    position: absolute;
    right: 30%;
    bottom: 50%;
    content: '';
}
.blog_header_titles {
    width: 100%;
}
.copyright-area .textwidget {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer-menu {
    display: none;
}
.copyright_menu .wp-block-group__inner-container {
    display: flex;
    justify-content: space-between;
    gap: 100px;
    align-items: center;
}
.copyright-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.copyright-area:after, .copyright-area:before {
    display: none;
}
/* Legal/terms menu renders via the theme's footer-menu location as a direct child
   of .copyright-area (block-10's .copyright_menu is empty), so show + style it
   there as well as inside .copyright_menu. Previously .copyright-area's copy was
   display:none, which hid the legal links entirely. */
.copyright-area .menu-footer-menu-container,
.copyright_menu .menu-footer-menu-container {
    display: flex;
}
.copyright-area .menu-footer-menu-container #menu-footer-menu,
.copyright_menu .menu-footer-menu-container #menu-footer-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;
}
.copyright-area-container .widget.mc_contact_details_widget .info {
    padding: 0;
}
.widget.mc_contact_details_widget .footer_social_content .icon-single{
 font-size:8px;
}
.widget.mc_contact_details_widget .footer_social_content .icon-single:before{
	width:17px;
	height:17px;
}
.copyright_menu .mc_contact_details_widget {
    display: flex;
    align-items: center;
}
.widget.mc_contact_details_widget .footer_social_content .icon-single:before {
    width: 17px;
    height: 17px;
    color: #000;
    border: #fff;
    font-size: 10px;
    border-radius: 2px;
}
.copyright-area .widget_text p {
    color: #BAC0C5;
}
.copyright-area {
    padding: 10px 0;
}
.header-left a img {
    max-width: 132px;
    padding-block: 10px;
}
nav.mobile-menu {
    text-transform: uppercase;
}
.header-container  .menu-item {
    text-transform: uppercase;
}
.gallery-post-date {
    font-size: 12px;
    padding-block: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery-box:hover .gallery-post-date{
    color: #FFF;
}
.elementor-widget-doctors .gallery-post-date {
    display: none;
}
.tabs-navigation {
    display: none;
}
.slider--post-date {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #f8f8f8;
    padding: 6px;
    font-size: 12px;
    z-index: 1;
}
.gallery-item-details .gallery-box:hover img {
    opacity: 1;
}
.comment-form .mc-button, .contact-form .mc-button, .post-password-form .mc-button {
    border-color: #525670 !important;
    background-color: #525670 !important;
}


@media(max-width:991px){
	.footer-box-container {
    grid-template-columns: 1.5fr 1fr 1.5fr;
    gap: 10px;
}
	.footer-banner-box p {
    font-size: 14px;
}
	.tnp-subscription-minimal input.tnp-email, .tnp-subscription-minimal input.tnp-name {
    max-width: 170px;
}
	.tnp-subscription-minimal input.tnp-submit {
    padding: 11px 7px;
    font-size: 12px;
}
}

@media(max-width:767px){
	.yellow_frame_icon {
    display: none;
}
	.header-top-sidebar-container .icons-list {
    display: none;
}
.mobile-menu-container {
    display: block;
    position: absolute;
    top: 100%;
    z-index: 99;
    width: 100%;
    background: #fff;
}
	.header.layout-1 {
    position: relative;
}
	.header-container .header-left {
    display: flex;
    align-items: center;
}
.header .mobile-menu-switch {
    display: flex;
    height: 34px;
    top: -4px;
}
	.about_service_1:after, .about_service_2:after{
		display:none;
	}
	.about_service_1 .elementor-widget-info_box, 	.about_service_2 .elementor-widget-info_box, 	.about_service_3 .elementor-widget-info_box{
    height: auto;
}
	.footer-container .footer-banner-box:first-child::before {
    height: 28px;
    width: 28px;
}
	.footer-banner-box::before {
    font-size: 24px;
}
	.footer-banner-box p.content-margin {
    margin-left: 0;
}
	.footer-banner-box {
    padding: 15px;
}
	.footer-box-container {
    grid-template-columns: 1fr;
}
	.vc_row .wpb_column {
    margin-top: 20px;
}

	.tnp-subscription-minimal form {
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}
	.tnp-subscription-minimal input.tnp-email, .tnp-subscription-minimal input.tnp-name {
    max-width: 100%;
    margin: 0;
    width: 100%;
}
	.footer-box-container.vc_row .vc_col-sm-3, .footer-box-container .vc_col-sm-6.vc_col-sm-6 {
    width: 100%;
}
	.wp-block-tnp-minimal {
    padding: 0 !important;
    width: 100%;
}
	.wp-block-group.newsletter_group .wp-block-group-is-layout-constrained {
    justify-content: center;
    align-items: center;
    gap: 0px;
}
	.copyright-area {
    flex-direction: column;
}
	.copyright_menu .mc_contact_details_widget {
    display: none;
}
	.copyright-area .widget_text p {
    padding: 0;
}
	.menu-footer-menu-container {
    margin-top: 10px;
}
	.copyright-area {
    padding: 15px 0;
    flex-direction: column;
}

.sr7-btn {
    width: fit-content !important;
}
	.header-left a img {
    max-width: 100px;
    padding-block: 0;
}
	.blog_header_titles::before{
		display:none;
	}
.header, .layout-2.header, .layout-4.header {
    padding: 12px 0 !important;
}
	.mobile-menu-divider {
    margin-top: 0 !important;
}
.bread-crumb {
    padding: 0 !important;
}
	.page-header-left {
    display: flex;
    align-items: center;
    justify-content: center;
}
	.page-header-left .page-title {
    margin-right: 15px;
    font-size: 17px;
}
	.footer-banner-box .content-margin {
    font-size: 20px;
}
	.tnp-subscription-minimal input.tnp-email, .tnp-subscription-minimal input.tnp-name {
    width: 100% !important;
    margin-right: 0 !important;
}
}


/* Team Page */
#header_title .elementor-heading-title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.recent_news .tabs-navigation {
    display: none;
}
.center-box-header.elementor-widget-heading .elementor-heading-title::after {
    content: "";
    display: block;
    bottom: 0;
    width: 50px;
    height: 2px;
    background: #38E5E4;
    margin-top: 7px;
}
.center-box-header.elementor-widget-heading .elementor-heading-title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.page-banner {
    min-height: 604px;
    object-fit: cover;
    object-position: center;
}
.page-banner .banner-img {
    width: 100%;
    height: auto;
}

.page-banner .page-title {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 64px;
    line-height: 100%;
    letter-spacing: 0%;
	 padding: 140px 0;

}
.page-banner .page-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.page-banner .vc_row {
    position: relative;
}
.page-banner {
    min-height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media(max-width:1700px){
	.page-banner .page-title {
    font-size: 50px;
    padding: 90px 0;
}
}

@media(max-width:991px){
	.page-banner .page-title {
    font-size: 30px;
    padding: 50px 0;
}
}

@media(max-width:767px){
	.page-banner .page-title {
    font-size: 20px;
    padding: 20px 0;
}
	.wp-block-tnp-minimal p {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
}




/* Contact us page */
.page-contact .breadcrumb-header {
    display: none;
}
p.info:empty {
    display: none;
}
.footer_content .widgettitle {
    color: #fff;
}
.footer_content .widgettitle:after {
    background: #38E5E4;
	content: "";
    display: block;
    bottom: 0;
    width: 50px;
    height: 2px;
    background: #42B3E5;
    margin-top: 7px;
}

.footer_logo {
    margin-inline: 0;
    margin-bottom: 50px;
}

@media(max-width:767px){
	.icon-with-content-contact .item-content:first-child{
    margin-top: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}
	.mc-features-small .text {
    margin: 0 !important;
    text-align: center;
}
	.subscription_widget_footer {
    margin-top: 50px;
}

}


/* About LAM Page */
@media(max-width:767px){
	.our-clients-list li {
    margin-top: 0;
}
	.our-clients-list li {
    width: 100%;
    margin-top: 0;
    height: auto;
}
	.our-clients-list li .vertical-align-cell {
    text-align: center;
    height: auto;
}
}
/* --- Thread separator (1px solid #E5E5E5) --- */
/* Renders a 1px line at the top of the section's .e-con-inner.
   Equal whitespace above (section padding) and below (.e-con-inner padding)
   so the line sits centered between sections. Apply class
   `thread-separator-top` to any boxed Elementor section. */
.elementor .thread-separator-top,
.elementor-element.elementor-element-c6e3a16 {
  padding-top: 60px !important;
}
.elementor .thread-separator-top > .e-con-inner,
.elementor-element.elementor-element-c6e3a16 > .e-con-inner {
  border-top: 1px solid #E5E5E5;
  padding-top: 60px;
}

/* Network logos — uniform 150px tall, width auto so aspect ratio is preserved.
   100px horizontal gap between logos on desktop; tighter on mobile. */
.network-logos .elementor-widget-image img {
  height: 150px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain;
}
@media (min-width: 992px) {
  .network-logos .e-con.e-child {
    --column-gap: 100px;
    column-gap: 100px !important;
  }
}

/* Hero banner — pull subtitle tight under h1.
   The parent theme sets .page-banner .page-title { padding: 140px 0 } which
   creates a huge gap below the h1; override bottom padding to zero and
   shift the matching top padding onto the wrapper so the visual offset is
   preserved without pushing the subtitle 140px away. */
.page-banner-overlay .page-title {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1 !important;
  color: #525670 !important;
}
.page-banner-overlay .banner-subtitle {
  color: #8a8a8a;
  font-weight: 400;
  font-size: 30px;
  margin: 8px 0 140px !important;
  padding: 0;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* Limit banner subtitle width on the About CVN-101 page only (others unlimited) */
body.page-id-6122 .page-banner-overlay .banner-subtitle {
  max-width: 600px;
}

/* about-cvn-101 (6122): molecule GIF column responsive behaviour.
   Row c6e3a16 = [9aa113b <style>] + 13573d2 (GIF column, 45%) + f42f577 (text, 55%).
   GIF native 720px; desktop column = 45% of the 1230px content width ≈ 554px. */
@media (max-width: 1500px) {
  /* Keep the animated GIF at its desktop width — stop the column and the image's
     laptop/tablet width step-downs (space 80%/60%) from shrinking it. */
  body.page-id-6122 .elementor-element.elementor-element-13573d2 {
    width: 554px !important;
    max-width: 554px !important;
    flex: 0 0 554px !important;
  }
  body.page-id-6122 .elementor-element.elementor-element-b8704d7 img {
    width: auto !important;
    max-width: 100% !important;
  }
}
@media (max-width: 1000px) {
  /* Stack the row and place the GIF section below the text section, full width.
     Boxed Elementor containers run flex on the inner .e-con-inner wrapper, so the
     direction must be set there (covering the full-width case on the element too). */
  body.page-id-6122 .elementor-element.elementor-element-c6e3a16,
  body.page-id-6122 .elementor-element.elementor-element-c6e3a16 > .e-con-inner {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  body.page-id-6122 .elementor-element.elementor-element-f42f577 {
    order: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.page-id-6122 .elementor-element.elementor-element-13573d2 {
    order: 1 !important;        /* after f42f577 (and the invisible <style> widget) */
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }
  body.page-id-6122 .elementor-element.elementor-element-b8704d7 img {
    max-width: 100% !important;
  }
  /* Keep the molecule frame capped to the GIF width and centred so the 4 corner
     labels hug the molecule instead of spreading to a full-width frame. */
  body.page-id-6122 .elementor-element.elementor-element-83ae8c9 {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* The molecule image is absolutely positioned, so the frame (min-height:600px)
     never grows to fit the full-size GIF and it spills onto the next section.
     Put it back in flow when stacked so the frame contains it (no overlap with
     "Recent News"); centre it within the capped frame. */
  body.page-id-6122 .elementor-element.elementor-element-b8704d7 {
    position: relative !important;
  }
  body.page-id-6122 .elementor-element.elementor-element-b8704d7 .elementor-widget-container {
    text-align: center !important;
  }
}

/* about-lam (3811): LAM Disease Pathology — 3 cards (gross / histo / radiology).
   Native Elementor containers; this only handles equal sizing, the image band,
   and the icon badge shape. Row on desktop → column on mobile. */
body.page-id-3811 .lam-path-cards { align-items: stretch !important; }
body.page-id-3811 .lam-card {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;            /* clip image to the card radius */
}
/* Uniform image band across all three cards */
body.page-id-3811 .lam-card .lam-card-img img {
  display: block !important;
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
}
/* Hide the 3 card icons (2026-06-08, per request). Icon widgets are untouched in
   Elementor — DELETE this one rule to restore them. */
body.page-id-3811 .lam-card .lam-card-badge { display: none !important; }

/* Outline (stroked) icon — transparent, no badge, no round shape.
   Just the line-art glyph in the card's brand colour. */
body.page-id-3811 .lam-card .lam-card-badge .elementor-icon {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}
body.page-id-3811 .lam-card .lam-card-badge .elementor-icon svg {
  width: 35px !important;
  height: 35px !important;
  fill: none !important;            /* keep it a stroked outline, not filled */
  stroke: currentColor !important;  /* follow the icon colour control (brand) */
}
/* ~20px gap between the icon badge and the title block */
body.page-id-3811 .lam-card .lam-head { gap: 20px !important; }
/* Let the title/subtitle column fill the header so labels don't wrap early */
body.page-id-3811 .lam-card .lam-head-text { flex: 1 1 auto !important; min-width: 0 !important; }
body.page-id-3811 .lam-card .lam-card-badge { flex: 0 0 auto !important; }
@media (max-width: 767px) {
  body.page-id-3811 .lam-card { flex: 1 1 auto !important; width: 100% !important; }
  body.page-id-3811 .lam-card .lam-card-img img { height: 200px !important; }
}

/* HP hero (Revolution Slider) "Learn About LAM" CTA — force hover to the brand
   #00ABDC like the page's other CTAs. SR7 applies layer hover via JS, which was
   unreliable; this CSS guarantees it. Scoped to SR7 layer anchors only. */
a.sr7-layer[href*="about-lam"]:hover,
a.sr7-btn[href*="about-lam"]:hover {
  background-color: #00ABDC !important;
  color: #FFFFFF !important;
}

/* Page header below the hero — h1 stacked above the breadcrumb */
.page-header-left {
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
}
.page-header-left .page-title {
  display: none !important;
}
.page-header-left .bread-crumb {
  display: flex;
  flex-wrap: wrap;
}

/* HP — hide all about_service_* decorative ::after blocks */
[class*="about_service_"]::after,
[class*="about_service_"]:after {
  display: none !important;
}

/* Elementor icons — uniform 70px size */
.elementor-icon {
  color: #69727d;
  display: inline-block;
  font-size: 70px !important;
  line-height: 1;
  text-align: center;
  transition: all .3s;
}

/* === /investors/ page === */

/* Feature cards (Investor Presentation + Market Announcements) — hover lift */
.inv-feature-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: pointer;
}
.inv-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.inv-feature-card .elementor-widget-heading { margin: 0 !important; }

/* Governance + Charter grid — 5 cards per row, identical sizing,
   uniform titles in black/uppercase. Overrides the 3-col theme default. */
.inv-gov-grid .mc-gallery {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: auto !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.inv-gov-grid .mc-gallery > li {
  position: static !important;
  left: auto !important;
  top: auto !important;
  flex: 0 0 calc((100% - 24px * 4) / 5) !important;
  width: calc((100% - 24px * 4) / 5) !important;
  max-width: calc((100% - 24px * 4) / 5) !important;
  margin: 0 !important;
  list-style: none !important;
}
.inv-gov-grid .mc-gallery > li .gallery-box {
  width: 100% !important;
  height: 100% !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E5E5E5;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.inv-gov-grid .mc-gallery > li .gallery-box:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.inv-gov-grid .mc-gallery > li img.wp-post-image {
  width: 100% !important;
  height: 160px !important;
  object-fit: cover !important;
  aspect-ratio: auto !important;
}
.inv-gov-grid .mc-gallery > li .gallery-box img,
.inv-gov-grid .mc-gallery > li .gallery-box:hover img { opacity: 1 !important; }

/* Card title — black, uppercase */
.inv-gov-grid .gallery-box .description {
  background: #FFFFFF !important;
  padding: 14px 12px 18px !important;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-gov-grid .gallery-box .description h4,
.inv-gov-grid .gallery-box-title {
  color: #000000 !important;
  text-transform: none !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  letter-spacing: 0;
  margin: 0 !important;
}
.inv-gov-grid .gallery-box:hover .description {
  background: #F8FCFC !important;
}
.inv-gov-grid .gallery-box:hover h4 { color: #000000 !important; }
/* Hide date / item-details / extras */
.inv-gov-grid .gallery-post-date,
.inv-gov-grid .gallery-box .item-details,
.inv-gov-grid .gallery-box .description h5,
.inv-gov-grid .gallery-box .controls,
.inv-gov-grid .gallery-box .social-icons {
  display: none !important;
}

/* Mobile — 2 per row */
@media (max-width: 991px) {
  .inv-gov-grid .mc-gallery > li {
    flex: 0 0 calc((100% - 24px) / 2) !important;
    width: calc((100% - 24px) / 2) !important;
    max-width: calc((100% - 24px) / 2) !important;
  }
}

/* /investors/ — section headings (Corporate Governance, Governance Documents, etc.)
   Sentence-case (de-capitalised 2026-06-29), left-aligned, matched to the
   site's standard section-title font/size, with half-width cyan accent underline.
   Overrides the theme's default #42B3E5 box-header underline to Ceryvyn cyan. */
.elementor-page-7 .elementor-widget-heading.box-header,
.elementor-page-7 .box-header.elementor-widget-heading {
  margin-bottom: 30px !important;
}
.elementor-page-7 .elementor-widget-heading.box-header .elementor-heading-title,
.elementor-page-7 .box-header.elementor-widget-heading .elementor-heading-title {
  color: #000 !important;
  /* match the site's standard section titles (Elementor global heading type) */
  font-family: var( --e-global-typography-97acddb-font-family ), Sans-serif !important;
  font-size: var( --e-global-typography-97acddb-font-size ) !important;
  line-height: var( --e-global-typography-97acddb-line-height ) !important;
  text-transform: none !important;   /* was uppercase */
  font-weight: 400 !important;       /* was 700 */
  text-align: left !important;
  letter-spacing: normal;            /* was 1px — part of the caps treatment */
}
/* Half-width cyan accent below each box-header heading */
.elementor-page-7 .box-header.elementor-widget-heading .elementor-heading-title::after {
  background: #38E5E4 !important;
  width: 50px !important;
  height: 2px !important;
  content: "" !important;
  display: block !important;
  margin-top: 12px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
/* Make whole gov/charter cards visibly clickable */
.inv-gov-grid .gallery-box[data-href] { cursor: pointer; }

/* Top feature cards have explicit data-feature-link → clickable cursor */
.inv-feature-card[data-feature-link] { cursor: pointer; }

/* Gallery is marked .no-isotope via inline JS at parse time, so the theme's
   Isotope skips it entirely — no positioning, no on-load bounce. */
.inv-gov-grid .mc-gallery.no-isotope {
  height: auto !important;
}

/* /investors/ — all grid thumbnails rendered in B&W */
.elementor-page-7 .inv-gov-grid .mc-gallery img,
.elementor-page-7 .gallery-box img {
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}
.elementor-page-7 .inv-gov-grid .gallery-box:hover img {
  filter: grayscale(0%);
}

/* Hide Medicenter theme's slider-navigation (theme's small-slider/carousel arrows).
   The class lives in the theme's jquery.sliderControl.js — there's no admin
   toggle for it, so override via CSS. */
.slider-navigation {
  display: none !important;
}

/* Recent News widget — B&W thumbs that fade to colour on hover.
   Scoped to .recent_news containers, so it only affects the small Recent News
   blocks (HP / About LAM / About CVN-101). The standalone /news/ page does
   NOT use the .recent_news wrapper, so its cards stay full colour. */
.recent_news .gallery-box img {
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}
.recent_news .gallery-box:hover img {
  filter: grayscale(0%);
}

/* Inner page hero banner — cap at 600px. Does not affect the HP Revolution
   Slider (which renders inside .rev_slider / .wp-block-themepunch-revslider,
   not .page-banner). */
/* Inner-page banner height — responsive:
   ≥2000px → 600px,  1700-1999 → 500px,  1000-1699 → 400px,  <1000 → 300px. */
.page-banner {
  overflow: hidden;
  position: relative;
  height: 300px;
  max-height: 300px;
}
.page-banner .banner-img {
  width: 100%;
  height: 300px;
  max-height: 300px;
  object-fit: cover;
  display: block;
}
@media (min-width: 1000px) {
  .page-banner,
  .page-banner .banner-img { height: 400px; max-height: 400px; }
}
@media (min-width: 1700px) {
  .page-banner,
  .page-banner .banner-img { height: 500px; max-height: 500px; }
}
@media (min-width: 2000px) {
  .page-banner,
  .page-banner .banner-img { height: 600px; max-height: 600px; }
}

/* Revolution Slider CTA button — Ceryvyn cyan (solid) */
.sr7-layer.sr7-btn,
.sr7-layer.sr7-btn:link,
.sr7-layer.sr7-btn:visited {
  background: rgb(56, 229, 228) !important;
  background-color: rgb(56, 229, 228) !important;
}
.sr7-layer.sr7-btn:hover {
  background: #00ABDC !important;
  background-color: #00ABDC !important;
}

/* /news/ standalone page — desaturated cards by default, full colour on hover.
   Scoped to body.page-id-1269 so the small Recent News blocks on other pages
   keep their existing grayscale styling. */
.page-id-1269 .mc-gallery .gallery-box img {
  filter: saturate(30%);
  transition: filter 0.45s ease;
}
.page-id-1269 .mc-gallery .gallery-box:hover img {
  filter: saturate(100%);
}

/* Auto cyan accent under H2 section titles on /about-lam/ + /about-cvn-101/.
   Same look as the theme's .box-header::after pattern, applied without needing
   admins to add the .box-header CSS class to every heading widget.
   The :not(.box-header) guard prevents a double-line on any heading that
   already opts in to .box-header (e.g. Recent News). */
.elementor-page-3811 .elementor-widget-heading:not(.box-header) h2.elementor-heading-title::after,
.elementor-page-6122 .elementor-widget-heading:not(.box-header) h2.elementor-heading-title::after {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  background: #38E5E4;
  margin-top: 12px;
}

/* HP — "Scientific Legacy" section (4293739) mobile reorder.
   Desktop stays as designed: LEFT (image+text+button) | RIGHT (heading+image).
   Mobile order requested:  heading → right-col image → left-col image → text → button
   Achieved by swapping the column order on mobile (right col first, left col second).
   Each column's intra-order is already correct, so column-reverse gives us the result. */
@media (max-width: 767px) {
  .elementor-element.elementor-element-4293739 {
    flex-wrap: wrap !important;
  }
  .elementor-element.elementor-element-52dce5a { order: 2 !important; } /* original left col → second on mobile */
  .elementor-element.elementor-element-e41061a { order: 1 !important; } /* original right col → first on mobile */
}

/* HP mobile (≤479px) — 2nd image of each 2-image section gets a top gap.
   Section 1 (ae130b8 "Welcome to Ceryvyn"):
       2nd image lives in right column 0e92d77.
   Section 2 (4293739 "Scientific Legacy") AFTER our mobile reorder:
       1st image is 9b51c0e (in right col, shown first on mobile);
       2nd image is widget 93dc347 in left col 52dce5a (shown second). */
@media (max-width: 479px) {
  .elementor-3979 .elementor-element.elementor-element-0e92d77,
  .elementor-3979 .elementor-element.elementor-element-93dc347 {
    --margin-top: 3px;
    margin-top: 3px !important;
  }
}

/* HP mobile (≤479px) — zero margins on 52dce5a column.
   Force both the Elementor custom-prop AND explicit margin to beat per-post compiled CSS. */
@media (max-width: 479px) {
  .elementor-3979 .elementor-element.elementor-element-52dce5a,
  body .elementor-3979 .elementor-element.elementor-element-52dce5a {
    --margin-top: 0px !important;
    --margin-bottom: 0px !important;
    --margin-left: 0px !important;
    --margin-right: 0px !important;
    margin: 0 !important;
  }
}

/* Breadcrumb font size */
.bread-crumb li,
.bread-crumb li a {
  font-size: 15px !important;
}

/* Breadcrumb separator — nudge down slightly to vertically align with text */
.bread-crumb li.separator {
  margin-top: 5px;
}

/* Single-doctor profile page — cancel all hover effects on the profile image.
   Scoped to body.single-doctors so /team/ listing-card hovers are untouched. */
.single-doctors .doctor-box .controls,
.single-doctors .gallery-box .controls,
.single-doctors .gallery-box:hover .controls {
  display: none !important;
}
.single-doctors .doctor-box .template-plus-2,
.single-doctors .gallery-box .template-plus-2,
.single-doctors .gallery-box:hover .template-plus-2 {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.single-doctors .doctor-box img,
.single-doctors .doctor-box:hover img,
.single-doctors .gallery-box img,
.single-doctors .gallery-box:hover img {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

/* ============================================================
   Doctor profile description lists — REUSABLE PRESET
   Aligns the "Qualifications & Professional Memberships" list
   (plain bullets) and the "Areas of Expertise" list (check
   icons) into the same marker + text columns, and applies the
   house list spacing (margin-bottom 7px / line-height 18px).
   To apply on any profile: add class "doc-desc" to the
   description <table>. Qualifications items use plain [item];
   expertise items use [item icon="check"].
   ============================================================ */
.doc-desc .simple-list { margin: 0; padding: 0; list-style: none; }
.doc-desc .simple-list li {
  position: relative;
  margin: 0 0 7px;
  padding: 0 0 0 15px;
  line-height: 18px;
}
.doc-desc .simple-list li:last-child { margin-bottom: 0; }
/* shared marker column for BOTH bullets and check icons */
.doc-desc .simple-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  margin: 0;
  text-align: left;
  line-height: 18px;
  color: #42B3E5;
}
/* plain qualification items -> round bullet */
.doc-desc .simple-list li:not([class*="template-"])::before {
  content: "\2022";
  font-size: 15px;
}
/* expertise items keep the theme's check glyph, pulled into the same column */
.doc-desc .simple-list li.template-check::before {
  content: "\42";
  font-family: "template" !important;
  font-size: 11px;
}
/* cell padding for this table: value cells (td) 10px vertical / 0 horizontal;
   label header cells (th) flush with a 5px left inset only.
   font-weight/text-align keep the label look (override the UA <th> defaults). */
.doc-desc td { padding: 10px 5px 10px 0; vertical-align: top; line-height: 18px !important; }
/* plain-text value cells (Position / Speciality) have no list, so they'd sit
   flush-left; give them the same 15px inset as the list items' text so the
   value column lines up. The list cells keep 0 (their li provides the 15px). */
.doc-desc td:not(:has(.simple-list)) { padding-left: 15px; }
.doc-desc th {
  padding: 10px 0 0 5px;   /* 10px top matches the td's top inset so the
                              label lines up with the value's first line */
  font-weight: normal;
  text-align: left;
  vertical-align: top;
  max-width: 230px;
}

/* "← Back to Team" button on doctor profiles — not uppercase.
   Elementor assigns a different element id per profile, so target by href
   to cover every profile's button, not just one page. */
.single-doctors a.elementor-button[href="/team/"],
.single-doctors a.elementor-button[href="/team/"] .elementor-button-text {
  text-transform: none !important;
}

/* Legal-doc title block (Privacy/Terms/Disclaimer/Cookie): 30px above the
   title group, and no gap between the h1 and h2. The title group is the only
   .wp-block-group.smaller on these pages, so this is precisely scoped. */
.has-gutenberg-blocks .wp-block-group.smaller > .wp-block-group__inner-container {
  margin-top: 30px;
}
.has-gutenberg-blocks .wp-block-group.smaller > .wp-block-group__inner-container > h1,
.has-gutenberg-blocks .wp-block-group.smaller > .wp-block-group__inner-container > h2 {
  margin-top: 0;
  margin-bottom: 0;
}

/* /about-lam/ sirolimus image (bfe8d06): the theme's .wp-caption gives the
   figure a white bg + grey border that breaks the image's seamless blend with
   the section. Strip the box and float the native caption over the image base,
   centered — image stays a clean PNG, caption rides on top. Scoped to this widget. */
.elementor-element-bfe8d06 figure.wp-caption {
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
  max-width: 100%;
  margin: 0;
}
.elementor-element-bfe8d06 figure.wp-caption img {
  max-width: 100%;
}
.elementor-element-bfe8d06 figure.wp-caption figcaption.widget-image-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  margin: 0;
  text-align: center;
}

/* === Legal documents — section heading hierarchy ===
   Privacy/Terms/Disclaimer/Cookie. Section headers are real <h2> (with id=
   matching the Index links) and sub-headers are <h3>. Scoped to the gutenberg
   legal-doc groups, excluding the page title (.smaller) + subtitle (.h1).
   scroll-margin-top keeps #anchor jumps clear of the fixed header. */
.has-gutenberg-blocks .wp-block-group.smaller h2.wp-block-heading:not(.h1):not(.smaller) {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
  text-align: left;
  margin: 36px 0 14px;
  scroll-margin-top: 120px;
}
/* short cyan brand accent under each section heading */
.has-gutenberg-blocks .wp-block-group.smaller h2.wp-block-heading:not(.h1):not(.smaller)::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  background: #38E5E4;
  margin-top: 8px;
}
.has-gutenberg-blocks .wp-block-group.smaller h3.wp-block-heading {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: #1a1a1a;
  text-align: left;
  margin: 26px 0 8px;
  scroll-margin-top: 120px;
}
/* Legal-doc subtitle (the .h1 heading just below the main title) — muted grey */
.has-gutenberg-blocks .wp-block-group.smaller h2.wp-block-heading.h1 {
  color: #afafaf;
}

/* === Mobile === */
/* Hide the top header bar (social/contact strip) on mobile. */
@media (max-width: 767px) {
  .header-top-sidebar-container {
    display: none !important;
  }
}

/* /team/ grid on mobile — the cards are a fixed 280px wide (desktop layout),
   which leaves big side gaps on phones. Make them fluid: 2 per row filling the
   width with a snug gap, so the grid uses the screen instead of being padded in.
   Scoped to .doctor-list-section, which only exists on /team/. */
/* /team/ grid on mobile — widen the grid section's inner so the cards aren't
   padded in from both sides. Scoped to .doctor-list-section so the intro text
   and other sections keep their padding. (`body` prefix raises specificity
   above Elementor's own container rules.) */
@media (max-width: 767px) {
  body .doctor-list-section > .e-con-inner {
    max-width: 95% !important;
  }
  /* Equalise the card description heights so adjacent cards line up (their
     text lengths differ). Scoped to the team grid so the news/investors
     gallery cards (same .gallery-box .description class) aren't forced taller. */
  body .doctor-list-section .gallery-box .description {
    padding: 10px 10px 13px !important;
    min-height: 110px !important;
  }
}


/* /about-lam/ mobile — "A growing global LAM network" logos in pairs (2 per row).
   The container stacks to 1-per-row column on mobile by default; switch it to a
   wrapping row with each logo at 50% so they sit two-up (3rd wraps, centred). */
@media (max-width: 767px) {
  /* the real flex parent is the boxed container's .e-con-inner (Elementor wraps
     children there), so set the row/wrap on both levels. */
  .elementor-element-9c8d9ec,
  .elementor-element-9c8d9ec > .e-con-inner {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    /* the desktop column-gap is 100px (spaces 3 logos across a wide row) — far
       too wide for a 2-up mobile pair, which is why they were wrapping. */
    column-gap: 24px !important;
    row-gap: 24px !important;
  }
  /* every logo widget in the (merged) container → ~half width, two per row */
  .elementor-element-9c8d9ec > .elementor-element {
    flex: 0 0 46% !important;
    max-width: 46% !important;
  }
}

/* /about-lam/ mobile — section inner widths:
   logo section ("A growing global LAM network") narrower (85%);
   "Relevant publications" full width (100%). */
@media (max-width: 767px) {
  body .elementor-element-51fe781 > .e-con-inner { max-width: 85% !important; }
  body .elementor-element-af8e474 > .e-con-inner { max-width: 100% !important; }
}

/* Non-HP hero (page banner) titles — one consistent mobile sizing for all
   non-homepage pages: H1 title 30px, H3 subtitle 15px. (Only non-HP pages have
   .page-banner .page-title / .banner-subtitle; the homepage uses the slider.) */
@media (max-width: 767px) {
  .page-banner .page-title { font-size: 30px !important; padding: 40px 0 0 0 !important; }
  .page-banner-overlay .banner-subtitle { font-size: 15px !important; }
}

/* Doctor profile page (mobile) — tighten the breadcrumb header: 15px padding +
   divider, and 12px breadcrumb text. Scoped to .single-doctors. */
@media (max-width: 767px) {
  .single-doctors .page-header > .vc_inner {
    border-bottom: 1px solid #E5E5E5;
    padding: 15px 0 !important;
  }
  .single-doctors .bread-crumb li,
  .single-doctors .bread-crumb li a {
    font-size: 12px !important;
  }
}

/* /investors/ Board Committee Composition table — horizontal scroll on mobile
   (3 columns are too wide for a phone; scroll instead of squishing). */
@media (max-width: 767px) {
  .inv-composition {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .inv-composition table {
    min-width: 560px;
  }
}

/* Contact page — replace the phone & email hexagon icons with plain SVG icons
   (no hexagon). General (mobile + desktop). Scoped to the phone (9156bf7) and
   email (904290f) feature widgets; the address icon is left as-is. */
.elementor-element-9156bf7 .hexagon,
.elementor-element-904290f .hexagon {
  background: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}
.elementor-element-9156bf7 .hexagon::before,
.elementor-element-9156bf7 .hexagon::after,
.elementor-element-904290f .hexagon::before,
.elementor-element-904290f .hexagon::after {
  display: none !important;
}
.elementor-element-9156bf7 .features-phone::before,
.elementor-element-904290f .features-email::before {
  content: none !important;
}
.elementor-element-9156bf7 .features-phone,
.elementor-element-904290f .features-email {
  display: inline-block !important;
  height: 42px !important;
  width: 45px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}
.elementor-element-9156bf7 .features-phone {
  background-image: url(/wp-content/uploads/2026/06/Phone.svg) !important;
}
.elementor-element-904290f .features-email {
  background-image: url(/wp-content/uploads/2026/06/E-mail.svg) !important;
}

/* Contact page — address block: show the Location SVG pin in place of the
   hexagon glyph, matching the phone & email treatment. Scoped to the Australia
   address feature widget (289cfa7); feature icon meta set to "location". */
.elementor-element-289cfa7 .hexagon {
  background: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}
.elementor-element-289cfa7 .hexagon::before,
.elementor-element-289cfa7 .hexagon::after {
  display: none !important;
}
.elementor-element-289cfa7 .features-location::before {
  content: none !important;
}
.elementor-element-289cfa7 .features-location {
  display: inline-block !important;
  height: 42px !important;
  width: 50px !important;
  background-image: url(/wp-content/uploads/2026/06/Location.svg) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/* Footer banner boxes — replace all three icons with new SVGs (LinkedIn, phone,
   email). General. Targets each box's ::before; !important beats the existing
   first-child LinkedIn rule. Root-relative URLs for stage/prod portability. */
.footer-banner-box-container .footer-banner-box::before {
  content: "" !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  width: 48px !important;
  height: 48px !important;
}
.footer-banner-box-container .features-id::before {
  background-image: url(/wp-content/uploads/2026/06/LinkedIn-1.svg) !important;
}
.footer-banner-box-container .features-phone::before {
  background-image: url(/wp-content/uploads/2026/06/Phone-1.svg) !important;
}
.footer-banner-box-container .features-email::before {
  background-image: url(/wp-content/uploads/2026/06/E-mail-1.svg) !important;
}
@media (max-width: 767px) {
  .footer-banner-box-container .footer-banner-box::before {
    width: 28px !important;
    height: 28px !important;
  }
}

/* Footer contact-data icons (phone/email/address glyphs) → white. */
.footer .widget .contact-data li::before {
  color: #fff !important;
}

/* Contact page (mobile) — put the phone and email sections side by side in one
   row (they stack as full-width columns by default). Each at 50%. */
@media (max-width: 767px) {
  .elementor-element-141fd78 {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .elementor-element-141fd78 > .elementor-element {
    flex: 1 1 0 !important;
    max-width: 50% !important;
  }
  .elementor-element-904290f {
    margin-top: 0 !important;
  }
}

/* Contact side-by-side fix — Elementor put the email widget's old 35px top
   margin on its INNER .elementor-widget-container, so zero that too to top-align. */
@media (max-width: 767px) {
  .elementor-element-904290f > .elementor-widget-container {
    margin-top: 0 !important;
  }
}

/* Contact page (mobile) — center the address block (e86b0e6: icon + address
   text) horizontally. The section is already centred in the viewport; this
   centres its children within it. */
@media (max-width: 767px) {
  .elementor-element-e86b0e6 {
    align-items: center !important;
    text-align: center !important;
  }
}

/* Contact address block (mobile) — the feature widget carries its own
   align-self:flex-start from Elementor, which beats the container's center.
   Force the children to center-align. */
@media (max-width: 767px) {
  .elementor-element-e86b0e6 > .elementor-element {
    align-self: center !important;
  }
}

/* Smart Slider 7 (mobile) — tighten the heading layer's line-height and nudge
   another text layer down a touch. */
@media (max-width: 767px) {
  sr7-txt#SR7_2_1-4-0 {
    line-height: 30px !important;
  }
  sr7-txt#SR7_2_1-11-0 {
    top: 15px;
  }
}

/* Homepage info-boxes (mobile) — zero out padding. The global .info-box rule up
   top is being overridden on mobile, so force it here with !important. */
@media (max-width: 767px) {
  body.home .info-box.animated-element {
    padding: 0 !important;
  }
}

/* /investors/ governance grid (mobile) — give each card's description a floor
   so the cards line up evenly. */
@media (max-width: 767px) {
  .inv-gov-grid .gallery-box .description {
    min-height: 85px;
  }
}

/* Footer "Contact Us" widget (mobile) — make it flush-left with its parent
   column. The mobile rule above centers .newsletter_group (align-items:center)
   and WordPress's constrained layout adds auto side-margins to children; both
   indent the widget off the left edge. newsletter_group wraps only this contact
   block, so this is safely scoped. */
@media (max-width: 767px) {
  .wp-block-group.newsletter_group .wp-block-group-is-layout-constrained {
    align-items: flex-start;
  }
  .wp-block-group.newsletter_group .widget.mc_contact_details_widget {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    text-align: left;
  }
  .wp-block-group.newsletter_group ul.contact-data {
    margin-left: 0;
    padding-left: 0;
  }
}

/* /contact/ — hide the location (hexagon) icon beside the "Australia" address
   on MOBILE only; the "Australia" title + address text stay. Added 2026-06-30. */
@media (max-width: 767px) {
  .elementor-page-3817 .contact-address .hexagon { display: none !important; }
}

/* ── Heading structure fixes (2026-07-13) ──────────────────────────────────
   The legal pages (Privacy / Terms / Disclaimer / Cookie Notice) each repeated
   their title as a second in-content <h1>, duplicating the banner H1. The tag
   is now <h2 class="legal-doc-title">; this keeps the exact look it had as an
   h1 (30px / 42px / #000) so nothing moves on the page. */
.legal-doc-title {
  font-size: 30px !important;
  line-height: 42px !important;
  font-weight: 400 !important;
  color: #000 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin: 0 !important;
}

/* Homepage H1 (see medicenter-child/header.php). The hero is an image-only
   slider with no text, so the H1 is exposed to crawlers and screen readers
   without being painted. Not display:none — that would hide it from both. */
.visually-hidden-h1 {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Mobile scroll-to-top button (markup + behaviour in functions.php) ──────
   Mobile only: hidden at ≥768px, where the design has no need for it and the
   parent theme's own .scroll-top could be re-enabled instead. Appears once the
   first full screen has been scrolled past. Brand secondary (#086AB3) at 55%
   so the page reads through it. */
.cvn-to-top {
  display: none;
}

@media (max-width: 767px) {
  .cvn-to-top {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 998;                  /* under the sticky header (999+), over content */

    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;

    background: rgba(8, 106, 179, 0.55);   /* brand secondary, semi-transparent */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    /* Hidden until scrolled past the first screen — not display:none, so it can
       animate in and out. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }

  .cvn-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
  }

  .cvn-to-top:active {
    background: rgba(8, 106, 179, 0.75);
  }

  .cvn-to-top svg {
    width: 22px;
    height: 22px;
    display: block;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .cvn-to-top { transition: none; }
}