/* ============================================================
   HOME PAGE  —  section styles
   Sections: Hero
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero-section {
    background: var(--color-cream);
    overflow: hidden;
    height: calc(100vh - 235px);
}
.hero-section .wrap {
    height: 100%;
}
.hero-section .container{height: 100%;}

.hero-left { flex: 1; max-width: 640px; }
.hero-left h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(48px, 9.3vh, 60px);
    line-height: 1.15;
    letter-spacing: -1px;
    color: var(--color-primary);
    margin: 24px 0;
    text-transform: uppercase;
}
.hero-left h1 span { color: var(--color-secondary); }
.hero-left p {
    color: var(--color-body);
    font-size: 18px;
    line-height: 1.5;
    max-width: 515px;
}
.hero-buttons { display: flex; gap: 18px; margin-top: 40px; }
.hero-rating { margin-top: 40px; }
.hero-rating .stars { font-size: 20px; }
.hero-rating p { font-size: 15px; color: #112b4e; font-family: var(--font-accent); }
.hero-rating p strong { color: var(--color-dark); }

.hero-right { flex: 0 0 640px; position: relative;}
.hero-portrait {
    
    border-radius: 26px;
    z-index: 1;
    background: linear-gradient(159deg, var(--navy-grad-1), var(--navy-grad-2));
    box-shadow: 0 50px 90px -34px rgba(0,0,0,.75);
}

.hero-badge-name {
    position: absolute;
    top: 36px;
    right: -55px;
    background: var(--color-secondary);
    border-radius: 16px;
    padding: 17px 21px;
    z-index: 2;
}
.hero-badge-name strong {
    display: block;
    font-weight: 700;
    font-size: 20px;
    color: var(--color-light);
    line-height: 1;
}
.hero-badge-name span {
    display: block;
    margin-top: 6px;
    font-family: var(--font-accent);
    font-weight: 600;
    font-size: 12px;
    color: #1c1402;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.hero-badge-stat {
    position: absolute;
    bottom: 60px;
    left: -90px;
    background: rgba(245,245,245,.72);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 16px 21px;
    box-shadow: 0 24px 50px -22px rgba(0,0,0,.6);
    z-index: 2;
}
.hero-badge-stat strong {
    display: block;
    color: var(--color-secondary);
    font-size: 35px;
    line-height: 1;
    font-weight: 400;
}
.hero-badge-stat span {
    display: block;
    margin-top: 6px;
    font-family: var(--font-accent);
    font-weight: 500;
    font-size: 12px;
    color: #102035;
    letter-spacing: 1.38px;
    text-transform: uppercase;
}
.hero-left h1 sup {
	font-size: 15px;
	line-height: normal;
	position: relative;
	top: -15px;
	margin-left: 5px;
	border: 1px solid var(--color-primary);
	padding: 0;
	width: 30px;
	height: 30px;
	display: inline-block;
	border-radius: 50%;
	line-height: 28px;
	font-weight: normal;
	letter-spacing: 0.1px;
	text-align: center;
}
/* Hero responsive */
@media (max-width: 1200px) {
    .hero-section{height: auto;}
    .hero-section .wrap { flex-direction: column-reverse; align-items: flex-start; gap: 30px; }
    .hero-right { flex: 0 0 auto; width: 100%; max-width: 560px; margin: 0 auto; order: -1;}
    .hero-left{max-width: 100%;}
    .section-result {overflow: hidden;}
    .hero-left h1 sup {font-size: 8px; top: -6px; margin-left: 3px;	width: 20px; height: 20px; line-height: 17px;}
}
@media (max-width: 600px) {
    
    .hero-badge-stat { left: 0; }
    .hero-badge-name { right: 0; }
    
    .section-result {grid-template-columns: 1fr; padding-left: 0;}
    .section-result .title {position: inherit; top: 0px; height: auto;	max-width: 375px; margin: 0 auto; width: 100%; text-align: center;}
    .hero-section .container {padding-bottom: 20px;}
    .gform-grid-row {grid-template-columns: 1fr;}
    .cta-form .gfield.gfield--width-half {grid-column: span 12;}
    .practice-card {grid-template-columns: 1fr!important;}
    
}

/* ============================================================
   MARQUEE BAND
   ============================================================ */
.marquee-band {
    background: var(--color-dark);
    overflow: hidden;
    padding: 16px 0;
}
.marquee-track {
    display: flex;
    width: max-content;
    white-space: nowrap;
    animation: marquee-scroll 30s linear infinite;
}
.marquee-item {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 0 28px;
    color: var(--color-light);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 24px;
}
.marquee-item i {
    width: 7px;
    height: 7px;
    background: var(--color-light);
    transform: rotate(45deg);
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-section {
    background: var(--color-cream);
    overflow: hidden;
}
.about-section .wrap {
    gap: 120px;
    padding: 140px 0;
}
.about-media { position: relative; flex: 0 0 520px; }
.about-photo {
    aspect-ratio: 5 / 6;
    border-radius: 26px;
    overflow: hidden;
    background: #ece4d5;
    border: 1px solid var(--color-border);
    box-shadow: 0 30px 60px -34px rgba(16,30,55,.4);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-quote {
    position: absolute;
    top: 40px;
    left: -79px;
    max-width: 220px;
    background: var(--color-light);
    border: 1px solid #e8e1d2;
    border-radius: 16px;
    padding: 17px 42px 17px 21px;
    box-shadow: 0 30px 60px -38px rgba(13,28,41,.45);
}
.about-quote .stars { font-size: 16px; }
.about-quote p {
    margin: 6px 0 0;
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 13px;
    color: #4b5663;
    line-height: 18px;
}
.about-monogram {
    position: absolute;
    bottom: 96px;
    right: -44px;
    width: 110px;
    height: 110px;
    border-radius: 66px;
    background: linear-gradient(153deg, var(--navy-deep-1), var(--navy-deep-2));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 30px 60px -38px rgba(13,28,41,.45);
}
.about-monogram img { width: 54px; height: 67px; object-fit: contain; }

.about-content { flex: 1; }
.about-content h2 {
    font-family: var(--font-display);
    font-size: 52px;
    line-height: 1.1;
    color: var(--color-primary);
    margin: 24px 0;
}
.about-content h2 span { color: var(--color-secondary); }
.about-content p {
    color: var(--color-body);
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 15px;
    max-width: 670px;
}
.about-footer {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 23px;
    flex-wrap: wrap;
}
.about-content h2 {  font-family: var(--font-display);  font-size: 42px;  line-height: 1.15;  color: var(--color-primary);  margin: 24px 0;  text-transform: uppercase; }.about-content h2 { 	font-family: var(--font-display); 	font-size: 42px; 	line-height: 1.15; 	color: var(--color-primary); 	margin: 24px 0; 	text-transform: uppercase; }
.about-cred span {
    display: block;
    font-family: var(--font-accent);
    font-size: 14px;
    color: var(--color-muted-text, #707e95);
    letter-spacing: 1.68px;
    text-transform: uppercase;
}

/* ============================================================
   TWO PRACTICES
   ============================================================ */
.practices-section {
    background: var(--color-cream);
    padding: 0px 0 120px;
}
.practices-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    max-width: 1168px;
    margin: 0 auto;
}
.practice-card {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	padding: 30px 30px 35px;
	color: var(--color-light);
	background: linear-gradient(152deg, var(--navy-grad-1), var(--navy-grad-2));
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}
.practice-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,18,30,.15), rgba(8,18,30,.55) 55%, rgba(7,14,24,.92));
}
.practice-card > * { position: relative; }
.practice-kicker {
    color: var(--color-secondary);
    font-family: var(--font-accent);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 2.64px;
    text-transform: uppercase;
}
.practice-card h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 34px;
    line-height: 1.2;
    color: var(--color-light);
    margin: 16px 0 24px;
}
.practice-card p {
    color: #d7dee8;
    font-size: 17px;
    line-height: 26px;
}
.practice-card .excerpt {
	min-height: 234px;
}
.practice-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 32px 0;
    min-height: 88px;
}
.sub-content {
	max-width: 945px;
	margin-top: 20px;
	color: var(--color-body);
}
/* ============================================================
   WHY CHOOSE
   ============================================================ */
.why-section {
    background: var(--color-cream-2);
    padding: 148px 0;
}
.why-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 60px;
    margin-bottom: 50px;
}
.why-head-left { max-width: 540px; display: flex; flex-direction: column; gap: 17px; }
.why-head-left h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 54px;
    line-height: 1.1;
    color: var(--color-primary);
}
.why-head-right { max-width: 447px; }
.why-head-right p { color: var(--color-body); font-size: 20px; line-height: 30px; }

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
}
.why-section:not(.advantage-section) .why-grid > *:last-child {grid-column: 1 / -1; text-align: center; padding-top: 15px; padding-bottom: 15px;}

.why-cell {background: #f4f0e7; padding: 35px 50px;}
.why-num { color: var(--color-secondary); font-size: 18px; line-height: 36px; }
.why-cell h4 {  color: var(--color-primary);  font-weight: 700;  font-size: 20px;  margin: 8px 0 12px;  letter-spacing: -.18px;  font-family: var(--font-display); }
.why-cell p { color: var(--color-body); font-size: 17px; line-height: 26px; }

/* ============================================================
   RESULTS
   ============================================================ */
.results-section {
    background: var(--color-navy-2);
    padding: 139px 0;
    color: var(--color-light);
}
.results-section .section-head h2 { color: var(--color-light); }
.results-layout {
    display: grid;
    grid-template-columns: 1fr 500px;
    gap: 40px;
}
.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-content: start;
}
.result-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 28px;
}
.result-card strong {
    display: block;
    color: var(--color-secondary);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 38px;
    line-height: 42px;
}
.result-card span {
    display: block;
    margin-top: 9px;
    font-family: var(--font-accent);
    font-weight: 500;
    font-size: 15px;
    color: rgba(245,241,232,.66);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.results-aside {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 26px;
    padding: 41px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: start;
    height: 100%;
}
.results-mark { font-family: var(--font-display); font-size: 52px; color: var(--color-secondary); line-height: 1; }
.results-aside p { color: rgba(245,241,232,.78); font-size: 17px; line-height: 26px; }
.results-disclaimer { color: rgba(245,241,232,.45); font-size: 15px; line-height: 20px; }

/* ============================================================
   TESTIMONIAL  (Owl Carousel)
   ============================================================ */
.testimonial-section {
    background: var(--color-cream-2);
    padding: 122px 0;
}
.testimonial-mark {
    display: block;
    font-family: var(--font-display);
    font-size: 120px;
    line-height: 120px;
    color: rgba(224,170,6,.34);
}
.testimonial-item blockquote {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 50px;
    color: var(--color-primary);
    max-width: 1416px;
    margin: 24px 0 40px;
}
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.testimonial-avatar {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: var(--navy-accent);
    border: 1px solid var(--color-secondary);
    color: var(--color-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.testimonial-name strong { display: block; font-size: 20px; color: var(--navy-accent); letter-spacing: -.2px; }
.testimonial-name .stars { font-size: 18px; letter-spacing: 3px; }

/* ---- Owl nav + dots (positioned per design: dots left, arrows right) ---- */
.testimonial-carousel.owl-theme { position: relative; padding-bottom: 70px; }
.testimonial-carousel .owl-nav {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}
.testimonial-carousel .owl-nav button.owl-prev,
.testimonial-carousel .owl-nav button.owl-next {
    width: 46px;
    height: 46px;
    border-radius: 23px;
    border: 1px solid rgba(224,170,6,.4);
    background: transparent;
    color: var(--color-secondary);
    font-size: 0px;
    line-height: 1;
    margin: 0;
    transition: background .2s ease, color .2s ease;
}
.testimonial-carousel .owl-nav button.owl-prev{
    background: url(../icons/lt-vector.svg);
    background-repeat: no-repeat;
    background-position: center;
}
.testimonial-carousel .owl-nav button.owl-next{
    background: url(../icons/rt-vector.svg);
    background-repeat: no-repeat;
    background-position: center;
}
.testimonial-carousel .owl-nav button.owl-prev:hover,
.testimonial-carousel .owl-nav button.owl-next:hover {
    background: #ddd url(../icons/rt-vector.svg);;
    color: var(--color-primary);
    background-repeat: no-repeat;
    background-position: center;
}
.testimonial-carousel .owl-nav button.owl-prev:hover{
    background: #ddd url(../icons/lt-vector.svg);;
    background-repeat: no-repeat;
    background-position: center;
}
.testimonial-carousel .owl-dots {
    position: absolute;
    left: 0;
    bottom: 21px;
    margin: 0;
    display: flex;
    gap: 8px;
}
.testimonial-carousel .owl-dots .owl-dot span {
    width: 30px;
    height: 3px;
    margin: 0;
    border-radius: 0;
    background: rgba(224,170,6,.2);
}
.testimonial-carousel .owl-dots .owl-dot.active span { background: var(--color-secondary); }
.section-video {
	padding: 0px 0 75px;
    background: var(--color-cream-2);
}
.yottie-widget-video-info-title {
	color: #16233A!important;
	font-family: Tinos!important;
	font-size: 20px!important;
	font-style: normal!important;
	font-weight: 400!important;
	line-height: 25px!important;
	letter-spacing: -0.2px;
}
.yottie-widget-video-info-caption {
	color: #45536D;
	font-family: Tinos;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: 0.085px;
}
div.yottie-widget-video-info-properties {
	margin-top: 10px!important;
	border-top: 1px solid #EBE0BF;
	padding-top: 10px;
    height: auto!important;
}
span.yottie-widget-feed-section-pagination-bullet {
	min-width: 45px!important;
	font-size: 16px!important;
	padding: 0!important;
	height: 45px!important;
	border-radius: 41px!important;
	color: #aaa;
	line-height: 42px!important;
	border: 1px solid rgba(224,170,6,.4);
	background: transparent !important;
}
span.yottie-widget-feed-section-pagination-bullet-more::after, span.yottie-widget-feed-section-pagination-bullet-more::before {
	top: 22px!important;
	right: 41%!important;
	width: 8px!important;
}
.yottie-widget-video-info-passed-time {
	color: #707E95;
	font-family: Poppins;
	font-size: 12px;
	font-style: normal;
	font-weight: 300;
	line-height: 20.63px;
	letter-spacing: 0.085px;
	order: 0;
}
#yottie_1 .yottie-widget-header {
	background: #fff!important;
	margin-bottom: 10px;
	overflow: hidden;
	border-radius: 5px;
	box-shadow: 0 2px 10px -4px rgba(20, 30, 50, 0.18);
}
#yottie_1 .yottie-widget-feed,#yottie_1 .yottie-widget-video,#yottie_1 .yottie-widget-feed-section-slide {
	background: transparent!important;
}
#yottie_1 .yottie-widget-feed {margin: 0 -18px;}
.yottie-widget-video-classic {border-radius: 6px;}

/* ============================================================
   CTA
   ============================================================ */
.cta-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(152deg, var(--navy-deep-1) 22%, var(--navy-deep-2) 78%);
    color: var(--color-light);
    padding: 120px 0;
}
.cta-section .wrap{
    max-width: 1050px;
    margin: 0 auto;
}
.cta-content { flex: 1; max-width: 630px; }
.cta-content h2 {  font-family: var(--font-display);  font-weight: 400;  font-size: 52px;  line-height: 65px;  letter-spacing: -1px;  color: var(--color-light);  margin: 24px 0;  text-transform: uppercase; }
.cta-content h2 span { color: var(--color-secondary); }
.cta-content p { color: var(--color-muted); font-size: 18px; line-height: 26px; }

.cta-panel {
    flex: 0 0 380px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(224,170,6,.3);
    border-radius: 14px;
    padding: 34px;
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}
.cta-panel-label {
    color: var(--color-secondary);
    font-size: 13px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    text-align: left;
}
.cta-panel-number { font-size: 38px; line-height: 1.2; text-align: left; margin-bottom: 10px; font-weight: 700;}
.cta-panel .btn { width: 100%; }
.cta-panel-fine { font-family: var(--font-accent); font-size: 12px; color: #8295ae; margin-top: 4px; }

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

@media (max-width: 700px) {
    .why-grid { grid-template-columns: 1fr; }
    .testimonial-section blockquote { font-size: 28px; line-height: 38px; }
}