:root {
    --navy: #003e74;
    --navy-deep: #034372;
    --blue: #0b83ca;
    --blue-bright: #0b8bd5;
    --cyan: #55c3f2;
    --orange: #f0a33a;
    --text: #3f4347;
    --white: #fff;
    --off-white: #f7f7f7;
    --border: #dfdfdf;
	--shell: 1200px;
}
.fa-youtube::before {
	content: "\F16A";
	font-family: 'fontello';
	font-style: normal;
}

.page-shell {
    width: min(calc(100% - 40px), var(--shell));
    margin-inline: auto;
}
.button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 2px solid currentColor;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.2;
    transition: color .2s, background-color .2s, transform .2s;
}
.button:hover,
.button:focus-visible {
    transform: translateY(-2px);
}
.section {
    padding: 68px 0;
}
/* Shared placeholders */
.media-placeholder,
.video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: hidden;
    color: #7692a2;
    background:
        linear-gradient(135deg, rgb(7 74 124 / 8%), rgb(11 131 202 / 17%)),
        repeating-linear-gradient(45deg, transparent 0 15px, rgb(255 255 255 / 24%) 15px 30px);
    border: 1px dashed #90aebb;
    text-align: center;
    font-size: 12px;
}
.media-placeholder i {
    color: var(--blue);
    font-size: 54px;
}
.square-placeholder {
    min-height: 330px;
    background:
        linear-gradient(rgb(255 255 255 / 4%), rgb(255 255 255 / 4%)),
        url("../images/hip-anatomy.webp") center / cover no-repeat,
        linear-gradient(135deg, #e8f1f6, #c6dce7);
}
/* Intro + video */
.section-intro {
    padding-bottom: 0;
}
.intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(310px, .8fr);
    gap: 60px;
    align-items: start;
}
.intro-copy p {
    max-width: 730px;
}
.video-card {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    margin-top: 65px;
    margin-bottom: -95px;
    padding: 28px;
    gap: 40px;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
}
.video-placeholder {
    min-height: 330px;
    color: #d7493f;
    background:
        linear-gradient(rgb(0 0 0 / 18%), rgb(0 0 0 / 18%)),
        url("../images/fai-video-thumbnail.webp") center / cover no-repeat,
        #090909;
    border: 0;
}
.video-placeholder i {
    font-size: 65px;
}
@media (max-width: 780px) {
    .section {
        padding-block: 52px;
    }
	page-shell {
        width: min(calc(100% - 30px), var(--shell));
    }
    .intro-grid,
    .video-card,
    .diagnosis-card,
    .treatment-grid,
    .related-card {
        grid-template-columns: 1fr;
    }
    .intro-grid {
        gap: 32px;
    }
    .video-card {
        margin-top: 45px;
        margin-bottom: 0;
        padding: 20px;
        gap: 26px;
    }
}
@media (max-width: 640px) {
	.hip-intro-content{
		padding-bottom:75%;
		background-position:bottom !important;
	}
	
}
@media (max-width: 480px) {
    .button,
    .button-navy,
    .button-white {
        width: 100%;
        min-width: 0;
    }
}
/* ==========================================================================
   SPECIALTY SUBPAGES
   ========================================================================== */
.hip-preservation-page .site-footer,
.shoulder-stabilization-page .site-footer,
.acl-meniscus-page .site-footer {
    margin-top: 0;
    padding-top: 70px;
}
.hip-preservation-page .footer-angle,
.shoulder-stabilization-page .footer-angle,
.acl-meniscus-page .footer-angle {
    display: none;
}
.subpage-banner {
    min-height: 255px;
    display: flex;
    align-items: center;
    color: var(--white);
    background: url("../images/hip-preservation-banner.jpg") left / cover no-repeat #4f4f4f;
}
.shoulder-stabilization-page .subpage-banner {
    background:
        linear-gradient(90deg, rgb(0 0 0 / 70%) 0%, rgb(0 0 0 / 40%) 46%, rgb(0 0 0 / 68%) 100%),
        url("../images/shoulder-stabilization-banner.webp") center / cover no-repeat,
        linear-gradient(90deg, #22313c, #4b4b4b);
}
.acl-meniscus-page .subpage-banner {
    background:
        linear-gradient(90deg, rgb(0 0 0 / 70%) 0%, rgb(0 0 0 / 40%) 46%, rgb(0 0 0 / 68%) 100%),
        url("../images/acl-meniscus-banner.webp") center / cover no-repeat,
        linear-gradient(90deg, #22313c, #4b4b4b);
}
.subpage-banner .page-shell {
    display: flex;
    justify-content: flex-end;
}
.subpage-banner h1 {
    width: 48%;
    margin: 0;
    color: var(--white);
    font-size: clamp(20px, 3vw, 33px);
}
.subpage-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 265px;
    gap: 48px;
    align-items: start;
    padding-top: 62px;
    padding-bottom: 80px;
}
.subpage-main {
    min-width: 0;
}
.hip-intro-card {
    position: relative;
    width: calc(100% - 30px);
    margin: 0 0 60px 20px;
}
.acl-intro-card {
    margin-top: 0;
}
.acl-intro-card .hip-intro-frame {
    top: 9px;
}
.acl-intro-card .hip-intro-content {
    top: 18px;
    margin-top: 0;
}
.hip-intro-frame {
    position: absolute;
    top: -9px;
    left: -9px;
    width: 96%;
    height: 385px;
    border: 1px solid #8296a3;
}
.hip-intro-content {
    position: relative;
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    min-height: 400px;
    align-items: stretch;
  
}
.hip-intro-copy {
    z-index: 1;
    padding: 36px 0 28px 36px;
}
.hip-intro-copy h2 {
    margin-bottom: 10px;
    color: var(--navy);
    font-size: 30px;
    line-height: 1.18;
    white-space: nowrap;
}
.hip-intro-copy p {
    margin-bottom: 24px;
    color: #101010;
    font-size: 13px;
    line-height: 1.45;
}
.hip-button {
    min-width: 190px;
    min-height: 40px;
    padding: 8px 16px;
    color: var(--white);
    background: var(--navy);
    border-color: var(--navy);
    border-radius: 5px;
    font-size: 13px;
}
.hip-button:hover{background:var(--orange); border-color: var(--orange);}
.hip-intro-image {
     background:url("../images/hip-preservation-intro.png") center right / contain no-repeat #c5e9f9;
} 
.shoulder-intro-image {
     background:url("../images/shoulder-stabilization-intro.png") center right / contain no-repeat #c5e9f9;
} 
.acl-intro-image {
     background:url("../images/acl-meniscus-intro.png") center right / contain no-repeat #c5e9f9;
} 
/* .hip-intro-image {
    min-height: 400px;
    background:
        linear-gradient(90deg, rgb(201 237 249 / 20%), rgb(201 237 249 / 0%)),
        url("../images/hip-preservation-intro.jpg") center right / contain no-repeat;
} 
.shoulder-intro-image {
    background:
        linear-gradient(90deg, rgb(201 237 249 / 20%), rgb(201 237 249 / 0%)),
        url("../images/shoulder-stabilization-intro.webp") center right / contain no-repeat;
}
.acl-intro-image {
    background:
        linear-gradient(90deg, rgb(201 237 249 / 20%), rgb(201 237 249 / 0%)),
        url("../images/acl-meniscus-intro.webp") center right / contain no-repeat;
}*/
.hip-card-grid {
    display: grid;
    /* grid-template-columns: 1fr 1fr; */
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 18px;
    margin-bottom: 64px;
}
.hip-list-card {
    position: relative;
    padding-bottom: 72px;
    border: 1px solid var(--navy);
    text-align: center;
}
.hip-list-card h2 {
    margin: 0 0 27px;
    padding: 20px 15px;
    color: var(--white);
    background: var(--navy);
    font-size: 26px;
}
.procedures-card h2 {
    background: var(--blue);
}
.hip-thumb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 3px;
    padding: 0 3px;
}
.conditions-grid {
    grid-template-columns: repeat(6, 1fr);
}
.conditions-grid .hip-thumb-item {
    grid-column: span 2;
}
.conditions-grid .hip-thumb-item:nth-child(4) {
    grid-column: 2 / span 2;
}
.shoulder-conditions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 24px;
}
.hip-thumb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #000;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.25;
	font-weight: 600;
}
.hip-thumb {
    width: 105px;
    height: 105px;
    display: block;
    border: 4px solid var(--blue);
    border-radius: 50%;
    background:
        url("../images/hip-thumb-placeholder.webp") center / cover no-repeat,
        radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%);
    box-shadow: inset 0 0 0 4px var(--white);
}
.hip-thumb:hover{ border: 4px solid var(--orange);}
.condition-labral-tear { background-image: url("../images/condition-hip-labral-tear.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.condition-fai { background-image: url("../images/condition-fai.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.condition-cam { background-image: url("../images/condition-cam-deformity.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.condition-pincer { background-image: url("../images/condition-pincer-deformity.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.condition-chondral { background-image: url("../images/condition-chondral-defects.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.procedure-labral-repair { background-image: url("../images/procedure-hip-labral-repair.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.procedure-femoroplasty { background-image: url("../images/procedure-femoroplasty.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.procedure-subspine { background-image: url("../images/procedure-subspine-decompression.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.procedure-acetabuloplasty { background-image: url("../images/procedure-acetabuloplasty.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.procedure-reconstruction { background-image: url("../images/procedure-hip-labral-reconstruction.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.procedure-core { background-image: url("../images/procedure-core-decompression.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.shoulder-condition-instability { background-image: url("../images/condition-shoulder-instability.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.shoulder-condition-labral-tear { background-image: url("../images/condition-shoulder-labral-tear.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.shoulder-condition-slap-tear { background-image: url("../images/condition-slap-tear.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.shoulder-condition-rotator-cuff-tear { background-image: url("../images/condition-rotator-cuff-tear.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.shoulder-procedure-bankart { background-image: url("../images/procedure-bankart-repair.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.shoulder-procedure-stabilization { background-image: url("../images/procedure-shoulder-stabilization.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.shoulder-procedure-slap-repair { background-image: url("../images/procedure-slap-repair.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.shoulder-procedure-laterjet { background-image: url("../images/procedure-laterjet.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.shoulder-procedure-glenoid { background-image: url("../images/procedure-glenoid-reconstruction.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.shoulder-procedure-rotator-cuff { background-image: url("../images/procedure-rotator-cuff-repair.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.acl-condition-acl-tear { background-image: url("../images/condition-acl-tear.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.acl-condition-meniscal-tears { background-image: url("../images/condition-meniscal-tears.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.acl-condition-cartilage-injury { background-image: url("../images/condition-articular-cartilage-injury.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.acl-condition-ligament-injuries { background-image: url("../images/condition-ligament-injuries.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.acl-procedure-reconstruction { background-image: url("../images/procedure-acl-reconstruction.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.acl-procedure-meniscal-surgery { background-image: url("../images/procedure-meniscal-surgery.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.acl-procedure-transplantation { background-image: url("../images/procedure-meniscus-transplantation.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.acl-procedure-cartilage-replacement { background-image: url("../images/procedure-cartilage-replacement.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.acl-procedure-failed-reconstruction { background-image: url("../images/procedure-failed-acl-ligament-reconstruction.png"), radial-gradient(circle at 50% 45%, #edf9fd 0 38%, #bde8f6 39% 100%); }
.hip-read-more {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 126px;
    margin-inline: auto;
    padding: 13px 15px;
    color: var(--white);
    background: var(--navy);
    border-radius: 8px 8px 0 0;
    text-decoration: none;
    font-weight: 600;
}
.hip-read-more:hover {background: var(--blue);color:#fff;}
.procedures-card .hip-read-more {
    background: var(--blue);
}
.procedures-card .hip-read-more:hover {
   background: var(--navy);
   color:#fff;
}
.hip-video-section {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    align-items: center;
    margin-bottom: 92px;
}
.hip-video-placeholder {
    position: relative;
    aspect-ratio: 496 / 370;
    min-height: 0;
    display: grid;
    place-items: center;
    color: #e62418;
    overflow: hidden;
    background: #050505;
    text-decoration: none;
}
.hip-video-placeholder::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgb(0 0 0 / 10%), rgb(0 0 0 / 10%)),
        url("https://img.youtube.com/vi/Ajxy7oTjaAo/hqdefault.jpg") center / cover no-repeat,
        url("https://img.youtube.com/vi/Ajxy7oTjaAo/maxresdefault.jpg") center / cover no-repeat;
    content: "";
}
.shoulder-video-placeholder::before {
    background:
        linear-gradient(rgb(0 0 0 / 10%), rgb(0 0 0 / 10%)),
        url("https://img.youtube.com/vi/W0ZuL5Qlp-M/hqdefault.jpg") center / cover no-repeat,
        url("https://img.youtube.com/vi/W0ZuL5Qlp-M/maxresdefault.jpg") center / cover no-repeat;
}
.acl-video-placeholder::before {
    background:
        linear-gradient(rgb(0 0 0 / 10%), rgb(0 0 0 / 10%)),
        url("https://img.youtube.com/vi/dRqXmVZ7XM8/hqdefault.jpg") center / cover no-repeat,
        url("https://img.youtube.com/vi/dRqXmVZ7XM8/maxresdefault.jpg") center / cover no-repeat;
}
.hip-video-placeholder i {
    position: relative;
    z-index: 1;
    font-size: 76px;
    /* filter: drop-shadow(0 2px 6px rgb(0 0 0 / 35%)); */
	filter: drop-shadow(0 0px 15px #fff);
}
.hip-video-callout {
    margin-left: -1px;
    padding: 45px 46px 0;
    color: var(--white);
    background: var(--navy);
    align-self: center;
}
.hip-video-callout p {
    margin-bottom: 38px;
    color: var(--white);
    font-size: 23px;
    line-height: 1.38;
}
.watch-videos-button {
    min-width: 220px;
    margin-bottom: -22px;
    color: var(--white);
    background: var(--blue);
    border-color: var(--blue);
}
.hip-research-section {
    margin-bottom: 40px;
    padding: 52px 42px;
    background: #eee;
}
.hip-research-section h2 {
    margin-bottom: 35px;
    color: #000;
    font-size: 30px;
    font-family: 'Roboto Slab', serif;
}
.research-card {
    margin-bottom: 22px;
    padding: 30px 34px;
    border: 1px solid var(--navy);
    background: var(--white);
}
.research-card:last-child {
    margin-bottom: 0;
}
.research-card h3 {
    margin-bottom: 18px;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.35;
	font-family: 'robotobold', sans-serif;
	font-weight: normal;
}
.research-card p {
    margin-bottom: 28px;
	font: normal 16px/22px 'Roboto', sans-serif;
	color:#555555;
}
.research-card a {font: normal 16px/22px 'Roboto', sans-serif;}
.research-button {
    display: inline-flex;
    min-width: 100px;
    min-height: 45px;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    color: var(--navy);
    border: 1px solid var(--navy);
    text-decoration: none;
}
@media (max-width: 1080px) {
    .subpage-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}
@media (max-width: 780px) {
    .subpage-banner {
        min-height: 210px;
    }
    .subpage-banner .page-shell {
        justify-content: flex-start;
    }
    .subpage-banner h1 {
        width: auto;
    }
    .subpage-layout {
        padding-top: 42px;
        padding-bottom: 55px;
    }
    .hip-intro-card {
        width: auto;
        margin-left: 0;
    }
    .acl-intro-card {
        margin-top: 0;
    }
    .acl-intro-card .hip-intro-content {
        top: 0;
        margin-top: 0;
    }
    .hip-intro-frame {
        display: none;
    }
    .hip-intro-content,
    .hip-card-grid,
    .hip-video-section {
        grid-template-columns: 1fr;
    }
    .hip-intro-copy {
        padding: 35px 24px 25px;
    }
    .hip-intro-copy h2 {
        white-space: normal;
    }
    /* .hip-intro-image {
        min-height: 290px;
    } */
    .hip-thumb-grid,
    .shoulder-conditions-grid,
    .conditions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 16px;
    }
    .conditions-grid .hip-thumb-item,
    .conditions-grid .hip-thumb-item:nth-child(4) {
        grid-column: auto;
    }
    .hip-video-placeholder {
        min-height: 340px;
    }
    .hip-video-callout {
        margin-left: 0;
        padding: 32px 28px 0;
    }
    .hip-video-callout p {
        font-size: 24px;
    }
    .hip-research-section {
        padding: 36px 20px;
    }
    .research-card {
        padding: 25px 22px;
    }
}
@media (max-width: 480px) {
    .hip-thumb-grid,
    .shoulder-conditions-grid,
    .conditions-grid {
        grid-template-columns: 1fr;
    }
    .hip-list-card h2 {
        font-size: 24px;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
    }
}