/* ===================================================================
   Advanced Pain Solutions — stylesheet
   Palette: navy #0c1f3a, gold #c9a24b, ivory #f7f5f0, slate text #3d4a5c
=================================================================== */
:root{
  --navy: #0c1f3a;
  --navy-2: #10294c;
 --gold:#C49B4A;
  --gold-light: #e3c37a;
  --ivory: #f7f5f0;
  --text: #3d4a5c;
  --muted: #7b8798;
  --white: #ffffff;
  --radius: 10px;
  --maxw: 1280px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  background:var(--white);
  line-height:1.5;
}
h1,h2,h3,h4{
  font-family: "Marcellus", Georgia, "Times New Roman", serif;
  color:var(--navy);
  margin:0 0 .5em;
}
/* Base paragraph size/family so every <p> matches even if no more
   specific class rule targets it; the many class-specific p{} rules
   throughout this file (and pages-style.css) are all pinned to the
   same 15px so paragraph text reads consistently site-wide. Colors
   are intentionally left to those specific rules. */
p{font-family:inherit;font-size:15px;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
img{max-width:100%;display:block;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

.btn{
  display:inline-block;
  padding:14px 26px;
  border-radius:4px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:transform .15s ease, opacity .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-outline{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.5);}
.btn-dark{background:var(--navy);color:var(--white);}

.eyebrow{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.75rem;
  font-weight:700;
  margin-bottom:10px;
}

.section-title{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:1rem;
  color:var(--navy);
  margin-bottom:36px;
}
.section-title.light{color:var(--gold-light);}

/* ---------- TOP BAR ---------- */
/* ===========================
   TOP BAR
=========================== */

.topbar{
    background:#08182d;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:0;
}
.topbar-inner {
    padding-top: 20px;
    padding-bottom: 20px;
    max-width: 1300px;
    margin: 0 auto;
    height: 105px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}


/* ---------- Logo ---------- */


.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    height: 67px;
    width: auto;
    display: block;
}

/* Mobile — sized up from the original 58px (and the narrower-viewport
   override below was smaller still, at 52px) so the wordmark stays
   legible instead of shrinking to the point the "ADVANCED"/"SOLUTIONS"
   text becomes unreadable. */
@media (max-width: 768px) {
    .brand-logo {
        height: 66px;
    }
}
.brand-text{
    font-size:13px;
    line-height:1.25;
    letter-spacing:.08em;
    color:#fff;
    font-weight:400;
}

.brand-text strong{
    display:block;
    margin-top:2px;
    font-size:24px;
    line-height:1;
    font-weight:700;
    letter-spacing:0;
}

/* ---------- Address ---------- */

.topbar-info{
    display:flex;
    align-items:center;
    gap:48px;
    flex:1;
    justify-content:center;
}

.info-item{
    display:flex;
    align-items:flex-start;
    gap:8px;
}

.info-icon{
    color:#c8a24a;
    font-size:18px;
    margin-top:2px;
}

.info-item span{
    font-size:14px;
    font-weight:600;
    line-height:1.3;
}

.info-item small{
    display:block;
    margin-top:3px;
    font-size:12px;
    font-weight:400;
    color:#b8c3d1;
    line-height:1.5;
}

/* ---------- Right Side ---------- */

.topbar-cta{
    display:flex;
    align-items:center;
    gap:26px;
}

.phone{
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    font-size:18px;
    font-weight:700;
    text-decoration:none;
}

.phone:hover{
    color:#c8a24a;
}

.btn-gold {
    height: 43px;
    padding: 0 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c8a24a;
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: .3s;
}

.btn-gold:hover{
    background:#b28d37;
}

/* ---------- NAV ---------- */
/*==================================================
 NAVIGATION
==================================================*/

.mainnav{
    background:#08182d;
    border-top:1px solid rgba(255,255,255,.05);
    border-bottom:1px solid rgba(255,255,255,.08);
    position:relative;
    z-index:100;
}

.mainnav-inner {
    max-width: 1280px;
    margin: 0px auto;
    padding: 0px 24px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-left{
    display:flex;
    align-items:center;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:42px;
    list-style:none;
    margin:0;
    padding:0;
}

.nav-links li{
    position:relative;
}

.nav-links a{
    position:relative;
    display:flex;
    align-items:center;
    height:66px;
    white-space:nowrap; /* prevent long (e.g. Spanish) labels from wrapping
                            inside the fixed-height bar, which was visually
                            inflating the nav row and pushing page content
                            down */

    color:#ffffff;
    text-decoration:none;

    font-size:13px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;

    transition:.25s ease;
}

.nav-links a:hover{
    color:#c8a24a;
}

.nav-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:2px;
    background:#c8a24a;
    transition:.3s;
}

.nav-links a:hover::after,
.nav-links a.active::after{
    width:100%;
}

.nav-links a.active{
    color:#c8a24a;
}

.nav-right{
    display:flex;
    align-items:center;
}

.lang-select{
    width:120px;
    height:40px;

    background:transparent;
    color:#fff;

    border:1px solid rgba(255,255,255,.18);
    border-radius:4px;

    padding:0 14px;

    font-size:13px;
    font-weight:500;

    outline:none;
    cursor:pointer;

    transition:.25s;
}

.lang-select:hover{
    border-color:#c8a24a;
}

.lang-select option{
    color:#000;
}

/* ---------- HERO ---------- */


/*==========================================================
HERO
==========================================================*/

.hero{

    position:relative;

    min-height:540px;

    overflow:hidden;

    display:flex;

    align-items:center;

    background:#08182D;

}

/*------------------------------------
BACKGROUND IMAGE
------------------------------------*/

.hero-bg{

    position:absolute;

    inset:0;
    background-image:url("img/aps-hero-banner.avif");

   background-size:cover;
    background-position:right center;
    background-repeat:no-repeat;

    z-index:1;

}

/*------------------------------------
OVERLAY
------------------------------------*/

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(8,24,45,.97) 0%,
        rgba(8,24,45,.90) 28%,
        rgba(8,24,45,.65) 55%,
        rgba(8,24,45,.15) 100%
    );

    z-index:2;

}

/*------------------------------------
CONTENT
------------------------------------*/

.hero-content{

    position:relative;

    z-index:5;

    max-width:1280px;

    width:100%;

    margin:auto;

}

.hero-copy{

    width:560px;

}

.eyebrow{

    color:#C49B4A;

    font-size:13px;

    letter-spacing:.15em;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:25px;

}


.hero-sub{

    color:#d0d7e2;

    font-size:15px;

    line-height:1.7;

    max-width:520px;

    margin-bottom:40px;

}

/*------------------------------------
BUTTONS
------------------------------------*/

.hero-btns{

    display:flex;

    gap:18px;

    margin-bottom:36px;

}

.hero-btns .btn{

    height:58px;

    padding:0 36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:6px;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

}

.btn-gold{

    background:#C49B4A;

    color:#fff;

}

.btn-outline{

    border:1px solid rgba(255,255,255,.4);

    color:#fff;

}

/*------------------------------------
FEATURES
------------------------------------*/

.hero-tags{

    display:flex;

    gap:30px;

    list-style:none;

    padding:0;

    margin:0;

}

.hero-tags li{

    display:flex;

    align-items:center;

    gap:10px;

    color:#d0d7e2;

    font-size:15px;

}

.hero-tags i{

    color:#C49B4A;

}

/*------------------------------------
FLOATING CARD
------------------------------------*/

.hero-stats{

      position: absolute;
    right: 10px;
    top: 60px;
    width: 280px;
    background: rgb(7 24 45 / 53%);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    padding: 30px 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);

}

.stat{

    display:flex;

    align-items:center;

    gap:18px;

}

.stat-icon{

 

    border-radius:50%;

    border:0px solid rgba(196,155,74,.45);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#C49B4A;

    font-size:22px;

    flex-shrink:0;

}

.hero-stats strong{

    display:block;

    color:#fff;

    font-size:15px;

    line-height:1;

    margin-bottom:8px;

}

.hero-stats span{

    color:#d0d7e2;

    font-size:15px;

}
/* ===================================================================
   Advanced Pain Solutions — stylesheet
   Palette: navy #0c1f3a, gold #c9a24b, ivory #f7f5f0, slate text #3d4a5c
=================================================================== */
:root{
  --navy: #0c1f3a;
  --navy-2: #10294c;
 --gold:#C49B4A;
  --gold-light: #e3c37a;
  --ivory: #f7f5f0;
  --text: #3d4a5c;
  --muted: #7b8798;
  --white: #ffffff;
  --radius: 10px;
  --maxw: 1280px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  background:var(--white);
  line-height:1.5;
}
h1,h2,h3,h4{
  font-family: "Marcellus", Georgia, "Times New Roman", serif;
  color:var(--navy);
  margin:0 0 .5em;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
img{max-width:100%;display:block;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

.btn{
  display:inline-block;
  padding:14px 26px;
  border-radius:4px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:transform .15s ease, opacity .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-outline{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.5);}
.btn-dark{background:var(--navy);color:var(--white);}

.eyebrow{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.75rem;
  font-weight:700;
  margin-bottom:10px;
}

.section-title{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:1rem;
  color:var(--navy);
  margin-bottom:36px;
}
.section-title.light{color:var(--gold-light);}

/* ---------- TOP BAR ---------- */
/* ===========================
   TOP BAR
=========================== */

.topbar{
    background:#08182d;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:0;
}
.topbar-inner {
    padding-top: 20px;
    padding-bottom: 20px;
    max-width: 1300px;
    margin: 0 auto;
    height: 105px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}


/* ---------- Logo ---------- */

.brand{
    display:flex;
    align-items:center;
    gap:14px;
    flex-shrink:0;
    text-decoration:none;
}

.brand-mark{
    width:48px;
    height:48px;
}

.brand-text{
    font-size:13px;
    line-height:1.25;
    letter-spacing:.08em;
    color:#fff;
    font-weight:400;
}

.brand-text strong{
    display:block;
    margin-top:2px;
    font-size:24px;
    line-height:1;
    font-weight:700;
    letter-spacing:0;
}

/* ---------- Address ---------- */

.topbar-info{
    display:flex;
    align-items:center;
    gap:48px;
    flex:1;
    justify-content:center;
}

.info-item{
    display:flex;
    align-items:flex-start;
    gap:8px;
}

.info-icon{
    color:#c8a24a;
    font-size:18px;
    margin-top:2px;
}

.info-item span{
    font-size:14px;
    font-weight:600;
    line-height:1.3;
}

.info-item small{
    display:block;
    margin-top:3px;
    font-size:12px;
    font-weight:400;
    color:#b8c3d1;
    line-height:1.5;
}

/* ---------- Right Side ---------- */

.topbar-cta{
    display:flex;
    align-items:center;
    gap:26px;
}

.phone{
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    font-size:18px;
    font-weight:700;
    text-decoration:none;
}

.phone:hover{
    color:#c8a24a;
}

.btn-gold {
    height: 43px;
    padding: 0 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #c8a24a;
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: .3s;
}

.btn-gold:hover{
    background:#b28d37;
}

/* ---------- NAV ---------- */
/*==================================================
 NAVIGATION
==================================================*/

.mainnav{
    background:#08182d;
    border-top:1px solid rgba(255,255,255,.05);
    border-bottom:1px solid rgba(255,255,255,.08);
    position:relative;
    z-index:100;
}

.mainnav-inner {
    max-width: 1280px;
    margin: 0px auto;
    padding: 0px 24px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-left{
    display:flex;
    align-items:center;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:42px;
    list-style:none;
    margin:0;
    padding:0;
}

.nav-links li{
    position:relative;
}

.nav-links a{
    position:relative;
    display:flex;
    align-items:center;
    height:66px;
    white-space:nowrap; /* prevent long (e.g. Spanish) labels from wrapping
                            inside the fixed-height bar, which was visually
                            inflating the nav row and pushing page content
                            down */

    color:#ffffff;
    text-decoration:none;

    font-size:13px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;

    transition:.25s ease;
}

.nav-links a:hover{
    color:#c8a24a;
}

.nav-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:2px;
    background:#c8a24a;
    transition:.3s;
}

.nav-links a:hover::after,
.nav-links a.active::after{
    width:100%;
}

.nav-links a.active{
    color:#c8a24a;
}

.nav-right{
    display:flex;
    align-items:center;
}

.lang-select{
    width:120px;
    height:40px;

    background:transparent;
    color:#fff;

    border:1px solid rgba(255,255,255,.18);
    border-radius:4px;

    padding:0 14px;

    font-size:13px;
    font-weight:500;

    outline:none;
    cursor:pointer;

    transition:.25s;
}

.lang-select:hover{
    border-color:#c8a24a;
}

.lang-select option{
    color:#000;
}

/*==============================================================
 HERO SECTION
==============================================================*/



/*==============================================================
BACKGROUND IMAGE
==============================================================*/

.hero-bg{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1;

    background-image:url("img/aps-hero-banner.avif");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:72% center;
}

/*==============================================================
OVERLAY
==============================================================*/

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;

    background:linear-gradient(
        90deg,
        rgba(8,24,45,.97) 0%,
        rgba(8,24,45,.92) 22%,
        rgba(8,24,45,.72) 46%,
        rgba(8,24,45,.30) 70%,
        rgba(8,24,45,.08) 100%
    );
}

/*==============================================================
CONTENT
==============================================================*/

.hero-content{
    position:relative;
    z-index:5;

    max-width:1280px;
    margin:0 auto;

    padding-top:40px;
    padding-bottom:95px;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding-left: 24px;
}

/*==============================================================
LEFT CONTENT
==============================================================*/

.hero-copy{
    width:610px;
}

.eyebrow{
    margin:0 0 18px;
    color:#c49b4a;
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:14px;
    font-weight:700;
}

.hero h1 {
    margin: 0 0 28px;
    color: #fff;
    font-size: 50px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -1px;
    max-width: 620px;
}

/* The final "Better Days, Every Day." line is called out in the gold
   brand accent, same on every screen size -- no breakpoint below
   overrides color, only font-size, so this holds at every width. */
.hero-h1-accent{color:var(--gold);}

.hero-sub{
    margin:0 0 36px;

    color:#d2dae6;

    font-size:15px;
    line-height:1.75;

    max-width:520px;
}

/*==============================================================
BUTTONS
==============================================================*/

.hero-btns{
    display:flex;
    gap:18px;
    margin-bottom:36px;
}

.hero-btns .btn{
    height:56px;
    padding:0 34px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:6px;

    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;

    transition:.3s;
}

.btn-gold{
    background:#c49b4a;
    color:#fff;
}

.btn-outline{
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
    background:transparent;
}

.btn-outline:hover{
    background:rgba(255,255,255,.08);
}

/*==============================================================
FEATURES
==============================================================*/

.hero-tags{
    display:flex;
    gap:28px;

    margin:0;
    padding:0;

    list-style:none;
}

.hero-tags li{
    display:flex;
    align-items:center;
    gap:10px;

    color:#d4dbe6;
    font-size:15px;
}

.hero-tags i{
    color:#c49b4a;
}

/*==============================================================
FLOATING CARD
==============================================================*/

.hero-stats{

     position: absolute;
    right: 10px;
    top: 60px;
    width: 280px;
    background: rgb(7 24 45 / 53%);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    padding: 30px 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);

}

.stat{
    display:flex;
    align-items:center;
    gap:18px;
}


.hero-stats strong{

    display:block;

    color:#fff;

    font-size:15px;

    line-height:1;

    margin-bottom:8px;
}

.hero-stats span{

    color:#d2dae6;

    font-size:14px;

    line-height:1.5;
}

/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:992px){

.hero{
    min-height:auto;
}

.hero-content{

    flex-direction:column;

    gap:50px;

    padding:60px 24px;
}

.hero-copy{
    width:100%;
}

.hero h1{
    font-size:46px;
}

.hero-sub{
    font-size:18px;
}

.hero-stats{

    position:relative;

    top:auto;
    right:auto;

    width:100%;
    max-width:400px;
}

}

@media(max-width:768px){

.hero h1{
    font-size:36px;
}

.hero-btns{
    flex-direction:column;
}

.hero-tags{
    flex-direction:column;
    gap:15px;
}

}
/* ---------- INSURANCE ---------- */
.insurance{margin-top:-34px;position:relative;z-index:2;padding:0 24px;}
.insurance-card{
  max-width:1040px;margin:0 auto;background:var(--white);border-radius:14px;
  box-shadow:0 14px 40px rgba(10,25,50,.18);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:22px;
  padding:26px 40px;
}
.insurance-label{font-weight:700;color:var(--navy);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;padding-right:16px;border-right:1px solid #e6e3da;}
.insurance-logos{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
.ins-logo-img{height:30px;width:auto;max-width:100px;object-fit:contain;}
.insurance-viewmore{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding-left:20px;border-left:1px solid #e6e3da;
  color:var(--navy);font-weight:700;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.05em;
  transition:.25s;
}
.insurance-viewmore i{color:var(--gold);font-size:.78rem;transition:transform .25s;}
.insurance-viewmore:hover{color:var(--gold);}
.insurance-viewmore:hover i{transform:translateX(4px);}
.insurance-disclaimer{width:100%;text-align:center;margin:14px 0 0;font-size:12.5px;color:#68778b;line-height:1.5;}

/* ---------- CONDITIONS ---------- */
/*==========================================================
CONDITIONS WE TREAT
==========================================================*/

/*==========================================================
CONDITIONS WE TREAT
==========================================================*/

.conditions{
    padding:90px 0 70px;
    background:#fff;
}

.conditions .container{
    max-width:var(--maxw);
}

.conditions .section-title{

    margin:0 0 32px;

    text-align:center;

    font-family:var(--font-heading);

    font-size:18px;

    font-weight:500;

    color:#14233B;

    text-transform:uppercase;

    letter-spacing:.12em;

}

/*------------------------------------
GRID
------------------------------------*/

.conditions-grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:14px;

}

/*------------------------------------
CARD
------------------------------------*/

.condition-card{

    position:relative;

    overflow:hidden;

    height:248px;

    padding:18px 18px 0;

    border-radius:8px;

    background:linear-gradient(
        180deg,
        #07192E 0%,
        #081D35 45%,
        #082240 100%
    );

    border:1px solid rgba(193,152,86,.18);

    transition:.35s ease;

}

.condition-card:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(0,0,0,.18);

}

/*------------------------------------
TOP
------------------------------------*/

.condition-top{

    display:flex;

    align-items:center;

    gap:12px;

    position:relative;

    z-index:3;

}

.condition-icon{

    width:38px;

    height:38px;

    flex:none;

    border-radius:50%;

    border:1px solid #C19856;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#C19856;

    background:rgba(255,255,255,.02);

}

.condition-icon svg{

    width:18px;

    height:18px;

}

/*------------------------------------
TITLE
------------------------------------*/

.condition-card h3{

    margin:0;

    color:#fff;

    font-size:15px;

    line-height:1.35;

    font-weight:600;

    font-family:var(--font-heading);

}

/*------------------------------------
LINK
------------------------------------*/

.view-details{

    display:inline-flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    margin-top:14px;

    padding:6px 6px 6px 16px;

    position:relative;

    z-index:3;

    background:#C49B4A;

    border-radius:30px;

    color:#0c1f3a;

    font-size:10.5px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.1em;

    text-decoration:none;

    transition:.3s;

}

.view-details:hover{

    background:#d5b06c;

    transform:translateY(-2px);

}

.view-details span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:24px;

    height:24px;

    flex:none;

    border-radius:50%;

    background:#0c1f3a;

    color:#fff;

    font-size:12px;

    transition:.3s;

}

.view-details:hover span{

    transform:translateX(3px);

}

/*------------------------------------
IMAGE
------------------------------------*/

.condition-xray{

position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 29%;
    opacity: .9;
        height: 75%;
    display: flex;
    align-items: flex-end;
    justify-content: center;

}

.condition-xray img{

    width:112%;

    height:109%;

    object-fit:contain;

    object-position:bottom center;

    display:block;

    user-select:none;

    -webkit-user-drag:none;

}

/*------------------------------------
RESPONSIVE
------------------------------------*/

@media (max-width:1400px){

    .conditions-grid{

        grid-template-columns:repeat(3,1fr);

        gap:20px;

    }

}

@media (max-width:992px){

    .conditions-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:576px){

    .conditions{

        padding:50px 0;

    }

    .conditions-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .condition-card{

        height:260px;

    }

}

/* ---------- ABOUT ---------- */
/* =========================
   ABOUT SECTION
========================= */

.about{
    background:#fff;
    padding:90px 0;
}

.about .container{
    max-width:var(--maxw);
    margin:auto;
    padding:0 20px;
}

.about-inner{
    display:grid;
    grid-template-columns:55% 45%;
    align-items:center;
    gap:65px;
}

/* LEFT IMAGE */

.about-media{
    position:relative;
    /* Grid items default to min-width:auto, so without this the image's
       natural (unscaled) width was setting the grid track's minimum
       size and forcing the whole "Why Choose Us" row wider than the
       viewport on narrow phones (~320px). Same CSS Grid overflow
       pattern fixed elsewhere on the site (condition cards, CTA icon). */
    min-width:0;
}

.about-media img{
    width:100%;
    display:block;
    border-radius:18px;
    object-fit:cover;
}

/* RIGHT CONTENT */

.about-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
}

/* SMALL TITLE */

.about .eyebrow{
  display: inline-block;
    color: #D69A3B;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
  
}

/* MAIN TITLE */

.about h2{
    font-family:"Marcellus",serif;
    font-size:56px;
    font-weight:500;
    line-height:1.05;
    color:#11203c;
    margin:0 0 42px;
}

/* FEATURE GRID */

.about-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(220px,1fr));
    column-gap:42px;
    row-gap:34px;
    margin-bottom:42px;
}

/* SINGLE FEATURE */

.about-item{
    display:flex;
    align-items:flex-start;
    gap:16px;
    min-width:0; /* grid item; without this its flex content's intrinsic
                    min-content width can force the .about-grid track (and
                    the page) wider than the viewport on narrow phones --
                    same CSS Grid min-content overflow pattern fixed
                    elsewhere for .about-media/.about-copy/.condition-card */
}

/* ICON */

.about-icon{
    width:52px;
    height:52px;
    min-width:52px;
    border-radius:12px;
    background:none;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#c79c4a;
    font-size:22px;
}

/* TITLE */

.about-item h4{
    margin:0 0 8px;
    font-size:18px;
    font-weight:700;
    color:#11203c;
    line-height:1.3;
}

/* DESCRIPTION */

.about-item p{
    margin:0;
    font-size:15px;
    line-height:1.7;
    color:#616161;
}

/* BUTTON */

.about .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    padding:15px 34px;
    background:#06193c;
    color:#fff;
    text-decoration:none;
    border-radius:8px;
    font-size:15px;
    font-weight:600;
    transition:.3s;
}

.about .btn:hover{
    background:#0f2d67;
    transform:translateY(-2px);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:1100px){

    .about-inner{
        grid-template-columns:1fr;
        gap:50px;
    }

    .about-copy{
        order:2;
    }

    .about-media{
        order:1;
    }

    .about h2{
        font-size:46px;
    }

    .about-grid{
        column-gap:25px;
    }

}

@media (max-width:768px){

    .about{
        padding:70px 0;
    }

    .about h2{
        font-size:38px;
        margin-bottom:30px;
    }

    .about-grid{
        grid-template-columns:1fr;
        row-gap:25px;
    }

    .about-item{
        gap:15px;
    }

    .about-icon{
        width:46px;
        height:46px;
        min-width:46px;
        font-size:20px;
    }

}

@media (max-width:576px){

    .about{
        padding:60px 0;
    }

    .about h2{
        font-size:34px;
    }

    .about .btn{
        width:100%;
        justify-content:center;
    }

}

/* ---------- JOURNEY ---------- */
/*====================================================
 JOURNEY TO RELIEF
=====================================================*/

.journey{
    background:#06152d;
    padding:70px 0;
    position:relative;
    overflow:hidden;
}

.journey .container{
    max-width:1280px;
    margin:auto;
    padding:0 30px;
}

.journey-heading{
    text-align:center;
    margin-bottom:60px;
}

.journey-heading span{
    color:#D3A15B;
    font-size:13px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
}

/*--------------------------------*/

.journey-track{
    display:flex;
    justify-content:space-between;
    position:relative;
    gap:20px;
}

.journey-track:before{

    content:"";

    position:absolute;

    left:7%;

    right:7%;

    top:34px;

    border-top:1px dashed rgba(255,255,255,.22);

    z-index:0;

}

/*--------------------------------*/
.journey-step{
    width:20%;
    position:relative;
    z-index:2;
}

.journey-top{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-bottom:20px;
}

/*--------------------------------*/

.journey-circle{

    width:58px;

    height:58px;

    border-radius:50%;

    border:1px solid rgba(208,161,91,.9);

    background:#06152d;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 0 0 10px #06152d;

}

.journey-circle img{

    width:32px;

    height:32px;

    object-fit:contain;

    filter:brightness(0) saturate(100%) invert(76%) sepia(21%) saturate(675%) hue-rotate(357deg);

}

/*--------------------------------*/

.journey-number{

    font-size:28px;

    color:#ffffff;

    font-family:"Marcellus", Georgia, serif;

    font-weight:400;

}

/*--------------------------------*/

.journey-step h3{
    font-family:"Marcellus", Georgia, serif;
    font-size:22px;
    color:#C8A15A;
    font-weight:400;
    margin:0 0 10px;
    text-align:left;
}

.journey-step p{
    font-size:15px;
    line-height:1.65;
    color:#C8D0DA;
    text-align:left;
    max-width:210px;
    margin:0;
}

.journey-step.left h3,
.journey-step.left p{
    text-align:left;
    margin-right:auto;
}

.journey-step.center h3,
.journey-step.center p{
    text-align:center;
    margin:0 auto;
}

.journey-step.right h3,
.journey-step.right p{
    text-align:right;
    margin-left:auto;
}

.journey-step{
    width:20%;
    position:relative;
}

.journey-head{
    display:flex;
    align-items:center;
    justify-content:left;
    gap:18px;
    margin-bottom:24px;
}

.journey-content{
    max-width:210px;
    margin:0 auto;
    text-align:left;      /* Change to right if matching your design */
}

.journey-content h3{
    margin:0 0 12px;
}

.journey-content p{
        color: #d2dae6;
    font-size:15px;
    line-height: 1.5;
    margin:0;
}
/*--------------------------------*/

@media(max-width:991px){

.journey-track{

flex-wrap:wrap;

}

.journey-track:before{

display:none;

}

.journey-step{

width:48%;

margin-bottom:45px;

}

.journey-head{

justify-content:center;

}

.journey-number{

display:none;

}

.journey-content{

text-align:center;

}

}

@media(max-width:576px){

.journey{

padding:55px 0;

}

.journey-step{

width:100%;

}

.journey-heading{

margin-bottom:40px;

}

.journey-head{

justify-content:center;

}

}

/* ---------- STATS ---------- */
/*==========================================
            STATS SECTION
==========================================*/

.stats{
    background:#fff;
    padding:60px 0;
    border-top:1px solid #ece8e2;
    border-bottom:1px solid #ece8e2;
}

.stats .container{
    max-width:1280px;
    margin:auto;
    padding:0 30px;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
}

.stat-item{
    position:relative;
    text-align:center;
    padding:0 25px;
}

.stat-item:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:10px;
    width:1px;
    height:105px;
    background:#e6e2db;
}

.stat-icon{
 
    margin:0 0 18px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.stat-icon img{
    width:70px;
    height:70px;
    display:block;
    object-fit:contain;
}

.stat-number{
       font-family: "Marcellus", serif;
    font-size:48px;
    line-height:1;
    color:#162547;
    margin-bottom:10px;
    font-weight:400;
}

.stat-text{
    font-size:15px;
    color:#777;
    line-height:1.5;
}

/* Tablet */

@media(max-width:991px){

.stats-grid{
    grid-template-columns:repeat(2,1fr);
    gap:40px;
}

.stat-item::after{
    display:none;
}

}

/* Mobile */

@media(max-width:576px){

.stats{
    padding:45px 0;
}

.stats-grid{
    grid-template-columns:1fr;
    gap:35px;
}

.stat-number{
    font-size:38px;
}

}

/* ---------- LOWER GRID (testimonials / providers / faq) ---------- */
/*==================================================
PART 2A
PATIENT STORIES SECTION
==================================================*/

.lower-grid{
    background:#ffffff;
    padding:80px 0 25px;
}

.lower-grid .container{
    max-width:1280px;
    margin:0 auto;
    padding:0 30px;
}

.lower-grid-inner{
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    gap:55px;
    align-items:flex-start;
}

.lower-grid-inner > div{
    position:relative;
}

.lower-grid-inner > div:not(:last-child)::after{
    content:"";
    position:absolute;
    right:-28px;
    top:0;
    width:1px;
    height:100%;
    background:#ece6dd;
}

/*==================================================
COMMON
==================================================*/

.eyebrow{
    display:block;
    margin-bottom:10px;
    color:#B78B48;
    font-size:12px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
}

.testimonials h3,
.providers h3,
.faq h3{
    margin:0 0 14px;
    font-family:"Marcellus", Georgia, serif;
    font-size:24px;
    font-weight:400;
    line-height:1.25;
    color:#081B36;
}

.muted {
    margin: 6px 0px;
    color: #6F7680;
    font-size: 15px;
    line-height: 1.7;
}

/*==================================================
TESTIMONIAL WRAPPER
==================================================*/

.testimonial-wrapper{
    position:relative;
    margin-bottom:30px;
}

.testimonial-row{
    display:flex;
    gap:16px;
    overflow:hidden;
}

/*==================================================
THUMBNAILS
==================================================*/

.testimonial-thumb{
    position:relative;
    display:block;
    width:170px;
    height:115px;
    border-radius:10px;
    overflow:hidden;
    flex-shrink:0;
    background:#ddd;
    transition:.35s;
}

.testimonial-thumb:hover{
    transform:translateY(-4px);
}

.testimonial-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.4s;
}

.testimonial-thumb:hover img{
    transform:scale(1.08);
}

/*==================================================
PLAY BUTTON
==================================================*/

.play-btn{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:48px;

    height:48px;

    border-radius:50%;

    background:rgba(255,255,255,.92);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#081B36;

    font-size:16px;

    transition:.3s;

}

.testimonial-thumb:hover .play-btn{

    background:#C59A54;

    color:#fff;

}

/*==================================================
ARROWS
==================================================*/

.story-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#fff;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    cursor:pointer;

    color:#081B36;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

    z-index:5;

}

.story-arrow:hover{

    background:#C59A54;

    color:#fff;

}

.story-arrow.prev{

    left:-20px;

}

.story-arrow.next{

    right:-20px;

}

/*==================================================
VIEW MORE
==================================================*/

.link-more{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#081B36;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}

.link-more:hover{

    color:#C59A54;

}

.link-more i{

    transition:.3s;

}

.link-more:hover i{

    transform:translateX(4px);

}

/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:992px){

.lower-grid{

    padding:70px 0;

}

.lower-grid-inner{

    grid-template-columns:1fr;

    gap:60px;

}

.lower-grid-inner>div::after{

    display:none;

}

.story-arrow{

    display:none;

}

.testimonial-row{

    justify-content:center;

    flex-wrap:wrap;

}

}

@media (max-width:767px){

.lower-grid{

    padding:60px 0;

}

.lower-grid .container{

    padding:0 20px;

}

.testimonials h3,
.providers h3,
.faq h3{

    font-size:22px;

}

.testimonial-thumb{

    width:100%;

    max-width:320px;

    height:200px;

}

.testimonial-row{

    flex-direction:column;

    align-items:center;

}

}

/*==================================================
PART 2B
PROVIDERS | FAQ
==================================================*/

/*==========================================
PROVIDERS
==========================================*/

.providers{
    display:flex;
    flex-direction:column;
}

.gold-line{
    width:60px;
    height:2px;
    background:#C59A54;
    margin:0 0 30px;
}
.providers-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 18px;
    margin-bottom: 35px;
    grid-auto-flow: column;
}
.provider-item{
    text-align:left;
}

.provider-item img{
    width:40px;
    height:40px;
    object-fit:contain;
    display:block;
      margin: 0 0 12px;
}

.provider-item span{
    display:block;
    font-size:14px;
    line-height:1.5;
    color:#4b5563;
}

/*==========================================
BUTTON
==========================================*/

.providers .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:fit-content;
    padding:14px 30px;
    border-radius:50px;
    text-decoration:none;
    transition:.3s;
}

.providers .btn i{
    transition:.3s;
}

.providers .btn:hover i{
    transform:translateX(5px);
}

/*==========================================
FAQ
==========================================*/

.faq{
    display:flex;
    flex-direction:column;
}

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

.faq-list li{
    border-bottom:1px solid #ece6dd;
}

.faq-question {
    width: 100%;
    padding: 10px 0;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: #081B36;
    transition: .3s;
}

.faq-question:hover{
    color:#C59A54;
}

.faq-icon{
    width:28px;
    height:28px;
    border:1px solid #D9C7A0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#C59A54;
    flex-shrink:0;
    transition:.3s;
}

.faq-question:hover .faq-icon{
    background:#C59A54;
    color:#fff;
}

.faq-answer{
    display:none;
    padding:0 0 18px;
}

.faq-answer p{
    margin:0;
    color:#6b7280;
    line-height:1.7;
    font-size:15px;
}

/*==========================================
ACTIVE FAQ
==========================================*/

.faq-list li.active .faq-answer{
    display:block;
}

.faq-list li.active .faq-icon{
    background:#C59A54;
    color:#fff;
}

.faq-list li.active .faq-icon i{
    transform:rotate(45deg);
}

/*==========================================
RESPONSIVE
==========================================*/

@media (max-width:992px){

.providers-icons{
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.providers .btn{
    align-self:flex-start;
}

}

@media (max-width:767px){

.gold-line{
    margin-bottom:24px;
}

.providers-icons{
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.provider-item img{
    width:36px;
    height:36px;
}

.provider-item span{
    font-size:13px;
}

.providers .btn{
    width:100%;
    justify-content:center;
}

.faq-question{
    font-size:14px;
}

}

.testimonial-wrapper{
    position:relative;
    overflow:hidden;
}

.testimonial-row{
    display:flex;
    gap:16px;
    transition:transform .45s ease;
    will-change:transform;
}

.testimonial-thumb{
    flex:0 0 auto;
}
/* ---------- CTA ---------- */
.cta{background:var(--navy);padding:60px 0;position:relative;overflow:hidden;}
.cta-inner{display:grid;grid-template-columns:120px 1fr auto;gap:30px;align-items:center;}
.cta-xray{opacity:.5;width:100px;}
.cta-copy h2{color:var(--white);font-size:1.6rem;margin-bottom:10px;}
.cta-copy p{font-size:15px;color:#c7d0dd;margin:0;}
.cta-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.or{color:#aeb8c7;font-size:.8rem;}
.phone-lg{color:var(--gold);font-weight:700;font-size:1rem;}

/* ---------- FOOTER ---------- */
.footer{background:#08172c;color:#c7d0dd;padding:40px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:30px;padding-bottom:40px;}
.footer-brand p{font-size:15px;color:#9fabbd;margin:-12px 0 16px;}
.social{display:flex;gap:10px;}
.social a{
  width:30px;height:30px;border:1px solid rgba(255,255,255,.25);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;
  color:#c7d0dd;transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.social a svg{display:block;}
.social a:hover{color:var(--navy);border-color:var(--gold);background:var(--gold);}
.footer-col h5{color:var(--white);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;}
.footer-col ul li{margin-bottom:8px;font-size:.82rem;}
.footer-col a:hover{color:var(--gold);}
.contact-list li{display:flex;gap:6px;align-items:flex-start;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:18px 24px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.75rem;color:#7f8ba0;max-width:var(--maxw);margin:0 auto;
}
.footer-bottom a{color:#7f8ba0;}

/* ===================================================================
   RESPONSIVE
=================================================================== */
@media (max-width: 1024px){
  .conditions-grid{grid-template-columns:repeat(3,1fr);}
  .lower-grid-inner{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 860px){
  .hero-inner,.about-inner{grid-template-columns:1fr;}
  .about-media img{height:280px;}
  .hero-stats{position:static;transform:none;flex-direction:row;margin-top:20px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:30px;}
  .cta-inner{grid-template-columns:1fr;text-align:center;}
  .cta-actions{align-items:center;}
}
@media (max-width: 600px){
  .conditions-grid{grid-template-columns:repeat(2,1fr);}
  .topbar-info{display:none;}
  .nav-links{gap:14px;}
  .footer-grid{grid-template-columns:1fr;}
}


/* ---------- INSURANCE ---------- */
.insurance{margin-top:-34px;position:relative;z-index:2;padding:0 24px;}
.insurance-card{
  max-width:1040px;margin:0 auto;background:var(--white);border-radius:14px;
  box-shadow:0 14px 40px rgba(10,25,50,.18);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:22px;
  padding:26px 40px;
}
.insurance-label{font-weight:700;color:var(--navy);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;padding-right:16px;border-right:1px solid #e6e3da;}
.insurance-logos{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
.ins-logo-img{height:30px;width:auto;max-width:100px;object-fit:contain;}
.insurance-viewmore{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding-left:20px;border-left:1px solid #e6e3da;
  color:var(--navy);font-weight:700;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.05em;
  transition:.25s;
}
.insurance-viewmore i{color:var(--gold);font-size:.78rem;transition:transform .25s;}
.insurance-viewmore:hover{color:var(--gold);}
.insurance-viewmore:hover i{transform:translateX(4px);}
.insurance-disclaimer{width:100%;text-align:center;margin:14px 0 0;font-size:12.5px;color:#68778b;line-height:1.5;}

/* ---------- CONDITIONS ---------- */
.conditions{padding:70px 0 60px;}
.conditions-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.condition-card{
  background:var(--navy);border-radius:var(--radius);padding:18px;
  display:flex;flex-direction:column;
  aspect-ratio: 3 / 4;
  /* An older, unrelated .condition-card rule earlier in this file still
     sets a fixed height:248px that was never removed; since this later
     rule never redeclared height, that stray 248px was winning the
     cascade and silently overriding aspect-ratio, pinning every card to
     186px wide no matter how much room the grid track actually had.
     Forcing height back to auto lets aspect-ratio (with the grid's
     natural width) size the card correctly again. */
  width:100%;height:auto;
  position:relative;overflow:hidden;
}
/* Align to the top (not center) so a longer condition name that wraps
   to two lines doesn't push its icon down relative to the single-line
   titles on the other cards in the same row. */
.condition-top{display:flex;align-items:flex-start;gap:10px;z-index:2;}
.condition-icon{
  flex:none;width:34px;height:34px;border:1px solid var(--gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--gold);
}
.condition-card h3{color:var(--white);font-size:.88rem;margin:0;line-height:1.25;padding-top:2px;}


.condition-xray svg{width:78%;height:78%;}

/* ---------- ABOUT ---------- */
.about{padding:70px 0;}
.about-inner{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center;}
.about-media img{border-radius:var(--radius);height:420px;object-fit:cover;background:#e7e2d6;}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:30px;}
.about-item h4{font-size:.95rem;margin:0px 0 3px;color:var(--navy);}
.about-item p{font-size:15px;color:var(--muted);margin:0;}
.about-icon{
  display:inline-flex;width:34px;height:34px;border-radius:8px;background:none;
  color:var(--gold);align-items:center;justify-content:center;font-size:1rem;
}





/* ---------- FOOTER ---------- */
.footer{background:#08172c;color:#c7d0dd;padding:40px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:30px;padding-bottom:40px;}
.footer-brand p{font-size:15px;color:#9fabbd;margin:-12px 0 16px;}
.social{display:flex;gap:10px;}
.social a{
  width:30px;height:30px;border:1px solid rgba(255,255,255,.25);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;
  color:#c7d0dd;transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.social a svg{display:block;}
.social a:hover{color:var(--navy);border-color:var(--gold);background:var(--gold);}
.footer-col h5{color:var(--white);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;}
.footer-col ul li{margin-bottom:8px;font-size:.82rem;}
.footer-col a:hover{color:var(--gold);}
.contact-list li{display:flex;gap:6px;align-items:flex-start;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:18px 24px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.75rem;color:#7f8ba0;max-width:var(--maxw);margin:0 auto;
}
.footer-bottom a{color:#7f8ba0;}

/* ===================================================================
   RESPONSIVE
=================================================================== */
@media (max-width: 1024px){
  .conditions-grid{grid-template-columns:repeat(3,1fr);}
  .lower-grid-inner{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 860px){
  .hero-inner,.about-inner{grid-template-columns:1fr;}
  .about-media img{height:280px;}
  .hero-stats{position:static;transform:none;flex-direction:row;margin-top:20px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:30px;}
  .cta-inner{grid-template-columns:1fr;text-align:center;}
  .cta-actions{align-items:center;}
}
@media (max-width: 600px){
  .conditions-grid{grid-template-columns:repeat(2,1fr);}
  .topbar-info{display:none;}
  .nav-links{gap:14px;}
  .footer-grid{grid-template-columns:1fr;}
}



/*====================================================
APS RECOVERY CTA
====================================================*/

.aps-recovery-section{

    padding:80px 0 0;

}

.aps-recovery-box{

    position:relative;

    display:grid;

    grid-template-columns:110px 1.5fr 1px 420px;

    align-items:center;

    gap:40px;

    background:#fff;

    border-radius:24px;

    padding:50px 55px;

    overflow:hidden;

    border:1px solid #E9EEF7;

    box-shadow:
        0 15px 50px rgba(17,37,75,.08),
        0 2px 10px rgba(17,37,75,.05);

}

/* Decorative Shapes */

.aps-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.aps-shape-left{

    width:260px;

    height:260px;

    left:-150px;

    bottom:-150px;

    background:
    radial-gradient(circle,
    rgba(71,132,255,.10),
    rgba(71,132,255,.04),
    transparent 72%);

}

.aps-shape-right{

    width:220px;

    height:220px;

    right:-120px;

    bottom:-120px;

    background:
    radial-gradient(circle,
    rgba(71,132,255,.08),
    rgba(71,132,255,.03),
    transparent 70%);

}

/* Icon */

.aps-recovery-icon{

    display:flex;

    justify-content:center;

}

.aps-icon-circle{

    width:110px;

    height:110px;

    border-radius:50%;

    background:#EEF4FF;

    display:flex;

    justify-content:center;

    align-items:center;

}

.aps-icon-circle img{

    width:54px;

}

/* Content */

.aps-recovery-content h2{

    font-size:48px;

    line-height:1.15;

    color:#0F2448;

    margin-bottom:18px;

    font-weight:700;

}

.aps-recovery-content p{

    max-width:620px;

    font-size:15px;

    line-height:1.8;

    color:#55657E;

}

/* Divider */

.aps-divider{

    width:1px;

    align-self:stretch;

    background:#E6ECF6;

}

/* CTA */

.aps-recovery-action{

    text-align:center;

}

.aps-btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    min-width:330px;

    padding:18px 34px;

    background:#D7A441;

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    font-size:17px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.4px;

    transition:.3s;

}

.aps-btn-primary:hover{

    background:#C7922C;

    transform:translateY(-2px);

}

.aps-btn-primary span{

    font-size:22px;

}

.aps-call-row{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin:30px 0 20px;

}

.aps-line{

    width:110px;

    height:1px;

    background:#DCE5F2;

}

.aps-or{

    font-size:16px;

    color:#44536B;

}

.aps-phone{

    display:inline-flex;

    align-items:center;

    gap:16px;

    text-decoration:none;

    color:#0F2448;

    font-size:24px;

    font-weight:700;

}

.aps-phone:hover{

    color:#D6A542;

}

/*====================================================
Responsive
====================================================*/

@media(max-width:1200px){

    .aps-recovery-box{

        grid-template-columns:1fr;

        text-align:center;

        gap:30px;

        padding:45px;

    }

    .aps-divider{

        display:none;

    }

    .aps-recovery-content p{

        margin:auto;

    }

}

@media(max-width:768px){

    .aps-recovery-section{

        padding:60px 0 0;

    }

    .aps-recovery-box{

        padding:35px 25px;

        border-radius:18px;

    }

    .aps-icon-circle{

        width:85px;

        height:85px;

    }

    .aps-icon-circle img{

        width:42px;

    }

    .aps-recovery-content h2{

        font-size:34px;

    }

    .aps-recovery-content p{

        font-size:16px;

    }

    .aps-btn-primary{

        min-width:100%;

        font-size:15px;

    }

    .aps-phone{

        font-size:20px;

    }

    .aps-line{

        width:60px;

    }

}


/*==================================================
APS RECOVERY CTA
==================================================*/

.aps-cta-section{

    width:100%;
    margin-bottom:50px;


}

.aps-cta-section .container-fluid{

    width:100%;

    max-width:var(--maxw);

    margin:0 auto;

    padding:0 24px;

}

.aps-cta-wrapper{

    position:relative;

    display:grid;

    grid-template-columns:120px 1fr 1px 390px;

    align-items:center;

    gap:45px;

    min-height:260px;

    border-radius:24px;

    overflow:hidden;

    border:1px solid #E7EDF8;

    background:

    radial-gradient(circle at left bottom,
    rgba(212,226,255,.85) 0%,
    rgba(212,226,255,.35) 14%,
    transparent 30%),

    radial-gradient(circle at right bottom,
    rgba(212,226,255,.75) 0%,
    rgba(212,226,255,.30) 14%,
    transparent 28%),

    linear-gradient(180deg,#FCFDFF 0%,#F5F8FD 100%);

    box-shadow:
    0 10px 40px rgba(16,45,90,.08);

    padding:70px 60px;

}

/*==============================
BACKGROUND SHAPES
==============================*/

.aps-cta-bg{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.aps-cta-bg-left{

    width:380px;

    height:380px;

    left:-260px;

    bottom:-260px;

    border:55px solid rgba(184,206,255,.20);

}

.aps-cta-bg-right{

    width:280px;

    height:280px;

    right:-170px;

    bottom:-170px;

    border:42px solid rgba(184,206,255,.18);

}

/*==============================
LEFT
==============================*/

.aps-cta-left{

    display:contents;

}

.aps-cta-icon{

    display:flex;

    justify-content:center;

    min-width:0; /* grid items default to min-width:auto, which can force
                    this fixed-width track (and the whole row) wider than
                    the section -- pinning it to 0 lets the icon shrink
                    instead of blowing out the layout */

}

.aps-cta-icon img{

    width:108px;

    height:108px;

    object-fit:contain;

}

.aps-cta-content{

    min-width:0; /* same CSS-grid "min-content" guard as above, applied to
                    the text column so a long heading/paragraph wraps
                    inside its track instead of pushing the row past the
                    viewport width */

}

.aps-cta-content h2{

    font-family:"Marcellus", Georgia, serif;

    font-size:34px;

    line-height:1.2;

    color:#112547;

    margin-bottom:18px;

    font-weight:700;

    overflow-wrap:break-word;

}

.aps-cta-content p{

    max-width:560px;

    font-size:15px;

    line-height:1.75;

    color:#56657D;

    margin:0;

}

/*==============================
DIVIDER
==============================*/

.aps-cta-divider{

    width:1px;

    background:#DDE6F2;

    align-self:stretch;

}

/*==============================
RIGHT
==============================*/

.aps-cta-right{

    text-align:center;

    min-width:0;

}

.aps-cta-button{

    width:100%;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    background:#D5A43E;

    color:#fff;

    text-decoration:none;

    text-transform:uppercase;

    font-size:18px;

    font-weight:700;

    letter-spacing:.5px;

    border-radius:10px;

    transition:.3s;

}

.aps-cta-button:hover{

    background:#C4912A;

    transform:translateY(-2px);

}

.aps-call-divider{

    display:flex;

    align-items:center;

    justify-content:center;

    margin:28px 0 22px;

}

.aps-call-divider span{

    width:105px;

    height:1px;

    background:#D6E0EF;

}

.aps-call-divider p{

    margin:0 18px;

    color:#3E4E67;

    font-size:15px;

}

.aps-phone-link{

    display:inline-flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    color:#112547;

    font-size:23px;

    font-weight:700;

}

.aps-phone-link:hover{

    color:#D5A43E;

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:1200px){

.aps-cta-wrapper{

grid-template-columns:1fr;

text-align:center;

padding:45px 35px;

gap:30px;

}

.aps-cta-divider{

display:none;

}

.aps-cta-content p{

max-width:100%;

}

.aps-cta-icon{

justify-content:center;

}

}

@media(max-width:768px){

.aps-cta-section .container-fluid{

padding:0 15px;

}

.aps-cta-wrapper{

padding:35px 25px;

border-radius:18px;

min-height:auto;

}

.aps-cta-icon img{

width:82px;

height:82px;

}

.aps-cta-content h2{

font-size:28px;

}

.aps-cta-content p{

font-size:16px;

}

.aps-cta-button{

height:58px;

font-size:15px;

}

.aps-phone-link{

font-size:19px;

}

.aps-call-divider span{

width:60px;

}

}











/*====================================================
    APS HOMEPAGE TESTIMONIALS
    PART 1 (Unique Namespace)
=====================================================*/

.aps-hp-section{
    padding:48px 0;
    background:#f7f9fc;
    position:relative;
    overflow:hidden;
}

.aps-hp-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-180px;
    top:-180px;
    border-radius:50%;
    background:rgba(197,156,58,.05);
}

.aps-hp-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:55px;

    align-items:start;

    position:relative;

    z-index:2;
}

/*=========================================
LEFT SIDE
=========================================*/

.aps-hp-left{
    width:100%;
}

/*=========================================
HEADING
=========================================*/

.aps-hp-heading{
    margin-bottom:35px;
}

.aps-hp-tag{

  display: inline-block;
    color: #D69A3B;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
   
}

.aps-hp-heading h2{

    margin: 11px 0 9px;
    font-family: "Marcellus", serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.15;
    color: #17365f;
}

.aps-hp-heading p{

    margin:0;

    max-width:620px;

    font-size:15px;

    line-height:1.8;

    color:#68778b;
}

/*=========================================
3 COLUMN GRID
=========================================*/

.aps-hp-review-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

    margin-bottom:35px;
}

/*=========================================
CARD
=========================================*/

.aps-hp-review-card{

    display:flex;

    flex-direction:column;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    text-decoration:none;

    border:1px solid #edf2f6;

    transition:.35s;

    box-shadow:
    0 12px 28px rgba(18,40,74,.05);

    height:100%;
}

.aps-hp-review-card:hover{

    transform:translateY(-8px);

    border-color:#d9bb72;

    box-shadow:
    0 18px 45px rgba(18,40,74,.10);
}

/*=========================================
IMAGE
=========================================*/

.aps-hp-review-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:16/10;
}

.aps-hp-review-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;
}

.aps-hp-review-card:hover img{

    transform:scale(1.06);
}

.aps-hp-review-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(to top,
    rgba(8,25,48,.45),
    rgba(8,25,48,.05));
}

/*=========================================
PLAY BUTTON
=========================================*/

.aps-hp-review-play{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:56px;

    height:56px;

    border-radius:50%;

    background:rgba(255,255,255,.96);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#17365f;

    font-size:18px;

    transition:.3s;

    z-index:2;
}

.aps-hp-review-card:hover .aps-hp-review-play{

    background:#bb8a2d;

    color:#fff;
}

/*=========================================
VIDEO TIME
=========================================*/

.aps-hp-review-time{

    position:absolute;

    right:14px;

    bottom:14px;

    padding:5px 10px;

    border-radius:20px;

    background:rgba(0,0,0,.55);

    color:#fff;

    font-size:11px;

    font-weight:600;

    z-index:2;
}

/*=========================================
CONTENT
=========================================*/

.aps-hp-review-content{

    padding:20px;

    display:flex;

    flex-direction:column;

    flex:1;
}

.aps-hp-review-category{

    display:inline-block;

    margin-bottom:10px;

    color:#bb8a2d;

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.aps-hp-review-content h3{

     margin: 0 0 5px;
    color: #17365f;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
}

.aps-hp-review-content p{

    margin:0;

    color:#68778b;

    font-size:15px;

    line-height:1.8;
}

/*=========================================
BOTTOM
=========================================*/

.aps-hp-bottom{

    margin-top:10px;
}

/*=========================================
BUTTON
=========================================*/

.aps-hp-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 24px;

    border-radius:40px;

    background:#17365f;

    color:#fff;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    transition:.35s;
}

.aps-hp-btn:hover{

    background:#bb8a2d;

    color:#fff;
}



/*====================================================
    APS HOMEPAGE FAQ
    PART 2 (Unique Namespace)
=====================================================*/

.aps-hp-right{
    position:relative;
}

.aps-hp-faq-card{
    background:#ffffff;
    border:1px solid #edf2f6;
    border-radius:22px;
    padding:34px;
    box-shadow:0 15px 40px rgba(15,30,55,.05);
    position:sticky;
    top:110px;
}

/*=========================================
FAQ LIST
=========================================*/

.aps-hp-faq-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:28px;
}

/*=========================================
FAQ ITEM
=========================================*/

.aps-hp-faq-item{
    border:1px solid #edf2f6;
    border-radius:14px;
    overflow:hidden;
    background:#fff;
    transition:.35s;
}

.aps-hp-faq-item:hover{
    border-color:#d6b166;
    box-shadow:0 10px 25px rgba(20,37,70,.05);
}

.aps-hp-faq-item.active{
    border-color:#d6b166;
}

/*=========================================
QUESTION
=========================================*/

.aps-hp-faq-question{
    width:100%;
    border:none;
    background:none;
    cursor:pointer;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;

    padding:18px 20px;

    text-align:left;

    font-size:14px;
    font-weight:600;
    color:#17365f;

    transition:.3s;
}

.aps-hp-faq-question:hover{
    color:#bb8a2d;
}

.aps-hp-faq-question span:first-child{
    flex:1;
    line-height:1.6;
}

/*=========================================
PLUS ICON
=========================================*/

.aps-hp-faq-icon{

 width:34px;

    height:34px;

    border-radius:50%;

    background:#f8f4ea;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    transition:.35s;
}

.aps-hp-arrow{

    width:16px;

    height:16px;

    transition:.35s;
}
.aps-hp-faq-item.active .aps-hp-arrow{

    transform:rotate(180deg);
}

.aps-hp-faq-item.active .aps-hp-faq-icon{

    background:#bb8a2d;

    color:#fff;
}

.aps-hp-faq-item.active .aps-hp-faq-icon{

    background:#bb8a2d;

    color:#fff;

    transform:rotate(180deg);
}

/*=========================================
ANSWER
=========================================*/

.aps-hp-faq-answer{
  max-height:0;

    overflow:hidden;

    transition:max-height .4s ease, padding .4s ease;

    padding:0 22px;
}

.aps-hp-faq-item.active .aps-hp-faq-answer{
  max-height:300px;

    padding:0 22px 22px;
}

.aps-hp-faq-answer p{


    color:#6b7280;

    font-size:15px;

    line-height:1.8;
}

/*=========================================
FOOTER
=========================================*/

.aps-hp-faq-footer{
    margin-top:28px;
}

.aps-hp-btn-full{
    width:100%;
    justify-content:center;
}

/*=========================================
SMOOTH EFFECTS
=========================================*/

.aps-hp-review-card,
.aps-hp-faq-card,
.aps-hp-faq-item{
    transition:.35s ease;
}

/*=========================================
TABLET
=========================================*/

@media(max-width:1200px){

    .aps-hp-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .aps-hp-faq-card{
        position:relative;
        top:auto;
    }

}

/*=========================================
TABLET
=========================================*/

@media(max-width:992px){

    .aps-hp-review-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

    .aps-hp-section{
        padding:70px 0;
    }

    .aps-hp-grid{
        gap:35px;
    }

    .aps-hp-review-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .aps-hp-heading h2{
        font-size:30px;
    }

    .aps-hp-faq-card{
        padding:24px;
    }

    .aps-hp-faq-question{
        font-size:13px;
        padding:16px;
    }

    .aps-hp-faq-answer{
        padding:0 16px 16px;
    }

    .aps-hp-btn{
        width:100%;
        justify-content:center;
    }

}

/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

    .aps-hp-heading h2{
        font-size:26px;
    }

    .aps-hp-heading p{
        font-size:13px;
    }

    .aps-hp-review-content{
        padding:18px;
    }

    .aps-hp-review-content h3{
        font-size:16px;
    }

    .aps-hp-review-content p{
        font-size:12px;
    }

    .aps-hp-review-play{
        width:48px;
        height:48px;
        font-size:15px;
    }

    .aps-hp-faq-icon{
        width:30px;
        height:30px;
        font-size:12px;
    }

}

/* ===================================================================
   MOBILE NAVIGATION (hamburger toggle)
   Appended last so it wins the cascade over the earlier (duplicated)
   .topbar/.mainnav/.nav-links rules above at equal specificity.
=================================================================== */

/* Only body gets overflow-x:hidden (not html too) — setting it on both
   turns them into competing scroll containers and silently breaks
   position:sticky on descendants (e.g. the main nav) in Chrome/Firefox. */
body{
    overflow-x:hidden;
    max-width:100%;
}

.nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:36px;
    height:36px;
    padding:0;
    margin-right:14px;
    background:transparent;
    border:1px solid rgba(255,255,255,.25);
    border-radius:6px;
    cursor:pointer;
    flex-shrink:0;
}

.nav-toggle span{
    display:block;
    width:20px;
    height:2px;
    background:#fff;
    border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
}

.mainnav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mainnav.nav-open .nav-toggle span:nth-child(2){opacity:0;}
.mainnav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Small desktop / landscape tablet: the full nav still fits above the
   hamburger breakpoint, but the gap between links was tuned for the
   English labels — the longer Spanish nav ("Recursos para Pacientes",
   "Noticias y Actualizaciones"...) pushes the language dropdown off
   the right edge around 901-1140px. Tighten spacing so both languages
   fit without dropping to the mobile menu this early. */
@media (max-width: 1140px) and (min-width: 901px){
    .mainnav-inner{
        padding-left:60px;
    }

    .nav-links{
        gap:20px;
    }

    .nav-links a{
        font-size:11.5px;
    }

    .lang-select{
        width:104px;
        padding:0 10px;
    }
}

@media (max-width: 900px){

    .mainnav-inner{
        padding:0 20px;
        height:60px;
    }

    .nav-left{
        width:100%;
        display:flex;
        align-items:center;
    }

    .nav-toggle{
        display:flex;
    }

    .nav-links{
        position:absolute;
        top:60px;
        left:0;
        right:0;
        z-index:200;

        flex-direction:column;
        align-items:stretch;
        gap:0;

        background:#08182d;
        border-bottom:1px solid rgba(255,255,255,.08);
        box-shadow:0 16px 30px rgba(0,0,0,.3);

        max-height:0;
        overflow:hidden;
        visibility:hidden;
        opacity:0;
        transition:max-height .3s ease, opacity .2s ease;
    }

    .mainnav.nav-open .nav-links{
        max-height:70vh;
        overflow-y:auto;
        visibility:visible;
        opacity:1;
    }

    .nav-links li{
        width:100%;
    }

    .nav-links a{
        height:auto;
        width:100%;
        padding:16px 20px;
        border-bottom:1px solid rgba(255,255,255,.08);
        white-space:normal; /* mobile dropdown rows are auto-height, so a
                                long label can safely wrap here instead of
                                overflowing the menu width */
    }

    .nav-links a::after{
        display:none;
    }

    .nav-right{
        margin-left:auto;
    }

    .lang-select{
        width:auto;
        min-width:96px;
        height:34px;
        font-size:12px;
    }
}

/* Tablet: the two multi-line location blocks in .topbar-info are the
   first thing to go once the main nav has already collapsed to the
   hamburger (900px) — there isn't room for them plus the phone number
   and "Book a Consultation" button without overflowing horizontally. */
@media (max-width: 900px){
    .topbar-info{
        display:none;
    }
}

@media (max-width: 640px){

    .topbar-inner{
        height:auto;
        flex-wrap:wrap;
        row-gap:10px;
        padding-top:14px;
        padding-bottom:14px;
    }

    .brand-logo{
        height:100px;
    }

    .topbar-cta{
        gap:10px;
    }

    .topbar-cta .phone{
        font-size:13px;
    }

    .topbar-cta .btn-gold{
        height:36px;
        padding:0 14px;
        font-size:10.5px;
    }
}

/* Tablet: with .topbar-info hidden above, the phone + button pair can
   still be tight around 641-900px (especially on the longer Spanish
   "Programar una Consulta" label), so give it the same breathing room
   as the sub-640px compact treatment. */
@media (max-width: 900px) and (min-width: 641px){
    .topbar-cta{
        gap:14px;
    }

    .topbar-cta .phone{
        font-size:13px;
    }

    .topbar-cta .btn-gold{
        height:38px;
        padding:0 16px;
        font-size:11px;
    }
}

/* ===================================================================
   HERO STATS CARD — RESPONSIVE FIX
   style.css has duplicated/conflicting rules for .hero-stats: a
   @media(max-width:992px) rule correctly switches the floating card
   to a full-width column layout, but two later, duplicated
   @media(max-width:860px) rules reset it to flex-direction:row,
   which crams the 3 icon+text items sideways into a 400px-wide box
   and causes the icons/text to overlap and cramp on tablet/mobile.
   These overrides use higher-specificity descendant selectors (and
   come last in the file) so they always win, at every width.
=================================================================== */
.hero-stats{
    flex-direction: column;
}

.hero-stats .stat{
    width: 100%;
}

.hero-stats .stat-icon{
    margin: 0;
    flex-shrink: 0;
}

@media (max-width: 992px){
    .hero-stats{
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: 100%;
        max-width: 400px;
        margin-top: 20px;
    }
}

@media (max-width: 480px){
    .hero-stats{
        max-width: 100%;
        padding: 24px 16px;
    }

    .hero-stats .stat-icon{
        width: 40px;
        height: 40px;
    }

    .hero-stats .stat-icon img{
        width: 40px;
        height: 40px;
    }

    .hero-stats strong{
        font-size: 14px;
    }

    .hero-stats span{
        font-size: 13px;
    }
}

/* ===================================================================
   DEDICATED FAQ SECTION (homepage, before CTA)
   Left: navy/gold info card with phone callout.
   Right: accordion list with a plus/minus toggle icon.
=================================================================== */
.aps-faq2{
    padding: 90px 0;
    /* Offsets the #faq anchor (linked from the footer) so the section
       isn't tucked under the sticky main nav when scrolled to directly. */
    scroll-margin-top: 90px;
}

.aps-faq2-grid{
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 46px;
    align-items: start;
}

/* ---------- LEFT CARD ---------- */
.aps-faq2-card{
    background: var(--navy);
    border-radius: 22px;
    padding: 46px 38px;
    position: sticky;
    top: 110px;
}

.aps-faq2-tag{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #d6b166;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
}

.aps-faq2-tag::before{
    content: "";
    width: 26px;
    height: 2px;
    background: #d6b166;
    display: inline-block;
}

.aps-faq2-card h2{
    margin: 16px 0 14px;
    font-family: "Marcellus", serif;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
}

.aps-faq2-card > p{
    margin: 0;
    color: #c7d0dd;
    font-size:15px;
    line-height: 1.75;
}

.aps-faq2-divider{
    height: 1px;
    background: rgba(255,255,255,.14);
    margin: 30px 0 26px;
}

.aps-faq2-callout{
    display: flex;
    align-items: center;
    gap: 16px;
}

.aps-faq2-phone-icon{
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.aps-faq2-callout-label{
    display: block;
    color: #9fabbd;
    font-size: 12.5px;
    margin-bottom: 3px;
}

.aps-faq2-phone{
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
}

.aps-faq2-phone:hover{
    color: #d6b166;
}

/* ---------- RIGHT ACCORDION ---------- */
.aps-faq2-list{
    display: flex;
    flex-direction: column;
}

.aps-faq2-item{
    border-bottom: 1px solid #e3e6ea;
}

.aps-faq2-item:last-child{
    border-bottom: none;
}

.aps-faq2-question{
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 28px 4px;
    text-align: left;
    font-size: 17px;
    font-weight: 600;
    color: #17365f;
    transition: .3s;
}

.aps-faq2-question:hover{
    color: #bb8a2d;
}

.aps-faq2-question span:first-child{
    flex: 1;
    line-height: 1.4;
}

.aps-faq2-icon{
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.aps-faq2-icon span{
    position: absolute;
    top: 50%;
    left: 50%;
    background: #17365f;
    transition: transform .3s ease, background .3s ease;
}

.aps-faq2-icon span:first-child{
    width: 16px;
    height: 2px;
    transform: translate(-50%,-50%);
}

.aps-faq2-icon span:last-child{
    width: 2px;
    height: 16px;
    transform: translate(-50%,-50%);
}

.aps-faq2-item.active .aps-faq2-question{
    color: #17365f;
}

.aps-faq2-item.active .aps-faq2-icon span{
    background: #bb8a2d;
}

.aps-faq2-item.active .aps-faq2-icon span:last-child{
    transform: translate(-50%,-50%) scaleY(0);
}

.aps-faq2-answer{
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease, padding .4s ease;
    padding: 0 4px;
}

.aps-faq2-item.active .aps-faq2-answer{
    padding: 6px 4px 28px;
}

.aps-faq2-answer p{
    margin: 0;
    color: #6b7280;
    font-size:15px;
    line-height: 1.8;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px){
    .aps-faq2-grid{
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .aps-faq2-card{
        position: relative;
        top: auto;
    }
}

@media (max-width: 768px){
    .aps-faq2{
        padding: 60px 0;
    }

    .aps-faq2-card{
        padding: 34px 26px;
    }

    .aps-faq2-card h2{
        font-size: 28px;
    }

    .aps-faq2-question{
        font-size: 15px;
        padding: 22px 2px;
    }

    .aps-faq2-answer{
        padding: 0 2px;
    }

    .aps-faq2-item.active .aps-faq2-answer{
        padding: 4px 2px 22px;
    }
}

@media (max-width: 480px){
    .aps-faq2-card h2{
        font-size: 24px;
    }

    .aps-faq2-icon{
        width: 16px;
        height: 16px;
    }
}

/* ===================================================================
   SCROLL REVEAL ANIMATION
   Fade-up-on-scroll effect (mirrors the reference site's Elementor
   "fadeInUp" entrance animation). Elements start hidden/offset via
   .reveal-up; the sitewide script in includes/footer.php adds
   .reveal-in via IntersectionObserver once each element scrolls into
   view. --reveal-delay lets individual elements (or JS-set stagger)
   offset when their transition starts.
=================================================================== */
.reveal-up{
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal-up.reveal-in{
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
    .reveal-up{
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===================================================================
   STICKY MAIN NAV
   The top info bar (address/phone/logo) scrolls away normally, but the
   navigation menu itself locks to the top of the viewport once it
   reaches it, so the menu links stay reachable while scrolling. A
   small shadow is added (via the .nav-stuck class, toggled by the
   scroll script in includes/header.php) once it's actually pinned, to
   separate it visually from the page content scrolling underneath.
=================================================================== */
.mainnav{
    position: sticky;
    top: 0;
    transition: box-shadow .25s ease;
}
.mainnav.nav-stuck{
    box-shadow: 0 8px 24px rgba(4,12,26,.35);
}

/* ===================================================================
   CONDITION CARD — ICON-ONLY "VIEW DETAILS" ARROW
   The condition cards now show a full-card X-ray background photo, so
   the text pill link is dropped in favor of a modern floating circular
   arrow button, centered over the photo, with a soft gradient, glow
   ring and a smooth scale-up hover. Scoped to .condition-card so it
   overrides the shared .view-details pill used elsewhere without
   needing !important.
=================================================================== */
.condition-card{
    position: relative;
    overflow: hidden;
}
.condition-card .view-details{
 position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-top: 0;
    background: linear-gradient(145deg, #e3c179, #b98f3e);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(4, 12, 26, .5), 0 0 0 6px rgba(255, 255, 255, .08);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, background .35s ease;
}
.condition-card .view-details:hover{
    background: linear-gradient(145deg, #edcb8b, #cda256);
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 10px 26px rgba(4,12,26,.55), 0 0 0 8px rgba(255,255,255,.14);
}
.condition-card .view-details span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: none;
    color: #0c1f3a;
    font-size: 18px;
    transition: transform .3s ease;
}
.condition-card .view-details:hover span{
    transform: translateX(2px);
}
@media (max-width: 767px){
    .condition-card .view-details{
        width: 44px;
        height: 44px;
    }
    .condition-card .view-details span{
        font-size: 16px;
    }
}


/* Conditions section background */
.conditions {
        margin-top: -40px !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: #f9fcfd !important;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.08)
        ),
        url("img/medical-conditions-background-light.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

/* Keep all content above the background */
.conditions > .container {
    position: relative !important;
    z-index: 2 !important;
}

/* Optional: slightly strengthen the cards against the background */
.conditions .condition-card {
    position: relative !important;
    z-index: 2 !important;
}

/* Tablet and mobile */
@media (max-width: 991px) {
    .conditions {
        background-size: auto 100% !important;
        background-position: center center !important;
    }
}

/* Mobile: keep the spine visible without crowding the cards */
@media (max-width: 767px) {
    .conditions {
        background-image:
            linear-gradient(
                rgba(255, 255, 255, 0.35),
                rgba(255, 255, 255, 0.35)
            ),
            url("img/medical-conditions-background-light.webp") !important;
        background-size: auto 100% !important;
        background-position: center top !important;
    }
}

.about-copy h2 {
    margin: 0px 0 9px;
    font-family: "Marcellus", serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.15;
    color: #17365f;
    font-size: 32px;
    margin-bottom: 31px;
    line-height: 1.4;
}



.aps-hp-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 40px !important;
    margin-bottom: 8px !important;
}

.aps-hp-top .aps-hp-heading {
    flex: 1 1 auto !important;
    max-width: 850px !important;
}

.aps-hp-top .aps-hp-bottom {
    flex: 0 0 auto !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    text-align: right !important;
}

.aps-hp-top .aps-hp-btn {
      display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    /* text-decoration: underline !important; */
    white-space: nowrap !important;
    padding: 10px 24px !important;
    border: 1px solid #d5a536 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #092950 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    transition: all 0.3s ease !important;
}

.aps-hp-top .aps-hp-btn i {
    color: #d5a536 !important;
    transition: transform 0.3s ease !important;
}

.aps-hp-top .aps-hp-btn:hover {
    background: #092950 !important;
    border-color: #092950 !important;
    color: #ffffff !important;
}

.aps-hp-top .aps-hp-btn:hover i {
    color: #e4b64e !important;
    transform: translateX(4px) !important;
}

@media (max-width: 991px) {
    .aps-hp-top {
        gap: 25px !important;
    }
}

@media (max-width: 767px) {
    .aps-hp-top {
        display: block !important;
        margin-bottom: 9px !important;
    }

    .aps-hp-top .aps-hp-bottom {
        margin-top: 22px !important;
        text-align: left !important;
    }

    .aps-hp-top .aps-hp-btn {
        padding: 14px 20px !important;
    }
}
/* ==========================================================
   LARGE-SCREEN SCALE-UP (Round 5)
   On very wide viewports (desktop monitors, ultrawide, 4K)
   the page previously kept its ~1180-1500px content width and
   fixed px font sizes, leaving large amounts of empty side
   margin and making text feel small relative to the whole
   screen. This block widens the main content containers and
   scales up text (~12%) only at 1600px+ so smaller/laptop
   screens are completely unaffected.
   ========================================================== */
@media (min-width:1600px){
  /* Width now stays at the shared --maxw (1280px) at every breakpoint,
     including here — previously this block bumped each section's
     container to a different, larger width (1440/1680/1480/1560px),
     which made sections like .conditions visibly wider than the
     header/hero above them on big screens. Only the type scale-up
     below is breakpoint-specific now. */

  .about .btn{font-size:17px;}
  .about .eyebrow{font-size:16px;}
  .about h2{font-size:63px;}
  .about-copy h2{font-size:36px;}
  .about-icon{font-size:18px;}
  .about-item h4{font-size:17px;}
  .about-item p{font-size:17px;}
  .aps-btn-primary{font-size:19px;}
  .aps-btn-primary span{font-size:25px;}
  .aps-call-divider p{font-size:17px;}
  .aps-cta-button{font-size:20px;}
  .aps-cta-content h2{font-size:38px;}
  .aps-cta-content p{font-size:17px;}
  .aps-faq2-answer p{font-size:17px;}
  .aps-faq2-callout-label{font-size:14px;}
  .aps-faq2-card > p{font-size:17px;}
  .aps-faq2-card h2{font-size:38px;}
  .aps-faq2-phone{font-size:19px;}
  .aps-faq2-phone-icon{font-size:18px;}
  .aps-faq2-question{font-size:19px;}
  .aps-faq2-tag{font-size:12px;}
  .aps-hp-btn{font-size:15px;}
  .aps-hp-faq-answer p{font-size:17px;}
  .aps-hp-faq-question{font-size:16px;}
  .aps-hp-heading h2{font-size:36px;}
  .aps-hp-heading p{font-size:17px;}
  .aps-hp-review-category{font-size:12px;}
  .aps-hp-review-content h3{font-size:15px;}
  .aps-hp-review-content p{font-size:17px;}
  .aps-hp-review-play{font-size:20px;}
  .aps-hp-review-time{font-size:12px;}
  .aps-hp-tag{font-size:16px;}
  .aps-hp-top .aps-hp-btn{font-size:17px !important;}
  .aps-or{font-size:18px;}
  .aps-phone{font-size:27px;}
  .aps-phone-link{font-size:26px;}
  .aps-recovery-content h2{font-size:54px;}
  .aps-recovery-content p{font-size:17px;}
  .brand-text{font-size:15px;}
  .brand-text strong{font-size:27px;}
  .btn{font-size:15px;}
  .btn-gold{font-size:13px;}
  .condition-card .view-details span{font-size:20px;}
  .condition-card h3{font-size:16px;}
  .conditions .section-title{font-size:20px;}
  .cta-copy h2{font-size:29px;}
  .eyebrow{font-size:13px;}
  .faq-answer p{font-size:17px;}
  .faq-question{font-size:15px;}
  .footer-bottom{font-size:13px;}
  .footer-brand p{font-size:17px;}
  .footer-col h5{font-size:15px;}
  .footer-col ul li{font-size:15px;}
  .hero h1{font-size:56px;}
  .hero-btns .btn{font-size:15px;}
  .hero-stats span{font-size:16px;}
  .hero-stats strong{font-size:17px;}
  .hero-sub{font-size:17px;}
  .hero-tags li{font-size:17px;}
  .info-icon{font-size:20px;}
  .info-item small{font-size:13px;}
  .info-item span{font-size:16px;}
  .ins-logo-img{height:34px;}
  .insurance-viewmore{font-size:.85rem;}
  .insurance-disclaimer{font-size:14px;}
  .insurance-label{font-size:14px;}
  .journey-content p{font-size:17px;}
  .journey-heading span{font-size:15px;}
  .journey-number{font-size:31px;}
  .journey-step h3{font-size:25px;}
  .journey-step p{font-size:17px;}
  .lang-select{font-size:15px;}
  .link-more{font-size:17px;}
  .muted{font-size:17px;}
  .nav-links a{font-size:15px;}
  .or{font-size:14px;}
  .phone{font-size:20px;}
  .phone-lg{font-size:18px;}
  .play-btn{font-size:18px;}
  .provider-item span{font-size:16px;}
  .section-title{font-size:18px;}
  .social a{font-size:13px;}
  .stat-icon{font-size:25px;}
  .stat-number{font-size:54px;}
  .stat-text{font-size:17px;}
  .testimonials h3,
.providers h3,
.faq h3{font-size:27px;}
  .view-details{font-size:12px;}
  .view-details span{font-size:13px;}
}

/* ===================================================================
   MOBILE NAV DRAWER
   Replaces the old plain-text dropdown with a full-height sliding
   panel from the right: repeated logo + close button up top, icon +
   chevron rows for each link (active one highlighted), then a phone
   number, the "Book a Consultation" button, a language switcher and
   a small tagline pinned to the bottom, plus a dimmed backdrop behind
   it. Appended at the very end of the file so these rules win over
   the older .nav-links/.nav-toggle declarations earlier on at the
   same 900px breakpoint without needing !important anywhere.

   .nav-drawer is a viewport-pinned wrapper around .nav-backdrop and
   .nav-links-panel. It does two jobs: (1) hidden by default (base
   rule below, outside any media query) so the drawer markup never
   renders/affects layout above the 900px breakpoint -- without this
   the panel/backdrop rendered inline in the middle of the desktop
   page; (2) at <=900px it's fixed+inset:0 with overflow:hidden, which
   clips the panel even while it's translated off-screen
   (transform:translateX(100%)) in its closed state, so it can no
   longer push document.documentElement.scrollWidth past clientWidth
   on narrow phones (this was causing real horizontal rubber-band
   scroll on ~320-340px screens even though body has overflow-x:hidden
   -- html itself deliberately doesn't, since that breaks
   position:sticky on .mainnav, see note elsewhere). pointer-events:none
   on the wrapper + pointer-events:auto on the two children keeps them
   clickable despite the wrapper covering the whole viewport.
=================================================================== */
/* IMPORTANT: .nav-links (the actual Home/About/Services/... menu) lives
   inside this same wrapper because it's reused for both the desktop
   horizontal menu AND the mobile drawer's vertical list. Do NOT hide
   .nav-drawer itself with display:none outside the mobile breakpoint --
   that would take .nav-links down with it and leave desktop with no
   navigation menu at all (a regression caught after publishing). Instead
   .nav-drawer is display:contents at desktop (generates no box of its
   own, so .nav-links-panel/.nav-links render as plain normal children of
   .nav-left, exactly as if this wrapper didn't exist), and only the
   drawer-only chrome that has no desktop equivalent (dimmed backdrop,
   the panel's own logo+close header, the phone/book/lang/tagline footer)
   is explicitly hidden below. */
.nav-drawer{display:contents;}
.nav-backdrop,.nav-panel-header,.nav-panel-footer{display:none;}

/* Mobile-only compact-header brand logo -- hidden by default since
   desktop already shows the logo in .topbar above this nav. Made
   visible, and the whole mainnav bar switched to white, inside the
   MOBILE COMPACT HEADER block below. */
.mainnav-brand{display:none;}
@media (max-width: 900px){
  .nav-drawer{
    display:block;
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:280;
  }
  .nav-backdrop{
    display:block;
    position:absolute;
    inset:0;
    background:rgba(4,12,26,.55);
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility 0s linear .3s;
    z-index:290;
    pointer-events:auto;
  }
  .mainnav.nav-open .nav-backdrop{
    opacity:1;
    visibility:visible;
    transition:opacity .3s ease;
  }

  .nav-links-panel{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:min(340px, 86vw);
    background:linear-gradient(180deg,#0c1f3a 0%,#0a1830 100%);
    z-index:300;
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.22,.61,.36,1);
    box-shadow:-10px 0 40px rgba(0,0,0,.35);
    overflow-y:auto;
    pointer-events:auto;
  }
  .mainnav.nav-open .nav-links-panel{
    transform:translateX(0);
  }

  .nav-panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:20px 18px 16px;
    border-bottom:1px solid rgba(255,255,255,.1);
    flex:none;
  }
  .nav-panel-logo{display:flex;align-items:center;}
  .nav-panel-logo img{height:73px;width:auto;display:block;}
  .nav-panel-close{
    width:36px;
    height:36px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    color:#fff;
    cursor:pointer;
    padding:0;
  }

  .nav-links{
    position:static;
    max-height:none;
    overflow:visible;
    visibility:visible;
    opacity:1;
    background:none;
    box-shadow:none;
    border-bottom:none;
    flex-direction:column;
    align-items:stretch;
    padding:10px 12px;
    gap:2px;
  }
  .nav-links li{width:100%;}
  .nav-links a{
    display:flex;
    align-items:center;
    gap:12px;
    height:auto;
    width:100%;
    padding:13px 12px;
    border-bottom:none;
    border-radius:10px;
    color:#dbe2ee;
    font-size:13px;
    font-weight:600;
    letter-spacing:.03em;
    white-space:normal;
  }
  .nav-links a::after{display:none;}
  .nav-links a.active,
  .nav-links a:hover{
    background:rgba(196,155,74,.16);
    color:#fff;
  }
  .nav-link-icon{
    flex:none;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    color:#C49B4A;
    transition:.2s ease;
  }
  .nav-links a.active .nav-link-icon{
    background:#C49B4A;
    color:#0c1f3a;
  }
  .nav-link-text{flex:1;}
  .nav-link-chevron{flex:none;color:rgba(255,255,255,.35);display:flex;}

  .nav-panel-footer{
    margin-top:auto;
    padding:18px 20px 26px;
    border-top:1px solid rgba(255,255,255,.1);
    display:flex;
    flex-direction:column;
    gap:12px;
    flex:none;
  }
  .nav-panel-phone{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-weight:700;
    font-size:15px;
  }
  .nav-panel-phone svg{color:#C49B4A;flex:none;}
  .nav-panel-book{
    width:100%;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
  }
  .nav-panel-lang{
    display:flex;
    align-items:center;
    gap:8px;
    color:#cdd6e4;
    cursor:pointer;
  }
  .nav-panel-lang svg{flex:none;color:#C49B4A;}
  .nav-panel-lang select{
    flex:1;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    border-radius:8px;
    height:34px;
    padding:0 10px;
    font-size:12px;
  }
  .nav-panel-tagline{
    margin:6px 0 0;
    text-align:center;
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
  }

  /* Plain lines, no surrounding box. Dark navy now (not gold) since the
     compact mobile header below is white, not the old dark bar. */
  .nav-toggle{
    border:none;
    background:none;
  }
  .nav-toggle span{background:#11203c;}
}

/* ===================================================================
   MOBILE COMPACT HEADER
   On mobile the two-bar desktop header (dark .topbar with logo/phone/
   book button, then a separate dark .mainnav with the hamburger) is
   replaced by a single white bar: logo on the left, language dropdown
   and hamburger together on the right -- matching the reference mockup.
   .topbar is hidden entirely (its phone/CTA are still reachable via the
   hero's own button and the drawer's footer); .mainnav switches from
   navy to white and gains the brand logo + a re-shown, white-bg-styled
   language select. Flex `order` reflows nav-right before nav-left so
   the dropdown sits just left of the hamburger without changing the
   underlying DOM (the toggle button + drawer stay physically inside
   .nav-left).
=================================================================== */
@media (max-width:900px){
  .topbar{display:none;}

  .mainnav{
    background:#ffffff;
    border-top:none;
    border-bottom:1px solid rgba(10,20,40,.08);
  }
  .mainnav-inner{padding:0 16px;height:60px;}

  .mainnav-brand{
    display:flex;
    align-items:center;
    order:0;
  }
  .mainnav-brand img{height:35px;width:auto;display:block;}

  /* An older @media(max-width:900px) block earlier in this file (from
     a previous, plain-dropdown version of the mobile menu) still sets
     .nav-left{width:100%}. Left alone, that would blow out this new
     3-item flex row (brand / dropdown / hamburger) since nav-left no
     longer the only child here -- reset it back to a normal flex item
     alongside width:auto so `order` alone controls its position. */
  .nav-left{order:2;width:auto;flex:none;}

  .nav-right{
    display:flex;
    order:1;
    margin-left:auto;
    margin-right:14px;
  }
  .nav-right .lang-select{
    width:auto;
    height:32px;
    background:#fff;
    color:#11203c;
    border:1px solid rgba(10,20,40,.18);
    font-size:12px;
    padding:0 8px;
  }
}

/* Locks page scroll behind the open mobile drawer. */
body.nav-lock{overflow:hidden;}

/* ---------- ABOUT GRID MOBILE FIX ----------
   A later duplicate ".about-grid{grid-template-columns:1fr 1fr}" rule
   (assets/style.css, "ABOUT" section) was unconditionally overriding an
   earlier responsive rule that collapses this grid to a single column
   at <=768px, because it comes after that rule in file order with equal
   specificity. On narrow phones this forced two cramped columns whose
   flex-item content (icon + heading + paragraph) couldn't shrink to fit,
   pushing real horizontal overflow past the viewport (invisible day-to-day
   only because body{overflow-x:hidden} normally clips it, but confirmed
   to actually enable real scroll under some conditions). Re-asserted here,
   after that rule, so single-column mobile stacking is restored. */
@media (max-width:768px){
  .about-grid{grid-template-columns:1fr;}
}

/* ---------- HERO STATS: HIDDEN ON MOBILE ----------
   The floating "Pain Management / Physical Wellness / Restore Function"
   icon card was still overlapping other hero content (the hero-tags
   list, the insurance-accepted strip) on small phones despite the
   earlier responsive reflow above, so per request it's simply removed
   on mobile rather than continuing to fight its positioning there. */
@media (max-width:768px){
  .hero-stats{display:none;}
}

/* ---------- INSURANCE STRIP: RESPONSIVE STACKING ----------
   The desktop layout (label | logo row | "View More", laid out with
   flex-wrap as a fallback) doesn't have room for the label plus 5 logos
   plus the link once the viewport drops much below ~900px, so it wraps
   unevenly and the divider borders -- meant to sit between horizontal
   neighbors -- end up attached to the wrong edge of whichever item
   dropped to its own line. Below that width, stack everything instead,
   centered, with a top border standing in for the side dividers. Also
   drop the -34px overlap onto the hero image: it was tuned for the
   desktop hero's height and dips too far into the image once the hero
   content reflows to a single column above this width. */
@media (max-width:900px){
  .insurance{margin-top:0;padding:0 16px;}
  .insurance-card{
    flex-direction:column;
    text-align:center;
    padding:24px 28px;
    gap:16px;
  }
  .insurance-label{
    border-right:none;
    padding-right:0;
  }
  .insurance-logos{justify-content:center;}
  .insurance-viewmore{
    border-left:none;
    padding-left:0;
    padding-top:16px;
    border-top:1px solid #e6e3da;
    width:100%;
    justify-content:center;
  }
}

/* ==========================================================
   TEXT TESTIMONIALS (.aps-tm-*)
   Replaces the old video-style review cards on the homepage
   and the testimonials page. Markup: includes/testimonial-card.php
   Data: includes/testimonials-data.php
   ========================================================== */

.aps-tm-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
    margin:32px 0 10px;
    position:relative;
    z-index:2;
}
.aps-tm-grid--two{grid-template-columns:repeat(2,1fr);margin-top:26px;}

.aps-tm-card{
    position:relative;
    display:flex;
    flex-direction:column;
    margin:0;
    padding:34px 30px 26px;
    background:#fff;
    border:1px solid #edf2f6;
    border-radius:20px;
    box-shadow:0 12px 28px rgba(18,40,74,.05);
    overflow:hidden;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* thin gold accent that grows on hover */
.aps-tm-card::before{
    content:"";
    position:absolute;
    left:30px; top:0;
    width:48px; height:3px;
    border-radius:0 0 3px 3px;
    background:linear-gradient(90deg,#C49B4A,#e3c37a);
    transition:width .4s ease;
}
.aps-tm-card:hover{
    transform:translateY(-6px);
    border-color:#e3cf9f;
    box-shadow:0 18px 45px rgba(18,40,74,.10);
}
.aps-tm-card:hover::before{width:calc(100% - 60px);}

.aps-tm-body{display:flex;flex-direction:column;flex:1;}

.aps-tm-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:56px; height:56px;
    margin-bottom:20px;
    border-radius:50%;
    background:rgba(196,155,74,.10);
    color:#C49B4A;
}
.aps-tm-mark svg{width:24px;height:18px;}

.aps-tm-quote{margin:0 0 26px;padding:0;border:0;flex:1;}
.aps-tm-quote p{
    margin:0;
    font-size:16px;
    line-height:1.85;
    color:#3d4a5c;
}

.aps-tm-author{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:auto;
    padding-top:20px;
    border-top:1px solid #eef1f5;
}
.aps-tm-avatar{
    flex:0 0 52px;
    width:52px; height:52px;
    border-radius:50%;
    object-fit:cover;
    box-shadow:0 0 0 3px #fff, 0 0 0 4px rgba(196,155,74,.55);
}
.aps-tm-avatar--initials{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#17365f,#0c1f3a);
    color:#e3c37a;
    font-family:"Marcellus", Georgia, serif;
    font-size:18px;
    letter-spacing:1px;
}
.aps-tm-meta{display:flex;flex-direction:column;gap:3px;min-width:0;}
.aps-tm-meta strong{
    font-family:"Marcellus", Georgia, serif;
    font-weight:400;
    font-size:18px;
    color:#17365f;
    line-height:1.2;
}
.aps-tm-meta span{
    font-size:11.5px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#bb8a2d;
    line-height:1.4;
}

/* ---------- Featured (testimonials page) ---------- */
.aps-tm-featured-wrap{margin-top:32px;position:relative;z-index:2;}

.aps-tm-card--featured{
    display:grid;
    grid-template-columns:260px 1fr;
    align-items:center;
    gap:56px;
    padding:56px 64px;
    border:0;
    background:
        radial-gradient(circle at 88% 12%, rgba(227,195,122,.16), transparent 42%),
        linear-gradient(135deg,#17365f 0%,#0c1f3a 100%);
    box-shadow:0 24px 55px rgba(12,31,58,.22);
}
.aps-tm-card--featured::before{display:none;}
/* oversized faint quote glyph in the background */
.aps-tm-card--featured::after{
    content:"\201D";
    position:absolute;
    right:28px; bottom:-175px;
    font-family:"Marcellus", Georgia, serif;
    font-size:380px;
    line-height:1;
    color:rgba(255,255,255,.05);
    pointer-events:none;
}
.aps-tm-card--featured:hover{transform:none;box-shadow:0 24px 55px rgba(12,31,58,.26);}

.aps-tm-photo{
    position:relative;
    width:260px; height:260px;
    border-radius:50%;
    padding:8px;
    background:linear-gradient(135deg,#e3c37a,#C49B4A);
}
.aps-tm-photo img{
    width:100%; height:100%;
    border-radius:50%;
    object-fit:cover;
    border:5px solid #0c1f3a;
    display:block;
}
.aps-tm-card--featured .aps-tm-mark{background:rgba(227,195,122,.14);color:#e3c37a;}
.aps-tm-card--featured .aps-tm-quote{margin-bottom:28px;}
.aps-tm-card--featured .aps-tm-quote p{
    font-family:"Marcellus", Georgia, serif;
    font-size:23px;
    line-height:1.65;
    color:#fff;
}
.aps-tm-card--featured .aps-tm-author{border-top-color:rgba(255,255,255,.14);}
.aps-tm-card--featured .aps-tm-meta strong{color:#fff;font-size:20px;}
.aps-tm-card--featured .aps-tm-meta span{color:#e3c37a;}

/* ---------- Responsive ---------- */
@media (min-width:1600px){
    .aps-tm-quote p{font-size:17px;}
    .aps-tm-card--featured .aps-tm-quote p{font-size:25px;}
}
@media (max-width:1100px){
    .aps-tm-card--featured{grid-template-columns:200px 1fr;gap:40px;padding:44px;}
    .aps-tm-photo{width:200px;height:200px;}
    .aps-tm-card--featured .aps-tm-quote p{font-size:20px;}
}
@media (max-width:992px){
    .aps-tm-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
    .aps-tm-grid,
    .aps-tm-grid--two{grid-template-columns:1fr;gap:20px;}
    .aps-tm-card{padding:28px 22px 22px;}
    .aps-tm-card::before{left:22px;}
    .aps-tm-card:hover::before{width:calc(100% - 44px);}
    .aps-tm-quote p{font-size:15px;}
    .aps-tm-card--featured{grid-template-columns:1fr;justify-items:center;text-align:center;gap:26px;padding:36px 22px;}
    .aps-tm-photo{width:150px;height:150px;padding:6px;}
    .aps-tm-card--featured .aps-tm-quote p{font-size:18px;}
    .aps-tm-card--featured .aps-tm-author{justify-content:center;}
    .aps-tm-card--featured .aps-tm-mark{margin-left:auto;margin-right:auto;}
    .aps-tm-card--featured::after{font-size:240px;right:10px;bottom:-80px;}
}
@media (prefers-reduced-motion:reduce){
    .aps-tm-card,.aps-tm-card::before{transition:none;}
    .aps-tm-card:hover{transform:none;}
}

/* ==========================================================
   GOOGLE REVIEWS (.aps-gr-*) — testimonials page
   Every review is clamped to the same number of lines so all
   cards are the same height; long ones get "Read more".
   ========================================================== */
.aps-gr-head{
    text-align:center;
    max-width:720px;
    margin:80px auto 34px;
    position:relative;
    z-index:2;
}
.aps-gr-head h2{
    margin:11px 0 10px;
    font-family:"Marcellus", serif;
    font-size:32px;
    font-weight:600;
    line-height:1.15;
    color:#17365f;
}
.aps-gr-head p{margin:0;font-size:15px;line-height:1.8;color:#68778b;}
.aps-gr-note{display:block;font-size:13px;font-style:italic;margin-top:4px;}

.aps-gr-grid{
    --gr-lines:6;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
    align-items:stretch;        /* cards in a row share the tallest card's height */
    position:relative;
    z-index:2;
    margin-bottom:10px;
}
.aps-gr-card{
    position:relative;
    display:flex;
    flex-direction:column;
    margin:0;
    padding:24px 22px 20px;
    background:#fff;
    border:1px solid #edf2f6;
    border-radius:18px;
    box-shadow:0 12px 28px rgba(18,40,74,.05);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.aps-gr-card:hover{
    transform:translateY(-5px);
    border-color:#e3cf9f;
    box-shadow:0 18px 45px rgba(18,40,74,.10);
}
.aps-gr-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.aps-gr-stars{display:inline-flex;gap:2px;}
.aps-gr-stars .on{color:#e0a82e;}
.aps-gr-stars .off{color:#dde3ea;}
.aps-gr-source{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:50%;
    background:#f5f7fa;
}

.aps-gr-quote{margin:0;padding:0;border:0;}
.aps-gr-quote p{
    margin:0;
    font-size:15px;
    line-height:1.75;
    color:#3d4a5c;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:var(--gr-lines);
    line-clamp:var(--gr-lines);
    overflow:hidden;
}
.aps-gr-card.is-open .aps-gr-quote p{
    height:auto;
    display:block;
    -webkit-line-clamp:unset;
    line-clamp:none;
}

.aps-gr-more{
    align-self:flex-start;
    margin:10px 0 0;
    padding:0;
    border:0;
    background:none;
    font:inherit;
    font-size:13px;
    font-weight:700;
    color:#bb8a2d;
    cursor:pointer;
    border-bottom:1px solid transparent;
}
.aps-gr-more:hover,.aps-gr-more:focus-visible{border-bottom-color:#bb8a2d;outline:none;}
/* author row always sits at the bottom of the card */
.aps-gr-card .aps-tm-author{margin-top:auto;padding-top:16px;}
.aps-gr-quote{margin-bottom:16px;}
.aps-gr-card .aps-tm-avatar{flex-basis:44px;width:44px;height:44px;font-size:15px;}
.aps-gr-card .aps-tm-meta strong{font-size:16px;}

@media (min-width:1600px){ .aps-gr-quote p{font-size:16px;} .aps-gr-head h2{font-size:36px;} }
@media (max-width:1200px){ .aps-gr-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:992px){  .aps-gr-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:768px){
    .aps-gr-head{margin-top:56px;}
    .aps-gr-head h2{font-size:28px;}
    .aps-gr-grid{grid-template-columns:1fr;--gr-lines:6;}
}
@media (prefers-reduced-motion:reduce){ .aps-gr-card{transition:none;} .aps-gr-card:hover{transform:none;} }

/* ---------- Short quotes: larger serif text fills the card ---------- */
.aps-tm-card--short .aps-tm-quote{display:flex;align-items:center;}
.aps-tm-card--short .aps-tm-quote p{
    font-family:"Marcellus", Georgia, serif;
    font-size:20px;
    line-height:1.7;
    color:#17365f;
}
.aps-gr-card--short .aps-gr-quote p{
    font-family:"Marcellus", Georgia, serif;
    font-size:17px;
    line-height:1.7;
    color:#17365f;
}
@media (max-width:768px){
    .aps-tm-card--short .aps-tm-quote p{font-size:18px;}
    .aps-gr-card--short .aps-gr-quote p{font-size:16px;}
}



.footer-brand .brand-logo {
    height: 77px;
    margin-bottom: 24px;
    margin-left: -11px;
    width: auto;
    display: block;
}

/* ==========================================================
   ONLINE BILL PAY button (InstaMed)
   Desktop: in the sticky navigation bar, just left of the language
   menu, so it stays visible while scrolling. Outline style so
   "Book a Consultation" stays the main call to action.
   Mobile (<=900px): full-width button inside the menu drawer.
   ========================================================== */
.nav-right{display:flex;align-items:center;gap:14px;}
.btn-paybill{
    height:40px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid rgba(213,165,54,.8);
    border-radius:6px;
    background:transparent;
    color:#fff;
    font-size:12px;
    white-space:nowrap;
    transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn-paybill svg{color:#d5a536;flex:none;transition:color .2s ease;}
.btn-paybill:hover,
.btn-paybill:focus-visible{
    background:#d5a536;
    border-color:#d5a536;
    color:#0c1f3a;
}
.btn-paybill:hover svg,
.btn-paybill:focus-visible svg{color:#0c1f3a;}
.nav-right{margin-left:24px;flex:none;}
.btn-paybill .paybill-short{display:none;}
/* Smaller desktops: shorter label so the menu links keep their room. */
@media (max-width:1280px){
    .btn-paybill{padding:0 14px;font-size:11px;}
    .btn-paybill .paybill-full{display:none;}
    .btn-paybill .paybill-short{display:inline;}
}
:lang(es) .btn-paybill .paybill-full{display:none;}
:lang(es) .btn-paybill .paybill-short{display:inline;}
/* Narrow desktops/tablets: icon only (label still read by screen readers via title). */
@media (max-width:1100px){
    .btn-paybill{width:40px;padding:0;justify-content:center;}
    .btn-paybill .paybill-short{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}
@media (max-width:900px){
    .nav-right .btn-paybill{display:none;}
}

.nav-panel-paybill{
    width:100%;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:transparent;
    color:#fff;
    border:1px solid rgba(213,165,54,.75);
}
.nav-panel-paybill svg{color:#d5a536;}
@media (min-width:901px) and (max-width:960px){
    .nav-right{margin-left:10px;gap:8px;}
}

/* ==========================================================
   HOMEPAGE HERO — TEAM PHOTO
   The team photo sits in the right part of the hero, fading into
   the navy text panel on the left, so the headline stays readable
   and nobody in the photo is covered. The old floating
   "Pain Management / Physical Wellness / Restore Function" card is
   hidden on the homepage because it would sit on top of faces.
   ========================================================== */
.hero .hero-bg{
    left:44%;
    background-image:url("img/aps-team-hero.jpg");
    background-image:image-set(url("img/aps-team-hero.webp") type("image/webp"), url("img/aps-team-hero.jpg") type("image/jpeg"));
    background-size:cover;
    background-position:50% 42%;
}
.hero .hero-overlay{
    background:linear-gradient(
        90deg,
        rgba(8,24,45,1) 0%,
        rgba(8,24,45,1) 44%,
        rgba(8,24,45,.75) 48%,
        rgba(8,24,45,.25) 54%,
        rgba(8,24,45,0) 60%,
        rgba(8,24,45,0) 100%
    );
}
.hero .hero-stats{display:none;}

/* Wide screens: give the photo a bit more of the width. */
@media (min-width:1600px){
    .hero .hero-bg{left:46%;}
}

/* Tablet + phone: text first, then the full team photo below it. */
@media (max-width:992px){
    .hero{flex-direction:column;align-items:stretch;}
    .hero .hero-bg{
        position:relative;
        inset:auto;
        left:auto;
        order:2;
        width:100%;
        aspect-ratio:1600/747;
        background-position:center;
        z-index:3;
    }
    .hero .hero-overlay{
        background:linear-gradient(180deg, rgba(8,24,45,1) 0%, rgba(8,24,45,1) 100%);
    }
    .hero .hero-content{order:1;}
}
@media (max-width:600px){
    .hero .hero-bg{
        background-image:url("img/aps-team-hero-mobile.jpg");
        aspect-ratio:1080/667;
    }
}
/* Very wide screens: the content column is centered, so start the photo
   just right of the centered text instead of at a fixed percentage. */
@media (min-width:1600px){
    .hero .hero-copy{width:700px;}
    .hero .hero-bg{left:calc(50% + 110px);}
    .hero .hero-overlay{
        background:linear-gradient(
            90deg,
            rgba(8,24,45,1) 0%,
            rgba(8,24,45,1) calc(50% + 110px),
            rgba(8,24,45,.6) calc(50% + 160px),
            rgba(8,24,45,0) calc(50% + 260px),
            rgba(8,24,45,0) 100%
        );
    }
}
/* 1600–1799px: slightly narrower text column so the photo panel is
   wide enough to keep everyone in frame. */
@media (min-width:1600px) and (max-width:1799px){
    .hero .hero-copy{width:640px;}
    .hero .hero-bg{left:calc(50% + 50px);background-position:54% 42%;}
    .hero .hero-overlay{
        background:linear-gradient(90deg, rgba(8,24,45,1) 0%, rgba(8,24,45,1) calc(50% + 50px), rgba(8,24,45,.6) calc(50% + 95px), rgba(8,24,45,0) calc(50% + 190px), rgba(8,24,45,0) 100%);
    }
}
/* Spanish headline/buttons are longer — start the photo a little further right. */
@media (min-width:993px) and (max-width:1599px){
    :lang(es) .hero .hero-bg{left:50%;}
    :lang(es) .hero .hero-overlay{
        background:linear-gradient(90deg, rgba(8,24,45,1) 0%, rgba(8,24,45,1) 50%, rgba(8,24,45,.6) 54%, rgba(8,24,45,0) 62%, rgba(8,24,45,0) 100%);
    }
}

/* ---------- Small laptops / iPad landscape (993–1199px) ----------
   1) Hero: a narrower text column with slightly smaller headline, and the
      team photo starting further right, so the headline never runs onto
      the photo.
   2) Top bar: the two street addresses don't fit next to the phone and
      "Book a Consultation" at this width and were getting cut off, so
      they're hidden here (as on tablets/phones). Both addresses are still
      in the footer and on the Contact page. */
@media (min-width:993px) and (max-width:1199px){
    .hero .hero-copy{width:500px;}
    .hero h1{font-size:48px;}
    .hero .hero-bg{left:54%;}
    .hero .hero-overlay{
        background:linear-gradient(90deg, rgba(8,24,45,1) 0%, rgba(8,24,45,1) 54%, rgba(8,24,45,.6) 58%, rgba(8,24,45,0) 66%, rgba(8,24,45,0) 100%);
    }
    :lang(es) .hero .hero-copy{width:520px;}
    :lang(es) .hero .hero-bg{left:56%;}
    :lang(es) .hero .hero-overlay{
        background:linear-gradient(90deg, rgba(8,24,45,1) 0%, rgba(8,24,45,1) 56%, rgba(8,24,45,.6) 60%, rgba(8,24,45,0) 68%, rgba(8,24,45,0) 100%);
    }
    .topbar-info{display:none;}
}

/* ==========================================================
   HOMEPAGE HERO — TABLET & PHONE (≤992px): TEAM PHOTO AS BACKGROUND
   Replaces the earlier "photo below the text" layout. The team photo
   fills the whole hero behind the text, with a navy tint so the
   headline and buttons stay easy to read.
   ========================================================== */
@media (max-width:992px){
    .hero{flex-direction:row;align-items:center;}
    .hero .hero-bg{
        position:absolute;
        inset:0;
        left:0;
        width:auto;
        aspect-ratio:auto;
        order:0;
        z-index:1;
        background-image:url("img/aps-team-hero.jpg");
        background-image:image-set(url("img/aps-team-hero.webp") type("image/webp"), url("img/aps-team-hero.jpg") type("image/jpeg"));
        background-size:cover;
        background-position:50% 40%;
    }
    .hero .hero-overlay{
        z-index:2;
        background:
            linear-gradient(180deg,
                rgba(8,24,45,.80) 0%,
                rgba(8,24,45,.70) 40%,
                rgba(8,24,45,.82) 75%,
                rgba(8,24,45,.94) 100%);
    }
    .hero .hero-content{order:0;position:relative;z-index:5;}
    .hero h1,
    .hero .hero-sub,
    .hero .hero-tags li{text-shadow:0 2px 12px rgba(0,0,0,.45);}
}
@media (max-width:600px){
    .hero .hero-bg{
        background-image:url("img/aps-team-hero.jpg");
        background-image:image-set(url("img/aps-team-hero.webp") type("image/webp"), url("img/aps-team-hero.jpg") type("image/jpeg"));
        aspect-ratio:auto;
        background-position:46% 50%;
    }
}

/* ==========================================================
   HOMEPAGE HERO — iPAD PORTRAIT / LARGE TABLETS (700–992px)
   Same side-by-side layout as desktop: text on the left, team photo
   on the right with a soft fade. (Phones below 700px keep the photo
   as the background behind the text.)
   ========================================================== */
@media (min-width:700px) and (max-width:992px){
    .hero{flex-direction:row;align-items:stretch;min-height:620px;}
    .hero .hero-content{
        flex-direction:column;
        justify-content:center;
        gap:0;
        padding:56px 24px 90px;
        width:100%;
    }
    .hero .hero-copy{width:54%;max-width:420px;}
    .hero h1{font-size:38px;line-height:1.12;}
    .hero .hero-sub{font-size:16px;}
    .hero .hero-btns{flex-direction:column;align-items:stretch;gap:12px;}
    .hero .hero-btns .btn{width:100%;text-align:center;justify-content:center;}
    .hero .hero-tags{flex-direction:column;align-items:flex-start;gap:10px;}
    .hero h1,.hero .hero-sub,.hero .hero-tags li{text-shadow:none;}
    .hero .hero-bg{
        position:absolute;
        inset:0;
        left:56%;
        background-position:46% 50%;
    }
    .hero .hero-overlay{
        background:linear-gradient(90deg,
            rgba(8,24,45,1) 0%,
            rgba(8,24,45,1) 56%,
            rgba(8,24,45,.6) 60%,
            rgba(8,24,45,0) 68%,
            rgba(8,24,45,0) 100%);
    }
}

/* ==========================================================
   HOMEPAGE HERO — SHOW THE WHOLE TEAM (final override)
   Uses a version of the photo cropped tightly to the group
   (aps-team-group, 1065×717) and sizes it with "contain", so every
   person is always fully visible at every screen size. Any spare
   space around the photo is navy and blends in through soft fades
   on its left, top and bottom edges.
   ========================================================== */
.hero .hero-bg{
    background-color:#08182D;
    background-image:url("img/aps-team-group.jpg");
    background-image:image-set(url("img/aps-team-group.webp") type("image/webp"), url("img/aps-team-group.jpg") type("image/jpeg"));
    background-size:contain;
    background-repeat:no-repeat;
    background-position:right center;
}
/* Soft navy fade on the photo's top and bottom edges (the left edge
   already fades through .hero-overlay). */
.hero .hero-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(8,24,45,1) 0%, rgba(8,24,45,0) 9%, rgba(8,24,45,0) 91%, rgba(8,24,45,1) 100%);
    pointer-events:none;
}

/* Phones (<700px): whole team shown as the background along the
   bottom of the hero, text above with a navy fade into the photo. */
@media (max-width:699px){
    .hero .hero-content{padding-bottom:calc(66vw + 40px);}
    .hero .hero-bg{
        background-size:100% auto;
        background-position:center bottom;
    }
    .hero .hero-bg::after{display:none;}
    .hero .hero-overlay{
        background:linear-gradient(180deg,
            rgba(8,24,45,1) 0%,
            rgba(8,24,45,1) calc(100% - 66vw - 30px),
            rgba(8,24,45,.35) calc(100% - 66vw + 30px),
            rgba(8,24,45,0) calc(100% - 50vw),
            rgba(8,24,45,0) 100%);
    }
    .hero h1,.hero .hero-sub,.hero .hero-tags li{text-shadow:none;}
}

/* Tablets (700–1199px): size the photo box to the photo itself and
   centre it vertically, so its top/bottom edges fade softly into navy
   instead of showing hard lines. */
@media (min-width:993px) and (max-width:1199px){
    .hero .hero-bg{top:50%;bottom:auto;height:calc(46vw / 1.485);transform:translateY(-50%);}
    :lang(es) .hero .hero-bg{height:calc(44vw / 1.485);}
}
@media (min-width:700px) and (max-width:992px){
    .hero .hero-bg{top:50%;bottom:auto;height:calc(44vw / 1.485);transform:translateY(-50%);}
}
@media (min-width:700px) and (max-width:1199px){
    .hero .hero-bg{background-size:cover;background-position:center;}
    .hero .hero-bg::after{
        background:linear-gradient(180deg, rgba(8,24,45,1) 0%, rgba(8,24,45,0) 16%, rgba(8,24,45,0) 84%, rgba(8,24,45,1) 100%);
    }
}

/* Phones: let the bottom of the text sit over the top of the photo
   (the ceiling / logo sign, above everyone's heads) so the photo reads
   as the hero background, with the whole team still fully visible. */
@media (max-width:699px){
    .hero .hero-content{padding-bottom:calc(50vw + 16px);}
    .hero .hero-overlay{
        background:linear-gradient(180deg,
            rgba(8,24,45,1) 0%,
            rgba(8,24,45,1) calc(100% - 67.4vw),
            rgba(8,24,45,.75) calc(100% - 58vw),
            rgba(8,24,45,.2) calc(100% - 46vw),
            rgba(8,24,45,0) calc(100% - 38vw),
            rgba(8,24,45,0) 100%);
    }
    .hero .hero-tags li{text-shadow:0 1px 8px rgba(0,0,0,.6);}
}

/* Tablets (700–1199px, iPad portrait + landscape): photo fills the full
   height of the hero on the right; sides may be cropped, centred on the
   middle of the group (Dr. Kikkeri). Overrides the "contain" box above. */
@media (min-width:700px) and (max-width:1199px){
    .hero .hero-bg{
        top:0;
        bottom:0;
        height:auto;
        transform:none;
        background-size:cover;
        background-position:56% center;
    }
    .hero .hero-bg::after{display:none;}
}
@media (min-width:700px) and (max-width:1199px){
    :lang(es) .hero .hero-bg{top:0;bottom:0;height:auto;transform:none;}
}
/* iPad portrait: narrower photo panel — centre it on Dr. Kikkeri and the
   people around him. */
@media (min-width:700px) and (max-width:992px){
    .hero .hero-bg{background-position:28% center;}
}