:root {
  --flowColor:  #FFC36D;
  --altFlow:  #e5caca;
  --flowBg:  #FFC36D;
  --mainHeadingColor: 	#FFC36D;
  --navBgColor: transparent;
  
  --heroBg: linear-gradient(
    185deg,
    hsl(210deg 100% 7%) 0%,
    hsl(208deg 69% 10%) 8%,
    hsl(207deg 54% 13%) 14%,
    hsl(205deg 45% 16%) 20%,
    hsl(204deg 38% 19%) 25%,
    hsl(202deg 33% 22%) 30%,
    hsl(201deg 30% 25%) 35%,
    hsl(201deg 30% 27%) 40%,
    hsl(200deg 31% 29%) 44%,
    hsl(200deg 31% 31%) 48%,
    hsl(200deg 32% 32%) 52%,
    hsl(200deg 32% 34%) 56%,
    hsl(200deg 32% 36%) 60%,
    hsl(199deg 31% 39%) 64%,
    hsl(199deg 30% 41%) 68%,
    hsl(199deg 29% 44%) 72%,
    hsl(199deg 29% 46%) 76%,
    hsl(199deg 28% 48%) 79%,
    hsl(199deg 28% 53%) 83%,
    hsl(199deg 30% 58%) 87%,
    hsl(199deg 32% 63%) 90%,
    hsl(199deg 35% 68%) 94%,
    hsl(200deg 39% 74%) 97%,
    hsl(200deg 46% 79%) 100%
  );

  --heroTextShadow:
    0 0 2rem #000,
    0.25rem 0.25rem 1rem #000;
  --heroColor: #FFF; 
  --heroActionColor: #FFC36D;
  --heroActionBg: #00214f;
  --heroActionHoverColor: #FFC36D;
  --heroActionHoverBg: #0a0e7c;
  --chromeColor: #000;
  --chromeBg: var(--flowBg);
  --chromeAnchorNormal: var(--chromeColor);
  --chromeAnchorHover: #FFC36D;

  --modalOuterBg: #012;
  --modalOuterShadow: inset 0 0 16em #121D27;
  --modalBg: radial-gradient(circle,#0b4c65 0%, #01354A 100%);
  --modalInputBg: #ddd9d3;
  --modalInputBorder: 0.125rem solid #121D27;
  --modalHeadingBg: #00214f;
  --modalButtonColor: #FFC36D;
  --modalButtonBg: #080d55;
  --modalShadow: 0.5rem 0.5rem 2rem #0247;

  --actionColor:  #FFC36D; 
  --actionBg: #0C2238;
  --actionBorder: 0.125rem solid var(--actionColor);
  --actionHoverColor: #FFC36D; 
  --actionHoverBg: #14385A;
  --actionGlow: rgba(255, 195, 109, 0.6);
  --flyoutColor: #FFC36D;
  --flyoutBgColor: #012;
  --borderColor: #001f1e;
  --standardBorder: 0.125rem solid var(--borderColor);
  --flowAltBorder: 0.0625rem solid #001f1e;

  --horzPad: clamp(0.5rem, 4vw, 2rem);
  --vertPad: clamp(1rem, min(8vw, 10vh), 4rem);
  --standardPad: var(--vertPad) var(--horzPad);
  --aboutPad: clamp(.5rem, min(6vw, 8vh), 2rem) var(--horzPad);
  --chromePad: 1rem clamp(0.5rem, 4vw, 4rem);
  --heroPad: clamp(6rem, 3vh, 6rem) var(--horzPad);
  --maxWidth: 72rem;
  --gap-size: 1.25rem;
  --headerTop: .5rem;

  --winsNumberColor: #e6c783; 
  --winsLabelColor: #f8bb96; 
  --gold: #c6a753;  

  --aboutHeading: #cd0404;
  --aboutTextColor: #2f0e29; 
  --aboutBg: linear-gradient(
    175deg,
    hsl(210deg 40% 95%) 1%, 
    hsl(205deg 38% 82%) 49%,  
    oklab(80.84599999999999% -0.02177 -0.02998) 99%  
  );

  --cta-bg-top: var(--finalCtaBgTop);
  --cta-bg-bot: var(--finalCtaBgBot);  

  --testiText: #0E3A4D;   
  --testiHeading: #e60202;
  --testiQuote: #12384A;   
  --testiMeta: #ffffff;  
  --testiCardBg: #ffffff;
  --testiBorder: rgba(14,58,77,.12);
  --starColor: #FFC36D; 
  --testiShadow: 0 .625rem 1.5rem rgba(0,0,0,.08);

  --resultHead: #6F00FF;

  --testiBg: linear-gradient(
    180deg,
    rgb(35, 60, 77) 0%,
    hsl(204deg 36% 24%) 21%,
    hsl(204deg 32% 25%) 41%,
    hsl(204deg 30% 27%) 61%,
    hsl(205deg 28% 29%) 81%,
    #3b5363 100%
  );
  --faqBg: linear-gradient(
    0deg,
    hsl(213deg 25% 65%) 0%,
    hsl(215deg 25% 71%) 20%,
    hsl(215deg 23% 78%) 41%,
    hsl(217deg 22% 84%) 61%,
    hsl(216deg 21% 91%) 81%,
    hsl(220deg 20% 97%) 100%
  );

  --card-pad: clamp(1rem, 2.5vw, 1.25rem);
  --card-radius: 1rem;
  --card-gap: clamp(1rem, 3vw, 2rem);
  --grid-gap: clamp(.75rem, 2vw, 1rem);
  --avatar: clamp(3rem, 6vw, 4.5rem);
  --star-size: clamp(.9rem, 1.5vw, 1rem);
  --quote-size: clamp(1rem, 1.6vw, 1.05rem);
  --meta-size: clamp(.9rem, 1.4vw, .95rem);

  --chev-size: 2rem;
  --chev-stroke: .25rem;
  --chev-fade-delay: 3s;
  --chev-fade-duration: 1s;

  --finalCtaBgTop: hsl(205 40% 12%);  
  --finalCtaBgBot: hsl(205 38% 22%);
}   

html,
body,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
ul,
ol,
li,
dl,
dt,
dd,
form,
fieldset,
caption,
legend,
table,
tr,
td,
th,
address,
blockquote,
img {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

img,
fieldset {
  border: none;
}

blockquote,
q {
  quotes: none;
}

body *,
*:after,
*:before {
  box-sizing: border-box;
}

legend {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
}

button,
label,
summary {
  cursor: pointer;
}

html,
body {
  height: 100%;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body,
button,
table,
select {
  font-size: 1.1rem;
  line-height: 1.75;
  font-family: flowtext, sans-serif;
  color: var(--flowColor);
  background: var(--flowBg);
}

a {
  color: var(--flowColor);
  transition: color 0.3s, background 0.3s, scale 0.3s;
  text-decoration: none;
}

a:active,
a:focus,
a:hover {
  color: var(--flowColor);
}

input,
select,
textarea {
  padding: 0.25rem 0.5rem;
}

#fauxBody,
.modal,
.modal>.modalClose {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  scroll-behavior: smooth;
}

.modal,
#top,
.cards,
.hasPlate,
#fauxBody>footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.modalClose span,
.mainMenuOpen span,
#fauxBody>footer h2.optional {
  position: fixed;
  right: 999em;
  top: 0;
  opacity: 0;
}

.modal {
  left: -200vw;
  background: var(--modalOuterBg);
  box-shadow: var(--modalOuterShadow);
  opacity: 0;
  transition: left 0s 0.5s, opacity 0.5s;
  font-size: 1.1rem;
}

.modal:target {
  left: 0;
  opacity: 1;
  transition: opacity 0.5s;
}

.modal>div {
  /*
		depth sort over outer .modalClose
	*/
  position: relative;
  /*
		if you don't auto margin, scrolling at small screen heights is messed.
	*/
  margin: auto 1rem;
  overflow: hidden;
  color: var(--modalInputBg);
  box-shadow: var(--modalShadow);
  border: var(--standardBorder);
  border-radius: 1rem;
  scale: 0;
  transition: scale 0.5s;
}

.modal:target>div {
  scale: 1;
}

.modal .modalClose,
#mainMenu .modalClose {
  position: absolute;
  text-decoration: none;
}

.modal:target .modalClose {
  display: block;
}

.modal>*>.modalClose,
#mainMenu>*>.modalClose {
  top: 0.5rem;
  right: 1rem;
  font-size: 2rem;
  line-height: 1;
  color: var(--mainHeadingColor);
}

.modal>*>.modalClose:focus,
.modal>*>.modalClose:hover {
  scale: 1.2;
}

.modal h2 {
  font-size: 1.5rem;
  padding: 0.5rem 4rem 0.5rem 1rem;
  margin-bottom: 1rem;
  background: #080d55;
  border-bottom: var(--standardBorder);
  color: var(--mainHeadingColor);
  text-align: center;
}

.modal h2~* {
  margin: 1rem;
}

form.modal>div {
  width: 100%;
  max-width: 32rem;
  background: var(--modalBg);
}


form.modal>div>footer {
  text-align: center;
  padding-top: 1rem;
}

form.modal input,
form.modal select,
form.modal textarea {
  display: block;
  width: 100%;
  margin: 0.25rem 0 -1rem;
  background: var(--modalInputBg);
  border: var(--modalInputBorder);
  border-radius: 0.5rem;
}

form.modal button {
  padding: 0.25rem 1rem;
  font-size: 1.25rem;
  font-weight: bold;
  border: var(--modalInputBorder);
  border-radius: 0.5rem;
  background: var(--modalButtonBg);
  color: var(--modalButtonColor);
  transition: scale 0.3s;
}

form.modal button:focus,
form.modal button:hover {
  scale: 1.2;
}

#top,
#fauxBody>footer {
  /* max-width: var(--maxWidth); */
  margin: 0 auto;
  color: var(--chromeColor);
  padding: 1rem 8rem;
  z-index: 800;
}

#fauxBody>footer p span {
  display: inline-block;
}

#top {
  justify-content: space-between;
  gap: 2rem;
  top: var(--headerTop);
  position: sticky;
  background-color: var(--navBgColor);
  transition: background-color .5s ease;
}

#top:focus,
#top:hover {
  transition: opacity 0.4s;
}

.sticking {
  color: var(--flyoutColor);
  --navBgColor: #012;
  --headerTop: 0;
  opacity: 0.9;
}

.sticking:focus,
.sticking:hover {
  opacity: 1;
}

#top a {
  color: var(--flowBg);
  text-decoration: none;
}

#fauxBody>footer a {
  color: var(--flowColor);
}

#top>a:first-child {
  display: block;
  flex-grow: 0;
  font-size: .89rem;
  line-height: 1.1;
}

h1 {
  font-size: 2em;
  text-transform: uppercase;
  transform-origin: center left;
  scale: 1.15 1;
  color: var( --mainHeadingColor);
}

#mainMenu {
  flex-grow: 1;
  text-align: right;
}

#mainMenu li {
  list-style: none;
  display: inline;
  margin-right: 2.5rem;
}

#mainMenu li a {
  display: inline-block;
  font-size: 1.2rem;
}

#mainMenu li a:focus,
#mainMenu li a:hover,
.socialMenu a:focus,
.socialMenu a:hover,
.mainMenuOpen:focus,
.mainMenuOpen:hover {
  color: var(--chromeAnchorHover);
  scale: 1.2;
  text-shadow: 0 0 0.5rem rgba(255, 195, 109, 0.5);
  scale: 1.2;
}

#fauxBody>footer>section:first-child {
  width: 1%;
  flex-grow: 1;
}

.socialMenu {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.socialMenu a {
  position: relative;
  display: block;
}

.socialMenu a:before {
  font-size: 2.5rem;
  transition: color 0.3s, scale 0.3s;
}

.socialMenu a:focus:before,
.socialMenu a:hover:before {
  scale: 1.375;
}

.socialMenu a span {
  position: absolute;
  font-size: 0.875rem;
  color: var(--flyoutColor);
  background: var(--flyoutBgColor);
  border: 0.125rem solid var(--flyoutColor);
}

.socialMenu a span {
  bottom: 3.5rem;
  right: 999em;
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
  border-radius: 1rem;
  transition: right 0s 0.3s, opacity 0.3s;
  opacity: 0;
}

.socialMenu a span:after {
  content: "";
  position: absolute;
  bottom: -0.5625rem;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  background: var(--flyoutBgColor);
  border: solid var(--flyoutColor);
  border-width: 0 0.125rem 0.125rem 0;
  rotate: 45deg;
}

.socialMenu a:focus span,
.socialMenu a:hover span {
  right: -0.5rem;
  opacity: 1;
  transition: opacity 0.3s;
}

main>section:not(.hero),
.hero>div,
.hasCards>header,
.hasPlate {
  max-width: 56rem;
  margin: 0 auto;
}

main>section:not(.hero),
.hero>div,
.hasPlate {
  padding: var(--standardPad);
}



.hasPlate {
  padding-top: 1.5rem;
}

main>section:not(.hero) {
  border-bottom: var(--flowAltBorder);
}

main>section>header:not(.hasPlate) {
  text-align: center;
}

main>section:not(.hero):nth-child(odd) {
  background: var(--flowBg);
}

main h2 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: bold;
}

main #landing {
  font-size: clamp(1.75rem, 5vw, 3.3rem);
}

main h2 span {
  display: inline-block;
  /* soft keep-together */
}

main h3 {
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  font-weight: bold;
}

main p {
  max-width: 40em;
  margin: 1em 0;
  z-index: 1;
  position: relative;
}

.result-card p {
  margin: 0;
}

main section>header p {
  font-size: 1.125rem;
}

main>section>header:not(.hasPlate) p {
  margin: 1em auto;
}

main>section.hasCards {
  max-width: 100%;
}

.cards,
.hasPlate {
  gap: 2rem;
}

.cards {
  margin: 2rem auto 0;
  align-items: stretch;
  gap: 2rem 5rem;
}

#about .cards,
#practice .cards {
  max-width: 68em;
}

.cards>* {
  flex-grow: 1;
  width: 1%;
  min-width: min(20rem, 100%);
  max-width: 24rem;
}

#about .cards>*,
#practice .cards>* {
  min-width: min(24rem, 100%);
  max-width: 28rem;
}

#practice .cards {
  gap: 3rem 7rem;
  padding: 0 2rem;
}


#practice {
  background-color: var(--flowColor);
  color: var(--altFlow);
  position: relative;
  overflow: hidden;
}

.cards h3[class*="icon_"]:before {
  font-size: 3rem;
  margin-right: .9rem;
}

.cards h3[class*="icon2_"]:before {
  font-size: 3rem;
  margin-right: .9rem;
}
.cards li {
  list-style: none;
  position: Relative;
  margin-bottom: 0.5rem;
  padding-left: 2rem;
}

.cards figure {
  position: relative;
  flex-grow: 0;
  width: 30%;
  height: auto;
  max-width: 16rem;
  text-align: center;
}

.hasPlate>div {
  flex-grow: 1;
  width: 1%;
  min-width: min(20rem, 100%);
}

.hasPlate.trailing>figure,
.hasPlate.trailing>picture {
  position: relative;
  flex-grow: 0;
  width: 30%;
  max-width: 16rem;
  text-align: center;
}

#about figure img,
#about figure picture {
  width: 100%;
  height: auto;
  border-radius: 1rem;
}


.action {
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
  margin-right: 1.5rem;
  z-index: 1;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  color: var(--actionColor);
  background: var(--actionBg);
  border: var(--actionBorder);
  border-radius: 0.5em;
  transition: color 0.3s, text-shadow 0.3s;
}

.action:focus,
.action:hover {
  color: var(--actionHoverColor);
  text-shadow: none;
}

.action:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  translate: -50% -50%;
  scale: 0;
  opacity: 0;
  background: var(--actionHoverBg);
  transition: scale 0.3s, opacity 0.3s;
}

.action:focus:after,
.action:hover:after {
  scale: 1.1;
  opacity: 1;
}

.hero {
  position: relative;
  padding: clamp(6rem, 3vh, 6rem) var(--horzPad) 0;
  color: var(--heroColor);
  text-shadow: var(--heroTextShadow);
  margin-top: -5.6rem;
  min-height: 75vh;
  transition: 0.2s;
}

#home {
  background-image: url(court-steps.webp), var(--heroBg);
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
  overflow: hidden;
}

#home p span {
  font-weight: bold;
  color: var(--aboutHeading);
}

#heroImg {
  display: block;
  width: 100%;
  height: auto;

}

.hero .action {
  color: var(--heroActionColor);
  background: var(--heroActionBg);
  border-color: var(--heroActionColor);
  font-size: 1.2rem;
  font-weight: bold;
    transition: 
    background-color 0.3s ease,
}

.hero .action:focus,
.hero .action:hover {
  color: var(--heroActionHoverColor);
}

.hero .action:after {
  background: var(--heroActionHoverBg);
}

.hero header {
  margin-top: .5rem;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  z-index: 2;
}

.hero header p {
  margin: 0.25rem 0 1.5rem;
  font-size: 1.5rem;
  text-wrap: balance;
}

section:not(.hero, #practice) h2 {
  color: var(--mainHeadingColor);
}


@media (max-width:56rem) {

  #mainMenu,
  #mainMenu>.modalClose {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    scroll-behavior: smooth;
  }

  #mainMenu {
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    left: -200vw;
    background: var(--modalOuterBg);
    box-shadow: var(--modalOuterShadow);
    opacity: 0;
    transition: left 0s 0.5s, opacity 0.5s;
  }

  #mainMenu:target {
    left: 0;
    opacity: 1;
    transition: opacity 0.5s;
  }

  #mainMenu>div {
    position: relative;
    margin: auto 1rem;
    overflow: hidden;
    background: var(--modalHeadingBg);
    box-shadow: var(--modalShadow);
    border: var(--standardBorder);
    border-radius: 1rem;
    scale: 0;
    transition: scale 0.5s;
  }

  #mainMenu:target>div {
    scale: 1.5;
  }

  #mainMenu:target .modalClose {
    display: block;
  }

  #mainMenu>*>.modalClose:focus,
  #mainMenu>*>.modalClose:hover {
    scale: 1.2;
  }

  #mainMenu>div:before {
    content: attr(data-modalTitle);
    display: block;
    font-size: 1.25rem;
    padding: 0.5rem 4rem 0.5rem 1rem;
    margin-bottom: 1rem;
    background: var(--modalOuterBg);
    border-bottom: var(--standardBorder);
    color: var(--mainHeadingColor);
  }

  #mainMenu ul {
    margin: 1rem;
  }

  #mainMenu li {
    display: block;
    text-align: center;
    margin: 0.5rem 0;
  }

  .mainMenuOpen {
    display: block;
    width: 2.5rem;
    height: 2rem;
    background: linear-gradient(#FFC36D 20%,
        transparent 20% 40%,
        #FFC36D 40% 60%,
        transparent 60% 80%,
        #FFC36D 80%);
  }
}

.practice {
  text-align: center;
  color: var(--altFlow);
}


#about {
  background-image: var(--aboutBg);
  --mainHeadingColor: var(--aboutHeading);
  padding: var(--aboutPad);
}

#about,
#about p {
    color: var(--aboutTextColor);
}

#about h2 {
  color: var(--aboutHeading);
}


#practice {
  background-image: linear-gradient(
    180deg,
    hsl(210deg 45% 15%) 0%,
    hsl(211deg 49% 13%) 27%,
    hsl(212deg 55% 11%) 51%,
    hsl(212deg 62% 10%) 73%,
    hsl(214deg 74% 8%) 92%,
    hsl(217deg 100% 6%) 100%
  );
}




.result-card {
  flex: 0 0 16rem;
  text-align: center;
  scroll-snap-align: start;
  color: #FFF; 
  position: relative;
}

.result-card:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 0;
  width: 0.15rem;
  height: 60%;
  background-color: var(--gold);
  opacity: 0.6;
}


.result-card p {
  font-size: 1.1rem;
    font-weight: 500;
      color: var(--winsLabelColor);
}



.hero div {
  margin-top: 1rem;
  z-index: 1;
  position: relative;
}



#testimonials {
  background-image: var(--testiBg);
  color: var(--testiText);
  border-bottom: none;
}

#testimonials > header {
  text-align: center;
  padding-bottom: 0;
}

#testimonials h2 {
  --mainHeadingColor: var(--testiHeading);
  font-size: clamp(1.8rem, 3.5vw, 2.7rem);
}

#testimonials header p {
  max-width: 42rem;
  margin: .5rem auto 0;
  font-size: clamp(1rem, 1.4vw, 1.05rem);
  color: var(--testiMeta);
}

.cards.testimonials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--card-gap);
  max-width: 68rem;
  margin-inline: auto;
}

.testimonial-card {
  background: var(--testiCardBg);
  border: .0625rem solid var(--testiBorder);
  border-radius: var(--card-radius);
  box-shadow: var(--testiShadow);
  padding: var(--card-pad);

  flex: 1 1 clamp(18rem, 28%, 22rem);
  max-width: 24rem;

  display: grid;
  grid-template-columns: var(--avatar) 1fr;
  grid-template-areas:
    "photo stars"
    "photo quote"
    "photo meta";
  column-gap: var(--grid-gap);
  align-items: start;
}

.testimonial-card img {
  grid-area: photo;
  inline-size: var(--avatar);
  block-size: var(--avatar);
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-card .stars {
  grid-area: stars;
  color: var(--starColor);
  font-size: var(--star-size);
  letter-spacing: .15em;
  line-height: 1;
  margin-top: .25rem;
}

.testimonial-card blockquote {
  grid-area: quote;
  color: var(--testiQuote);
  font-size: var(--quote-size);
  line-height: 1.6;
  margin: .5rem 0 .25rem;
}

.testimonial-card .meta {
  grid-area: meta;
  font-size: var(--meta-size);
}

@media (min-width: 1024px) {
  .hero .action {
    font-size: 1.25rem;
  }
}

@media (max-width: 1024px) {

  .cards.testimonials {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;        
    gap: var(--card-gap);
    padding-inline: var(--horzPad);
  }
  .cards.testimonials::-webkit-scrollbar { display: none; }

  .testimonial-card {
    scroll-snap-align: center;
    flex: 0 0 clamp(18rem, 85%, 22rem);
    max-width: none;
  }

  #testimonials { position: relative; }

  .chevron {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inline-size: var(--chev-size);
    block-size: var(--chev-size);
    background: none;
    pointer-events: none;  
    z-index: 2;
    opacity: .6;
    animation: chevrons-fade var(--chev-fade-duration) ease forwards;
    animation-delay: var(--chev-fade-delay);
  }

  .chevron::before {
    content: '';
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border-top: var(--chev-stroke) solid var(--starColor);
    border-right: var(--chev-stroke) solid var(--starColor);
  }

  .chevron-left { left: .5rem; }
  .chevron-left::before { transform: rotate(-135deg); }

  .chevron-right { right: .5rem; }
  .chevron-right::before { transform: rotate(45deg); }

  .cards.testimonials:active ~ .chevron,
  .cards.testimonials:focus-within ~ .chevron {
    opacity: .2;
  }

  @media (prefers-reduced-motion: reduce) {
    .chevron { animation: none; }
  }

  @keyframes chevrons-fade {
    to { opacity: 0; }
  }
}

#fauxBody > footer {
  background: #fff;
  color: #0E3A4D;              
  border-top: var(--flowAltBorder);
}
#fauxBody > footer a {
  color: #0E3A4D;
}
#fauxBody > footer a:hover {
  color: var(--chromeAnchorHover);
}


#final-cta {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: clamp(2rem, 6vw, 4rem) var(--horzPad);
  color: #fff;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.28)),
    linear-gradient(180deg, hsl(205 40% 12%), hsl(205 38% 22%));
  text-align: center;
}
#final-cta .final-cta__inner {
  max-width: 56rem;
  margin-inline: auto;
}
#final-cta h2 {
  font-size: clamp(1.9rem, 4.8vw, 3rem);
  line-height: 1.15;
  margin: 0;
}
#final-cta h2 span {
  color: #FFC36D; /* brand gold */
  text-decoration: underline;
  text-underline-offset: .22em;
}
#final-cta .availability {
  margin-top: .6rem;
  font-size: clamp(1rem, 2.1vw, 1.2rem);
  opacity: .92;
  margin: .6rem auto 0;   
  max-width: 42rem;    
  text-align: center; 
}
.final-cta__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(.75rem, 2.6vw, 1rem);
  margin-top: clamp(1rem, 3vw, 1.6rem);
  flex-wrap: wrap;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.2rem;
  border-radius: .6rem;
  font-weight: 650;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .15s ease, border-color .25s ease;
}
.cta-btn svg {
  flex: 0 0 auto;
}
.cta-btn.primary {
  background-color: #0E3A4D;
  color: #FFC36D;
  border: .125rem solid #FFC36D;
}
.cta-btn.primary:hover {
  background-color: #14385A;
  box-shadow: 0 0 .9rem rgba(255,195,109,.5);
  transform: translateY(-.05rem);
}
.cta-btn.ghost {
  background-color: transparent;
  color: #FFC36D;
  border: .125rem solid rgba(255,195,109,.65);
}
.cta-btn.ghost:hover {
  background-color: rgba(255,195,109,.08);
  box-shadow: 0 0 .6rem rgba(255,195,109,.4);
  transform: translateY(-.05rem);
}


.footer-cta__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(.75rem, 2.6vw, 1rem);
  flex-wrap: wrap;
}

.footer-cta-button {
  background-color: white;
}


#top a.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--flowBg);                 
  text-decoration: none;
}

#top .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
#top .brand-text h1 { margin: 0; color: var(--flowBg); }
#top .brand-text p  {
  margin: 0;
  color: var(--flowBg);
  position: static;                    
  background: transparent;              
  top: auto;
  opacity: .95;
}

#top .brand-mark {
  height: 3em;
  width: auto;
  flex-shrink: 0;
  fill: currentColor;
  color: var(--flowBg);
}

.hero figure {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 35%;
  max-width: 772px;
  height: auto;
  z-index: 0;
  margin: 0;
  line-height: 0;  
}

@media (max-width: 690px) {
  .hasPlate.trailing>figure {
    width: 100%;
  }
} 

@media (width <= 600px) and (height <= 644px) {
  .hero {
    min-height: 142vh;
  }
}

@media (width <= 360px) and (height >= 645px) {
  .hero {
    min-height: 129vh;
  }
}

@media (width >= 360px) and (640px <= height <= 666px) {
  .hero {
    min-height: 127vh;
  }
}

@media (width >= 360px) and (667px <= height <= 679px) {
  .hero {
    min-height: 124vh;
  }
}

@media (width >= 360px) and (680px <= height <= 719px) {
  .hero {
    min-height: 121vh;
  }
}

@media (width >= 360px) and (720px <= height <= 749px) {
  .hero {
    min-height: 115vh;
  }
}

@media (width >= 360px) and (750px <= height <= 779px) {
  .hero {
    min-height: 111vh;
  }
}

@media (360px <= width <= 389px) and (780px <= height <= 840px) {
  .hero {
    min-height: 102vh;
  }
}

@media (width >= 390px) and (780px <= height <= 840px) {
  .hero {
    min-height: 107vh;
  }
}

@media (width >= 410px) and (780px <= height <= 840px) {
  .hero {
    min-height: 102vh;
  }
}

@media (360px <= width <= 389px) and (841px <= height <= 880px) {
  .hero {
    min-height: 96vh;
  }
}

@media (width >= 390px) and (841px <= height <= 880px) {
  .hero {
    min-height: 100vh;
  }
}

@media (width >= 410px) and (841px <= height <= 880px) {
  .hero {
    min-height: 95vh;
  }
}

@media (360px <= width <= 389px) and (881px <= height <= 950px) {
  .hero {
    min-height: 90vh;
  }
}

@media (width >= 390px) and (881px <= height <= 950px) {
  .hero {
    min-height: 97vh;
  }
}

@media (width >= 410px) and (881px <= height <= 950px) {
  .hero {
    min-height: 90vh;
  }
}

@media (width >= 450px) and (841px <= height <= 929px) {
  .hero {
    min-height: 98vh;
  }
}

@media (width >= 450px) and (951px <= height <= 1085px) {
  .hero {
    min-height: 88vh;
  }
}

@media (width > 600px) {
  .hero {
    min-height: 75vh;
  }
}

@media (width > 600px) and (height < 800px) {
  .hero figure {
    width: 35%;
  }
}

@media (808px <= width <= 910px) {
  .hero figure {
    display: none;
  }
}

@media (min-width: 700px) and (min-height: 810px) {
  .hero figure {
    width: 50%;
  }
}

@media (551px <= width <= 600px) {
  .hero figure { width: 60%; right: 50%; transform: translateX(50%); }
}

@media (min-width: 796px) and (max-width: 910px) and (min-height: 810px) {
  .hero figure { width: 50%; right: 50%; transform: translateX(50%); }
  .hero {
    min-height: 100vh;
  }
}

@media (min-width: 911px) and (max-width: 1189px) and (max-height: 1023px) {
  .hero figure {
    width: 26%;
  }
}

@media (min-width: 912px) and (min-height: 1024px) {
  .hero figure {
    width: 34%;
  }
}

@media (min-width: 1190px) and (min-height: 741px) and (max-height: 1023px) {
  .hero figure {
    width: 28%;
  }
}

@media (min-width: 1110px) and (max-height: 740px) {
  .hero figure {
    width: 24%;
  }
}

@media (min-width: 980px) and (min-height: 676) {
  .hero figure {
    width: 29%;
  }
}



/* @media (801px <= width <= 1024px) {
  .hero figure {
    width: 45%;
  }
} */


/* @media (max-height: 700px) and (min-width: 950px) {
  .hero figure {
    width: 24%;
  }
}

@media (max-height: 730px) and (min-width: 1113px) and (max-width: 1445px) {
  .hero figure {
    width: 24%;
  }
}

@media (max-height: 729px) and (min-width: 796px) and (max-width: 1310px) {
  .hero figure {
    width: 24%;
  }
}

@media (min-width: 1400px) and (max-width: 1670px) and (min-height: 800px) and (max-height: 960px) {
    .hero figure {
    width: 28%;
  }
} */


@media (max-width: 389px) {
  .hero {
    padding: 5.25rem var(--horzPad) 0; 
  }

  #top>a:first-child {
    font-size: .75rem;
  }
  

  #heroImg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .5rem .5rem 0 0;
  }
}


@media (max-width:1550px) {
  #top {
    padding: var(--chromePad);
  }
}

@media (min-height:940px) {
  .hero div {
    margin-top: 2rem;
  }
}

@media (min-height:1020px) {
  .hero div {
    margin-top: 3rem;
  }
}

@media (min-height:1110px) {
  .hero div {
    margin-top: 6rem;
  }
}


@media (min-height: 1280px) {
  .hero div {
    margin-top: 10rem;
}
}

@media (min-height: 1580px) {
  .hero div {
    margin-top: 15rem;
}
}
 

@media (max-width: 705px) {
    .result-card {
    flex: 0 0 16rem;
    }
}

@media (min-width: 1028px) { 
  .result-card {
    flex: 0 0 18rem;
  }
}

@media (min-width: 1158px) { 
  .result-card {
    flex: 0 0 20rem;
  }
}

@media (min-width: 1280px) {
  .result-card {
    flex: 0 0 22rem;
  }
}
@media (max-width: 640px) {
  .result-card:not(:last-child)::after {
    width: 0.1rem;    
    height: 40%;        
    top: 30%;           
    right: -0.875rem; 
  }
}
@media (max-width: 550px) {
  .result-card {
    flex: 0;
  }

  .hero div {
    margin-top: 0;
  }

  .hero figure { width: 70%; right: 50%; transform: translateX(50%); }

}



#about .results-header {
  max-width: var(--maxWidth);
  padding: 1.5rem var(--horzPad);
  text-align: center;
}

#about .results-header h2 {
  color: var(--resultHead); 
  line-height: 1.1;
  margin: 0;
  letter-spacing: 0.01em;
}

#about .results-header h2::after { content: none; } /* no underline */

#about .results-header p {
  margin: 0.9rem auto 0;
  max-width: 48rem;
  color: var(--aboutTextColor);
  font-size: clamp(1.15rem, 0.9rem + 1.2vw, 1.4rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

#about .results-header p strong {
  color: #6F00FF;
  font-weight: 900;
}

#about .results-cards {
  --results-accent: #6F00FF;
  max-width: min(var(--maxWidth), 1240px);           
  margin: clamp(1rem, 4vw, 2rem) auto 0;
  padding: 0 var(--horzPad);
}

#about .results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   
  gap: clamp(18px, 3vw, 32px);                       
  justify-items: center;   
  align-items: stretch;
}

#about .result-card {
  color: var(--aboutTextColor);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.06);
  padding: clamp(14px, 2.2vw, 18px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  width: 100%;
  max-width: clamp(300px, 31vw, 380px);
  height: 100%;
}

#about .result-card::before,
#about .result-card::after { content: none !important; }

#about .result-blurb {
  margin: 0 0 4px 0;
  color: var(--aboutTextColor);
  font-size: clamp(1rem, 0.8rem + 0.6vw, 1.1rem);
  line-height: 1.55;
}

#about .result-row {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0.25rem;
  justify-items: start;
  text-align: left;
}

#about .result-label {
  display: block;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 0.01em;
}

#about .result-amount {
  display: block;
  margin-top: 0.25rem;
  white-space: nowrap;      
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  font-weight: 700;
  font-size: clamp(1.2rem, 0.9rem + 1vw, 1.4rem);
}

#about .result-amount.offer {        /* insurance offer amount */
  color: var(--aboutTextColor);
  opacity: 0.85;
  font-size: 1.2rem;
}

#about .result-amount.got {          /* what we got */
  color: var(--results-accent);
  font-weight: 800;
  font-size: 2rem;
}

#about .result-divider {
  height: 2px;
  background: var(--results-accent);
  border-radius: 999px;
  margin: 0.6rem 0.625rem 0.7rem;    /* small side inset */
  width: calc(100% - 1.25rem);
}

@media (max-width: 1100px) {
  #about .results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* 2 × 3 tablet */
    gap: clamp(16px, 2.5vw, 28px);
  }
}

@media (max-width: 640px) {
  #about .results-grid {
    grid-template-columns: 1fr;                         /* 1 × 6 mobile */
    gap: 16px;
    justify-items: stretch;                             /* full width on phones */
  }
  #about .result-card { max-width: none; }
}

#see-win {
  color: var(--finalCtaText, #fff);
  background-image: linear-gradient(180deg, var(--cta-bg-top), var(--cta-bg-bot));
  max-width: 100%;
  position: relative;
  border-bottom: none;
}

#see-win .cta-inline__inner {
  max-width: min(var(--maxWidth), 1200px);
  margin: 0 auto;
  padding: 0 var(--horzPad);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
}

#see-win .cta-inline__copy h2 {
  margin: 0 0 .5rem;
  font-size: clamp(2rem, 1.2rem + 2.5vw, 3rem);
  line-height: 1.05;
}
#see-win .cta-inline__copy h2 span { color: var(--cta-accent); }

#see-win .cta-inline__copy p {
  max-width: 40ch;
  font-size: clamp(1rem, .9rem + .45vw, 1.15rem);
  opacity: .96;
}

#see-win .cta-form {
  background: rgba(7, 18, 28, .52);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  padding: clamp(16px, 2.5vw, 22px);
}

#see-win .cta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 12px;
}
#see-win .cta-grid .span-2 { grid-column: 1 / -1; }

#see-win .cta-form label { font-weight: 600; font-size: .95rem; }
#see-win .cta-form input,
#see-win .cta-form select,
#see-win .cta-form textarea {
  width: 100%;
  margin-top: .25rem;
  background: #fff;
  color: #0f1a22;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 10px;
  padding: .65rem .8rem;
}
#see-win .cta-form textarea { min-height: 9rem; }

#see-win .cta-submit {
  width: 100%;
  padding: .95rem 1rem;
  border: none;
  border-radius: .65rem;
  background: var(--modalButtonBg);
  color: var(--modalButtonColor);
  font-weight: 800;
  letter-spacing: .02em;
  transition: transform .2s ease, filter .2s ease;
}
#see-win .cta-submit:hover,
#see-win .cta-submit:focus { transform: translateY(-1px); filter: brightness(1.08); }
@media (max-width: 900px) {
  #see-win .cta-inline__inner { grid-template-columns: 1fr; }
  #see-win .cta-inline__copy p { max-width: 55ch; }
}
@media (max-width: 540px) {
  #see-win .cta-grid { grid-template-columns: 1fr; }
}


#cta-med {
  --band-top: hsl(210 50% 8%);
  --band-bot: #152637;
  --btn-bg: #175aad;
  --btn-text: #fff;

  color: #fff;
  background-image: linear-gradient(180deg, var(--band-top), var(--band-bot));

  max-width: 100%;
  border-bottom: none;
}

#cta-med .cta-med__inner {
  max-width: min(var(--maxWidth), 1200px);
  margin: 0 auto;
  padding: 0 var(--horzPad);
  text-align: center;
}

#cta-med h2 {
  margin: 0;
  font-size: clamp(1rem, 1rem + 2.4vw, 2.2rem);
  line-height: 1.3;
  text-wrap: balance;
  padding-bottom: 1.5rem;
}

#cta-med .cta-med__btn {
  display: inline-block;
  min-width: clamp(200px, 30vw, 260px);
  padding: .95rem 1.5rem;
  border: none;
  border-radius: .6rem;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  transition: transform .2s ease, filter .2s ease;
}
#cta-med .cta-med__btn:hover,
#cta-med .cta-med__btn:focus {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

#faqs {
  background: var(--faqBg);
  color: #0f1a22;
  max-width: 100%;
}

#faqs .faqs__inner {
  max-width: var(--maxWidth);
  margin: 0 auto;
  padding: 0 var(--horzPad);
}

#faqs h2 {
  text-align: center;
  margin: 0 0 clamp(1.2rem, 3vw, 2rem);
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.1;
}

#faqs .faq_head h2{
  color: var(--resultHead);
}

#faqs .faq-list {
  background: transparent;
}

#faqs .faq {
  border-bottom: 2px solid rgba(15, 26, 34, 0.18);
  padding-block: clamp(1rem, 2.2vw, 1.6rem);
}

#faqs .faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  outline: none;
}
#faqs .faq summary::-webkit-details-marker { display: none; }

#faqs .faq-q {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  line-height: 1.25;
  font-weight: 800;
  color: #0b2130;
}

/* Square plus/minus toggle (like the reference screenshot) */
#faqs .faq-toggle {
  width: 28px;
  height: 28px;
  border: 2px solid #0b2130;
  border-radius: 4px;
  position: relative;
  flex: 0 0 28px;
}
#faqs .faq-toggle::before,
#faqs .faq-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 2px;
  background: #0b2130;      /* horizontal bar */
  transition: opacity .2s ease, transform .2s ease;
}
#faqs .faq-toggle::after {
  transform: rotate(90deg);  /* vertical bar (to make +) */
}

/* When open: show minus (hide vertical bar) */
#faqs .faq[open] .faq-toggle::after { opacity: 0; transform: rotate(90deg) scaleX(0); }

/* Answer content (animated reveal) */
#faqs .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease;
}
#faqs .faq[open] .faq-content { grid-template-rows: 1fr; }

#faqs .faq-content > * {
  overflow: hidden; 
}

#faqs .faq-content p {
  margin: 1.7rem 0 0;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height: 1.6;
  color: #243744;
}

/* Focus states for accessibility */
#faqs .faq summary:focus-visible .faq-q,
#faqs .faq summary:hover .faq-q {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

#testimonial-spotlight {
  background: #F6F7F9; 
  max-width: 100%;
  border-bottom: none;
}

#testimonial-spotlight .ts__inner {
  max-width: var(--maxWidth);
  margin: 0 auto;
  padding: 0 var(--horzPad);
}

#testimonial-spotlight .ts-card {
  background: #00112a;
  color: #fff;
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  padding: clamp(1.5rem, 5vw, 3rem);
}

#testimonial-spotlight .ts-quote p {
  margin: 0 0 clamp(1rem, 3vw, 1.5rem);
  font-size: clamp(1.6rem, 1rem + 3.2vw, 3rem);
  line-height: 1.15;
  letter-spacing: .005em;
}

#testimonial-spotlight .ts-quote .muted { opacity: .45; }
#testimonial-spotlight .ts-quote .em { color: #fff; font-weight: 800; }

#testimonial-spotlight .ts-meta {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: rgba(255,255,255,.8);
  font-size: clamp(1rem, .9rem + .2vw, 1.125rem);
}

#testimonial-spotlight .ts-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 48px;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}

#testimonial-spotlight .ts-name { font-weight: 700; }
#testimonial-spotlight .ts-title { opacity: .85; }

@media (min-width: 1100px) {
  #testimonial-spotlight .ts-card { border-radius: 26px; }
}

:is(#about, #why-us) {
  background-image: var(--aboutBg);
  --mainHeadingColor: var(--aboutHeading);
  padding: var(--aboutPad);
}
:is(#about, #why-us),
:is(#about, #why-us) p { color: var(--aboutTextColor); }
:is(#about, #why-us) h2 { color: var(--aboutHeading); }
:is(#about, #why-us) h3 { color: #FFC36D; }
:is(#about, #why-us) .cards { max-width: 67em; }

@media (width <=1256px) {
  :is(#about, #why-us) .cards { max-width: 56em; }
}

:is(#about, #why-us) .cards h3 { color: var(--aboutH3Color); }
:is(#about, #why-us) figure img,
:is(#about, #why-us) figure picture { width: 100%; height: auto; border-radius: 1rem; }