/*
Theme Name: Aviora Health
Theme URI: https://aviorahealth.co.uk
Author: Aviora Health
Description: Custom theme for Aviora Health - private GP and dermatology clinic in Oxfordshire. Hand coded, no page builder, with editable header and footer, auto-built pages and menus, a maintenance mode switch, and separate desktop / mobile stylesheets.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aviora
Tags: custom-menu, responsive, healthcare
*/

/*
   This file holds the base layout and everything from tablet width upwards.
   Anything below 1180px lives in assets/css/mobile.css so the two screen
   sizes stay easy to edit without hunting through one giant file.
*/

/* RESET & BASE */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 :root{
     --bg: #EFFEFF;
     --bg-soft: #E9FBFC;
     --navy: #152B48;
     --navy-2: #1E3A5F;
     --olive: #77846C;
     --olive-dark: #626E58;
     --text-body: #1C1C1C;
     --text-dark: #1C1C1C;
     --white: #ffffff;
     --card-radius: 18px;
     --btn-radius: 999px;
     --font-display: 'Jost', sans-serif;
     --font-logo: 'Playfair Display', serif;
     --font-body: 'Inter', sans-serif;
}
 html{
     scroll-behavior: smooth;
}
 body{
     font-family: var(--font-body);
     background: var(--bg);
     color: var(--text-body);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
    /* clip rather than hidden: hidden turns the page into a scroll container
       and stops the sticky header from sticking. */
     overflow-x: clip;
}
 @supports not (overflow: clip){
     body{
         overflow-x: hidden;
    }
}
 img{
     max-width: 100%;
     display: block;
}
 a{
     text-decoration: none;
     color: inherit;
}
 ul{
     list-style: none;
}
 button{
     font-family: inherit;
     cursor: pointer;
     border: none;
     background: none;
}
 .container{
     width: 100%;
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 24px;
}
 .hero-text {
     padding-top: 130px;
}
 h1, h2, h3, h4{
     font-family: var(--font-display);
     color: var(--text-dark);
     font-weight: 400;
     line-height: 1.08;
     letter-spacing: -0.01em;
}
/* BUTTONS */
 .btn{
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 24px;
     border-radius: var(--btn-radius);
     font-family: var(--font-display);
     font-size: 20px;
     font-weight: 400;
     white-space: nowrap;
     transition: transform .2s ease, background .25s ease, box-shadow .25s ease;
}
 .btn:hover{
     transform: translateY(-2px);
}
 .btn-dark{
     background: var(--navy);
     color: #fff;
	 padding:12px 30px;
	 font-weight:500;
}
 .btn-dark:hover{
     background: var(--navy-2);
}
 .btn-olive{
     background: var(--olive);
     color: #fff;
}
 .btn-olive:hover{
     background: var(--olive-dark);
}
 .btn-light{
     background: #fff;
     color: var(--navy);
}
 .btn-light:hover{
     background: #eef4f2;
}
/* HEADER */
 .site-header{
     position: relative;
     z-index: 100;
     background: rgb(239 254 255);
     padding: 16px 0;
     transition: padding .25s ease, box-shadow .25s ease;
}
/* Switched on under Aviora > Settings > Header */
 .has-sticky-header .site-header{
     position: sticky;
     top: 0;
}
/* Added by the script once the page has scrolled past the top */
 .site-header.is-scrolled{
     padding: 10px 0;
     box-shadow: 0 10px 30px rgba(15,42,67,.09);
}
 .header-inner{
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
}
 .logo{
     display: flex;
     align-items: center;
     gap: 10px;
     flex-shrink: 0;
}
 .logo img{
     width: auto;
     height: auto;
}
 .logo-text{
     font-family: var(--font-logo);
     font-size: 26px;
     color: var(--navy);
     white-space: nowrap;
}
 .logo-light .logo-text{
     color: #fff;
}
 .main-nav{
     display: flex;
     align-items: center;
     gap: 18px;
     font-family: var(--font-display);
     font-size: 16px;
     font-weight: 400;
     color: var(--text-dark);
}
/* One shared link style. The navy pill is not hard coded on any item any
   more - it appears on hover and stays put on the page you are looking at. */
 .nav-link{
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 18px;
     font-weight: 600;
     padding: 8px 18px;
     border-radius: var(--btn-radius);
     white-space: nowrap;
     color: var(--text-dark);
     background: transparent;
     transition: background .22s ease, color .22s ease;
}
 .nav-link:hover, .dropdown:hover > .nav-link{
     background: var(--navy);
     color: #fff;
}
 .nav-link.is-current{
     background: var(--navy);
     color: #fff;
}
 .nav-link.is-current:hover{
     background: var(--navy-2);
}
 .nav-caret{
     transition: transform .22s ease;
}
 .dropdown{
     position: relative;
}
/* An invisible strip bridging the gap to the dropdown. Without it the pointer
   leaves the parent on the way down and the menu disappears. */
 .dropdown::after{
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 100%;
     height: 16px;
    /* Only live while the item is hovered, so it never swallows a click on
       whatever sits below the header. */
     pointer-events: none;
}
 .dropdown:hover::after{
     pointer-events: auto;
}
 .dropdown:hover .nav-caret, .dropdown:focus-within .nav-caret{
     transform: rotate(180deg);
}
 .header-cta{
     flex-shrink: 0;
}
 .nav-cta-mobile{
     display: none;
}
 .dropdown-menu{
     position: absolute;
     top: calc(100% + 14px);
     left: 0;
     background: #fff;
     border-radius: 14px;
     box-shadow: 0 18px 40px rgba(15,42,67,.14);
     padding: 10px;
     min-width: 210px;
     display: flex;
     flex-direction: column;
     opacity: 0;
     visibility: hidden;
     transform: translateY(8px);
     transition: all .2s ease;
}
 .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu{
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
}
 .dropdown-menu a{
     padding: 9px 12px;
     border-radius: 8px;
     font-size: 14px;
     color: var(--text-dark);
}
 .dropdown-menu a:hover{
     background: var(--bg);
}
 .hamburger{
     display: none;
     flex-direction: column;
     gap: 5px;
     width: 26px;
}
 .hamburger span{
     height: 2px;
     background: var(--navy);
     border-radius: 2px;
}
/* HERO */
 .hero{
     padding: 40px 0 100px;
}
 .hero-grid{
     position: relative;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
     align-items: start;
}
 .hero-text h1{
     font-size: 90px;
     font-weight: 400;
     color: var(--text-dark);
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 6px 16px;
}
 .avatar-inline{
     display: inline-flex;
     align-items: center;
     height: 48px;
     background: var(--navy);
     border-radius: 999px;
     padding: 4px;
     gap: 13px;
}
 .avatar-inline img{
     width: 40px;
     height: 40px;
     border-radius: 50%;
     border: 3px solid var(--navy);
     object-fit: cover;
     margin-left: -14px;
}
 .avatar-inline img:first-child{
     margin-left: 0;
}
 .avatar-arrow{
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-left: -14px;
     border: 3px solid var(--navy);
}
 .avatar-arrow svg path{
     stroke: var(--navy);
}
 .hero-copy{
     margin-top: 60px;
     font-size: 15px;
}
 .hero-actions{
     display: flex;
     gap: 14px;
     margin-top: 35px;
     flex-wrap: wrap;
}
 .hero-stats{
     display: flex;
     gap: 50px;
     margin-top: 130px;
}
 .hero-stat{
     display: flex;
     flex-direction: column;
     gap: 4px;
}
 .hero-stat-num{
     font-family: var(--font-display);
     font-size: 40px;
     color: var(--text-dark);
}
 .hero-stat-label{
     font-size: 15px;
     color: var(--text-body);
}
 .hero-media{
     position: relative;
}
 .hero-photo{
     width: 100%;
     object-fit: cover;
     border-radius: 0 0 20px;
}
 .floating-card{
     position: absolute;
     background: #fff;
     border-radius: 10px;
     box-shadow: 0 20px 45px rgba(15,42,67,.16);
     padding: 12px 14px;
}
 .doctor-card{
     top: 54%;
     right: 8%;
     display: flex;
     align-items: center;
     gap: 12px;
     min-width: 210px;
}
 .doctor-card img{
     width: 44px;
     height: 44px;
     border-radius: 50%;
     object-fit: cover;
}
 .doctor-card strong{
     display: block;
     font-size: 16.5px;
     color: var(--text-dark);
     font-family: var(--font-display);
     font-weight: 500;
     white-space: nowrap;
}
 .doctor-card span{
     font-size: 12px;
     color: var(--text-body);
     white-space: nowrap;
}
 .card-arrow{
     margin-left: auto;
     width: 45px;
     height: 45px;
     border-radius: 50%;
     background: var(--navy);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
}
 .card-arrow svg path{
     stroke: #fff;
}
 .service-card{
     position: absolute;
     left: -34%;
     top: 72%;
     width: 70%;
     min-width: 340px;
     padding: 20px;
     display: flex;
     align-items: flex-start;
     gap: 16px;
     z-index: 5;
}
 .service-card-text{
     flex: 1;
}
 .service-card h4{
     padding-top:10px;
     font-size: 25px;
     font-weight: 400;
}
 .service-card > img{
     border-radius: 8px;
     object-fit: cover;
     flex-shrink: 0;
     width:125px;
}
 .service-card p{
     font-size: 13px;
     margin-top: 8px;
     color: var(--text-body);
}
 .service-tags{
     display: flex;
     gap: 60px;
     justify-content: center;
     align-items: center;
     margin-top: 14px;
}
 .service-tags span{
     font-size: 13px;
     color: var(--text-dark);
     white-space: nowrap;
}
/* STATS ROW */
 .stats-row{
     padding: 30px 0 80px;
}
 .stats-grid{
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
}
 .stat-card{
     background: #fff;
     border-radius: var(--card-radius);
     padding: 34px 30px 38px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
}
 .stat-percent{
     display: block;
     font-family: var(--font-display);
     font-size: 45px;
     color: var(--olive);
}
 .stat-icon{
     margin-top: 10px;
}
 .stat-card h3{
     font-size: 24px;
     margin-top: 13px;
     font-family: var(--font-display);
     font-weight: 500;
     color: var(--olive);
}
 .stat-card p{
     font-size: 16px;
     margin-top: 12px;
}
/* CLINIC PARTNER */
 .clinic-partner{
     padding: 20px 0 90px;
}
 .clinic-grid{
     display: grid;
     grid-template-columns: 1fr 1.15fr;
     gap: 50px;
     align-items: stretch;
}
 .clinic-main{
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: var(--card-radius);
}
 .clinic-text-col{
     display: flex;
     flex-direction: column;
}
 .clinic-small-row{
     display: flex;
     padding-left:40px;
     align-items: flex-start;
     gap: 45px;
     margin-bottom: 28px;
}
 .clinic-small-row img{
     width: 350px;
     height: 175px;
     object-fit: cover;
     border-radius: 14px;
}
 .clinic-small-row img:first-child{
     margin-top: 70px;
}
 .clinic-text-col h2{
     font-size: 65px;
     max-width: 560px;
}
 .clinic-text-col p{
     margin-top: 22px;
     font-size: 15px;
}
/* CLOSE TO HOME */
 .close-to-home{
     padding: 40px 0 90px;
}
 .cth-head{
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     flex-wrap: wrap;
     gap: 30px;
     margin-bottom: 100px;
}
 .cth-head h2{
     font-size: 72px;
     font-weight:400;
}
 .cth-stats{
     display: flex;
     gap: 40px;
}
 .cth-stat{
     display: flex;
     flex-direction: column;
     gap: 4px;
}
 .cth-stat span{
     font-family: var(--font-display);
     font-size: 40px;
     color: var(--text-dark);
     white-space: nowrap;
}
 .cth-stat small{
     font-size: 14px;
}
 .cth-grid{
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 24px;
     align-items: start;
}
 .cth-col img{
     border-radius: var(--card-radius);
     object-fit: cover;
}
 .cth-col:first-child img{
     aspect-ratio: 4/3.2;
}
 .cth-col h3{
     font-size: 30px;
     margin-top: 18px;
}
 .cth-col .btn{
     margin-top: 22px;
}
 .cth-col-mid img{
     height: 100%;
     aspect-ratio: auto;
     min-height: 340px;
}
 .cth-col-right img{
     aspect-ratio: 4/2.4;
}
 .cth-avatars{
     margin-bottom: 60px;
}
 .cth-col-right p{
     margin-top: 14px;
     font-size: 16px;
     margin-bottom: 50px;
}
/* SERVICES / COMPREHENSIVE CARE */
 .services-section{
     padding: 20px 0 90px;
}
 .services-head{
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 24px;
     margin-bottom: 44px;
}
 .services-head h2{
     font-size: 72px;
}
 .services-featured{
     background: #fff;
     border-radius: 16px;
     padding: 12px 18px 12px 12px;
     display: flex;
     align-items: center;
     gap: 14px;
     box-shadow: 0 12px 24px rgba(15,42,67,.06);
}
 .services-featured img{
     width: 120px;
     height: 120px;
     border-radius: 12px;
     object-fit: cover;
}
 .services-featured strong{
     display: block;
     font-size: 22px;
     color: var(--text-dark);
     font-weight:normal;
}
 .services-featured span{
     font-size: 16px;
}
 .services-featured-tags{
     display: flex;
     gap: 30px;
     margin-top: 10px;
    justify-content: center;
     align-items: center;
}
 .services-featured-tags span{
     font-size: 14px;
     color: var(--text-body);
}
 .services-grid{
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 50px;
}
 .service-item{
     background: #fff;
     border-radius: var(--card-radius);
     overflow: hidden;
}
 .service-item-top{
     display: flex;
     align-items: flex-start;
     gap: 40px;
     padding: 30px 28px 26px;
}
 .service-item-icon{
     width: 80px;
     height: 80px;
     border-radius: 5px;
     background: var(--navy);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
}
 .service-item-text h3{
     font-family: var(--font-display);
     font-weight: 400;
     font-size: 25px;
}
 .service-item-text p{
     font-size: 16px;
     margin-top: 20px;
     color: var(--text-body);
}
 .service-item > img{
     width: 100%;
     object-fit: cover;
     display: block;
}
/* CTA BANNER */
 .cta-banner{
     padding: 0 0 90px;
}
 .cta-inner{
     position: relative;
     background: var(--navy);
     border-radius: 24px;
     padding: 70px 24px;
     text-align: center;
     overflow: hidden;
}
 .cta-inner h2{
     color: #fff;
     font-size: 50px;
     font-weight:bold;
	 max-width:550px;
	 margin:0 auto;
}
 .cta-inner .btn{
     margin-top: 26px;
     font-weight:bold;
}
 .cta-deco{
     position: absolute;
     opacity: .8;
}
 .cta-deco-left{
     left: -4%;
     bottom: -10%;
}
 .cta-deco-right{
     right: -6%;
     top: -12%;
}
/* TESTIMONIALS */
 .testimonials{
     padding: 20px 0 100px;
}
 .testimonials-head{
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 24px;
     margin-bottom: 50px;
}
 .testimonials-head h2{
     font-size: 60px;
}
 .testimonial-slider{
     position: relative;
     overflow: hidden;
}
 .testimonial-track{
     display: flex;
     gap: 24px;
     transition: transform .5s cubic-bezier(.22,.61,.36,1);
     will-change: transform;
     cursor: grab;
     touch-action: pan-y;
     user-select: none;
}
 .testimonial-track.dragging{
     cursor: grabbing;
     transition: none;
}
 .testimonial-card{
     position: relative;
     flex: 0 0 calc((100% - 48px) / 3);
     min-width: 0;
     padding: 24px 0 10px;
     border-top: 1px solid rgba(15,42,67,.12);
     overflow: visible;
}
 .quote-mark{
     position: absolute;
     right: 136%;
     bottom: 36px;
     font-family: var(--font-display);
     font-size: 40px !important;
     color: rgba(15, 42, 67, .14);
     line-height: 1;
}
 .stars{
     color: #000;
     font-size: 30px;
     letter-spacing: 2px;
}
 .testimonial-card p{
     margin: 16px 0 22px;
     font-size: 17px;
     max-width: 420px;
}
 .testimonial-card strong{
     display: block;
     font-size: 35px;
     font-weight:normal;
     color: var(--text-dark);
     font-family: var(--font-display);
}
 .testimonial-card span{
     font-size: 19px;
}
 .slider-nav{
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 22px;
     margin-top: 44px;
}
 .slider-arrow{
     width: 46px;
     height: 46px;
     border-radius: 50%;
     background: var(--navy);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     transition: background .25s ease, transform .2s ease;
}
 .slider-arrow:hover{
     background: var(--olive);
     transform: translateY(-2px);
}
 .slider-arrow:disabled{
     background: rgba(15,42,67,.25);
     cursor: default;
     transform: none;
}
 .slider-dots{
     display: flex;
     align-items: center;
     gap: 9px;
}
 .slider-dots button{
     width: 9px;
     height: 9px;
     border-radius: 50%;
     background: rgba(15,42,67,.2);
     transition: background .25s ease, transform .25s ease;
     padding: 0;
}
 .slider-dots button.active{
     background: var(--navy);
     transform: scale(1.25);
}
/* FOOTER */
 .site-footer{
     background: var(--navy);
     color: rgba(255,255,255,.75);
     padding: 70px 0 0;
}
 .footer-grid{
     display: grid;
     grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
     gap: 30px;
     padding-bottom: 120px;
     border-bottom: 1px solid rgba(255,255,255,.12);
}
 .footer-brand p{
     margin-top: 50px;
     font-size: 15px;
     line-height: 1.7;
}
 .footer-col h4{
     color: #c3c3c3;
     font-family: var(--font-body);
     font-size: 20px;
     font-weight: normal;
     margin-bottom: 16px;
}
 .footer-col-toggle{
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     width: 100%;
     text-align: left;
     cursor: default;
}
 .footer-col-toggle h4{
     margin-bottom: 16px;
}
 .footer-toggle-icon{
     display: none;
     flex-shrink: 0;
     color: rgba(255,255,255,.5);
     transition: transform .25s ease, color .25s ease;
}
 .footer-col a{
     display: block;
     font-size: 16px;
     padding: 6px 0;
     color: #99a2af;
     transition: color .2s ease;
}
 .footer-col a:hover{
     color: #fff;
}
 .subscribe-form{
     display: flex;
     flex-direction: column;
     gap: 10px;
}
 .subscribe-form input{
     padding: 12px 14px;
     border-radius: 5px;
     border: 1px solid rgba(255,255,255,.2);
     background: #fff;
     color: #000;
     font-size: 13px;
     font-family: inherit;
}
 .subscribe-form input::placeholder{
     color: #000;
}
 .subscribe-form button{
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     width:120px;
     background: #fff;
     color: var(--navy);
     padding: 11px;
     border-radius: 6px;
     font-size: 13.5px;
     font-weight: 600;
}
 .stay-connected{
     margin-top: 26px;
}
 .social-icons{
     display: flex;
     gap: 22px;
}
 .social-icons a{
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     opacity: .85;
}
 .social-icons a:hover{
     opacity: 1;
     color: var(--olive);
}

/* Lock background scroll while the mobile menu is open */
 body.nav-open{
     overflow: hidden;
     overscroll-behavior: contain;
}

 .screen-reader-text{
     position: absolute !important;
     width: 1px;
     height: 1px;
     margin: -1px;
     padding: 0;
     overflow: hidden;
     clip: rect(0 0 0 0);
     white-space: nowrap;
     border: 0;
}
 .skip-link:focus{
     position: fixed !important;
     top: 12px;
     left: 12px;
     width: auto;
     height: auto;
     clip: auto;
     z-index: 999;
     background: #fff;
     color: var(--navy);
     padding: 12px 20px;
     border-radius: 10px;
     font-weight: 600;
}
 a:focus-visible, button:focus-visible, input:focus-visible{
     outline: 2px solid var(--olive);
     outline-offset: 3px;
}
 .subscribe-note{
     font-size: 12.5px;
     color: #9CC28A;
     min-height: 18px;
}
/* Admin bar keeps the sticky header clear of the toolbar */
 .admin-bar .site-header{
     top: 32px;
}
/* Fallback layout for posts and inner pages that are not designed yet */
 .basic-page{
     padding: 60px 24px 90px;
     max-width: 860px;
}
 .basic-title{
     font-size: 40px;
     font-weight: 500;
     margin-bottom: 18px;
}
 .basic-entry{
     margin-bottom: 50px;
}
 .basic-thumb img{
     border-radius: var(--card-radius);
     margin-bottom: 22px;
}
 .basic-content{
     font-size: 16px;
}
 .basic-content p, .basic-content ul, .basic-content ol{
     margin-bottom: 18px;
}
 .basic-content ul, .basic-content ol{
     padding-left: 20px;
     list-style: revert;
}
 .basic-content a{
     color: var(--olive-dark);
     text-decoration: underline;
}
 .pagination{
     display: flex;
     gap: 10px;
     font-family: var(--font-display);
}

/* SERVICES PAGE - INTRO */
 .services-intro{
     padding: 40px 0 60px;
}
 .services-intro-grid{
     display: grid;
     grid-template-columns: 1.15fr 1fr;
     gap: 60px;
     align-items: center;
}
 .eyebrow{
     display: inline-block;
     background: var(--olive);
     color: #fff;
     font-family: var(--font-display);
     font-size: 14px;
     font-weight: 500;
     padding: 6px 18px;
     border-radius: var(--btn-radius);
     margin-bottom: 26px;
}
 .services-intro-text h1{
     font-size: 62px;
     font-weight: 400;
     max-width: 620px;
}
 .services-intro-text p{
     margin-top: 22px;
     font-size: 16px;
     max-width: 600px;
}
 .services-intro-media img{
     width: 100%;
     border-radius: var(--card-radius);
     object-fit: cover;
     aspect-ratio: 16/10;
}
/* Category filters */
 .service-filters{
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin-top: 32px;
}
 .filter-pill{
     font-family: var(--font-display);
     font-size: 15px;
     font-weight: 500;
     padding: 9px 22px;
     border-radius: var(--btn-radius);
     background: #fff;
     color: var(--navy);
     border: 1px solid rgba(15,42,67,.14);
     transition: background .22s ease, color .22s ease, border-color .22s ease;
}
 .filter-pill:hover{
     border-color: var(--navy);
}
 .filter-pill.is-active{
     background: var(--navy);
     border-color: var(--navy);
     color: #fff;
}

/* SERVICES PAGE - CARD GROUPS */
 .service-groups{
     padding: 10px 0 70px;
}
 .service-group{
     margin-bottom: 55px;
}
 .service-group:last-child{
     margin-bottom: 0;
}
 .group-title{
     display: flex;
     align-items: baseline;
     gap: 8px;
     font-family: var(--font-display);
     font-size: 21px;
     font-weight: 500;
     color: var(--text-dark);
     margin-bottom: 22px;
}
 .group-number{
     font-weight: 600;
}
 .group-dash{
     color: rgba(28,28,28,.45);
}
 .group-cards{
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 22px;
}
 .group-cards-wide{
     grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}
 .group-card{
     position: relative;
     display: flex;
     flex-direction: column;
     background: #fff;
     border: 1px solid rgba(15,42,67,.08);
     border-radius: 14px;
     padding: 24px 22px 26px;
     transition: transform .25s ease, box-shadow .25s ease;
}
 .group-card:hover{
     transform: translateY(-4px);
     box-shadow: 0 20px 40px rgba(15,42,67,.1);
}
 .group-card-head{
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 12px;
     margin-bottom: 18px;
}
 .group-card-icon{
     width: 38px;
     height: 38px;
     border-radius: 8px;
     background: var(--navy);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
}
 .group-card-icon img{
     width: 20px;
     height: 20px;
     object-fit: contain;
}
 .group-card-badge{
     background: var(--olive);
     color: #fff;
     font-family: var(--font-display);
     font-size: 11.5px;
     font-weight: 500;
     letter-spacing: .04em;
     padding: 4px 12px;
     border-radius: var(--btn-radius);
}
 .group-card h3{
     font-size: 20px;
     font-weight: 500;
     line-height: 1.25;
}
 .group-card p{
     margin-top: 12px;
     margin-bottom: 22px;
     font-size: 14px;
     color: rgba(28,28,28,.75);
     flex: 1;
}
 .btn-small{
     font-size: 14px;
     padding: 9px 20px;
     align-self: flex-start;
}
 .group-cards-wide .group-card{
     padding: 28px 28px 30px;
}
 .group-cards-wide .group-card h3{
     font-size: 23px;
}
 .group-cards-wide .group-card p{
     font-size: 15px;
     max-width: 520px;
}

/* WHY CHOOSE US */
 .promise-section{
     padding: 10px 0 80px;
}
 .promise-panel{
     background: var(--bg-soft);
     border: 1px solid rgba(15,42,67,.07);
     border-radius: 22px;
     padding: 50px 44px 54px;
}
 .promise-panel h2{
     font-size: 40px;
     font-weight: 400;
     text-align: center;
     margin-bottom: 40px;
}
 .promise-grid{
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 34px;
}
 .promise-card h3{
     font-size: 19px;
     font-weight: 500;
     color: var(--navy);
     padding-bottom: 12px;
     border-bottom: 1px solid rgba(15,42,67,.14);
}
 .promise-card p{
     margin-top: 14px;
     font-size: 14.5px;
     color: rgba(28,28,28,.75);
}

/* CTA EXTRAS */
 .cta-copy{
     max-width: 640px;
     margin: 20px auto 0;
     color: rgba(255,255,255,.78);
     font-size: 15px;
}
 .cta-actions{
     display: flex;
     gap: 14px;
     justify-content: center;
     flex-wrap: wrap;
     margin-top: 30px;
}
 .btn-ghost{
     background: transparent;
     color: #fff;
     border: 1.5px solid rgba(255,255,255,.55);
     padding: 12px 30px;
     font-weight: 500;
}
 .btn-ghost:hover{
     background: rgba(255,255,255,.12);
}

/* STATIC REVIEW ROW */
 .static-reviews{
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
}
 .static-reviews .testimonial-card{
     flex: none;
}
 .static-reviews .quote-mark{
     right: 4px;
     bottom: 10px;
}

/* EDITOR CONTENT UNDER A DESIGNED PAGE */
 .page-editor-content{
     padding: 0 0 70px;
}
 .page-editor-content .basic-content{
     max-width: 860px;
}

/* FOOTER EXTRAS */
 .footer-line{
     display: block;
     font-size: 16px;
     padding: 6px 0;
     color: #99a2af;
}
 .footer-bottom{
     padding: 22px 24px 26px;
     text-align: center;
}
 .footer-bottom p{
     font-size: 14px;
     color: rgba(255,255,255,.6);
}

/* Home page service cards are links, so they need a hover state */
 .service-item, .services-featured{
     color: inherit;
     transition: transform .25s ease, box-shadow .25s ease;
}
 .service-item:hover, .services-featured:hover{
     transform: translateY(-4px);
     box-shadow: 0 22px 44px rgba(15,42,67,.12);
}

/* SHARED BUILDING BLOCKS */
 .section-title{
     font-size: 40px;
     font-weight: 400;
     text-align: center;
     margin-bottom: 40px;
}
 .section-head{
     text-align: center;
     max-width: 640px;
     margin: 0 auto 40px;
}
 .section-head h2{
     font-size: 40px;
     font-weight: 400;
}
 .section-head p{
     margin-top: 14px;
     font-size: 15px;
     color: rgba(28,28,28,.7);
}
/* The white rounded container the design uses to group a section */
 .panel{
     background: var(--white);
     border: 1px solid rgba(15,42,67,.07);
     border-radius: 22px;
     padding: 46px 40px 50px;
}
 .panel-heading{
     font-size: 40px;
     font-weight: 400;
     text-align: center;
     margin-bottom: 38px;
}
 .panel-label{
     display: inline-block;
     font-family: var(--font-display);
     font-size: 12.5px;
     font-weight: 500;
     letter-spacing: .18em;
     text-transform: uppercase;
}
 .button-row{
     display: flex;
     flex-wrap: wrap;
     gap: 14px;
     margin-top: 30px;
}
 .tag-row{
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 26px;
}
 .tag{
     display: inline-flex;
     align-items: center;
     gap: 7px;
     background: var(--bg-soft);
     border: 1px solid rgba(15,42,67,.1);
     border-radius: var(--btn-radius);
     padding: 7px 16px;
     font-family: var(--font-display);
     font-size: 13.5px;
     font-weight: 500;
     color: var(--navy);
}
 .btn-outline{
     background: transparent;
     color: var(--navy);
     border: 1.5px solid var(--navy);
     padding: 12px 30px;
     font-weight: 500;
}
 .btn-outline:hover{
     background: var(--navy);
     color: #fff;
}
 .btn-block{
     width: 100%;
     justify-content: center;
}

/* FORM FIELDS */
 .field{
     display: flex;
     flex-direction: column;
     gap: 7px;
     margin-bottom: 18px;
}
 .field-row{
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px;
}
 .field label{
     font-family: var(--font-display);
     font-size: 13.5px;
     font-weight: 500;
     color: var(--navy);
}
 .field input, .field select, .field textarea{
     font-family: var(--font-body);
     font-size: 15px;
     padding: 12px 15px;
     border: 1px solid rgba(15,42,67,.16);
     border-radius: 10px;
     background: #FBFEFF;
     color: var(--text-body);
     width: 100%;
}
 .field textarea{
     resize: vertical;
     min-height: 130px;
}
 .field input:focus, .field select:focus, .field textarea:focus{
     border-color: var(--olive);
     outline: 2px solid rgba(119,132,108,.18);
     outline-offset: 1px;
}
/* Hidden from people, still there for bots to fill in */
 .field-trap{
     position: absolute;
     left: -9999px;
     width: 1px;
     height: 1px;
     overflow: hidden;
}
 .form-note{
     padding: 14px 16px;
     border-radius: 10px;
     font-size: 14.5px;
     margin-bottom: 20px;
}
 .form-note-ok{
     background: #E4F4E1;
     color: #33642B;
}
 .form-note-bad{
     background: #FBE6E6;
     color: #9A2A2A;
}

/* CONTACT PAGE */
 .contact-intro{
     padding: 60px 0 40px;
     text-align: center;
}
 .contact-intro-inner{
     max-width: 780px;
}
 .contact-intro h1{
     font-size: 54px;
     font-weight: 400;
}
 .contact-intro p{
     margin-top: 18px;
     font-size: 16px;
     color: rgba(28,28,28,.75);
}
 .contact-cards{
     padding: 10px 0 40px;
}
 .contact-cards-grid{
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
}
 .contact-card{
     background: var(--white);
     border: 1px solid rgba(15,42,67,.07);
     border-radius: var(--card-radius);
     padding: 30px 28px 32px;
}
 .contact-card-icon{
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: var(--olive);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 22px;
}
 .contact-card-label{
     display: block;
     font-family: var(--font-display);
     font-size: 11.5px;
     font-weight: 500;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--olive-dark);
     margin-bottom: 8px;
}
 .contact-card h2{
     font-size: 25px;
     font-weight: 500;
}
 .contact-card p{
     margin-top: 12px;
     font-size: 14.5px;
     color: rgba(28,28,28,.72);
}
 .contact-card-value{
     display: inline-block;
     margin-top: 20px;
     padding-top: 18px;
     border-top: 1px solid rgba(15,42,67,.1);
     width: 100%;
     font-family: var(--font-display);
     font-size: 17px;
     font-weight: 500;
     color: var(--navy);
     word-break: break-word;
}
 .contact-card-value:hover{
     color: var(--olive-dark);
}
 .hours-list{
     margin-top: 20px;
     padding-top: 18px;
     border-top: 1px solid rgba(15,42,67,.1);
}
 .hours-list li{
     display: flex;
     justify-content: space-between;
     gap: 12px;
     font-size: 14.5px;
     padding: 5px 0;
     color: var(--navy);
}
 .contact-main{
     padding: 20px 0 70px;
}
 .contact-main-grid{
     display: grid;
     grid-template-columns: 1.25fr 1fr;
     gap: 26px;
     align-items: start;
}
 .contact-form-card{
     background: var(--white);
     border: 1px solid rgba(15,42,67,.07);
     border-radius: var(--card-radius);
     padding: 36px 34px 38px;
}
 .contact-form-card h2{
     font-size: 30px;
     font-weight: 500;
}
 .contact-form-note{
     margin: 12px 0 26px;
     font-size: 14.5px;
     color: rgba(28,28,28,.7);
}
 .contact-location{
     display: flex;
     flex-direction: column;
     gap: 22px;
}
 .location-card{
     background: var(--white);
     border: 1px solid rgba(15,42,67,.07);
     border-radius: var(--card-radius);
     padding: 30px 28px 32px;
}
 .location-card h2{
     font-size: 26px;
     font-weight: 500;
}
 .location-address{
     margin-top: 10px;
     font-size: 14.5px;
     color: rgba(28,28,28,.72);
}
 .location-map{
     margin-top: 22px;
     border-radius: 14px;
     overflow: hidden;
     background: var(--bg-soft);
}
 .location-map iframe{
     display: block;
     width: 100%;
     height: 230px;
     border: 0;
}
 .location-map-empty{
     display: flex;
     align-items: center;
     justify-content: center;
     height: 230px;
     padding: 24px;
     text-align: center;
     font-size: 14px;
     color: rgba(28,28,28,.6);
}
 .location-points{
     margin-top: 22px;
}
 .location-points li{
     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-size: 14.5px;
     padding: 7px 0;
}
 .location-points .tick{
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: var(--olive);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 11px;
     flex-shrink: 0;
     margin-top: 2px;
}
 .privacy-card{
     background: var(--navy);
     border-radius: var(--card-radius);
     padding: 26px 26px 28px;
     color: #fff;
}
 .privacy-card-label{
     display: block;
     font-family: var(--font-display);
     font-size: 11.5px;
     font-weight: 500;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: rgba(255,255,255,.6);
     margin-bottom: 10px;
}
 .privacy-card p{
     font-size: 14px;
     color: rgba(255,255,255,.82);
}

/* ABOUT PAGE */
 .about-intro{
     padding: 50px 0 60px;
}
 .about-intro-grid, .derm-intro-grid, .health-intro-grid{
     display: grid;
     grid-template-columns: 1.05fr 1fr;
     gap: 60px;
     align-items: center;
}
 .about-intro h1{
     font-size: 52px;
     font-weight: 400;
     max-width: 600px;
}
 .about-intro p{
     margin-top: 20px;
     font-size: 15.5px;
     max-width: 560px;
     color: rgba(28,28,28,.75);
}
 .about-intro-media img, .derm-intro-media img, .health-intro-media img{
     width: 100%;
     border-radius: var(--card-radius);
     object-fit: cover;
     aspect-ratio: 3/2;
}
 .figure-row{
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin: 30px 0 6px;
}
 .figure-pill{
     display: flex;
     flex-direction: column;
     gap: 2px;
     background: var(--white);
     border: 1px solid rgba(15,42,67,.09);
     border-radius: 14px;
     padding: 14px 22px;
}
 .figure-value{
     font-family: var(--font-display);
     font-size: 22px;
     font-weight: 500;
     color: var(--navy);
}
 .figure-label{
     font-size: 12.5px;
     color: rgba(28,28,28,.65);
}
 .about-intro .btn-dark{
     margin-top: 24px;
}
/* Mission */
 .mission-section{
     padding: 10px 0 70px;
}
 .mission-panel{
     background: var(--navy);
     border-radius: 22px;
     padding: 50px 60px 54px;
     text-align: center;
     color: #fff;
}
 .mission-panel .panel-label{
     color: rgba(255,255,255,.6);
     margin-bottom: 26px;
}
 .mission-panel blockquote p{
     font-family: var(--font-display);
     font-size: 34px;
     font-weight: 400;
     line-height: 1.32;
     max-width: 900px;
     margin: 0 auto;
}
 .mission-support{
     max-width: 780px;
     margin: 26px auto 0;
     font-size: 14.5px;
     color: rgba(255,255,255,.72);
}
/* Four pillars */
 .pillars-section{
     padding: 10px 0 70px;
}
 .pillars-grid{
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 22px;
}
 .pillar-card{
     background: var(--white);
     border: 1px solid rgba(15,42,67,.07);
     border-radius: var(--card-radius);
     padding: 28px 24px 30px;
}
 .pillar-icon{
     width: 42px;
     height: 42px;
     border-radius: 10px;
     background: var(--bg-soft);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
}
 .pillar-icon img{
     width: 22px;
     height: 22px;
     object-fit: contain;
}
 .pillar-card h3{
     font-size: 20px;
     font-weight: 500;
     line-height: 1.25;
}
 .pillar-card p{
     margin-top: 12px;
     font-size: 14px;
     color: rgba(28,28,28,.72);
}
/* Team */
 .team-section{
     padding: 10px 0 70px;
}
 .team-panel{
     display: grid;
     grid-template-columns: 1fr 1.1fr;
     gap: 40px;
     align-items: center;
     background: var(--white);
     border: 1px solid rgba(15,42,67,.07);
     border-radius: 22px;
     padding: 26px;
}
 .team-media img{
     width: 100%;
     border-radius: 16px;
     object-fit: cover;
     aspect-ratio: 4/3;
}
 .team-badge{
     display: inline-block;
     background: var(--navy);
     color: #fff;
     font-family: var(--font-display);
     font-size: 12.5px;
     font-weight: 500;
     padding: 6px 16px;
     border-radius: var(--btn-radius);
     margin-bottom: 18px;
}
 .team-text h2{
     font-size: 32px;
     font-weight: 400;
}
 .team-text p{
     margin-top: 16px;
     font-size: 15px;
     color: rgba(28,28,28,.75);
}

/* DERMATOLOGY PAGE */
 .derm-intro{
     padding: 50px 0 60px;
}
 .derm-intro h1{
     font-size: 52px;
     font-weight: 400;
     max-width: 600px;
}
 .derm-intro p{
     margin-top: 20px;
     font-size: 15.5px;
     max-width: 560px;
     color: rgba(28,28,28,.75);
}
 .rating-pill{
     display: inline-flex;
     align-items: center;
     gap: 14px;
     background: var(--white);
     border: 1px solid rgba(15,42,67,.09);
     border-radius: var(--btn-radius);
     padding: 8px 22px 8px 12px;
     margin-top: 28px;
}
 .rating-text{
     display: flex;
     flex-direction: column;
     font-size: 13px;
     color: rgba(28,28,28,.72);
}
 .rating-text .stars{
     color: #E8A93B;
     font-size: 13px;
     letter-spacing: 1px;
}
 .derm-services, .derm-trust{
     padding: 10px 0 60px;
}
 .numbered-grid{
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 22px;
}
 .numbered-card{
     position: relative;
     display: flex;
     flex-direction: column;
     background: var(--bg-soft);
     border: 1px solid rgba(15,42,67,.07);
     border-radius: 16px;
     padding: 30px 24px 26px;
     transition: transform .25s ease, box-shadow .25s ease;
}
 .numbered-card:hover{
     transform: translateY(-4px);
     box-shadow: 0 20px 40px rgba(15,42,67,.1);
}
 .numbered-badge{
     position: absolute;
     top: -12px;
     left: 20px;
     background: var(--olive);
     color: #fff;
     font-family: var(--font-display);
     font-size: 11.5px;
     font-weight: 500;
     padding: 4px 14px;
     border-radius: var(--btn-radius);
}
 .numbered-index{
     font-family: var(--font-display);
     font-size: 26px;
     font-weight: 500;
     color: rgba(15,42,67,.35);
     margin-bottom: 12px;
}
 .numbered-card h3{
     font-size: 20px;
     font-weight: 500;
     line-height: 1.25;
}
 .numbered-card p{
     margin-top: 12px;
     margin-bottom: 24px;
     font-size: 13.5px;
     color: rgba(28,28,28,.72);
     flex: 1;
}
/* Trust points */
 .trust-grid{
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
     text-align: center;
}
 .trust-item{
     padding: 0 14px;
}
 .trust-badge{
     width: 54px;
     height: 54px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 18px;
     font-family: var(--font-display);
     font-size: 16px;
     font-weight: 500;
     color: #fff;
}
 .trust-badge-olive{
     background: var(--olive);
}
 .trust-badge-navy{
     background: var(--navy);
}
 .trust-item h3{
     font-size: 19px;
     font-weight: 500;
}
 .trust-item p{
     margin-top: 12px;
     font-size: 13.5px;
     color: rgba(28,28,28,.72);
}

/* HEALTH CHECKS PAGE */
 .health-intro{
     padding: 50px 0 60px;
}
 .health-intro h1{
     font-size: 52px;
     font-weight: 400;
     max-width: 620px;
}
 .health-intro p{
     margin-top: 20px;
     font-size: 15.5px;
     max-width: 580px;
     color: rgba(28,28,28,.75);
}
/* Panels heading matches the design file */
 .panels-section .section-head{
     max-width: 720px;
}
 .panels-section .section-head h2{
     font-size: 46px;
}
 .panel-filters .filter-pill{
     padding: 10px 26px;
     font-size: 15px;
     border-radius: 999px;
}
 .panels-section, .pathway-section{
     padding: 10px 0 60px;
}
 .panel-filters{
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 12px;
     margin-bottom: 32px;
}
 .panels-grid{
     display: grid;
     grid-template-columns: 1.5fr 1fr;
     gap: 26px;
     align-items: start;
}
 .panels-list{
     display: flex;
     flex-direction: column;
     gap: 12px;
}
  .panel-option{
     display: grid;
     grid-template-columns: 1fr auto auto;
     gap: 18px;
     align-items: center;
     background: var(--white);
     border: 1px solid rgba(15,42,67,.1);
     border-radius: 12px;
     padding: 18px 22px;
     cursor: pointer;
     transition: border-color .2s ease, box-shadow .2s ease;
}
 .panel-option:hover{
     border-color: rgba(15,42,67,.28);
}
 .panel-option.is-selected{
     border-color: var(--navy);
     box-shadow: 0 6px 18px rgba(15,42,67,.08);
}
 .panel-check{
     width: 20px;
     height: 20px;
     accent-color: var(--navy);
     cursor: pointer;
}
 .panel-option-badge{
     display: inline-block;
     background: var(--olive);
     color: #fff;
     font-family: var(--font-display);
     font-size: 11px;
     font-weight: 500;
     padding: 3px 10px;
     border-radius: 5px;
     margin-bottom: 8px;
}
 .panel-option-title{
     display: block;
     font-family: var(--font-display);
     font-size: 17px;
     font-weight: 600;
     color: var(--navy);
}
 .panel-option-copy{
     display: block;
     margin-top: 6px;
     font-size: 13px;
     line-height: 1.6;
     color: rgba(28,28,28,.66);
     max-width: 420px;
}
 .panel-option-price{
     font-family: var(--font-display);
     font-size: 20px;
     font-weight: 500;
     color: var(--navy);
     white-space: nowrap;
}
/* Running total */
 .panel-summary{
     position: sticky;
     top: 120px;
     display: flex;
     flex-direction: column;
     background: var(--navy);
     border-radius: 16px;
     padding: 26px 24px 28px;
     color: #fff;
}
 .summary-head{
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding-bottom: 14px;
     border-bottom: 1px solid rgba(255,255,255,.18);
}
 .panel-summary h3{
     font-size: 20px;
     font-weight: 500;
     color: #fff;
}
 .summary-count{
     background: rgba(255,255,255,.14);
     border-radius: 5px;
     padding: 3px 10px;
     font-size: 11.5px;
     color: rgba(255,255,255,.85);
     white-space: nowrap;
}
 .summary-list{
     margin: 6px 0 16px;
     flex: 1;
     min-height: 120px;
}
 .summary-list li{
     display: flex;
     justify-content: space-between;
     gap: 14px;
     font-size: 13.5px;
     padding: 11px 0;
     border-bottom: 1px solid rgba(255,255,255,.1);
     color: rgba(255,255,255,.88);
}
 .summary-empty{
     border-bottom: none !important;
     color: rgba(255,255,255,.5) !important;
     font-style: italic;
}
 .summary-fee{
     display: flex;
     justify-content: space-between;
     gap: 14px;
     padding: 12px 0;
     border-top: 1px solid rgba(255,255,255,.18);
     font-size: 12.5px;
     color: rgba(255,255,255,.6);
}
 .summary-total{
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 4px 0 18px;
     font-family: var(--font-display);
}
 .summary-total span{
     font-size: 15px;
     font-weight: 500;
     color: #fff;
}
 .summary-total strong{
     font-size: 30px;
     font-weight: 600;
}
 .summary-note{
     margin-top: 14px;
     text-align: center;
     font-size: 11.5px;
     line-height: 1.6;
     color: rgba(255,255,255,.55);
}
/* Pathway */
 .pathway-grid{
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 22px;
}
 .pathway-step{
     background: var(--bg-soft);
     border: 1px solid rgba(15,42,67,.07);
     border-radius: 16px;
     padding: 28px 24px 30px;
}
 .pathway-number{
     display: block;
     font-family: var(--font-display);
     font-size: 26px;
     font-weight: 500;
     color: rgba(15,42,67,.35);
     margin-bottom: 14px;
}
 .pathway-step h3{
     font-size: 19px;
     font-weight: 500;
     line-height: 1.25;
}
 .pathway-step p{
     margin-top: 12px;
     font-size: 13.5px;
     color: rgba(28,28,28,.72);
}
/* Reassurance */
 .reasons-section{
     padding: 10px 0 70px;
}
 .reasons-grid{
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
}
 .reason-card{
     display: flex;
     align-items: flex-start;
     gap: 16px;
     background: var(--white);
     border: 1px solid rgba(15,42,67,.07);
     border-radius: 16px;
     padding: 26px 26px 28px;
}
 .reason-tick{
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: var(--olive);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     flex-shrink: 0;
}
 .reason-card h3{
     font-size: 20px;
     font-weight: 500;
}
 .reason-card p{
     margin-top: 8px;
     font-size: 14px;
     color: rgba(28,28,28,.72);
}

/* The rating pill borrows the avatar group, but not its arrow */
 .rating-pill .avatar-arrow{
     display: none;
}

/* SERVICE PAGES */
 .section-head-left{
     text-align: left;
     max-width: 720px;
     margin-left: 0;
     margin-right: 0;
}
 .section-head-center{
     text-align: center;
     margin-left: auto;
     margin-right: auto;
}
/* Intro */
 .page-intro{
     padding: 50px 0 60px;
}
 .page-intro-grid{
     display: grid;
     grid-template-columns: 1.05fr 1fr;
     gap: 60px;
     align-items: center;
}
 .page-intro-text h1{
     font-size: 50px;
     font-weight: 400;
     max-width: 620px;
}
 .page-intro-text > p{
     margin-top: 20px;
     font-size: 15.5px;
     max-width: 580px;
     color: rgba(28,28,28,.75);
}
 .page-intro-media img{
     width: 100%;
     border-radius: var(--card-radius);
     object-fit: cover;
     aspect-ratio: 3/2;
}
 .intro-ticks{
     display: flex;
     flex-wrap: wrap;
     gap: 10px 24px;
     margin-top: 24px;
}
 .intro-ticks li{
     display: flex;
     align-items: center;
     gap: 9px;
     font-size: 14px;
     color: var(--navy);
}
 .tick{
     width: 19px;
     height: 19px;
     border-radius: 50%;
     background: var(--olive);
     color: #fff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 10px;
     flex-shrink: 0;
}
/* Feature cards */
 .features-section{
     padding: 10px 0 60px;
}
 .feature-grid{
     display: grid;
     gap: 22px;
}
 .feature-grid-2{
     grid-template-columns: repeat(2, 1fr);
}
 .feature-grid-3{
     grid-template-columns: repeat(3, 1fr);
}
 .feature-grid-4{
     grid-template-columns: repeat(4, 1fr);
}
 .feature-card{
     background: var(--white);
     border: 1px solid rgba(15,42,67,.07);
     border-radius: var(--card-radius);
     padding: 28px 26px 30px;
}
 .feature-icon{
     width: 40px;
     height: 40px;
     border-radius: 10px;
     background: var(--navy);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
}
 .feature-icon img{
     width: 20px;
     height: 20px;
     object-fit: contain;
}
 .feature-card h3{
     font-size: 20px;
     font-weight: 500;
     line-height: 1.25;
}
 .feature-card > p{
     margin-top: 12px;
     font-size: 14px;
     color: rgba(28,28,28,.72);
}
 .feature-list{
     margin-top: 18px;
     padding-top: 16px;
     border-top: 1px solid rgba(15,42,67,.09);
}
 .feature-list li{
     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-size: 14px;
     padding: 6px 0;
     color: rgba(28,28,28,.82);
}
 .feature-list .tick{
     margin-top: 3px;
}
/* Numbered rows inside a feature card */
 .feature-rows{
     margin-top: 20px;
}
 .feature-row{
     display: grid;
     grid-template-columns: 32px minmax(0, 0.9fr) minmax(0, 1.2fr);
     gap: 0 14px;
     padding: 18px 0;
     border-top: 1px solid rgba(15,42,67,.09);
}
 .feature-row-num{
     font-family: var(--font-display);
     font-size: 12.5px;
     font-weight: 600;
     color: var(--navy);
     padding-top: 3px;
}
 .feature-row-title{
     font-family: var(--font-display);
     font-size: 14.5px;
     font-weight: 600;
     color: var(--navy);
     line-height: 1.4;
}
 .feature-row-copy{
     font-size: 13.5px;
     line-height: 1.65;
     color: rgba(28,28,28,.7);
}
/* Numbered pathway */
 .steps-section{
     padding: 10px 0 60px;
}
 .steps-grid{
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
}
 .step-card{
     background: var(--bg-soft);
     border: 1px solid rgba(15,42,67,.07);
     border-radius: 16px;
     padding: 26px 22px 28px;
}
 .step-number{
     display: block;
     font-family: var(--font-display);
     font-size: 25px;
     font-weight: 500;
     color: rgba(15,42,67,.35);
     margin-bottom: 14px;
}
 .step-card h3{
     font-size: 18px;
     font-weight: 500;
     line-height: 1.28;
}
 .step-card p{
     margin-top: 11px;
     font-size: 13.5px;
     color: rgba(28,28,28,.72);
}
/* Ticked benefit grid */
 .benefits-section{
     padding: 10px 0 60px;
}
 .benefit-grid{
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
}
 .benefit-card{
     display: flex;
     align-items: flex-start;
     gap: 16px;
     background: var(--white);
     border: 1px solid rgba(15,42,67,.07);
     border-radius: 16px;
     padding: 26px;
}
 .benefit-tick{
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: var(--olive);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     flex-shrink: 0;
}
 .benefit-card h3{
     font-size: 19px;
     font-weight: 500;
}
 .benefit-card p{
     margin-top: 8px;
     font-size: 14px;
     color: rgba(28,28,28,.72);
}
/* Consultation options */
/*  .options-section{
     padding: 10px 0 60px;
}
 .option-grid{
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 22px;
}
 .option-card{
     position: relative;
     display: flex;
     flex-direction: column;
     background: var(--white);
     border: 1px solid rgba(15,42,67,.09);
     border-radius: var(--card-radius);
     padding: 30px 26px 30px;
}
 .option-card.is-featured{
     border-color: var(--navy);
     box-shadow: 0 18px 40px rgba(15,42,67,.1);
}
 .option-badge{
     position: absolute;
     top: -12px;
     left: 24px;
     background: var(--olive);
     color: #fff;
     font-family: var(--font-display);
     font-size: 11.5px;
     font-weight: 500;
     padding: 4px 14px;
     border-radius: var(--btn-radius);
}
 .option-card h3{
     font-size: 21px;
     font-weight: 500;
     line-height: 1.25;
}
 .option-meta{
     display: inline-block;
     margin-top: 8px;
     font-family: var(--font-display);
     font-size: 13px;
     font-weight: 500;
     color: var(--olive-dark);
}
 .option-card p{
     margin: 12px 0 24px;
     font-size: 14px;
     color: rgba(28,28,28,.72);
     flex: 1;
}
 */

/* ==========================================================================
   CONSULTATION OPTIONS (Exact Match with Reference Image)
   ========================================================================== */
.options-section {
  padding: 40px 0 80px;
}

.options-section .section-title,
.options-section h2 {
  font-size: 42px;
  font-weight: 500;
  text-align: center;
  color: var(--navy);
  margin-bottom: 50px;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

.option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(21, 43, 72, 0.08);
  border-radius: 20px;
  padding: 36px 30px 32px;
  box-shadow: 0 10px 35px rgba(21, 43, 72, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.option-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(21, 43, 72, 0.1);
}

/* Featured / Recommended Card (Center) */
.option-card.is-featured {
  border: 2px solid var(--navy);
  box-shadow: 0 16px 40px rgba(21, 43, 72, 0.12);
}

/* Top Badge ("Recommended") */
.option-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 20px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Duration / Time Pill (Meta) */
.option-meta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: #ECECFA;
  color: #4A4A68;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 24px;
}

/* Center-align meta on featured card if desired */
.option-card.is-featured .option-meta {
  align-self: center;
}

/* Card Heading */
.option-card h3 {
  font-size: 22px;
  font-weight: 500;
  color: #1A1A1A;
  line-height: 1.3;
  margin-bottom: 16px;
}

/* Card Description */
.option-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(28, 28, 28, 0.72);
  margin-bottom: 36px;
  flex: 1;
}

/* Bottom Action Buttons */
.option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 20px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  transition: all 0.25s ease;
  text-decoration: none;
}

/* Standard / Virtual Button (Light Pill) */
.option-btn-light {
  background: #F1F9FB;
  color: #2D4059;
  border: 1px solid transparent;
}

.option-btn-light:hover {
  background: #E2F2F6;
  color: var(--navy);
}

/* Featured / Extended Button (Navy Pill) */
.option-btn-featured {
  background: var(--navy);
  color: #ffffff;
}

.option-btn-featured:hover {
  background: var(--navy-2);
}

/* ASSESSMENT PACKAGES */
 .packages-section{
     padding: 10px 0 60px;
}
 .package-tabs{
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 12px;
     margin-bottom: 34px;
}
 .package-pane{
     display: none;
}
 .package-pane.is-active{
     display: block;
}
 .package-grid{
     display: grid;
     grid-template-columns: 1.35fr 1fr;
     gap: 26px;
     align-items: start;
}
 .package-main{
     background: var(--bg-soft);
     border: 1px solid rgba(15,42,67,.07);
     border-radius: 16px;
     padding: 30px 28px 32px;
}
 .package-main h3{
     font-size: 26px;
     font-weight: 500;
}
 .package-main > p{
     margin-top: 12px;
     font-size: 14.5px;
     color: rgba(28,28,28,.72);
     max-width: 520px;
}
 .package-price{
     display: flex;
     align-items: baseline;
     gap: 10px;
     margin-top: 22px;
}
 .package-price strong{
     font-family: var(--font-display);
     font-size: 36px;
     font-weight: 500;
     color: var(--navy);
}
 .package-price span{
     font-size: 13.5px;
     color: rgba(28,28,28,.6);
}
 .package-subhead{
     font-size: 17px;
     font-weight: 500;
     margin-top: 26px;
     padding-top: 22px;
     border-top: 1px solid rgba(15,42,67,.1);
}
 .package-included{
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 10px 20px;
     margin-top: 16px;
}
 .package-included li{
     display: flex;
     align-items: flex-start;
     gap: 10px;
     background: var(--white);
     border-radius: 10px;
     padding: 11px 14px;
     font-size: 13.5px;
}
 .package-included .tick{
     margin-top: 2px;
}
/* Dark side panel with the running total */
 .package-side{
     background: var(--navy);
     border-radius: 16px;
     padding: 28px 26px 30px;
     color: #fff;
}
 .package-side h3{
     font-size: 21px;
     font-weight: 500;
     color: #fff;
}
 .package-side > p{
     margin-top: 10px;
     font-size: 13.5px;
     color: rgba(255,255,255,.7);
}
 .addon-list{
     margin-top: 22px;
     display: flex;
     flex-direction: column;
     gap: 10px;
}
 .addon-row{
     display: grid;
     grid-template-columns: 20px 1fr auto;
     align-items: center;
     gap: 12px;
     background: rgba(255,255,255,.07);
     border: 1px solid rgba(255,255,255,.14);
     border-radius: 10px;
     padding: 12px 14px;
     cursor: pointer;
     transition: background .2s ease, border-color .2s ease;
}
 .addon-row:hover{
     border-color: rgba(255,255,255,.35);
}
 .addon-row.is-selected{
     background: rgba(255,255,255,.14);
     border-color: rgba(255,255,255,.5);
}
 .addon-check{
     width: 17px;
     height: 17px;
     accent-color: #fff;
     cursor: pointer;
}
 .addon-name{
     font-size: 13.5px;
}
 .addon-price{
     font-family: var(--font-display);
     font-size: 14px;
     font-weight: 500;
     white-space: nowrap;
}
 .package-side-list{
     margin-top: 20px;
}
 .package-side-list li{
     position: relative;
     padding: 7px 0 7px 18px;
     font-size: 13.5px;
     color: rgba(255,255,255,.82);
}
 .package-side-list li::before{
     content: "";
     position: absolute;
     left: 0;
     top: 15px;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: rgba(255,255,255,.55);
}
 .package-total{
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 24px;
     padding: 18px 0;
     border-top: 1px solid rgba(255,255,255,.18);
     font-family: var(--font-display);
}
 .package-total span{
     font-size: 14px;
     color: rgba(255,255,255,.7);
}
 .package-total-value{
     font-size: 27px;
     font-weight: 500;
}

/* MOBILE MENU SHELL */
 .nav-panel-title{
     display: none;
}
 .nav-overlay{
     position: fixed;
     inset: 0;
     z-index: 150;
     display: none;
     background: rgba(11,26,43,.5);
     opacity: 0;
     visibility: hidden;
     transition: opacity .3s ease, visibility .3s ease;
}
 .nav-overlay.is-visible{
     opacity: 1;
     visibility: visible;
}

/* POINTER EFFECT */
 .cursor-ring, .cursor-dot{
     position: fixed;
     top: 0;
     left: 0;
     z-index: 9999;
     pointer-events: none;
     border-radius: 50%;
     opacity: 0;
     transition: opacity .25s ease;
}
 .cursor-ring{
     width: 34px;
     height: 34px;
     margin: -17px 0 0 -17px;
     border: 1.5px solid rgba(21,43,72,.45);
     transition: opacity .25s ease, width .22s ease, height .22s ease, margin .22s ease, background .22s ease, border-color .22s ease;
}
 .cursor-dot{
     width: 6px;
     height: 6px;
     margin: -3px 0 0 -3px;
     background: var(--navy);
}
 .cursor-ready .cursor-ring, .cursor-ready .cursor-dot{
     opacity: 1;
}
 .cursor-active .cursor-ring{
     width: 54px;
     height: 54px;
     margin: -27px 0 0 -27px;
     background: rgba(119,132,108,.16);
     border-color: rgba(119,132,108,.6);
}
 .cursor-active .cursor-dot{
     opacity: 0;
}
 @media (hover: none), (pointer: coarse){
     .cursor-ring, .cursor-dot{
         display: none;
    }
}
 @media (prefers-reduced-motion: reduce){
     .cursor-ring, .cursor-dot{
         display: none;
    }
     html{
         scroll-behavior: auto;
    }
}