:root {
  /* ======================
     Fonts
  ====================== */
  --font-heading: 'Paytone One', sans-serif;
  --font-body: 'Noto Sans', sans-serif;

  /* ======================
     Brand Colors
  ====================== */
  --red: #C9592B;
  --red-dark: #A14D2B;
  --money: #7DA343;

  /* ======================
     Font Colors
  ====================== */
  --text-main: #606060;
  --text-2: #6C6C6C;
  --text-3: #C8C8C8;
  --text-4: #878787;
  --text-5: #909090;
  --text-6: #848484;

  /* ======================
     Backgrounds
  ====================== */
  --bg-neutral: #F7F7F7;
  --bg-white: #FFFFFF;
  --bg-white-2: #F7F7F7;
  --bg-black: #3C3C3C;
  --toolbox-bg: #DDDDDD;

  /* ======================
     Borders
  ====================== */
  --border-main: #C1C1C1;
  --border-2: #D9D9D9;
  --toolbox-border: #E1E1E1;
}


html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}



body{
    scroll-behavior: smooth;
    margin: 0px;
    overflow-x: hidden;
}














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

.hero {
  position: relative;
  height: fit-content;
  background-color: var(--bg-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}



.hero-logo {
  position: absolute;
  top: .75vw;
  left: .75vw;
}

.hero-logo img {
  height: 2.25vw;
  width: auto;
}



.hero-text {
  text-align: center;
  margin-top: 4vw;
}



.hero-eyebrow {
  display: block;
  font-size: 1.25vw;
  font-weight: normal;
  color: var(--text-3);
  letter-spacing: .01vw;
  font-family: var(--font-heading);
}



.hero-title {
  font-family: var(--font-heading);
  font-size: 4vw;
  color: var(--text-main);
  margin-bottom: 0.1vw;
  margin-top: 0px;
  line-height: 1.05;
  font-weight: normal;
}


.hero-subtitle {
  font-family: var(--font-heading);
  font-size: 2.25vw;
  font-weight: normal;
  color: var(--text-4);
  margin-top: 0px;
  margin-bottom: 0px;
}



.hero-image {
  margin-top: 2vw;
  margin-bottom: 2vw;
  width: 100%;
}

.hero-image img {
  width: 100%;
  height: auto;
  display: block;
}




@media screen and (min-width: 20in) and (max-width: 24in) {

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

.hero {
  position: relative;
  height: fit-content;
  background-color: var(--bg-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-logo {
  position: absolute;
  top: 0.9vw;          /* was .75vw */
  left: 0.9vw;         /* was .75vw */
}

.hero-logo img {
  height: 2.7vw;       /* was 2.25vw */
  width: auto;
}

.hero-text {
  text-align: center;
  margin-top: 4.8vw;   /* was 4vw */
}

.hero-eyebrow {
  display: block;
  font-size: 1.5vw;    /* was 1.25vw */
  font-weight: normal;
  color: var(--text-3);
  letter-spacing: 0.012vw; /* was .01vw */
  font-family: var(--font-heading);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 4.8vw;    /* was 4vw */
  color: var(--text-main);
  margin-bottom: 0.12vw; /* was 0.1vw */
  margin-top: 0px;
  line-height: 1.05;
  font-weight: normal;
}

.hero-subtitle {
  font-family: var(--font-heading);
  font-size: 2.7vw;    /* was 2.25vw */
  font-weight: normal;
  color: var(--text-4);
  margin-top: 0px;
  margin-bottom: 0px;
}

.hero-image {
  margin-top: 2.4vw;   /* was 2vw */
  margin-bottom: 2.4vw;/* was 2vw */
  width: 100%;
}

.hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

  
}



@media screen and (min-width: 16in) and (max-width: 20in) {

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

.hero {
  position: relative;
  height: fit-content;
  background-color: var(--bg-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-logo {
  position: absolute;
  top: 0.975vw;        /* was .75vw */
  left: 0.975vw;       /* was .75vw */
}

.hero-logo img {
  height: 2.925vw;     /* was 2.25vw */
  width: auto;
}

.hero-text {
  text-align: center;
  margin-top: 5.2vw;   /* was 4vw */
}

.hero-eyebrow {
  display: block;
  font-size: 1.625vw;  /* was 1.25vw */
  font-weight: normal;
  color: var(--text-3);
  letter-spacing: 0.013vw; /* was .01vw */
  font-family: var(--font-heading);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 5.2vw;    /* was 4vw */
  color: var(--text-main);
  margin-bottom: 0.13vw; /* was 0.1vw */
  margin-top: 0px;
  line-height: 1.05;
  font-weight: normal;
}

.hero-subtitle {
  font-family: var(--font-heading);
  font-size: 2.925vw;  /* was 2.25vw */
  font-weight: normal;
  color: var(--text-4);
  margin-top: 0px;
  margin-bottom: 0px;
}

.hero-image {
  margin-top: 2.6vw;   /* was 2vw */
  margin-bottom: 2.6vw;/* was 2vw */
  width: 100%;
}

.hero-image img {
  width: 100%;
  height: auto;
  display: block;
}


}



@media screen and (min-width: 12in) and (max-width: 16in) {

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

.hero {
  position: relative;
  height: fit-content;
  background-color: var(--bg-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-logo {
  position: absolute;
  top: 1.05vw;
  left: 1.05vw;
}

.hero-logo img {
  height: 3.15vw;
  width: auto;
}

.hero-text {
  text-align: center;
  margin-top: 5.6vw;
}

.hero-eyebrow {
  display: block;
  font-size: 1.75vw;
  font-weight: normal;
  color: var(--text-3);
  letter-spacing: 0.014vw;
  font-family: var(--font-heading);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 5.6vw;
  color: var(--text-main);
  margin-bottom: 0.14vw;
  margin-top: 0px;
  line-height: 1.05;
  font-weight: normal;
}

.hero-subtitle {
  font-family: var(--font-heading);
  font-size: 3.15vw;
  font-weight: normal;
  color: var(--text-4);
  margin-top: 0px;
  margin-bottom: 0px;
}

.hero-image {
  margin-top: 2.8vw;
  margin-bottom: 2.8vw;
  width: 100%;
}

.hero-image img {
  width: 100%;
  height: auto;
  display: block;
}


}



@media screen and (min-width: 6in) and (max-width: 11in) {

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

.hero {
  position: relative;
  height: fit-content;
  background-color: var(--bg-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-logo {
  position: absolute;
  top: 2.25vw;          /* 0.75 × 1.5 */
  left: 2.25vw;         /* 0.75 × 1.5 */
}

.hero-logo img {
  height: 5.5vw;       /* 2.25 × 1.5 */
  width: auto;
}

.hero-text {
  text-align: center;
  margin-top: 15vw;       /* 4 × 1.5 */
}

.hero-eyebrow {
  display: block;
  font-size: 2.5vw;    /* 1.25 × 1.5 */
  font-weight: normal;
  color: var(--text-3);
  letter-spacing: 0.015vw; /* 0.01 × 1.5 */
  font-family: var(--font-heading);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 6vw;        /* 4 × 1.5 */
  color: var(--text-main);
  margin-bottom: 0.15vw; /* 0.1 × 1.5 */
  margin-top: -5px;
  line-height: 1.05;
  font-weight: normal;
}

.hero-subtitle {
  font-family: var(--font-heading);
  font-size: 3.375vw;    /* 2.25 × 1.5 */
  font-weight: normal;
  color: var(--text-4);
  margin-top: 0px;
  margin-bottom: 0px;
}

.hero-image {
  margin-top: 3vw;       /* 2 × 1.5 */
  margin-bottom: 3vw;    /* 2 × 1.5 */
  width: 100%;
}

.hero-image img {
  width: 100%;
  height: auto;
  display: block;
}


}

@media screen and (min-width: 0in) and (max-width: 6in) {

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

.hero {
  position: relative;
  height: fit-content;
  background-color: var(--bg-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-logo {
  position: absolute;
  top: 3.125vw;          /* 0.75 × 1.5 */
  left: 3.125vw;         /* 0.75 × 1.5 */
}

.hero-logo img {
  height: 7.375vw;       /* 2.25 × 1.5 */
  width: auto;
}

.hero-text {
  text-align: center;
  margin-top: 18vw;       /* 4 × 1.5 */
}

.hero-eyebrow {
  display: block;
  font-size: 4.5vw;    /* 1.25 × 1.5 */
  font-weight: normal;
  color: var(--text-3);
  letter-spacing: 0.015vw; /* 0.01 × 1.5 */
  font-family: var(--font-heading);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 9vw;        /* 4 × 1.5 */
  color: var(--text-main);
  margin-bottom: 0.15vw; /* 0.1 × 1.5 */
  margin-top: -5px;
  line-height: 1.05;
  font-weight: normal;
}

.hero-subtitle {
  font-family: var(--font-heading);
  font-size: 4.5vw;    /* 2.25 × 1.5 */
  font-weight: normal;
  color: var(--text-4);
  margin-top: 0px;
  margin-bottom: 0px;
}

.hero-image {
  margin-top: 6vw;       /* 2 × 1.5 */
  margin-bottom: 0vw;    /* 2 × 1.5 */
  margin-right: 69vw;
  width: 100%;
}

.hero-image img {
  width: 170%;
  height: auto;
  display: block;
}

}














/* ======================
   SECTION TWO
====================== */

.section-two {
  background:none;
  display: flex;
  align-items: center;
  margin-top: -4vw;
  z-index: 22;
  position: relative;
}


.section-two-content {
  margin: 0 auto;
}

.section-two-content p {
  font-family: var(--font-heading);
  font-size: 5vw;
  color: var(--text-main);
  line-height: 1.15;
  margin: 0;
}


.section-two-content p + p {
  margin-top: 0.5vw;
}


.arrow-row {
  display: flex;
  gap: 3vw;
}

.arrow-row img {
  width: 12vw;
  height: auto;
  margin-top: 2vw;
}



@media screen and (min-width: 20in) and (max-width: 24in) {

  /* ======================
   SECTION TWO
====================== */

.section-two {
  background: none;
  display: flex;
  align-items: center;
  margin-top: -4.8vw;
  z-index: 22;
  position: relative;
}

.section-two-content {
  margin: 0 auto;
}

.section-two-content p {
  font-family: var(--font-heading);
  font-size: 6vw;
  color: var(--text-main);
  line-height: 1.15;
  margin: 0;
}

.section-two-content p + p {
  margin-top: 0.6vw;
}

.arrow-row {
  display: flex;
  gap: 3.6vw;
}

.arrow-row img {
  width: 14.4vw;
  height: auto;
  margin-top: 2.4vw;
}


}



@media screen and (min-width: 16in) and (max-width: 20in) {

/* ======================
   SECTION TWO
====================== */

.section-two {
  background: none;
  display: flex;
  align-items: center;
  margin-top: -5.2vw;   /* was -4vw */
  z-index: 22;
  position: relative;
}

.section-two-content {
  margin: 0 auto;
}

.section-two-content p {
  font-family: var(--font-heading);
  font-size: 6.5vw;     /* was 5vw */
  color: var(--text-main);
  line-height: 1.15;
  margin: 0;
}

.section-two-content p + p {
  margin-top: 0.65vw;  /* was 0.5vw */
}

.arrow-row {
  display: flex;
  gap: 3.9vw;          /* was 3vw */
}

.arrow-row img {
  width: 15.6vw;      /* was 12vw */
  height: auto;
  margin-top: 2.6vw;  /* was 2vw */
}


}



@media screen and (min-width: 12in) and (max-width: 16in) {

/* ======================
   SECTION TWO
====================== */

.section-two {
  background: none;
  display: flex;
  align-items: center;
  margin-top: -5.6vw;
  z-index: 22;
  position: relative;
}

.section-two-content {
  margin: 0 auto;
}

.section-two-content p {
  font-family: var(--font-heading);
  font-size: 7vw;
  color: var(--text-main);
  line-height: 1.15;
  margin: 0;
}

.section-two-content p + p {
  margin-top: 0.7vw;
}

.arrow-row {
  display: flex;
  gap: 4.2vw;
}

.arrow-row img {
  width: 16.8vw;
  height: auto;
  margin-top: 2.8vw;
}


}



@media screen and (min-width: 6in) and (max-width: 11in) {

  /* ======================
   SECTION TWO
====================== */

.section-two {
  background: none;
  display: flex;
  align-items: center;
  margin-top: -6vw;        /* -4 × 1.5 */
  z-index: 22;
  position: relative;
}

.section-two-content {
  margin: 0 auto;
}

.section-two-content p {
  font-family: var(--font-heading);
  font-size: 7.5vw;        /* 5 × 1.5 */
  color: var(--text-main);
  line-height: 1.15;
  margin: 0;
}

.section-two-content p + p {
  margin-top: 0.75vw;      /* 0.5 × 1.5 */
}

.arrow-row {
  display: flex;
  gap: 4.5vw;              /* 3 × 1.5 */
}

.arrow-row img {
  width: 18vw;             /* 12 × 1.5 */
  height: auto;
  margin-top: 3vw;         /* 2 × 1.5 */
}


}


@media screen and (min-width: 0in) and (max-width: 6in) {

    /* ======================
   SECTION TWO
====================== */

.section-two {
  background: none;
  display: flex;
  align-items: center;
  margin-top: -6vw;        /* -4 × 1.5 */
  z-index: 22;
  position: relative;
}

.section-two-content {
  margin: 0 auto;
}

.section-two-content p {
  font-family: var(--font-heading);
  font-size: 8vw;        /* 5 × 1.5 */
  color: var(--text-main);
  line-height: 1.15;
  margin: 0;
}

.section-two-content p + p {
  margin-top: 0.75vw;      /* 0.5 × 1.5 */
}

.arrow-row {
  display: flex;
  gap: 4.5vw;              /* 3 × 1.5 */
}

.arrow-row img {
  width: 18vw;             /* 12 × 1.5 */
  height: auto;
  margin-top: 3vw;         /* 2 × 1.5 */
}

}















/* ======================
   SECTION THREE
====================== */


.service-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}



.section-three {
  background-color: var(--bg-white);
  padding: 4vw 1.45vw;
}


.section-three-grid {
  max-width: 50vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;   /* ⬅ THIS IS CRITICAL */
}



.service-number {
  position: relative;
  min-width: 2vw;
}

.service-number .hash {
  font-family: var(--font-heading);
  font-size: 1.75vw;
  color: var(--text-main);
  position: absolute;
  top: 0;
  left: -1vw;
}

.service-number .number {
  font-family: var(--font-heading);
  font-size: 2.25vw;
  color: var(--text-main);
  position: relative;
  bottom: 0;
  left: .5vw;
}



.service-title {
  font-family: var(--font-heading);
  font-size: 2.25vw;
  font-weight: normal;
  color: var(--text-main);
  margin: .9vw 0 1vw 0;
}


.service-list {
  list-style-type: disc;
  padding-left: 1.1vw;
  margin: 0 0 1.8vw 0;
}

.service-list li {
  font-family: var(--font-body);
  font-size: 1.1vw;
  color: var(--text-2);
  margin-bottom: 0.5vw;
}


.service-rate {
  margin-top: auto;              /* ⬅ locks it to the bottom */
  display: flex;
  align-items: baseline;
  gap: 0.2vw;
  font-family: var(--font-heading);
}


.service-rate .currency {
  font-size: 1.15vw;
  color: var(--money);
  position: relative;
  top: -0.6vw;
}

.service-rate .rate {
  font-size: 1.75vw;
  color: var(--text-main);;
}

.service-rate .per {
  font-size: .9vw;
  color: var(--text-4);
}

.service-image {
  display: flex;
  justify-content: center;
}

.service-image img {
  width: 15vw;
  height: auto;
}


.service-header {
  display: flex;
  align-items: baseline;
  gap: .8vw;
  margin-bottom: 1.1vw;
}



@media screen and (min-width: 20in) and (max-width: 25in) {

  /* ======================
   SECTION THREE
====================== */

.service-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section-three {
  background-color: var(--bg-white);
  padding: 4.8vw 1.74vw;
}

.section-three-grid {
  max-width: 60vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.service-number {
  position: relative;
  min-width: 2.4vw;
}

.service-number .hash {
  font-family: var(--font-heading);
  font-size: 2.1vw;
  color: var(--text-main);
  position: absolute;
  top: 0;
  left: -1.2vw;
}

.service-number .number {
  font-family: var(--font-heading);
  font-size: 2.7vw;
  color: var(--text-main);
  position: relative;
  bottom: 0;
  left: .6vw;
}

.service-title {
  font-family: var(--font-heading);
  font-size: 2.7vw;
  color: var(--text-main);
  margin: 1.08vw 0 1.2vw 0;
}

.service-list {
  list-style-type: disc;
  padding-left: 1.32vw;
  margin: 0 0 2.16vw 0;
}

.service-list li {
  font-family: var(--font-body);
  font-size: 1.32vw;
  color: var(--text-2);
  margin-bottom: 0.6vw;
}

.service-rate {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 0.24vw;
  font-family: var(--font-heading);
}

.service-rate .currency {
  font-size: 1.38vw;
  color: var(--money);
  position: relative;
  top: -0.72vw;
}

.service-rate .rate {
  font-size: 2.1vw;
  color: var(--text-main);
}

.service-rate .per {
  font-size: 1.08vw;
  color: var(--text-4);
}

.service-image {
  display: flex;
  justify-content: center;
}

.service-image img {
  width: 18vw;
  height: auto;
}

.service-header {
  display: flex;
  align-items: baseline;
  gap: .96vw; /* unchanged (not vw) */
  margin-bottom: 1.32vw;
}


}



@media screen and (min-width: 16in) and (max-width: 20in) {

  /* ======================
   SECTION THREE
====================== */

.service-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section-three {
  background-color: var(--bg-white);
  padding: 5.2vw 1.885vw;        /* was 4vw 1.45vw */
}

.section-three-grid {
  max-width: 65vw;              /* was 50vw */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;         /* ⬅ THIS IS CRITICAL */
}

.service-number {
  position: relative;
  min-width: 2.6vw;             /* was 2vw */
}

.service-number .hash {
  font-family: var(--font-heading);
  font-size: 2.275vw;           /* was 1.75vw */
  color: var(--text-main);
  position: absolute;
  top: 0;
  left: -1.3vw;                 /* was -1vw */
}

.service-number .number {
  font-family: var(--font-heading);
  font-size: 2.925vw;           /* was 2.25vw */
  color: var(--text-main);
  position: relative;
  bottom: 0;
  left: 0.65vw;                 /* was .5vw */
}

.service-title {
  font-family: var(--font-heading);
  font-size: 2.925vw;           /* was 2.25vw */
  color: var(--text-main);
  margin: 1.17vw 0 1.3vw 0;     /* was .9vw 0 1vw 0 */
}

.service-list {
  list-style-type: disc;
  padding-left: 1.43vw;         /* was 1.1vw */
  margin: 0 0 2.34vw 0;         /* was 1.8vw */
}

.service-list li {
  font-family: var(--font-body);
  font-size: 1.43vw;            /* was 1.1vw */
  color: var(--text-2);
  margin-bottom: 0.65vw;        /* was 0.5vw */
}

.service-rate {
  margin-top: auto;             /* ⬅ locks it to the bottom */
  display: flex;
  align-items: baseline;
  gap: 0.26vw;                  /* was 0.2vw */
  font-family: var(--font-heading);
}

.service-rate .currency {
  font-size: 1.495vw;           /* was 1.15vw */
  color: var(--money);
  position: relative;
  top: -0.78vw;                 /* was -0.6vw */
}

.service-rate .rate {
  font-size: 2.275vw;           /* was 1.75vw */
  color: var(--text-main);
}

.service-rate .per {
  font-size: 1.17vw;            /* was .9vw */
  color: var(--text-4);
}

.service-image {
  display: flex;
  justify-content: center;
}

.service-image img {
  width: 19.5vw;                /* was 15vw */
  height: auto;
}

.service-header {
  display: flex;
  align-items: baseline;
  gap: 1.04vw;
  margin-bottom: 1.43vw;        /* was 1.1vw */
}


}



@media screen and (min-width: 12in) and (max-width: 16in) {

  /* ======================
   SECTION THREE
====================== */

.service-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section-three {
  background-color: var(--bg-white);
  padding: 5.6vw 2.03vw;
}

.section-three-grid {
  max-width: 70vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;   /* ⬅ THIS IS CRITICAL */
}

.service-number {
  position: relative;
  min-width: 2.8vw;
}

.service-number .hash {
  font-family: var(--font-heading);
  font-size: 2.45vw;
  color: var(--text-main);
  position: absolute;
  top: 0;
  left: -1.4vw;
}

.service-number .number {
  font-family: var(--font-heading);
  font-size: 3.15vw;
  color: var(--text-main);
  position: relative;
  bottom: 0;
  left: 0.7vw;
}

.service-title {
  font-family: var(--font-heading);
  font-size: 3.15vw;
  color: var(--text-main);
  margin: 1.26vw 0 1.4vw 0;
}

.service-list {
  list-style-type: disc;
  padding-left: 1.54vw;
  margin: 0 0 2.52vw 0;
}

.service-list li {
  font-family: var(--font-body);
  font-size: 1.54vw;
  color: var(--text-2);
  margin-bottom: 0.7vw;
}

.service-rate {
  margin-top: auto;              /* ⬅ locks it to the bottom */
  display: flex;
  align-items: baseline;
  gap: 0.28vw;
  font-family: var(--font-heading);
}

.service-rate .currency {
  font-size: 1.61vw;
  color: var(--money);
  position: relative;
  top: -0.84vw;
}

.service-rate .rate {
  font-size: 2.45vw;
  color: var(--text-main);
}

.service-rate .per {
  font-size: 1.26vw;
  color: var(--text-4);
}

.service-image {
  display: flex;
  justify-content: center;
}

.service-image img {
  width: 21vw;
  height: auto;
}

.service-header {
  display: flex;
  align-items: baseline;
  gap: 1.12vw;
  margin-bottom: 1.54vw;
}


}



@media screen and (min-width: 6in) and (max-width: 11in) {

  /* ======================
   SECTION THREE
====================== */

.service-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section-three {
  background-color: var(--bg-white);
  padding: 6vw 2.175vw;              /* 4 × 1.5 | 1.45 × 1.5 */
}

.section-three-grid {
  max-width: 75vw;                   /* 50 × 1.5 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.service-number {
  position: relative;
  min-width: 3vw;                    /* 2 × 1.5 */
}

.service-number .hash {
  font-family: var(--font-heading);
  font-size: 2.625vw;                /* 1.75 × 1.5 */
  color: var(--text-main);
  position: absolute;
  top: 0;
  left: -1.5vw;                      /* -1 × 1.5 */
}

.service-number .number {
  font-family: var(--font-heading);
  font-size: 3.75vw;                /* 2.25 × 1.5 */
  color: var(--text-main);
  position: relative;
  bottom: 0;
  left: 0.75vw;                      /* 0.5 × 1.5 */
}

.service-title {
  font-family: var(--font-heading);
  font-size: 3.75vw;                /* 2.25 × 1.5 */
  color: var(--text-main);
  margin: 1.35vw 0 1.5vw 0;           /* 0.9 | 1 × 1.5 */
}

.service-list {
  list-style-type: disc;
  padding-left: 1.65vw;              /* 1.1 × 1.5 */
  margin: 0 0 2.7vw 0;                /* 1.8 × 1.5 */
}

.service-list li {
  font-family: var(--font-body);
  font-size: 2.25vw;                 /* 1.1 × 1.5 */
  color: var(--text-2);
  margin-bottom: 0.75vw;             /* 0.5 × 1.5 */
}

.service-rate {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 0.3vw;                        /* 0.2 × 1.5 */
  font-family: var(--font-heading);
}

.service-rate .currency {
  font-size: 2.5vw;                /* 1.15 × 1.5 */
  color: var(--money);
  position: relative;
  top: -0.9vw;                       /* -0.6 × 1.5 */
}

.service-rate .rate {
  font-size: 3.5vw;                /* 1.75 × 1.5 */
  color: var(--text-main);
}

.service-rate .per {
  font-size: 1.55vw;                 /* 0.9 × 1.5 */
  color: var(--text-4);
}

.service-image {
  display: flex;
  justify-content: center;
}

.service-image img {
  width: 22.5vw;                     /* 15 × 1.5 */
  height: auto;
}

.service-header {
  display: flex;
  align-items: baseline;
  gap: 1.2vw;
  margin-bottom: 1.65vw;             /* 1.1 × 1.5 */
}


}


@media screen and (min-width: 0in) and (max-width: 6in) {

    /* ======================
   SECTION THREE
====================== */

.service-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section-three {
  background-color: var(--bg-white);
  padding: 4.15vw 2.175vw;              /* 4 × 1.5 | 1.45 × 1.5 */
  padding-bottom: 12.75vw;
}

.section-three-grid {
  max-width: 80vw;                   /* 50 × 1.5 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr .5fr;
  align-items: stretch;
}

.service-number {
  position: relative;
  min-width: 3vw;                    /* 2 × 1.5 */
}

.service-number .hash {
  font-family: var(--font-heading);
  font-size: 4.625vw;                /* 1.75 × 1.5 */
  color: var(--text-main);
  position: absolute;
  top: 0;
  left: -3.15vw;                      /* -1 × 1.5 */
}

.service-number .number {
  font-family: var(--font-heading);
  font-size: 6.375vw;                /* 2.25 × 1.5 */
  color: var(--text-main);
  position: relative;
  bottom: 0;
  left: 0.75vw;                      /* 0.5 × 1.5 */
}

.service-title {
  font-family: var(--font-heading);
  font-size: 6.375vw;                /* 2.25 × 1.5 */
  color: var(--text-main);
  margin: 1.35vw 0 1.5vw 0;           /* 0.9 | 1 × 1.5 */
}

.service-list {
  list-style-type: disc;
  padding-left: 1.65vw;              /* 1.1 × 1.5 */
  margin: 0 0 2.7vw 0;                /* 1.8 × 1.5 */
}

.service-list li {
  font-family: var(--font-body);
  font-size: 3.25vw;                 /* 1.1 × 1.5 */
  color: var(--text-2);
  margin-bottom: 0.75vw;             /* 0.5 × 1.5 */
}

.service-rate {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 0.3vw;                        /* 0.2 × 1.5 */
  font-family: var(--font-heading);
}

.service-rate .currency {
  font-size: 4.25vw;                /* 1.15 × 1.5 */
  color: var(--money);
  position: relative;
  top: -0.9vw;                       /* -0.6 × 1.5 */
}

.service-rate .rate {
  font-size: 5.25vw;                /* 1.75 × 1.5 */
  color: var(--text-main);
}

.service-rate .per {
  font-size: 3.15vw;                 /* 0.9 × 1.5 */
  color: var(--text-4);
}

.service-image {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.service-image img {
  width: 22.5vw;                     /* 15 × 1.5 */
  height: 47vw;
}

.service-header {
  display: flex;
  align-items: baseline;
  gap: 1.2vw;
  margin-bottom: 1.65vw;             /* 1.1 × 1.5 */
}

}




















/* ======================
   SECTION FOUR
====================== */

.section-four {
  background-color: var(--bg-white);
  padding: 0rem 2vw;
}

.section-four-grid {
  width: 55vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15vw;
}

/* CARD */
.service-card {
  position: relative;
  background-color: var(--bg-white-2);
  border: 1px solid var(--border-2);
  border-radius: .9vw;
  padding: 1.1vw 1.1vw .8vw;
  display: flex;
  flex-direction: column;

  /* hover prep */
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.service-card:hover {
  transform: translateY(-.15vw);
  border-color: var(--border-main);
}

.card-header img {
  transition: transform 220ms ease;
}

/* HEADER */
.card-header {
  text-align: center;
  margin-bottom: 1vw;
}

.card-header img {
  width: 3.25vw;
  height: auto;
}

.card-header h3 {
  font-family: var(--font-heading);
  font-size: 2vw;
  color: var(--text-main);
  margin: 0;
  line-height: 1;
  font-weight: normal;
}

/* LIST */
.card-list {
  list-style-type: disc;
  padding-left: .5vw;
  margin: 0 0 1vw 2vw;
}

.card-list li {
  font-family: var(--font-body);
  font-size: 1.15vw;
  color: var(--text-2);
  margin-bottom: .05vw;
}

/* RATE */
.card-rate {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 0.25vw;
  font-family: var(--font-heading);
}

.card-rate .currency {
  font-size: 1.1vw;
  color: var(--money);
  position: relative;
  top: -0.5vw;
}

.card-rate .rate {
  font-size: 1.75vw;
  color: var(--text-main);
}

.card-rate .per {
  font-size: 0.9vw;
  color: var(--text-4);
}

.card-rate .month {
  font-size: 0.5vw;
  color: var(--text-4);
}

/* CARD NUMBER */
.service-card {
  position: relative; /* needed so the badge anchors to the card */
}

.card-number {
  position: absolute;
  top: .8vw;
  left: .8vw;
  font-family: var(--font-heading);
  font-size: 1.75vw;
  color: var(--text-3);
  line-height: 1;
}




@media screen and (min-width: 20in) and (max-width: 25in) {
  /* ======================
   SECTION FOUR
====================== */

.section-four {
  background-color: var(--bg-white);
  padding: 0rem 2.4vw;
}

.section-four-grid {
  width: 66vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.38vw;
}

/* CARD */
.service-card {
  position: relative;
  background-color: var(--bg-white-2);
  border: 1px solid var(--border-2);
  border-radius: 1.08vw;
  padding: 1.32vw 1.32vw 0.96vw;
  display: flex;
  flex-direction: column;

  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.service-card:hover {
  transform: translateY(-0.18vw);
  border-color: var(--border-main);
}

.card-header img {
  transition: transform 220ms ease;
}

/* HEADER */
.card-header {
  text-align: center;
  margin-bottom: 1vw;
}

.card-header img {
  width: 3.9vw;
  height: auto;
}

.card-header h3 {
  font-family: var(--font-heading);
  font-size: 2.4vw;
  color: var(--text-main);
  margin: 0;
}

/* LIST */
.card-list {
  list-style-type: disc;
  padding-left: 0.6vw;
  margin: 0 0 1.2vw 2.4vw;
}

.card-list li {
  font-family: var(--font-body);
  font-size: 1.38vw;
  color: var(--text-2);
  margin-bottom: 0.06vw;
}

/* RATE */
.card-rate {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 0.3vw;
  font-family: var(--font-heading);
}

.card-rate .currency {
  font-size: 1.32vw;
  color: var(--money);
  position: relative;
  top: -0.6vw;
}

.card-rate .rate {
  font-size: 2.1vw;
  color: var(--text-main);
}

.card-rate .per {
  font-size: 1.08vw;
  color: var(--text-4);
}

.card-rate .month {
  font-size: 0.6vw;
  color: var(--text-4);
}

/* CARD NUMBER */
.service-card {
  position: relative;
}

.card-number {
  position: absolute;
  top: 0.96vw;
  left: 0.96vw;
  font-family: var(--font-heading);
  font-size: 2.1vw;
  color: var(--text-3);
  line-height: 1;
}

}



@media screen and (min-width: 16in) and (max-width: 20in) {
  /* ======================
   SECTION FOUR
====================== */

.section-four {
  background-color: var(--bg-white);
  padding: 0rem 2.6vw;            /* was 2vw */
}

.section-four-grid {
  width: 71.5vw;                  /* was 55vw */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.495vw;                   /* was 1.15vw */
}

/* CARD */
.service-card {
  position: relative;
  background-color: var(--bg-white-2);
  border: 1px solid var(--border-2);
  border-radius: 1.17vw;          /* was .9vw */
  padding: 1.43vw 1.43vw 1.04vw;  /* was 1.1vw 1.1vw .8vw */
  display: flex;
  flex-direction: column;

  /* hover prep */
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.service-card:hover {
  transform: translateY(-0.195vw); /* was -.15vw */
  border-color: var(--border-main);
}

.card-header img {
  transition: transform 220ms ease;
}

/* HEADER */
.card-header {
  text-align: center;
  margin-bottom: 1vw;          /* was 1vw */
}

.card-header img {
  width: 4.225vw;                /* was 3.25vw */
  height: auto;
}

.card-header h3 {
  font-family: var(--font-heading);
  font-size: 2.6vw;              /* was 2vw */
  color: var(--text-main);
  margin: 0;
}

/* LIST */
.card-list {
  list-style-type: disc;
  padding-left: 0.65vw;          /* was .5vw */
  margin: 0 0 1.3vw 2.6vw;       /* was 1vw 2vw */
}

.card-list li {
  font-family: var(--font-body);
  font-size: 1.495vw;            /* was 1.15vw */
  color: var(--text-2);
  margin-bottom: 0.065vw;        /* was .05vw */
}

/* RATE */
.card-rate {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 0.325vw;                  /* was 0.25vw */
  font-family: var(--font-heading);
}

.card-rate .currency {
  font-size: 1.43vw;             /* was 1.1vw */
  color: var(--money);
  position: relative;
  top: -0.65vw;                  /* was -0.5vw */
}

.card-rate .rate {
  font-size: 2.275vw;            /* was 1.75vw */
  color: var(--text-main);
}

.card-rate .per {
  font-size: 1.17vw;             /* was 0.9vw */
  color: var(--text-4);
}

.card-rate .month {
  font-size: 0.65vw;             /* was 0.5vw */
  color: var(--text-4);
}

/* CARD NUMBER */
.service-card {
  position: relative; /* needed so the badge anchors to the card */
}

.card-number {
  position: absolute;
  top: 1.04vw;                    /* was .8vw */
  left: 1.04vw;                   /* was .8vw */
  font-family: var(--font-heading);
  font-size: 2.275vw;             /* was 1.75vw */
  color: var(--text-3);
  line-height: 1;
}

}


@media screen and (min-width: 12in) and (max-width: 16in) {
  /* ======================
   SECTION FOUR
====================== */

.section-four {
  background-color: var(--bg-white);
  padding: 0rem 2.8vw;
}

.section-four-grid {
  width: 77vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.61vw;
}

/* CARD */
.service-card {
  position: relative;
  background-color: var(--bg-white-2);
  border: 1px solid var(--border-2);
  border-radius: 1.26vw;
  padding: 1.54vw 1.54vw 1.12vw;
  display: flex;
  flex-direction: column;

  /* hover prep */
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.service-card:hover {
  transform: translateY(-0.21vw);
  border-color: var(--border-main);
}

.card-header img {
  transition: transform 220ms ease;
}

/* HEADER */
.card-header {
  text-align: center;
  margin-bottom: 1vw;
}

.card-header img {
  width: 4.55vw;
  height: auto;
}

.card-header h3 {
  font-family: var(--font-heading);
  font-size: 2.8vw;
  color: var(--text-main);
  margin: 0;
}

/* LIST */
.card-list {
  list-style-type: disc;
  padding-left: 0.7vw;
  margin: 0 0 1.4vw 2.8vw;
}

.card-list li {
  font-family: var(--font-body);
  font-size: 1.61vw;
  color: var(--text-2);
  margin-bottom: 0.07vw;
}

/* RATE */
.card-rate {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 0.35vw;
  font-family: var(--font-heading);
}

.card-rate .currency {
  font-size: 1.54vw;
  color: var(--money);
  position: relative;
  top: -0.7vw;
}

.card-rate .rate {
  font-size: 2.45vw;
  color: var(--text-main);
}

.card-rate .per {
  font-size: 1.26vw;
  color: var(--text-4);
}

.card-rate .month {
  font-size: 0.7vw;
  color: var(--text-4);
}

/* CARD NUMBER */
.service-card {
  position: relative; /* needed so the badge anchors to the card */
}

.card-number {
  position: absolute;
  top: 1.12vw;
  left: 1.12vw;
  font-family: var(--font-heading);
  font-size: 2.45vw;
  color: var(--text-3);
  line-height: 1;
}

}


@media screen and (min-width: 6in) and (max-width: 11in) {
  /* ======================
   SECTION FOUR
====================== */

.section-four {
  background-color: var(--bg-white);
  padding: 0rem 3vw;                /* 2 × 1.5 */
}

.section-four-grid {
  width: 82.5vw;                    /* 55 × 1.5 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.725vw;                     /* 1.15 × 1.5 */
}

/* CARD */
.service-card {
  position: relative;
  background-color: var(--bg-white-2);
  border: 1px solid var(--border-2);
  border-radius: 1.35vw;            /* 0.9 × 1.5 */
  padding: 1.65vw 1.65vw 1.2vw;     /* 1.1 | 1.1 | 0.8 × 1.5 */
  display: flex;
  flex-direction: column;

  /* hover prep */
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.service-card:hover {
  transform: translateY(-0.225vw);  /* -0.15 × 1.5 */
  border-color: var(--border-main);
}

.card-header img {
  transition: transform 220ms ease;
}

/* HEADER */
.card-header {
  text-align: center;
  margin-bottom: 1vw;             /* 1 × 1.5 */
}

.card-header img {
  width: 4.875vw;                   /* 3.25 × 1.5 */
  height: auto;
}

.card-header h3 {
  font-family: var(--font-heading);
  font-size: 3vw;                   /* 2 × 1.5 */
  color: var(--text-main);
  margin: 0;
}

/* LIST */
.card-list {
  list-style-type: disc;
  padding-left: 0.75vw;             /* 0.5 × 1.5 */
  margin: 0 0 1.5vw 3vw;             /* 1 | 2 × 1.5 */
}

.card-list li {
  font-family: var(--font-body);
  font-size: 1.725vw;               /* 1.15 × 1.5 */
  color: var(--text-2);
  margin-bottom: 0.075vw;           /* 0.05 × 1.5 */
}

/* RATE */
.card-rate {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 0.375vw;                     /* 0.25 × 1.5 */
  font-family: var(--font-heading);
}

.card-rate .currency {
  font-size: 1.65vw;                /* 1.1 × 1.5 */
  color: var(--money);
  position: relative;
  top: -0.75vw;                     /* -0.5 × 1.5 */
}

.card-rate .rate {
  font-size: 2.625vw;               /* 1.75 × 1.5 */
  color: var(--text-main);
}

.card-rate .per {
  font-size: 1.35vw;                /* 0.9 × 1.5 */
  color: var(--text-4);
}

.card-rate .month {
  font-size: 0.75vw;                /* 0.5 × 1.5 */
  color: var(--text-4);
}

/* CARD NUMBER */
.service-card {
  position: relative;
}

.card-number {
  position: absolute;
  top: 1.2vw;                       /* 0.8 × 1.5 */
  left: 1.2vw;                      /* 0.8 × 1.5 */
  font-family: var(--font-heading);
  font-size: 2.625vw;               /* 1.75 × 1.5 */
  color: var(--text-3);
  line-height: 1;
}

}


@media screen and (min-width: 0in) and (max-width: 6in) {
    /* ======================
   SECTION FOUR
====================== */

.section-four {
  background-color: var(--bg-white);
  padding: 0rem 3vw;                /* 2 × 1.5 */
}

.section-four-grid {
  width: 82.5vw;                    /* 55 × 1.5 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 4.725vw;                     /* 1.15 × 1.5 */
}

/* CARD */
.service-card {
  position: relative;
  background-color: var(--bg-white-2);
  border: 1px solid var(--border-2);
  border-radius: 1.35vw;            /* 0.9 × 1.5 */
  padding: 3.65vw 1.65vw 3.65vw;     /* 1.1 | 1.1 | 0.8 × 1.5 */
  display: flex;
  flex-direction: column;

  /* hover prep */
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.service-card:hover {
  transform: translateY(-0.225vw);  /* -0.15 × 1.5 */
  border-color: var(--border-main);
}

.card-header img {
  transition: transform 220ms ease;
}

/* HEADER */
.card-header {
  text-align: center;
  margin-bottom: 1vw;             /* 1 × 1.5 */
}

.card-header img {
  width: 6.875vw;                   /* 3.25 × 1.5 */
  height: auto;
}

.card-header h3 {
  font-family: var(--font-heading);
  font-size: 5vw;                   /* 2 × 1.5 */
  color: var(--text-main);
  margin: 0;
  margin-bottom: 2.5vw;
}

/* LIST */
.card-list {
  list-style-type: disc;
  padding-left: 2.75vw;             /* 0.5 × 1.5 */
  margin: 0 0 1.5vw 3vw;             /* 1 | 2 × 1.5 */
  margin-bottom: 3vw;
}

.card-list li {
  font-family: var(--font-body);
  font-size: 3.725vw;               /* 1.15 × 1.5 */
  color: var(--text-2);
  margin-bottom: 0.075vw;           /* 0.05 × 1.5 */
}

/* RATE */
.card-rate {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 0.375vw;                     /* 0.25 × 1.5 */
  font-family: var(--font-heading);
  padding-left: 2.75vw;
}

.card-rate .currency {
  font-size: 3.65vw;                /* 1.1 × 1.5 */
  color: var(--money);
  position: relative;
  top: -0.75vw;                     /* -0.5 × 1.5 */
}

.card-rate .rate {
  font-size: 4.625vw;               /* 1.75 × 1.5 */
  color: var(--text-main);
}

.card-rate .per {
  font-size: 3.25vw;                /* 0.9 × 1.5 */
  color: var(--text-4);
}

.card-rate .month {
  font-size: 2.25vw;                /* 0.5 × 1.5 */
  color: var(--text-4);
}

/* CARD NUMBER */
.service-card {
  position: relative;
}

.card-number {
  position: absolute;
  top: 2.2vw;                       /* 0.8 × 1.5 */
  left: 2.2vw;                      /* 0.8 × 1.5 */
  font-family: var(--font-heading);
  font-size: 4.75vw;               /* 1.75 × 1.5 */
  color: var(--text-3);
  line-height: 1;
}
}















/* ======================
   SECTION FIVE – TECH STACK
====================== */

.section-five {
  background-color: var(--bg-white);
  margin-top: 6vw;
  margin-bottom: 6vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* HEADER */
.section-five-header {
  text-align: center;
  margin-bottom: 0vw;
}

.toolbox-pill {
  display: inline-block;
  padding: 0.2vw .8vw;
  padding-bottom: .3vw;
  border-radius: 999px;
  border: 1px solid var(--toolbox-border);
  background-color: var(--bg-white-2);
  font-family: var(--font-heading);
  font-size: 0.9vw;
  color: var(--text-4);
  text-align: center;
  margin-bottom: .2vw;
}

.section-five-title {
  font-family: var(--font-heading);
  font-size: 3.25vw;
  color: var(--text-main);
  margin: 0;
  font-weight: normal;
  line-height: 1.1;
}

/* MARQUEE CONTAINER */
.tech-grid {
  position: relative;
  width: 55vw;
  overflow: hidden;
  margin-top: 2vw;
}

/* MOVING RAIL */
.tech-grid-inner {
  display: flex;
  gap: 1.5vw;
  width: max-content;
  will-change: transform;
}

/* ITEM */
.tech-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 220ms ease;
}

.tech-item:hover {
  transform: translateY(-.1vw);
}

/* LOGO */
.tech-logo {
  height: 5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.2vw;
}

.tech-logo img {
  height: 90%;
  width: auto;
}

/* LABEL */
.tech-label {
  font-family: var(--font-body);
  font-size: 0.95vw;
  color: var(--text-4);
}

/* EDGE FADE / BLUR */
.tech-grid::before,
.tech-grid::after {
  content: "";
  position: absolute;
  top: 0;
  width: 8vw;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.tech-grid::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--bg-white) 20%,
    rgba(255,255,255,0.6) 55%,
    transparent
  );
}

.tech-grid::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--bg-white) 20%,
    rgba(255,255,255,0.6) 55%,
    transparent
  );
}


@media screen and (min-width: 20in) and (max-width: 25in) {
  /* ======================
   SECTION FIVE – TECH STACK
====================== */

.section-five {
  background-color: var(--bg-white);
  margin-top: 7.2vw;
  margin-bottom: 7.2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* HEADER */
.section-five-header {
  text-align: center;
  margin-bottom: 0vw;
}

.toolbox-pill {
  display: inline-block;
  padding: 0.24vw .96vw;
  padding-bottom: .36vw;
  border-radius: 999px;
  border: 1px solid var(--toolbox-border);
  background-color: var(--bg-white-2);
  font-family: var(--font-heading);
  font-size: 1.08vw;
  color: var(--text-4);
  text-align: center;
  margin-bottom: .24vw;
}

.section-five-title {
  font-family: var(--font-heading);
  font-size: 3.9vw;
  color: var(--text-main);
  margin: 0;
  font-weight: normal;
  line-height: 1.1;
}

/* MARQUEE CONTAINER */
.tech-grid {
  position: relative;
  width: 66vw;
  overflow: hidden;
  margin-top: 2.4vw;
}

/* MOVING RAIL */
.tech-grid-inner {
  display: flex;
  gap: 1.8vw;
  width: max-content;
  will-change: transform;
}

/* ITEM */
.tech-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 220ms ease;
}

.tech-item:hover {
  transform: translateY(-.12vw);
}

/* LOGO */
.tech-logo {
  height: 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.24vw;
}

.tech-logo img {
  height: 90%;
  width: auto;
}

/* LABEL */
.tech-label {
  font-family: var(--font-body);
  font-size: 1.14vw;
  color: var(--text-4);
}

/* EDGE FADE / BLUR */
.tech-grid::before,
.tech-grid::after {
  content: "";
  position: absolute;
  top: 0;
  width: 9.6vw;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.tech-grid::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--bg-white) 20%,
    rgba(255,255,255,0.6) 55%,
    transparent
  );
}

.tech-grid::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--bg-white) 20%,
    rgba(255,255,255,0.6) 55%,
    transparent
  );
}

}


@media screen and (min-width: 16in) and (max-width: 20in) {
  /* ======================
   SECTION FIVE – TECH STACK
====================== */

.section-five {
  background-color: var(--bg-white);
  margin-top: 7.8vw;            /* was 6vw */
  margin-bottom: 7.8vw;         /* was 6vw */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* HEADER */
.section-five-header {
  text-align: center;
  margin-bottom: 0vw;           /* was 0vw */
}

.toolbox-pill {
  display: inline-block;
  padding: 0.26vw 1.04vw;       /* was 0.2vw .8vw */
  padding-bottom: 0.39vw;       /* was .3vw */
  border-radius: 999px;
  border: 1px solid var(--toolbox-border);
  background-color: var(--bg-white-2);
  font-family: var(--font-heading);
  font-size: 1.17vw;            /* was 0.9vw */
  color: var(--text-4);
  text-align: center;
  margin-bottom: 0.26vw;        /* was .2vw */
}

.section-five-title {
  font-family: var(--font-heading);
  font-size: 4.225vw;           /* was 3.25vw */
  color: var(--text-main);
  margin: 0;
  font-weight: normal;
  line-height: 1.1;
}

/* MARQUEE CONTAINER */
.tech-grid {
  position: relative;
  width: 71.5vw;                /* was 55vw */
  overflow: hidden;
  margin-top: 2.6vw;            /* was 2vw */
}

/* MOVING RAIL */
.tech-grid-inner {
  display: flex;
  gap: 1.95vw;                  /* was 1.5vw */
  width: max-content;
  will-change: transform;
}

/* ITEM */
.tech-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 220ms ease;
}

.tech-item:hover {
  transform: translateY(-0.13vw); /* was -.1vw */
}

/* LOGO */
.tech-logo {
  height: 6.5vw;                /* was 5vw */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.26vw;        /* was 0.2vw */
}

.tech-logo img {
  height: 90%;
  width: auto;
}

/* LABEL */
.tech-label {
  font-family: var(--font-body);
  font-size: 1.235vw;           /* was 0.95vw */
  color: var(--text-4);
}

/* EDGE FADE / BLUR */
.tech-grid::before,
.tech-grid::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10.4vw;                /* was 8vw */
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.tech-grid::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--bg-white) 20%,
    rgba(255,255,255,0.6) 55%,
    transparent
  );
}

.tech-grid::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--bg-white) 20%,
    rgba(255,255,255,0.6) 55%,
    transparent
  );
}

}


@media screen and (min-width: 12in) and (max-width: 16in) {
/* ======================
   SECTION FIVE – TECH STACK
====================== */

.section-five {
  background-color: var(--bg-white);
  margin-top: 8.4vw;
  margin-bottom: 8.4vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* HEADER */
.section-five-header {
  text-align: center;
  margin-bottom: 0vw;
}

.toolbox-pill {
  display: inline-block;
  padding: 0.28vw 1.12vw;
  padding-bottom: 0.42vw;
  border-radius: 999px;
  border: 1px solid var(--toolbox-border);
  background-color: var(--bg-white-2);
  font-family: var(--font-heading);
  font-size: 1.26vw;
  color: var(--text-4);
  text-align: center;
  margin-bottom: 0.28vw;
}

.section-five-title {
  font-family: var(--font-heading);
  font-size: 4.55vw;
  color: var(--text-main);
  margin: 0;
  font-weight: normal;
  line-height: 1.1;
}

/* MARQUEE CONTAINER */
.tech-grid {
  position: relative;
  width: 77vw;
  overflow: hidden;
  margin-top: 2.8vw;
}

/* MOVING RAIL */
.tech-grid-inner {
  display: flex;
  gap: 2.1vw;
  width: max-content;
  will-change: transform;
}

/* ITEM */
.tech-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 220ms ease;
}

.tech-item:hover {
  transform: translateY(-0.14vw);
}

/* LOGO */
.tech-logo {
  height: 7vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.28vw;
}

.tech-logo img {
  height: 90%;
  width: auto;
}

/* LABEL */
.tech-label {
  font-family: var(--font-body);
  font-size: 1.33vw;
  color: var(--text-4);
}

/* EDGE FADE / BLUR */
.tech-grid::before,
.tech-grid::after {
  content: "";
  position: absolute;
  top: 0;
  width: 11.2vw;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.tech-grid::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--bg-white) 20%,
    rgba(255,255,255,0.6) 55%,
    transparent
  );
}

.tech-grid::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--bg-white) 20%,
    rgba(255,255,255,0.6) 55%,
    transparent
  );
}

}


@media screen and (min-width: 6in) and (max-width: 11in) {
  /* ======================
   SECTION FIVE – TECH STACK
====================== */

.section-five {
  background-color: var(--bg-white);
  margin-top: 9vw;                   /* 6 × 1.5 */
  margin-bottom: 9vw;                /* 6 × 1.5 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* HEADER */
.section-five-header {
  text-align: center;
  margin-bottom: 0vw;                /* 0 × 1.5 (unchanged visually) */
}

.toolbox-pill {
  display: inline-block;
  padding: 0.3vw 1.2vw;              /* 0.2 × 1.5 | 0.8 × 1.5 */
  padding-bottom: 0.45vw;            /* 0.3 × 1.5 */
  border-radius: 999px;
  border: 1px solid var(--toolbox-border);
  background-color: var(--bg-white-2);
  font-family: var(--font-heading);
  font-size: 1.7vw;                 /* 0.9 × 1.5 */
  color: var(--text-4);
  text-align: center;
  margin-bottom: 0.3vw;              /* 0.2 × 1.5 */
}

.section-five-title {
  font-family: var(--font-heading);
  font-size: 5.5vw;                /* 3.25 × 1.5 */
  color: var(--text-main);
  margin: 0;
  font-weight: normal;
}

/* MARQUEE CONTAINER */
.tech-grid {
  position: relative;
  width: 82.5vw;                     /* 55 × 1.5 */
  overflow: hidden;
  margin-top: 2vw;                   /* 2 × 1.5 */
}

/* MOVING RAIL */
.tech-grid-inner {
  display: flex;
  gap: 2.25vw;                       /* 1.5 × 1.5 */
  width: max-content;
  will-change: transform;
}

/* ITEM */
.tech-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 220ms ease;
}

.tech-item:hover {
  transform: translateY(-0.15vw);    /* -0.1 × 1.5 */
}

/* LOGO */
.tech-logo {
  height: 7.5vw;                     /* 5 × 1.5 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.3vw;              /* 0.2 × 1.5 */
}

.tech-logo img {
  height: 90%;
  width: auto;
}

/* LABEL */
.tech-label {
  font-family: var(--font-body);
  font-size: 1.425vw;                /* 0.95 × 1.5 */
  color: var(--text-4);
}

/* EDGE FADE / BLUR */
.tech-grid::before,
.tech-grid::after {
  content: "";
  position: absolute;
  top: 0;
  width: 12vw;                       /* 8 × 1.5 */
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.tech-grid::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--bg-white) 20%,
    rgba(255,255,255,0.6) 55%,
    transparent
  );
}

.tech-grid::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--bg-white) 20%,
    rgba(255,255,255,0.6) 55%,
    transparent
  );
}

}



@media screen and (min-width: 0in) and (max-width: 6in) {
    /* ======================
   SECTION FIVE – TECH STACK
====================== */

.section-five {
  background-color: var(--bg-white);
  margin-top: 12vw;                   /* 6 × 1.5 */
  margin-bottom: 12vw;                /* 6 × 1.5 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* HEADER */
.section-five-header {
  text-align: center;
  margin-bottom: 0vw;                /* 0 × 1.5 (unchanged visually) */
}

.toolbox-pill {
  display: inline-block;
  padding: 0.4vw 3.1vw;              /* 0.2 × 1.5 | 0.8 × 1.5 */
  padding-bottom: .9vw;            /* 0.3 × 1.5 */
  border-radius: 999px;
  border: 1px solid var(--toolbox-border);
  background-color: var(--bg-white-2);
  font-family: var(--font-heading);
  font-size: 3.15vw;                 /* 0.9 × 1.5 */
  color: var(--text-4);
  text-align: center;
  margin-bottom: 0.2vw;              /* 0.2 × 1.5 */
}

.section-five-title {
  font-family: var(--font-heading);
  font-size: 8.75vw;                /* 3.25 × 1.5 */
  color: var(--text-main);
  margin: 0;
  line-height: 1.3;
  font-weight: normal;
}

/* MARQUEE CONTAINER */
.tech-grid {
  position: relative;
  width: 82.5vw;                     /* 55 × 1.5 */
  overflow: hidden;
  margin-top: 2.5vw;                   /* 2 × 1.5 */
}

/* MOVING RAIL */
.tech-grid-inner {
  display: flex;
  gap: 4.25vw;                       /* 1.5 × 1.5 */
  width: max-content;
  will-change: transform;
}

/* ITEM */
.tech-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 220ms ease;
}

.tech-item:hover {
  transform: translateY(-0.15vw);    /* -0.1 × 1.5 */
}

/* LOGO */
.tech-logo {
  height: 7.5vw;                     /* 5 × 1.5 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9vw;              /* 0.2 × 1.5 */
}

.tech-logo img {
  height: 110%;
  width: auto;
}

/* LABEL */
.tech-label {
  font-family: var(--font-body);
  font-size: 3vw;                /* 0.95 × 1.5 */
  color: var(--text-4);
}

/* EDGE FADE / BLUR */
.tech-grid::before,
.tech-grid::after {
  content: "";
  position: absolute;
  top: 0;
  width: 12vw;                       /* 8 × 1.5 */
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.tech-grid::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--bg-white) 20%,
    rgba(255,255,255,0.6) 55%,
    transparent
  );
}

.tech-grid::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--bg-white) 20%,
    rgba(255,255,255,0.6) 55%,
    transparent
  );
}
}


















/* ======================
   SECTION SEVEN – LEADERSHIP
====================== */

.section-seven {
  background-color: var(--bg-white);
  padding: 4vw 1vw 0vw;
  padding-bottom: 0px;
}

/* HEADING */
.section-seven-heading {
  text-align: center;
  margin-bottom: 3vw;
}

.seven-eyebrow {
  font-family: var(--font-heading);
  font-size: 2vw;
  color: var(--text-3);
  margin: 0px;
  font-weight: normal;
}

.seven-title {
  font-family: var(--font-heading);
  font-size: 4vw;
  color: var(--text-main);
  margin: 0;
  line-height: 1;
  font-weight: normal;
}

/* IMAGE + META */
.leader-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2vw;
}

.leader-row {
  display: flex;
  align-items: center;     /* ✅ vertically centers name/title to image */
  gap: 1vw;
}

.leader-img {
  width: 12vw;
  height: auto;
  display: block;
}

.leader-meta {
  display: flex;
  flex-direction: column;
  align-items: center;   /* ✅ centers name + title */
  gap: 0.1vw;
}

.leader-name {
  font-family: var(--font-heading);
  font-size: 1.5vw;
  color: var(--text-main);
  text-align: center;
}

.leader-role {
  font-family: var(--font-heading);
  font-size: 0.95vw;
  color: var(--text-3);
  text-align: center;
}

/* CARDS */
.leader-cards {
  width: 55vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25vw;
}

.leader-card {
  border: .05vw solid var(--border-2);
  background-color: var(--bg-white-2);
  border-radius: .6vw;
  padding: .8vw 1vw;
  text-align: center;

  transition: transform 200ms ease;
}


.leader-card:hover {
  transform: translateY(-.2vw);
}


.leader-card h3 {
  font-family: var(--font-heading);
  font-size: 1.25vw;
  color: var(--text-main);
  margin: 0 0 .3vw 0;
  font-weight: normal;
}

.leader-card p {
  font-family: var(--font-body);
  font-size: 0.9vw;
  line-height: 1.55;
  color: var(--text-4);
  margin: 0;
}


@media screen and (min-width: 20in) and (max-width: 25in) {
  /* ======================
   SECTION SEVEN – LEADERSHIP
====================== */

.section-seven {
  background-color: var(--bg-white);
  padding: 4.8vw 1.2vw 0vw;
  padding-bottom: 0px;
}

/* HEADING */
.section-seven-heading {
  text-align: center;
  margin-bottom: 3.6vw;
}

.seven-eyebrow {
  font-family: var(--font-heading);
  font-size: 2.4vw;
  color: var(--text-3);
  margin: 0px;
  font-weight: normal;
}

.seven-title {
  font-family: var(--font-heading);
  font-size: 4.8vw;
  color: var(--text-main);
  margin: 0;
  line-height: 1;
  font-weight: normal;
}

/* IMAGE + META */
.leader-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2.4vw;
}

.leader-row {
  display: flex;
  align-items: center;
  gap: 1.2vw;
}

.leader-img {
  width: 14.4vw;
  height: auto;
  display: block;
}

.leader-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12vw;
}

.leader-name {
  font-family: var(--font-heading);
  font-size: 1.8vw;
  color: var(--text-main);
  text-align: center;
}

.leader-role {
  font-family: var(--font-heading);
  font-size: 1.14vw;
  color: var(--text-3);
  text-align: center;
}

/* CARDS */
.leader-cards {
  width: 66vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5vw;
}

.leader-card {
  border: .06vw solid var(--border-2);
  background-color: var(--bg-white-2);
  border-radius: .72vw;
  padding: .96vw 1.2vw;
  text-align: center;

  transition: transform 200ms ease;
}

.leader-card:hover {
  transform: translateY(-.24vw);
}

.leader-card h3 {
  font-family: var(--font-heading);
  font-size: 1.5vw;
  color: var(--text-main);
  margin: 0 0 .36vw 0;
  font-weight: normal;
}

.leader-card p {
  font-family: var(--font-body);
  font-size: 1.08vw;
  line-height: 1.55;
  color: var(--text-4);
  margin: 0;
}

}

@media screen and (min-width: 16in) and (max-width: 20in) {
  /* ======================
   SECTION SEVEN – LEADERSHIP
====================== */

.section-seven {
  background-color: var(--bg-white);
  padding: 5.2vw 1.3vw 0vw;      /* was 4vw 1vw 0vw */
  padding-bottom: 0px;
}

/* HEADING */
.section-seven-heading {
  text-align: center;
  margin-bottom: 3.9vw;         /* was 3vw */
}

.seven-eyebrow {
  font-family: var(--font-heading);
  font-size: 2.6vw;             /* was 2vw */
  color: var(--text-3);
  margin: 0px;
  font-weight: normal;
}

.seven-title {
  font-family: var(--font-heading);
  font-size: 5.2vw;             /* was 4vw */
  color: var(--text-main);
  margin: 0;
  line-height: 1;
  font-weight: normal;
}

/* IMAGE + META */
.leader-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2.6vw;         /* was 2vw */
}

.leader-row {
  display: flex;
  align-items: center;          /* ✅ vertically centers name/title to image */
  gap: 1.3vw;                   /* was 1vw */
}

.leader-img {
  width: 15.6vw;                /* was 12vw */
  height: auto;
  display: block;
}

.leader-meta {
  display: flex;
  flex-direction: column;
  align-items: center;          /* ✅ centers name + title */
  gap: 0.13vw;                  /* was 0.1vw */
}

.leader-name {
  font-family: var(--font-heading);
  font-size: 1.95vw;            /* was 1.5vw */
  color: var(--text-main);
  text-align: center;
}

.leader-role {
  font-family: var(--font-heading);
  font-size: 1.235vw;           /* was 0.95vw */
  color: var(--text-3);
  text-align: center;
}

/* CARDS */
.leader-cards {
  width: 71.5vw;                /* was 55vw */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.625vw;                 /* was 1.25vw */
}

.leader-card {
  border: 0.065vw solid var(--border-2); /* was .05vw */
  background-color: var(--bg-white-2);
  border-radius: 0.78vw;        /* was .6vw */
  padding: 1.04vw 1.3vw;        /* was .8vw 1vw */
  text-align: center;

  transition: transform 200ms ease;
}

.leader-card:hover {
  transform: translateY(-0.26vw); /* was -.2vw */
}

.leader-card h3 {
  font-family: var(--font-heading);
  font-size: 1.625vw;           /* was 1.25vw */
  color: var(--text-main);
  margin: 0 0 0.39vw 0;         /* was .3vw */
  font-weight: normal;
}

.leader-card p {
  font-family: var(--font-body);
  font-size: 1.17vw;            /* was 0.9vw */
  line-height: 1.55;
  color: var(--text-4);
  margin: 0;
}

}

@media screen and (min-width: 12in) and (max-width: 16in) {
  /* ======================
   SECTION SEVEN – LEADERSHIP
====================== */

.section-seven {
  background-color: var(--bg-white);
  padding: 5.6vw 1.4vw 0vw;
  padding-bottom: 0px;
}

/* HEADING */
.section-seven-heading {
  text-align: center;
  margin-bottom: 4.2vw;
}

.seven-eyebrow {
  font-family: var(--font-heading);
  font-size: 2.8vw;
  color: var(--text-3);
  margin: 0px;
  font-weight: normal;
}

.seven-title {
  font-family: var(--font-heading);
  font-size: 5.6vw;
  color: var(--text-main);
  margin: 0;
  line-height: 1;
  font-weight: normal;
}

/* IMAGE + META */
.leader-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2.8vw;
}

.leader-row {
  display: flex;
  align-items: center;     /* ✅ vertically centers name/title to image */
  gap: 1.4vw;
}

.leader-img {
  width: 16.8vw;
  height: auto;
  display: block;
}

.leader-meta {
  display: flex;
  flex-direction: column;
  align-items: center;   /* ✅ centers name + title */
  gap: 0.14vw;
}

.leader-name {
  font-family: var(--font-heading);
  font-size: 2.1vw;
  color: var(--text-main);
  text-align: center;
}

.leader-role {
  font-family: var(--font-heading);
  font-size: 1.33vw;
  color: var(--text-3);
  text-align: center;
}

/* CARDS */
.leader-cards {
  width: 77vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75vw;
}

.leader-card {
  border: 0.07vw solid var(--border-2);
  background-color: var(--bg-white-2);
  border-radius: 0.84vw;
  padding: 1.12vw 1.4vw;
  text-align: center;

  transition: transform 200ms ease;
}

.leader-card:hover {
  transform: translateY(-0.28vw);
}

.leader-card h3 {
  font-family: var(--font-heading);
  font-size: 1.75vw;
  color: var(--text-main);
  margin: 0 0 0.42vw 0;
  font-weight: normal;
}

.leader-card p {
  font-family: var(--font-body);
  font-size: 1.26vw;
  line-height: 1.55;
  color: var(--text-4);
  margin: 0;
}

}


@media screen and (min-width: 6in) and (max-width: 11in) {
  /* ======================
   SECTION SEVEN – LEADERSHIP
====================== */

.section-seven {
  background-color: var(--bg-white);
  padding: 6vw 1.5vw 0vw;            /* 4 | 1 | 0 × 1.5 */
  padding-bottom: 0px;
}

/* HEADING */
.section-seven-heading {
  text-align: center;
  margin-bottom: 4.5vw;              /* 3 × 1.5 */
}

.seven-eyebrow {
  font-family: var(--font-heading);
  font-size: 3vw;                    /* 2 × 1.5 */
  color: var(--text-3);
  margin: 0px;
  font-weight: normal;
}

.seven-title {
  font-family: var(--font-heading);
  font-size: 6vw;                    /* 4 × 1.5 */
  color: var(--text-main);
  margin: 0;
  line-height: 1;
  font-weight: normal;
}

/* IMAGE + META */
.leader-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 3vw;                /* 2 × 1.5 */
}

.leader-row {
  display: flex;
  align-items: center;
  gap: 1.5vw;                        /* 1 × 1.5 */
}

.leader-img {
  width: 22vw;                       /* 12 × 1.5 */
  height: auto;
  display: block;
}

.leader-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15vw;                       /* 0.1 × 1.5 */
}

.leader-name {
  font-family: var(--font-heading);
  font-size: 2.95vw;                 /* 1.5 × 1.5 */
  color: var(--text-main);
  text-align: center;
}

.leader-role {
  font-family: var(--font-heading);
  font-size: 1.85vw;                /* 0.95 × 1.5 */
  color: var(--text-3);
  text-align: center;
}

/* CARDS */
.leader-cards {
  width: 82.5vw;                     /* 55 × 1.5 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2.5vw;                      /* 1.25 × 1.5 */
}

.leader-card {
  border: 0.075vw solid var(--border-2); /* 0.05 × 1.5 */
  background-color: var(--bg-white-2);
  border-radius: 0.9vw;              /* 0.6 × 1.5 */
  padding: 3.5vw 4.5vw;              /* 0.8 | 1 × 1.5 */
  text-align: center;

  transition: transform 200ms ease;
}

.leader-card:hover {
  transform: translateY(-0.3vw);     /* 0.2 × 1.5 */
}

.leader-card h3 {
  font-family: var(--font-heading);
  font-size: 3.5vw;                /* 1.25 × 1.5 */
  color: var(--text-main);
  margin: 0 0 0.45vw 0;              /* 0.3 × 1.5 */
  font-weight: normal;
}

.leader-card p {
  font-family: var(--font-body);
  font-size: 2.35vw;                 /* 0.9 × 1.5 */
  line-height: 1.55;
  color: var(--text-4);
  margin: 0;
}

}


@media screen and (min-width: 0in) and (max-width: 6in) {

    /* ======================
   SECTION SEVEN – LEADERSHIP
====================== */

.section-seven {
  background-color: var(--bg-white);
  padding: 6vw 1.5vw 0vw;            /* 4 | 1 | 0 × 1.5 */
  padding-bottom: 0px;
}

/* HEADING */
.section-seven-heading {
  text-align: center;
  margin-bottom: 4.5vw;              /* 3 × 1.5 */
}

.seven-eyebrow {
  font-family: var(--font-heading);
  font-size: 6vw;                    /* 2 × 1.5 */
  color: var(--text-3);
  margin: 0px;
  font-weight: normal;
}

.seven-title {
  font-family: var(--font-heading);
  font-size: 9vw;                    /* 4 × 1.5 */
  color: var(--text-main);
  margin: 0;
  line-height: 1;
  font-weight: normal;
}

/* IMAGE + META */
.leader-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 3vw;                /* 2 × 1.5 */
}

.leader-row {
  display: flex;
  align-items: center;
  gap: 1.5vw;                        /* 1 × 1.5 */
}

.leader-img {
  width: 40vw;                       /* 12 × 1.5 */
  height: auto;
  display: block;
}

.leader-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15vw;                       /* 0.1 × 1.5 */
}

.leader-name {
  font-family: var(--font-heading);
  font-size: 5.5vw;                 /* 1.5 × 1.5 */
  color: var(--text-main);
  text-align: center;
}

.leader-role {
  font-family: var(--font-heading);
  font-size: 4.25vw;                /* 0.95 × 1.5 */
  color: var(--text-3);
  text-align: center;
}

/* CARDS */
.leader-cards {
  width: 82.5vw;                     /* 55 × 1.5 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 3.875vw;                      /* 1.25 × 1.5 */
}

.leader-card {
  border: 0.075vw solid var(--border-2); /* 0.05 × 1.5 */
  background-color: var(--bg-white-2);
  border-radius: 0.9vw;              /* 0.6 × 1.5 */
  padding: 3.2vw 4.5vw;              /* 0.8 | 1 × 1.5 */
  text-align: center;
  transition: transform 200ms ease;
}

.leader-card:hover {
  transform: translateY(-0.3vw);     /* 0.2 × 1.5 */
}

.leader-card h3 {
  font-family: var(--font-heading);
  font-size: 5vw;                /* 1.25 × 1.5 */
  color: var(--text-main);
  margin: 0 0 0.45vw 0;              /* 0.3 × 1.5 */
  font-weight: normal;
}

.leader-card p {
  font-family: var(--font-body);
  font-size: 3.95vw;                 /* 0.9 × 1.5 */
  line-height: 1.55;
  color: var(--text-4);
  margin: 0;
}
}




















/* ======================
   SECTION SIX – TEAM TABLE
====================== */

.section-six {
  background-color: var(--bg-white);
  padding: 4vw 1vw;
  display: flex;
  justify-content: center;
  padding-bottom: 0px;
}

/* TABLE CONTAINER */
.team-table {
  width: 55vw;
  border-radius: 1vw;
  border: 1px solid var(--border-2);
  overflow: hidden;
  font-family: var(--font-body);
}

/* HEADER */
.table-header {
  background-color: var(--text-main);
  text-align: center;
  padding: .5vw;
}

.table-header h2 {
  font-family: var(--font-heading);
  font-size: 2vw;
  color: var(--bg-white-2);
  margin: 0;
  line-height: .9;
  letter-spacing: .03vw;
  font-weight: normal;
}

.table-header p {
  font-family: var(--font-body);
  font-size: 1.1vw;
  color: #d0d0d0;
  margin: .25vw 0 0;
}

/* ROWS */
.table-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr;
  background-color: var(--bg-white-2);
  padding: .8vw 1vw;
  align-items: center;
}

/* COLUMN TITLES */
.table-columns {
  font-family: var(--font-heading);
  font-size: 1.05vw;
  color: #000;
  background-color: var(--bg-white-2);
    border-bottom: .05vw solid var(--border-2) !important;
}

/* CELLS */
.table-row div {
  font-size: 1.05vw;
  color: #4a4a4a;
  text-align: left;
}

/* CHECK CELL */
.check-cell {
  display: flex;
  justify-content: flex-start;
}

/* GREEN CHECK */
.checkmark {
  width: 1vw;
  height: 1vw;
  background-color: #8db255;
  border-radius: .1vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkmark::after {
  content: "";
  position: absolute;
  left: auto;
  top: .08vw;
  width: .3vw;
  height: .525vw;
  border: solid #2f5d1f;
  border-width: 0 .1vw .1vw 0;
  transform: rotate(45deg);
}

/* TOTAL ROW */
.table-total {
  font-family: var(--font-heading);
  background-color: var(--bg-white-2);
  border-top: .05vw solid var(--border-2);
}

.table-total div {
  font-size: 1.3vw;
  color: var(--text-main);
}

.table-total .money {
  color: #8db255;
  margin-right: 0.1vw;
}

.table-total .free {
  font-size: 1.3vw;
  color: var(--text-main);
}


@media screen and (min-width: 20in) and (max-width: 25in) {
  /* ======================
   SECTION SIX – TEAM TABLE
====================== */

.section-six {
  background-color: var(--bg-white);
  padding: 4.8vw 1.2vw;
  display: flex;
  justify-content: center;
  padding-bottom: 0px;
}

/* TABLE CONTAINER */
.team-table {
  width: 66vw;
  border-radius: 1.2vw;
  border: 1px solid var(--border-2);
  overflow: hidden;
  font-family: var(--font-body);
}

/* HEADER */
.table-header {
  background-color: var(--text-main);
  text-align: center;
  padding: 0.6vw;
}

.table-header h2 {
  font-family: var(--font-heading);
  font-size: 2.4vw;
  color: var(--bg-white-2);
  margin: 0;
  line-height: .9;
  letter-spacing: 0.036vw;
  font-weight: normal;
}

.table-header p {
  font-family: var(--font-body);
  font-size: 1.32vw;
  color: #d0d0d0;
  margin: 0.3vw 0 0;
}

/* ROWS */
.table-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr;
  background-color: var(--bg-white-2);
  padding: 0.96vw 1.2vw;
  align-items: center;
}

/* COLUMN TITLES */
.table-columns {
  font-family: var(--font-heading);
  font-size: 1.26vw;
  color: #000;
  background-color: var(--bg-white-2);
  border-bottom: 0.06vw solid var(--border-2) !important;
}

/* CELLS */
.table-row div {
  font-size: 1.26vw;
  color: #4a4a4a;
  text-align: left;
}

/* CHECK CELL */
.check-cell {
  display: flex;
  justify-content: flex-start;
}

/* GREEN CHECK */
.checkmark {
  width: 1.2vw;
  height: 1.2vw;
  background-color: #8db255;
  border-radius: 0.12vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkmark::after {
  content: "";
  position: absolute;
  left: auto;
  top: 0.096vw;
  width: 0.36vw;
  height: 0.63vw;
  border: solid #2f5d1f;
  border-width: 0 0.12vw 0.12vw 0;
  transform: rotate(45deg);
}

/* TOTAL ROW */
.table-total {
  font-family: var(--font-heading);
  background-color: var(--bg-white-2);
  border-top: 0.06vw solid var(--border-2);
}

.table-total div {
  font-size: 1.56vw;
  color: var(--text-main);
}

.table-total .money {
  color: #8db255;
  margin-right: 0.12vw;
}

.table-total .free {
  font-size: 1.56vw;
  color: var(--text-main);
}

}


@media screen and (min-width: 16in) and (max-width: 20in) {
  /* ======================
   SECTION SIX – TEAM TABLE
====================== */

.section-six {
  background-color: var(--bg-white);
  padding: 5.2vw 1.3vw;          /* was 4vw 1vw */
  display: flex;
  justify-content: center;
  padding-bottom: 0px;
}

/* TABLE CONTAINER */
.team-table {
  width: 71.5vw;                /* was 55vw */
  border-radius: 1.3vw;         /* was 1vw */
  border: 1px solid var(--border-2);
  overflow: hidden;
  font-family: var(--font-body);
}

/* HEADER */
.table-header {
  background-color: var(--text-main);
  text-align: center;
  padding: 0.65vw;              /* was .5vw */
}

.table-header h2 {
  font-family: var(--font-heading);
  font-size: 2.6vw;             /* was 2vw */
  color: var(--bg-white-2);
  margin: 0;
  line-height: 0.9;
  letter-spacing: 0.039vw;      /* was .03vw */
  font-weight: normal;
}

.table-header p {
  font-family: var(--font-body);
  font-size: 1.43vw;            /* was 1.1vw */
  color: #d0d0d0;
  margin: 0.325vw 0 0;          /* was .25vw 0 0 */
}

/* ROWS */
.table-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr;
  background-color: var(--bg-white-2);
  padding: 1.04vw 1.3vw;        /* was .8vw 1vw */
  align-items: center;
}

/* COLUMN TITLES */
.table-columns {
  font-family: var(--font-heading);
  font-size: 1.365vw;           /* was 1.05vw */
  color: #000;
  background-color: var(--bg-white-2);
  border-bottom: 0.065vw solid var(--border-2) !important; /* was .05vw */
}

/* CELLS */
.table-row div {
  font-size: 1.365vw;           /* was 1.05vw */
  color: #4a4a4a;
  text-align: left;
}

/* CHECK CELL */
.check-cell {
  display: flex;
  justify-content: flex-start;
}

/* GREEN CHECK */
.checkmark {
  width: 1.3vw;                 /* was 1vw */
  height: 1.3vw;                /* was 1vw */
  background-color: #8db255;
  border-radius: 0.13vw;        /* was .1vw */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkmark::after {
  content: "";
  position: absolute;
  left: auto;
  top: 0.104vw;                 /* was .08vw */
  width: 0.39vw;                /* was .3vw */
  height: 0.6825vw;             /* was .525vw */
  border: solid #2f5d1f;
  border-width: 0 0.13vw 0.13vw 0; /* was 0 .1vw .1vw 0 */
  transform: rotate(45deg);
}

/* TOTAL ROW */
.table-total {
  font-family: var(--font-heading);
  background-color: var(--bg-white-2);
  border-top: 0.065vw solid var(--border-2); /* was .05vw */
}

.table-total div {
  font-size: 1.69vw;            /* was 1.3vw */
  color: var(--text-main);
}

.table-total .money {
  color: #8db255;
  margin-right: 0.13vw;         /* was 0.1vw */
}

.table-total .free {
  font-size: 1.69vw;            /* was 1.3vw */
  color: var(--text-main);
}

}


@media screen and (min-width: 12in) and (max-width: 16in) {
  /* ======================
   SECTION SIX – TEAM TABLE
====================== */

.section-six {
  background-color: var(--bg-white);
  padding: 5.6vw 1.4vw;
  display: flex;
  justify-content: center;
  padding-bottom: 0px;
}

/* TABLE CONTAINER */
.team-table {
  width: 77vw;
  border-radius: 1.4vw;
  border: 1px solid var(--border-2);
  overflow: hidden;
  font-family: var(--font-body);
}

/* HEADER */
.table-header {
  background-color: var(--text-main);
  text-align: center;
  padding: 0.7vw;
}

.table-header h2 {
  font-family: var(--font-heading);
  font-size: 2.8vw;
  color: var(--bg-white-2);
  margin: 0;
  line-height: 0.9;
  letter-spacing: 0.042vw;
  font-weight: normal;
}

.table-header p {
  font-family: var(--font-body);
  font-size: 1.54vw;
  color: #d0d0d0;
  margin: 0.35vw 0 0;
}

/* ROWS */
.table-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr;
  background-color: var(--bg-white-2);
  padding: 1.12vw 1.4vw;
  align-items: center;
}

/* COLUMN TITLES */
.table-columns {
  font-family: var(--font-heading);
  font-size: 1.47vw;
  color: #000;
  background-color: var(--bg-white-2);
  border-bottom: 0.07vw solid var(--border-2) !important;
}

/* CELLS */
.table-row div {
  font-size: 1.47vw;
  color: #4a4a4a;
  text-align: left;
}

/* CHECK CELL */
.check-cell {
  display: flex;
  justify-content: flex-start;
}

/* GREEN CHECK */
.checkmark {
  width: 1.4vw;
  height: 1.4vw;
  background-color: #8db255;
  border-radius: 0.14vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkmark::after {
  content: "";
  position: absolute;
  left: auto;
  top: 0.112vw;
  width: 0.42vw;
  height: 0.735vw;
  border: solid #2f5d1f;
  border-width: 0 0.14vw 0.14vw 0;
  transform: rotate(45deg);
}

/* TOTAL ROW */
.table-total {
  font-family: var(--font-heading);
  background-color: var(--bg-white-2);
  border-top: 0.07vw solid var(--border-2);
}

.table-total div {
  font-size: 1.82vw;
  color: var(--text-main);
}

.table-total .money {
  color: #8db255;
  margin-right: 0.14vw;
}

.table-total .free {
  font-size: 1.82vw;
  color: var(--text-main);
}

}

@media screen and (min-width: 6in) and (max-width: 11in) {
  /* ======================
   SECTION SIX – TEAM TABLE
====================== */

.section-six {
  background-color: var(--bg-white);
  padding: 6vw 1.5vw;               /* 4 × 1.5 | 1 × 1.5 */
  display: flex;
  justify-content: center;
  padding-bottom: 0px;
}

/* TABLE CONTAINER */
.team-table {
  width: 82.5vw;                    /* 55 × 1.5 */
  border-radius: 1.5vw;             /* 1 × 1.5 */
  border: 1px solid var(--border-2);
  overflow: hidden;
  font-family: var(--font-body);
}

/* HEADER */
.table-header {
  background-color: var(--text-main);
  text-align: center;
  padding: 1.25vw;                  /* 0.5 × 1.5 */
}

.table-header h2 {
  font-family: var(--font-heading);
  font-size: 3vw;                   /* 2 × 1.5 */
  color: var(--bg-white-2);
  margin: 0;
  line-height: .9;                  /* unchanged (unitless) */
  letter-spacing: 0.045vw;          /* 0.03 × 1.5 */
  font-weight: normal;
}

.table-header p {
  font-family: var(--font-body);
  font-size: 2vw;                /* 1.1 × 1.5 */
  color: #d0d0d0;
  margin: 0.375vw 0 0;              /* 0.25 × 1.5 */
}

/* ROWS */
.table-row {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr .8fr;
  background-color: var(--bg-white-2);
  padding: 1.2vw 1.5vw;             /* 0.8 × 1.5 | 1 × 1.5 */
  align-items: center;
}

/* COLUMN TITLES */
.table-columns {
  font-family: var(--font-heading);
  font-size: 1.575vw;               /* 1.05 × 1.5 */
  color: #000;
  background-color: var(--bg-white-2);
  border-bottom: 0.075vw solid var(--border-2) !important; /* 0.05 × 1.5 */
}

/* CELLS */
.table-row div {
  font-size: 2vw;               /* 1.05 × 1.5 */
  color: #4a4a4a;
  text-align: left;
}

/* CHECK CELL */
.check-cell {
  display: flex;
  justify-content: flex-start;
}

/* GREEN CHECK */
.checkmark {
  width: 1.75vw;                     /* 1 × 1.5 */
  height: 1.75vw;                    /* 1 × 1.5 */
  background-color: #8db255;
  border-radius: 0.15vw;            /* 0.1 × 1.5 */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkmark::after {
  content: "";
  position: absolute;
  left: auto;
  top: 0.12vw;                      /* 0.08 × 1.5 */
  width: 0.45vw;                    /* 0.3 × 1.5 */
  height: 0.7875vw;                 /* 0.525 × 1.5 */
  border: solid #2f5d1f;
  border-width: 0 0.25vw 0.25vw 0;  /* 0.1 × 1.5 */
  transform: rotate(45deg);
}

/* TOTAL ROW */
.table-total {
  font-family: var(--font-heading);
  background-color: var(--bg-white-2);
  border-top: 0.075vw solid var(--border-2); /* 0.05 × 1.5 */
}

.table-total div {
  font-size: 2.15vw;                /* 1.3 × 1.5 */
  color: var(--text-main);
}

.table-total .money {
  color: #8db255;
  margin-right: 0.15vw;             /* 0.1 × 1.5 */
}

.table-total .free {
  font-size: 2.15vw;                /* 1.3 × 1.5 */
  color: var(--text-main);
}

}


@media screen and (min-width: 0in) and (max-width: 6in) {
    /* ======================
   SECTION SIX – TEAM TABLE
====================== */

.section-six {
  background-color: var(--bg-white);
  padding: 6vw 1.5vw;               /* 4 × 1.5 | 1 × 1.5 */
  display: flex;
  justify-content: center;
  padding-bottom: 0px;
}

/* TABLE CONTAINER */
.team-table {
  width: 100vw;                    /* 55 × 1.5 */
  border-radius: 1.5vw;             /* 1 × 1.5 */
  border: 1px solid var(--border-2);
  overflow: hidden;
  font-family: var(--font-body);
}

/* HEADER */
.table-header {
  background-color: var(--text-main);
  text-align: center;
  padding: 2.75vw;                  /* 0.5 × 1.5 */
  padding-top: 1.9vw !important;
  padding-bottom: 1.9vw !important;
}

.table-header h2 {
  font-family: var(--font-heading);
  font-size: 5vw;                   /* 2 × 1.5 */
  color: var(--bg-white-2);
  margin: 0;
  line-height: .9;                  /* unchanged (unitless) */
  letter-spacing: 0.045vw;          /* 0.03 × 1.5 */
  font-weight: normal;
}

.table-header p {
  font-family: var(--font-body);
  font-size: 3.65vw;                /* 1.1 × 1.5 */
  color: #d0d0d0;
  margin: 0.375vw 0 0;              /* 0.25 × 1.5 */
}

/* ROWS */
.table-row {
  display: grid;
  grid-template-columns: 1.5fr 1.55fr .8fr;
  background-color: var(--bg-white-2);
  padding: 1.2vw 1.5vw;             /* 0.8 × 1.5 | 1 × 1.5 */
  align-items: center;
}

/* COLUMN TITLES */
.table-columns {
  font-family: var(--font-heading);
  font-size: 3.575vw;               /* 1.05 × 1.5 */
  color: #000;
  background-color: var(--bg-white-2);
  border-bottom: 0.075vw solid var(--border-2) !important; /* 0.05 × 1.5 */
}

/* CELLS */
.table-row div {
  font-size: 3.25vw;               /* 1.05 × 1.5 */
  color: #4a4a4a;
  text-align: left;
}

/* CHECK CELL */
.check-cell {
  display: flex;
  justify-content: flex-start;
}

/* GREEN CHECK */
.checkmark {
  width: 3.5vw;                     /* 1 × 1.5 */
  height: 3.5vw;                    /* 1 × 1.5 */
  background-color: #8db255;
  border-radius: 0.15vw;            /* 0.1 × 1.5 */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkmark::after {
  content: "";
  position: absolute;
  left: auto;
  top: 0.12vw;                      /* 0.08 × 1.5 */
  width: 0.625vw;                    /* 0.3 × 1.5 */
  height: 1.75vw;                 /* 0.525 × 1.5 */
  border: solid #2f5d1f;
  border-width: 0 .9vw .9vw 0;  /* 0.1 × 1.5 */
  transform: rotate(45deg);
}

/* TOTAL ROW */
.table-total {
  font-family: var(--font-heading);
  background-color: var(--bg-white-2);
  border-top: 0.075vw solid var(--border-2); /* 0.05 × 1.5 */
}

.table-total div {
  font-size: 3.95vw;                /* 1.3 × 1.5 */
  color: var(--text-main);
}

.table-total .money {
  color: #8db255;
  margin-right: 0.15vw;             /* 0.1 × 1.5 */
}

.table-total .free {
  font-size: 3.95vw;                /* 1.3 × 1.5 */
  color: var(--text-main);
}
}
















/* ======================
   REVIEW SECTION
====================== */

.section-review {
  background-color: var(--bg-white-2);
  padding: 1vw .5vw 2.5vw;
  border-top: .01vw solid var(--border-2);
  border-bottom: .01vw solid var(--border-2);
}

/* TITLE */
.review-title {
  font-family: var(--font-heading);
  font-size: 3vw;
  color: var(--text-main);
  text-align: center;
  margin-bottom: 1.5vw;
  font-weight: normal;
}

/* WRAPPER */
.review-wrapper {
  max-width: 68vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2vw;
}

/* PHOTO */
.review-photo img {
  width: 16vw;
  height: 16vw;
  object-fit: cover;
  border-radius: 50%;
  border: .02vw solid var(--border-2);
  transition: opacity 200ms ease;
}

/* TEXT */
.review-content {
  width: 55vw;
}

.review-quote {
  font-family: var(--font-body);
  font-size: 1.4vw;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 1.75rem 0;
  transition: opacity 200ms ease;
}

/* AUTHOR */
.review-author {
  display: flex;
  gap: 0.4vw;
  align-items: center;
}

.review-name {
  font-family: var(--font-heading);
  font-size: 1.1vw;
  color: var(--red);
  transition: opacity 200ms ease;
}

.review-role {
  font-family: var(--font-body);
  font-size: 1vw;
  color: var(--text-4);
  transition: opacity 200ms ease;
}

/* NAVIGATION */
.review-nav {
  margin-top: 1.5vw;
  display: flex;
  justify-content: center;
  gap: 2vw;
}

.review-nav button {
  font-family: var(--font-heading);
  font-size: 2.5vw;
  color: var(--text-4);
  cursor: pointer;
  transition: transform 180ms ease, color 180ms ease;
}

.review-nav button:hover {
  transform: translateY(-.06vw);
  color: var(--text-main);
}

/* FADE STATE */
.review-fade {
  opacity: 0;
}

/* REVIEW NAV — MODERN ARROWS */

.review-nav {
  margin-top: 2vw;
  display: flex;
  justify-content: center;
  gap: 1vw;
}

.review-arrow {
  width: 3.25vw;
  height: 3.25vw;
  border-radius: 50%;
  border: .02vw solid var(--border-2);
  background-color: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.review-arrow svg {
  width: 2.25vw;
  height: auto;
  stroke: var(--text-4);
  stroke-width: 2.5;
  fill: none;
  transition: stroke 180ms ease;
}

/* HOVER */
.review-arrow:hover {
  border-color: var(--border-main);
}

.review-arrow:hover svg {
  stroke: var(--text-main);
}


@media screen and (min-width: 20in) and (max-width: 25in) {
  /* ======================
   REVIEW SECTION
====================== */

.section-review {
  background-color: var(--bg-white-2);
  padding: 1.2vw .6vw 3vw;
  border-top: .012vw solid var(--border-2);
  border-bottom: .012vw solid var(--border-2);
}

/* TITLE */
.review-title {
  font-family: var(--font-heading);
  font-size: 3.6vw;
  color: var(--text-main);
  text-align: center;
  margin-bottom: 1.8vw;
  font-weight: normal;
}

/* WRAPPER */
.review-wrapper {
  max-width: 81.6vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2.4vw;
}

/* PHOTO */
.review-photo img {
  width: 19.2vw;
  height: 19.2vw;
  object-fit: cover;
  border-radius: 50%;
  border: .024vw solid var(--border-2);
  transition: opacity 200ms ease;
}

/* TEXT */
.review-content {
  width: 66vw;
}

.review-quote {
  font-family: var(--font-body);
  font-size: 1.68vw;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 1.75rem 0;
  transition: opacity 200ms ease;
}

/* AUTHOR */
.review-author {
  display: flex;
  gap: 0.48vw;
  align-items: center;
}

.review-name {
  font-family: var(--font-heading);
  font-size: 1.32vw;
  color: var(--red);
  transition: opacity 200ms ease;
}

.review-role {
  font-family: var(--font-body);
  font-size: 1.2vw;
  color: var(--text-4);
  transition: opacity 200ms ease;
}

/* NAVIGATION */
.review-nav {
  margin-top: 1.8vw;
  display: flex;
  justify-content: center;
  gap: 2.4vw;
}

.review-nav button {
  font-family: var(--font-heading);
  font-size: 3vw;
  color: var(--text-4);
  cursor: pointer;
  transition: transform 180ms ease, color 180ms ease;
}

.review-nav button:hover {
  transform: translateY(-.072vw);
  color: var(--text-main);
}

/* FADE STATE */
.review-fade {
  opacity: 0;
}

/* REVIEW NAV — MODERN ARROWS */

.review-nav {
  margin-top: 2.4vw;
  display: flex;
  justify-content: center;
  gap: 1.2vw;
}

.review-arrow {
  width: 3.9vw;
  height: 3.9vw;
  border-radius: 50%;
  border: .024vw solid var(--border-2);
  background-color: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.review-arrow svg {
  width: 2.7vw;
  height: auto;
  stroke: var(--text-4);
  stroke-width: 2.5;
  fill: none;
  transition: stroke 180ms ease;
}

/* HOVER */
.review-arrow:hover {
  border-color: var(--border-main);
}

.review-arrow:hover svg {
  stroke: var(--text-main);
}

}


@media screen and (min-width: 16in) and (max-width: 20in) {
  /* ======================
   REVIEW SECTION
====================== */

.section-review {
  background-color: var(--bg-white-2);
  padding: 1.3vw 0.65vw 4.25vw;       /* was 1vw .5vw 2.5vw */
  border-top: 0.013vw solid var(--border-2);    /* was .01vw */
  border-bottom: 0.013vw solid var(--border-2); /* was .01vw */
}

/* TITLE */
.review-title {
  font-family: var(--font-heading);
  font-size: 3.9vw;                  /* was 3vw */
  color: var(--text-main);
  text-align: center;
  margin-bottom: 1.95vw;             /* was 1.5vw */
  font-weight: normal;
}

/* WRAPPER */
.review-wrapper {
  max-width: 83vw;                 /* was 68vw */
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2.6vw;                        /* was 2vw */
}

/* PHOTO */
.review-photo img {
  width: 20.8vw;                     /* was 16vw */
  height: 20.8vw;                    /* was 16vw */
  object-fit: cover;
  border-radius: 50%;
  border: 0.026vw solid var(--border-2); /* was .02vw */
  transition: opacity 200ms ease;
}

/* TEXT */
.review-content {
  width: 71.5vw;                     /* was 55vw */
}

.review-quote {
  font-family: var(--font-body);
  font-size: 1.82vw;                 /* was 1.4vw */
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 2vw 0;
  transition: opacity 200ms ease;
}

/* AUTHOR */
.review-author {
  display: flex;
  gap: 0.52vw;                       /* was 0.4vw */
  align-items: center;
}

.review-name {
  font-family: var(--font-heading);
  font-size: 1.43vw;                 /* was 1.1vw */
  color: var(--red);
  transition: opacity 200ms ease;
}

.review-role {
  font-family: var(--font-body);
  font-size: 1.3vw;                  /* was 1vw */
  color: var(--text-4);
  transition: opacity 200ms ease;
}

/* NAVIGATION */
.review-nav {
  margin-top: 0vw;                /* was 1.5vw */
  display: flex;
  justify-content: center;
  gap: 2.6vw;                        /* was 2vw */
}

.review-nav button {
  font-family: var(--font-heading);
  font-size: 3.25vw;                 /* was 2.5vw */
  color: var(--text-4);
  cursor: pointer;
  transition: transform 180ms ease, color 180ms ease;
}

.review-nav button:hover {
  transform: translateY(-0.078vw);   /* was -.06vw */
  color: var(--text-main);
}

/* FADE STATE */
.review-fade {
  opacity: 0;
}

/* REVIEW NAV — MODERN ARROWS */

.review-nav {
  margin-top: 2.6vw;                 /* was 2vw */
  display: flex;
  justify-content: center;
  gap: 1.3vw;                        /* was 1vw */
}

.review-arrow {
  width: 4.225vw;                    /* was 3.25vw */
  height: 4.225vw;                   /* was 3.25vw */
  border-radius: 50%;
  border: 0.026vw solid var(--border-2); /* was .02vw */
  background-color: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.review-arrow svg {
  width: 2.925vw;                    /* was 2.25vw */
  height: auto;
  stroke: var(--text-4);
  stroke-width: 2.5;
  fill: none;
  transition: stroke 180ms ease;
}

/* HOVER */
.review-arrow:hover {
  border-color: var(--border-main);
}

.review-arrow:hover svg {
  stroke: var(--text-main);
}

}


@media screen and (min-width: 12in) and (max-width: 16in) {
  /* ======================
   REVIEW SECTION
====================== */

.section-review {
  background-color: var(--bg-white-2);
  padding: 1.4vw 0.7vw 4.5vw;
  border-top: 0.014vw solid var(--border-2);
  border-bottom: 0.014vw solid var(--border-2);
}

/* TITLE */
.review-title {
  font-family: var(--font-heading);
  font-size: 4.2vw;
  color: var(--text-main);
  text-align: center;
  margin-bottom: 2.1vw;
  font-weight: normal;
}

/* WRAPPER */
.review-wrapper {
  max-width: 90vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2.8vw;
}

/* PHOTO */
.review-photo img {
  width: 22.4vw;
  height: 22.4vw;
  object-fit: cover;
  border-radius: 50%;
  border: 0.028vw solid var(--border-2);
  transition: opacity 200ms ease;
}

/* TEXT */
.review-content {
  width: 77vw;
}

.review-quote {
  font-family: var(--font-body);
  font-size: 1.96vw;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 1.5rem 0;
  transition: opacity 200ms ease;
}

/* AUTHOR */
.review-author {
  display: flex;
  gap: 0.56vw;
  align-items: center;
}

.review-name {
  font-family: var(--font-heading);
  font-size: 1.54vw;
  color: var(--red);
  transition: opacity 200ms ease;
}

.review-role {
  font-family: var(--font-body);
  font-size: 1.4vw;
  color: var(--text-4);
  transition: opacity 200ms ease;
}

/* NAVIGATION */
.review-nav {
  margin-top: 0vw;
  display: flex;
  justify-content: center;
  gap: 2.8vw;
}

.review-nav button {
  font-family: var(--font-heading);
  font-size: 3.5vw;
  color: var(--text-4);
  cursor: pointer;
  transition: transform 180ms ease, color 180ms ease;
}

.review-nav button:hover {
  transform: translateY(-0.084vw);
  color: var(--text-main);
}

/* FADE STATE */
.review-fade {
  opacity: 0;
}

/* REVIEW NAV — MODERN ARROWS */

.review-nav {
  margin-top: 2.8vw;
  display: flex;
  justify-content: center;
  gap: 1.4vw;
}

.review-arrow {
  width: 4.55vw;
  height: 4.55vw;
  border-radius: 50%;
  border: 0.028vw solid var(--border-2);
  background-color: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.review-arrow svg {
  width: 3.15vw;
  height: auto;
  stroke: var(--text-4);
  stroke-width: 2.5;
  fill: none;
  transition: stroke 180ms ease;
}

/* HOVER */
.review-arrow:hover {
  border-color: var(--border-main);
}

.review-arrow:hover svg {
  stroke: var(--text-main);
}

}


@media screen and (min-width: 6in) and (max-width: 11in) {
  /* ======================
   REVIEW SECTION
====================== */

.section-review {
  background-color: var(--bg-white-2);
  padding: 1.5vw 0.75vw 3.75vw;           /* 1 | 0.5 | 2.5 × 1.5 */
  border-top: 0.015vw solid var(--border-2);    /* 0.01 × 1.5 */
  border-bottom: 0.015vw solid var(--border-2); /* 0.01 × 1.5 */
}

/* TITLE */
.review-title {
  font-family: var(--font-heading);
  font-size: 4.5vw;                       /* 3 × 1.5 */
  color: var(--text-main);
  text-align: center;
  margin-bottom: 4vw;                  /* 1.5 × 1.5 */
  font-weight: normal;
}

/* WRAPPER */
.review-wrapper {
  max-width: 80vw;                       /* 68 × 1.5 */
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 3vw;                               /* 2 × 1.5 */
}

/* PHOTO */
.review-photo img {
  width: 24vw;                            /* 16 × 1.5 */
  height: 24vw;                           /* 16 × 1.5 */
  object-fit: cover;
  border-radius: 50%;
  border: 0.03vw solid var(--border-2);   /* 0.02 × 1.5 */
  transition: opacity 200ms ease;
}

/* TEXT */
.review-content {
  width: 82.5vw;                          /* 55 × 1.5 */
}

.review-quote {
  font-family: var(--font-body);
  font-size: 2.1vw;                       /* 1.4 × 1.5 */
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 1.05rem 0;
  transition: opacity 200ms ease;
}

/* AUTHOR */
.review-author {
  display: flex;
  gap: 0.6vw;                             /* 0.4 × 1.5 */
  align-items: center;
}

.review-name {
  font-family: var(--font-heading);
  font-size: 1.75vw;                      /* 1.1 × 1.5 */
  color: var(--red);
  transition: opacity 200ms ease;
}

.review-role {
  font-family: var(--font-body);
  font-size: 1.5vw;                       /* 1 × 1.5 */
  color: var(--text-4);
  transition: opacity 200ms ease;
}

/* NAVIGATION */
.review-nav {
  margin-top: 2.25vw;                     /* 1.5 × 1.5 */
  display: flex;
  justify-content: center;
  gap: 3vw;                               /* 2 × 1.5 */
}

.review-nav button {
  font-family: var(--font-heading);
  font-size: 3.75vw;                      /* 2.5 × 1.5 */
  color: var(--text-4);
  cursor: pointer;
  transition: transform 180ms ease, color 180ms ease;
}

.review-nav button:hover {
  transform: translateY(-0.09vw);         /* 0.06 × 1.5 */
  color: var(--text-main);
}

/* FADE STATE */
.review-fade {
  opacity: 0;
}

/* REVIEW NAV — MODERN ARROWS */
.review-nav {
  margin-top: 1vw;                        /* 2 × 1.5 */
  display: flex;
  justify-content: center;
  gap: 1.5vw;                             /* 1 × 1.5 */
}

.review-arrow {
  width: 6.875vw;                         /* 3.25 × 1.5 */
  height: 6.875vw;                        /* 3.25 × 1.5 */
  border-radius: 50%;
  border: 0.03vw solid var(--border-2);   /* 0.02 × 1.5 */
  background-color: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.review-arrow svg {
  width: 4.375vw;                         /* 2.25 × 1.5 */
  height: auto;
  stroke: var(--text-4);
  stroke-width: 2.5;
  fill: none;
  transition: stroke 180ms ease;
}

/* HOVER */
.review-arrow:hover {
  border-color: var(--border-main);
}

.review-arrow:hover svg {
  stroke: var(--text-main);
}

}


@media screen and (min-width: 0in) and (max-width: 6in) {

  /* ======================
     REVIEW SECTION (MOBILE)
     ====================== */

  .section-review {
    background-color: var(--bg-white-2);
    padding: 1.5vw 0.75vw 3.75vw;
    border-top: 0.015vw solid var(--border-2);
    border-bottom: 0.015vw solid var(--border-2);
  }

  /* TITLE */
  .review-title {
    font-family: var(--font-heading);
    font-size: 10.15vw;
    color: var(--text-main);
    text-align: center;
    margin-bottom: 6vw;
    margin-top: 3vw;
    line-height: 1.1;
  }

  /* WRAPPER (stack on mobile: title -> photo -> quote -> author) */
  .review-wrapper {
    max-width: 80vw;
    margin: 0 auto;

    display: flex;
    flex-direction: column;     /* key: vertical stacking */
    align-items: center;        /* centers photo + content block */
    gap: 3.5vw;
  }

  /* PHOTO */
  .review-photo {
    width: 100%;
    display: flex;
    justify-content: center;    /* centers image beneath heading */
  }

  .review-photo img {
    width: 40vw;
    height: 40vw;
    object-fit: cover;
    border-radius: 50%;
    border: 0.03vw solid var(--border-2);
    transition: opacity 200ms ease;
  }

  /* TEXT BLOCK */
  .review-content {
    width: 100%;                /* match wrapper width for clean left edge */
  }

  .review-quote {
    font-family: var(--font-body);
    font-size: 4.5vw;
    line-height: 1.55;
    color: var(--text-2);

    text-align: center;         /* key: centered paragraph */
    margin: 0 0 3vw 0;

    transition: opacity 200ms ease;
  }

  /* AUTHOR (left-aligned to the content block's left edge) */
  .review-author {
    width: 100%;                /* key: establishes the left edge */
    display: flex;
    align-items: baseline;
    justify-content: flex-start;/* key: left alignment */

    gap: 1.5vw;
    text-align: left;

    /* optional: keeps the line from feeling too tight on small screens */
    flex-wrap: wrap;
  }

  .review-name {
    font-family: var(--font-heading);
    font-size: 3.5vw;
    color: var(--red);
    transition: opacity 200ms ease;
  }

  .review-role {
    font-family: var(--font-body);
    font-size: 3.25vw;
    color: var(--text-4);
    transition: opacity 200ms ease;
  }

  /* FADE STATE */
  .review-fade {
    opacity: 0;
  }

  /* NAVIGATION (modern arrows) */
  .review-nav {
    margin-top: 5vw;
    display: flex;
    justify-content: center;
    gap: 4.5vw;
  }

  .review-arrow {
    width: 9.875vw;
    height: 9.875vw;
    border-radius: 50%;
    border: 0.03vw solid var(--border-2);
    background-color: var(--bg-white);

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

    cursor: pointer;
    transition:
      transform 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease;
  }

  .review-arrow svg {
    width: 6.375vw;
    height: auto;
    stroke: var(--text-4);
    stroke-width: 2.5;
    fill: none;
    transition: stroke 180ms ease;
  }

  .review-arrow:hover {
    border-color: var(--border-main);
  }

  .review-arrow:hover svg {
    stroke: var(--text-main);
  }
}

















/* ======================
   CONTACT SECTION
====================== */

.section-contact {
  position: relative;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 5vw;
  padding-bottom: 5vw;
}

/* MAP BACKGROUND */
.map-background {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.map-background iframe {
  width: 100%;
  height: 100%;
  border: none;
}

#contact > div.map-background > iframe{
  width: 190% !important;
}


/* CONTACT CARD */
.contact-card {
  position: relative;
  z-index: 2;
  background-color: var(--bg-white-2);
  width: 25vw;
  padding: 1.25vw 2.15vw;
  border-radius: .5vw;
  border: .01vw solid var(--border-2);
}

/* FORM */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: .5vw;
  z-index: 100;
}

#contact-form label {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 0.75vw;
  color: var(--text-4);
}

#contact-form input,
#contact-form textarea {
  margin-top: .1vw;
  padding: .5vw .55vw;
  border-radius: .3vw;
  border: .01vw solid var(--border-2);
  font-family: var(--font-body);
  font-size: 0.55vw;
}

/* BUTTON */
#contact-form button {
  margin-top: .8vw;
  align-self: center;
  padding: .5vw 1.55vw;
  border-radius: .4vw;
  border: none;
  background-color: var(--red);
  color: white;
  font-family: var(--font-body);
  font-size: .65vw;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

#contact-form button:hover {
  transform: translateY(-.05vw);
}


/* SERVICE CHECKBOXES — 2 COLUMNS × 3 ROWS */
.service-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 2.5vw;
  row-gap: .7vw;
  margin-top: .5vw;
  margin-bottom: .4vw;
  align-items: center;
  justify-content: center;
}

/* CHECKBOX + LABEL */
.service-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: .2vw;
  font-family: var(--font-heading);
  font-size: 0.95vw;
  color: var(--text-4);
}

/* CHECKBOX */
.service-option input[type="checkbox"] {
  width: .7vw;
  height: .7vw;
  cursor: pointer;
  accent-color: var(--text-4);
}

.form-row {
  display: flex;
  gap: .7vw;
}

.form-row label {
  flex: 1;
}

input,
textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


input:focus,
textarea:focus {
  outline: none;
  border-color: var(--red-dark);
  box-shadow: 0 0 0 .01vw var(--border-main);
}

#contact-form textarea {
  resize: none;
}


@media screen and (min-width: 20in) and (max-width: 25in) {
  /* ======================
   CONTACT SECTION
====================== */

.section-contact {
  position: relative;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 6vw;
  padding-bottom: 6vw;
}

/* MAP BACKGROUND */
.map-background {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.map-background iframe {
  width: 100%;
  height: 100%;
  border: none;
}


#contact > div.map-background > iframe{
  width: 190% !important;
}


/* CONTACT CARD */
.contact-card {
  position: relative;
  z-index: 2;
  background-color: var(--bg-white-2);
  width: 30vw;
  padding: 1.5vw 2.58vw;
  border-radius: .6vw;
  border: .012vw solid var(--border-2);
}

/* FORM */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: .6vw;
  z-index: 100;
}

#contact-form label {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 0.9vw;
  color: var(--text-4);
}

#contact-form input,
#contact-form textarea {
  margin-top: .12vw;
  padding: .6vw .66vw;
  border-radius: .36vw;
  border: .012vw solid var(--border-2);
  font-family: var(--font-body);
  font-size: 0.66vw;
}

/* BUTTON */
#contact-form button {
  margin-top: .96vw;
  align-self: center;
  padding: .6vw 1.86vw;
  border-radius: .48vw;
  border: none;
  background-color: var(--red);
  color: white;
  font-family: var(--font-body);
  font-size: .78vw;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

#contact-form button:hover {
  transform: translateY(-.06vw);
}

/* SERVICE CHECKBOXES — 2 COLUMNS × 3 ROWS */
.service-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 3vw;
  row-gap: .84vw;
  margin-top: .6vw;
  margin-bottom: .48vw;
  align-items: center;
  justify-content: center;
}

/* CHECKBOX + LABEL */
.service-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: .24vw;
  font-family: var(--font-heading);
  font-size: 1.14vw;
  color: var(--text-4);
}

/* CHECKBOX */
.service-option input[type="checkbox"] {
  width: .84vw;
  height: .84vw;
  cursor: pointer;
  accent-color: var(--text-4);
}

.form-row {
  display: flex;
  gap: .84vw;
}

.form-row label {
  flex: 1;
}

input,
textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--red-dark);
  box-shadow: 0 0 0 .012vw var(--border-main);
}

#contact-form textarea {
  resize: none;
}

}


@media screen and (min-width: 16in) and (max-width: 20in) {
  /* ======================
   CONTACT SECTION
====================== */

.section-contact {
  position: relative;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 6.5vw;            /* was 5vw */
  padding-bottom: 6.5vw;         /* was 5vw */
}

/* MAP BACKGROUND */
.map-background {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.map-background iframe {
  width: 100%;
  height: 100%;
  border: none;
}

#contact > div.map-background > iframe{
  width: 190% !important;
}


/* CONTACT CARD */
.contact-card {
  position: relative;
  z-index: 2;
  background-color: var(--bg-white-2);
  width: 32.5vw;                 /* was 25vw */
  padding: 1.625vw 2.795vw;      /* was 1.25vw 2.15vw */
  border-radius: 0.65vw;         /* was .5vw */
  border: 0.013vw solid var(--border-2); /* was .01vw */
}

/* FORM */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.65vw;                   /* was .5vw */
  z-index: 100;
}

#contact-form label {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 0.975vw;            /* was 0.75vw */
  color: var(--text-4);
}

#contact-form input,
#contact-form textarea {
  margin-top: 0.13vw;            /* was .1vw */
  padding: 0.65vw 0.715vw;       /* was .5vw .55vw */
  border-radius: 0.39vw;         /* was .3vw */
  border: 0.013vw solid var(--border-2); /* was .01vw */
  font-family: var(--font-body);
  font-size: 0.715vw;            /* was 0.55vw */
}

/* BUTTON */
#contact-form button {
  margin-top: 1.04vw;            /* was .8vw */
  align-self: center;
  padding: 0.65vw 2.015vw;       /* was .5vw 1.55vw */
  border-radius: 0.52vw;         /* was .4vw */
  border: none;
  background-color: var(--red);
  color: white;
  font-family: var(--font-body);
  font-size: 0.845vw;            /* was .65vw */
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

#contact-form button:hover {
  transform: translateY(-0.065vw); /* was -.05vw */
}

/* SERVICE CHECKBOXES — 2 COLUMNS × 3 ROWS */
.service-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 3.25vw;            /* was 2.5vw */
  row-gap: 0.91vw;               /* was .7vw */
  margin-top: 0.65vw;            /* was .5vw */
  margin-bottom: 0.52vw;         /* was .4vw */
  align-items: center;
  justify-content: center;
}

/* CHECKBOX + LABEL */
.service-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.26vw;                   /* was .2vw */
  font-family: var(--font-heading);
  font-size: 1.235vw;            /* was 0.95vw */
  color: var(--text-4);
}

/* CHECKBOX */
.service-option input[type="checkbox"] {
  width: 0.91vw;                 /* was .7vw */
  height: 0.91vw;                /* was .7vw */
  cursor: pointer;
  accent-color: var(--text-4);
}

.form-row {
  display: flex;
  gap: 0.91vw;                   /* was .7vw */
}

.form-row label {
  flex: 1;
}

input,
textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--red-dark);
  box-shadow: 0 0 0 0.013vw var(--border-main); /* was .01vw */
}

#contact-form textarea {
  resize: none;
}

}


@media screen and (min-width: 12in) and (max-width: 16in) {
/* ======================
   CONTACT SECTION
====================== */

.section-contact {
  position: relative;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 7vw;
  padding-bottom: 7vw;
}

/* MAP BACKGROUND */
.map-background {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.map-background iframe {
  width: 100%;
  height: 100%;
  border: none;
}


#contact > div.map-background > iframe{
  width: 190% !important;
}


/* CONTACT CARD */
.contact-card {
  position: relative;
  z-index: 2;
  background-color: var(--bg-white-2);
  width: 35vw;
  padding: 1.75vw 3.01vw;
  border-radius: 0.7vw;
  border: 0.014vw solid var(--border-2);
}

/* FORM */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.7vw;
  z-index: 100;
}

#contact-form label {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 1.05vw;
  color: var(--text-4);
}

#contact-form input,
#contact-form textarea {
  margin-top: 0.14vw;
  padding: 0.7vw 0.77vw;
  border-radius: 0.42vw;
  border: 0.014vw solid var(--border-2);
  font-family: var(--font-body);
  font-size: 0.77vw;
}

/* BUTTON */
#contact-form button {
  margin-top: 1.12vw;
  align-self: center;
  padding: 0.7vw 2.17vw;
  border-radius: 0.56vw;
  border: none;
  background-color: var(--red);
  color: white;
  font-family: var(--font-body);
  font-size: 0.91vw;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

#contact-form button:hover {
  transform: translateY(-0.07vw);
}

/* SERVICE CHECKBOXES — 2 COLUMNS × 3 ROWS */
.service-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 3.5vw;
  row-gap: 0.98vw;
  margin-top: 0.7vw;
  margin-bottom: 0.56vw;
  align-items: center;
  justify-content: center;
}

/* CHECKBOX + LABEL */
.service-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.28vw;
  font-family: var(--font-heading);
  font-size: 1.33vw;
  color: var(--text-4);
}

/* CHECKBOX */
.service-option input[type="checkbox"] {
  width: 0.98vw;
  height: 0.98vw;
  cursor: pointer;
  accent-color: var(--text-4);
}

.form-row {
  display: flex;
  gap: 0.98vw;
}

.form-row label {
  flex: 1;
}

input,
textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--red-dark);
  box-shadow: 0 0 0 0.014vw var(--border-main);
}

#contact-form textarea {
  resize: none;
}

}


@media screen and (min-width: 6in) and (max-width: 11in) {
  /* ======================
   CONTACT SECTION
====================== */

.section-contact {
  position: relative;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 7.5vw;                 /* 5 × 1.5 */
  padding-bottom: 7.5vw;              /* 5 × 1.5 */
}

/* MAP BACKGROUND */
.map-background {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.map-background iframe {
  width: 100%;
  height: 100%;
  border: none;
}

#contact > div.map-background > iframe{
  width: 190% !important;
}

/* CONTACT CARD */
.contact-card {
  position: relative;
  z-index: 2;
  background-color: var(--bg-white-2);
  width: 50.5vw;                      /* 25 × 1.5 */
  padding: 1.875vw 3.225vw;           /* 1.25 × 1.5 | 2.15 × 1.5 */
  border-radius: 0.75vw;              /* 0.5 × 1.5 */
  border: 0.015vw solid var(--border-2); /* 0.01 × 1.5 */
}

/* FORM */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75vw;                        /* 0.5 × 1.5 */
  z-index: 100;
}

#contact-form label {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 1.75vw;                 /* 0.75 × 1.5 */
  color: var(--text-4);
}

#contact-form input,
#contact-form textarea {
  margin-top: 0.15vw;                 /* 0.1 × 1.5 */
  padding: 0.95vw 0.825vw;            /* 0.5 × 1.5 | 0.55 × 1.5 */
  border-radius: 0.45vw;              /* 0.3 × 1.5 */
  border: 0.015vw solid var(--border-2); /* 0.01 × 1.5 */
  font-family: var(--font-body);
  font-size: 1.5vw;                 /* 0.55 × 1.5 */
}

/* BUTTON */
#contact-form button {
  margin-top: 1.2vw;                  /* 0.8 × 1.5 */
  align-self: center;
  padding: 0.75vw 2.325vw;            /* 0.5 × 1.5 | 1.55 × 1.5 */
  border-radius: 0.6vw;               /* 0.4 × 1.5 */
  border: none;
  background-color: var(--red);
  color: white;
  font-family: var(--font-body);
  font-size: 1.5vw;                 /* 0.65 × 1.5 */
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

#contact-form button:hover {
  transform: translateY(-0.075vw);    /* -0.05 × 1.5 */
}

/* SERVICE CHECKBOXES — 2 COLUMNS × 3 ROWS */
.service-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 3.75vw;                 /* 2.5 × 1.5 */
  row-gap: 1.05vw;                    /* 0.7 × 1.5 */
  margin-top: 0.75vw;                 /* 0.5 × 1.5 */
  margin-bottom: 0.6vw;               /* 0.4 × 1.5 */
  align-items: center;
  justify-content: center;
}

/* CHECKBOX + LABEL */
.service-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.3vw;                         /* 0.2 × 1.5 */
  font-family: var(--font-heading);
  font-size: 1.425vw;                 /* 0.95 × 1.5 */
  color: var(--text-4);
}

/* CHECKBOX */
.service-option input[type="checkbox"] {
  width: 1.55vw;                      /* 0.7 × 1.5 */
  height: 1.55vw;                     /* 0.7 × 1.5 */
  cursor: pointer;
  accent-color: var(--text-4);
}

.form-row {
  display: flex;
  gap: 1.05vw;                        /* 0.7 × 1.5 */
}

.form-row label {
  flex: 1;
}

input,
textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--red-dark);
  box-shadow: 0 0 0 0.015vw var(--border-main); /* 0.01 × 1.5 */
}

#contact-form textarea {
  resize: none;
}

}


@media screen and (min-width: 0in) and (max-width: 6in) {

    /* ======================
   CONTACT SECTION
====================== */

.section-contact {
  position: relative;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 7.5vw;                 /* 5 × 1.5 */
  padding-bottom: 7.5vw;              /* 5 × 1.5 */
}

/* MAP BACKGROUND */
.map-background {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 270vw;
}

.map-background iframe {
  width: 100%;
  height: 100%;
  border: none;
}

#contact > div.map-background > iframe{
  width: 190% !important;
}


/* CONTACT CARD */
.contact-card {
  position: relative;
  z-index: 2;
  background-color: var(--bg-white-2);
  width: 80.5vw;                      /* 25 × 1.5 */
  padding: 3.875vw 5.225vw;           /* 1.25 × 1.5 | 2.15 × 1.5 */
  border-radius: 0.75vw;              /* 0.5 × 1.5 */
  border: 0.015vw solid var(--border-2); /* 0.01 × 1.5 */
}

/* FORM */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5vw;                        /* 0.5 × 1.5 */
  z-index: 100;
}

#contact-form label {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 3.25vw;                 /* 0.75 × 1.5 */
  color: var(--text-4);
}

#contact-form input,
#contact-form textarea {
  margin-top: 0.15vw;                 /* 0.1 × 1.5 */
  padding: 1.1vw 0.825vw;            /* 0.5 × 1.5 | 0.55 × 1.5 */
  border-radius: 0.45vw;              /* 0.3 × 1.5 */
  border: 0.015vw solid var(--border-2); /* 0.01 × 1.5 */
  font-family: var(--font-body);
  font-size: 16px !important;                 /* 0.55 × 1.5 */
}

/* BUTTON */
#contact-form button {
  margin-top: 1.9vw;                  /* 0.8 × 1.5 */
  align-self: center;
  padding: 1.5vw 3.325vw;            /* 0.5 × 1.5 | 1.55 × 1.5 */
  border-radius: 1.25vw;               /* 0.4 × 1.5 */
  border: none;
  background-color: var(--red);
  color: white;
  font-family: var(--font-body);
  font-size: 4vw;                 /* 0.65 × 1.5 */
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

#contact-form button:hover {
  transform: translateY(-0.075vw);    /* -0.05 × 1.5 */
}

/* SERVICE CHECKBOXES — 2 COLUMNS × 3 ROWS */
.service-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 3.75vw;                 /* 2.5 × 1.5 */
  row-gap: 1.05vw;                    /* 0.7 × 1.5 */
  margin-top: 0.75vw;                 /* 0.5 × 1.5 */
  margin-bottom: 0.6vw;               /* 0.4 × 1.5 */
  align-items: center;
  justify-content: center;
}

/* CHECKBOX + LABEL */
.service-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.3vw;                         /* 0.2 × 1.5 */
  font-family: var(--font-heading);
  font-size: 1.425vw;                 /* 0.95 × 1.5 */
  color: var(--text-4);
}



/* CHECKBOX */
.service-option input[type="checkbox"] {
  width: 1.55vw;                      /* 0.7 × 1.5 */
  height: 1.55vw;                     /* 0.7 × 1.5 */
  cursor: pointer;
  accent-color: var(--text-4);
}


/* Force real square checkboxes (prevents them turning into circles on mobile) */
.service-option input[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
  border-radius: 0;   /* cancels any global rounding */
  width: 2.75vw;        /* cancels any global sizing */
  height: auto;
  margin: 0;          /* optional: let you control spacing consistently */
}

#contact-form > div.service-checkboxes > label > span {
  margin-left: 1.05vw;
}

.form-row {
  display: grid;
  gap: 1.05vw;                        /* 0.7 × 1.5 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-row label {
  flex: 1;
}

input,
textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--red-dark);
  box-shadow: 0 0 0 0.015vw var(--border-main); /* 0.01 × 1.5 */
}

#contact-form textarea {
  resize: none;
}
}















/* ======================
   CHAT FOOTER UI (VW-ONLY)
   Rewritten clean + consistent
====================== */

/* Footer shell */
.chat-footer{
  background:#3c3c3c;
  color:var(--bg-white-2);
  padding:3vw 0 1vw;
  position:relative;
}

/* Main column */
.chat-wrap{
  width:50vw;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:1.75vw;
}

/* Transcript panel (fixed height, internal scroll, no visible scrollbar) */
.chat-transcript{
  height:25vw;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;

  display:flex;
  flex-direction:column;
  gap:1vw;

  /* prevent long text from forcing horizontal scroll */
  overflow-wrap:anywhere;
  word-break:break-word;

  /* hide scrollbar visuals but keep scrolling */
  scrollbar-width:none;      /* Firefox */
  -ms-overflow-style:none;   /* IE/old Edge */
}
.chat-transcript::-webkit-scrollbar{
  width:0;
  height:0;
}

/* ======================
   MESSAGE ROWS
====================== */

.msg{
  display:flex;
  align-items:flex-start;
  gap:0.55vw;
}

/* Avatar */
.msg .avatar{
  width:1.25vw;
  height:1.25vw;
  border-radius:0.15vw;
  background:#c9592b;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
}
.msg.user .avatar{ background:#5a5a5a; }

.msg .avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Bubble container */
.msg .bubble{
  max-width:55vw;
}

/* Name */
.msg .name{
  font-family:var(--font-heading);
  font-size:1.05vw;
  color:#ffffff;
  margin-bottom:0.2vw;
  font-weight:normal;
}

/* ======================
   MARKDOWN CONTENT (consistent look)
====================== */

.msg .text{
  font-family:var(--font-body);
  font-size:1vw;
  line-height:1.55;
  color:#d0d0d0;

  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Vertical rhythm for common blocks */
.msg .text p{
  margin:0.2vw 0 0.3vw;
  font-size:1vw;
}
.msg .text p:last-child{ margin-bottom:0; }

.msg .text ul,
.msg .text ol{
  margin:0.45vw 0 0.75vw;
  padding-left:1.2vw;
}
.msg .text li{
  margin:0.18vw 0;
}

/* Inline styles */
.msg .text strong{
  font-weight:700;
  color:var(--bg-white-2);
}
.msg .text em{
  font-style:italic;
}
.msg .text a{
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:0.25vw;
}

/* Inline code */
.msg .text code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:0.9vw;
  padding:0.12vw 0.35vw;
  border-radius:0.35vw;
  background:rgba(255,255,255,0.08);
}

/* Code blocks */
.msg .text pre{
  margin:0.6vw 0 0.9vw;
  padding:0.85vw 1vw;
  border-radius:0.8vw;
  background:rgba(255,255,255,0.08);
  overflow-x:auto;
}
.msg .text pre code{
  background:transparent;
  padding:0;
  display:block;
  white-space:pre;
  font-size:0.95vw;
}

/* ======================
   CONTROLS AREA
====================== */

.chat-controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.7vw;
}

/* Suggestion chips */
.chat-suggestions{
  width:40vw;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.4vw .45vw;
}

.chip{
  background:var(--bg-white-2);
  border:0.08vw solid rgba(0,0,0,0.08);
  border-radius:0.5vw;
  padding:0.65vw 1vw;
  font-family:var(--font-body);
  font-size:0.95vw;
  color:#4a4a4a;
  cursor:pointer;
  transition:transform 180ms ease;
}
.chip:hover{
  transform:translateY(-0.09vw);
}

/* Input bar */
.chat-inputbar{
  width:42vw;
  height:2vw;
  background:var(--bg-white-2);
  border-radius:.7vw;
  padding:1.3vw;
  display:flex;
  align-items:center;
  gap:1vw;
}

/* Textarea input (wraps + can scroll internally) */
.chat-input{
  border:none;
  outline:none;
  flex:1;
  background-color: var(--bg-white-2);
  font-family:var(--font-body);
  font-size:.8vw;
  color:#606060;
  height:3.15vw;      /* fixed height */
  resize:none;         /* do not expand manually */
  overflow-y:auto;     /* internal scroll if needed */
  line-height:1.35;
  padding:0.35vw 0.25vw;
  padding-top: .4vw;
  overflow-wrap:anywhere;
  word-break:break-word;
}


.chat-input:focus {
  border: none;
  outline: none;
  box-shadow: none;
}


/* Send button */
.chat-send{
  width:1.9vw;
  height:1.9vw;
  border:0.05vw solid var(--red-dark);
  border-radius:0.6vw;
  background:#c9592b;
  color:var(--bg-white-2);
  cursor:pointer;
  font-size:1.15vw;
  display:grid;
  place-items:center;
  transition:transform 180ms ease;
}

.chat-send {
  width: 1.9vw;
  height: 1.9vw;
  border-radius: .6vw;
  border: none;
  background: #d4632c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-send:hover{
  transform:translateY(-0.03vw);
}

.chat-send img {
  width: .8vw;
  height: .8vw;
  display: block;
  opacity: .2;
  margin-left: .1vw;
}


.chat-hint a{
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:0.25vw;
}

/* Locked state (during intro AND while waiting on API) */
.chat-locked .chip,
.chat-locked .chat-input,
.chat-locked .chat-inputbar,
.chat-locked .chat-send{
  opacity:0.55;
  pointer-events:none;
}

/* Typing / loader bubble */
.typing-dots{
  display:inline-flex;
  gap:0.3vw;
  align-items:center;
  padding:0.15vw 0;
}

.typing-dots span{
  width:0.4vw;
  height:0.4vw;
  border-radius:99vw;
  background:rgba(255,255,255,0.7);
  display:inline-block;
  animation:typingBounce 1.15s infinite ease-in-out;
}
.typing-dots span:nth-child(2){ animation-delay:0.12s; }
.typing-dots span:nth-child(3){ animation-delay:0.24s; }

@keyframes typingBounce{
  0%,80%,100%{ transform:translateY(0); opacity:0.55; }
  40%{ transform:translateY(-0.25vw); opacity:1; }
}

/* Bottom line + copyright */
.chat-bottom-line{
  width:100%;
  height:0.08vw;
  margin:2.25vw 0 1.25vw;
  background:rgba(255,255,255,0.08);
}

.chat-copyright{
  text-align:center;
  font-family:var(--font-body);
  font-size:0.9vw;
  color:var(--text-5);
}


@media screen and (min-width: 20in) and (max-width: 25in) {
  /* Footer shell */
.chat-footer{
  background:#3c3c3c;
  color:var(--bg-white-2);
  padding:3.6vw 0 1.2vw;
  position:relative;
}

/* Main column */
.chat-wrap{
  width:60vw;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:2.1vw;
}

/* Transcript panel (fixed height, internal scroll, no visible scrollbar) */
.chat-transcript{
  height:30vw;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;

  display:flex;
  flex-direction:column;
  gap:1.2vw;

  /* prevent long text from forcing horizontal scroll */
  overflow-wrap:anywhere;
  word-break:break-word;

  /* hide scrollbar visuals but keep scrolling */
  scrollbar-width:none;      /* Firefox */
  -ms-overflow-style:none;   /* IE/old Edge */
}
.chat-transcript::-webkit-scrollbar{
  width:0;
  height:0;
}

/* ======================
   MESSAGE ROWS
====================== */

.msg{
  display:flex;
  align-items:flex-start;
  gap:0.66vw;
}

/* Avatar */
.msg .avatar{
  width:1.5vw;
  height:1.5vw;
  border-radius:0.18vw;
  background:#c9592b;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
}
.msg.user .avatar{ background:#5a5a5a; }

.msg .avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Bubble container */
.msg .bubble{
  max-width:66vw;
}

/* Name */
.msg .name{
  font-family:var(--font-heading);
  font-size:1.26vw;
  color:#ffffff;
  margin-bottom:0.24vw;
  font-weight:normal;
}

/* ======================
   MARKDOWN CONTENT (consistent look)
====================== */

.msg .text{
  font-family:var(--font-body);
  font-size:1.2vw;
  line-height:1.55;
  color:#d0d0d0;

  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Vertical rhythm for common blocks */
.msg .text p{
  margin:0.24vw 0 0.36vw;
  font-size:1.2vw;
}
.msg .text p:last-child{ margin-bottom:0; }

.msg .text ul,
.msg .text ol{
  margin:0.54vw 0 0.9vw;
  padding-left:1.44vw;
}
.msg .text li{
  margin:0.216vw 0;
}

/* Inline styles */
.msg .text strong{
  font-weight:700;
  color:var(--bg-white-2);
}
.msg .text em{
  font-style:italic;
}
.msg .text a{
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:0.3vw;
}

/* Inline code */
.msg .text code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:1.08vw;
  padding:0.144vw 0.42vw;
  border-radius:0.42vw;
  background:rgba(255,255,255,0.08);
}

/* Code blocks */
.msg .text pre{
  margin:0.72vw 0 1.08vw;
  padding:1.02vw 1.2vw;
  border-radius:0.96vw;
  background:rgba(255,255,255,0.08);
  overflow-x:auto;
}
.msg .text pre code{
  background:transparent;
  padding:0;
  display:block;
  white-space:pre;
  font-size:1.14vw;
}

/* ======================
   CONTROLS AREA
====================== */

.chat-controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.84vw;
}

/* Suggestion chips */
.chat-suggestions{
  width:48vw;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.48vw 0.54vw;
}

.chip{
  background:var(--bg-white-2);
  border:0.096vw solid rgba(0,0,0,0.08);
  border-radius:0.6vw;
  padding:0.78vw 1.2vw;
  font-family:var(--font-body);
  font-size:1.14vw;
  color:#4a4a4a;
  cursor:pointer;
  transition:transform 180ms ease;
}
.chip:hover{
  transform:translateY(-0.108vw);
}

/* Input bar */
.chat-inputbar{
  width:50.4vw;
  height:2.4vw;
  background:var(--bg-white-2);
  border-radius:.84vw;
  padding:1.56vw;
  display:flex;
  align-items:center;
  gap:1.2vw;
}

/* Textarea input (wraps + can scroll internally) */
.chat-input{
  border:none;
  outline:none;
  flex:1;
  background-color: var(--bg-white-2);
  font-family:var(--font-body);
  font-size:.96vw;
  color:#606060;
  height:3.78vw;      /* fixed height */
  resize:none;         /* do not expand manually */
  overflow-y:auto;     /* internal scroll if needed */
  line-height:1.35;
  padding:0.42vw 0.3vw;
  padding-top: .48vw;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.chat-input:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

/* Send button */
.chat-send{
  width:2.28vw;
  height:2.28vw;
  border:0.06vw solid var(--red-dark);
  border-radius:0.72vw;
  background:#c9592b;
  color:var(--bg-white-2);
  cursor:pointer;
  font-size:1.38vw;
  display:grid;
  place-items:center;
  transition:transform 180ms ease;
}

.chat-send {
  width: 2.28vw;
  height: 2.28vw;
  border-radius: .72vw;
  border: none;
  background: #d4632c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-send:hover{
  transform:translateY(-0.036vw);
}

.chat-send img {
  width: .96vw;
  height: .96vw;
  display: block;
  opacity: .24;
  margin-left: .12vw;
}

.chat-hint a{
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:0.3vw;
}

/* Locked state (during intro AND while waiting on API) */
.chat-locked .chip,
.chat-locked .chat-input,
.chat-locked .chat-inputbar,
.chat-locked .chat-send{
  opacity:0.55;
  pointer-events:none;
}

/* Typing / loader bubble */
.typing-dots{
  display:inline-flex;
  gap:0.36vw;
  align-items:center;
  padding:0.18vw 0;
}

.typing-dots span{
  width:0.48vw;
  height:0.48vw;
  border-radius:118.8vw;
  background:rgba(255,255,255,0.7);
  display:inline-block;
  animation:typingBounce 1.15s infinite ease-in-out;
}
.typing-dots span:nth-child(2){ animation-delay:0.12s; }
.typing-dots span:nth-child(3){ animation-delay:0.24s; }

@keyframes typingBounce{
  0%,80%,100%{ transform:translateY(0); opacity:0.55; }
  40%{ transform:translateY(-0.3vw); opacity:1; }
}

/* Bottom line + copyright */
.chat-bottom-line{
  width:100%;
  height:0.096vw;
  margin:2.7vw 0 1.5vw;
  background:rgba(255,255,255,0.08);
}

.chat-copyright{
  text-align:center;
  font-family:var(--font-body);
  font-size:1.08vw;
  color:var(--text-5);
}

}


@media screen and (min-width: 16in) and (max-width: 20in) {
  /* Footer shell */
.chat-footer{
  background:#3c3c3c;
  color:var(--bg-white-2);
  padding:3.9vw 0 1.3vw;          /* was 3vw 0 1vw */
  position:relative;
}

/* Main column */
.chat-wrap{
  width:65vw;                      /* was 50vw */
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:2.275vw;                     /* was 1.75vw */
}

/* Transcript panel (fixed height, internal scroll, no visible scrollbar) */
.chat-transcript{
  height:32.5vw;                   /* was 25vw */
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;

  display:flex;
  flex-direction:column;
  gap:1.3vw;                       /* was 1vw */

  /* prevent long text from forcing horizontal scroll */
  overflow-wrap:anywhere;
  word-break:break-word;

  /* hide scrollbar visuals but keep scrolling */
  scrollbar-width:none;      /* Firefox */
  -ms-overflow-style:none;   /* IE/old Edge */
}
.chat-transcript::-webkit-scrollbar{
  width:0;
  height:0;
}

/* ======================
   MESSAGE ROWS
====================== */

.msg{
  display:flex;
  align-items:flex-start;
  gap:0.715vw;                     /* was 0.55vw */
}

/* Avatar */
.msg .avatar{
  width:1.625vw;                   /* was 1.25vw */
  height:1.625vw;                  /* was 1.25vw */
  border-radius:0.195vw;           /* was 0.15vw */
  background:#c9592b;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
}
.msg.user .avatar{ background:#5a5a5a; }

.msg .avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Bubble container */
.msg .bubble{
  max-width:71.5vw;                /* was 55vw */
}

/* Name */
.msg .name{
  font-family:var(--font-heading);
  font-size:1.365vw;               /* was 1.05vw */
  color:#ffffff;
  margin-bottom:0.26vw;            /* was 0.2vw */
  font-weight:normal;
}

/* ======================
   MARKDOWN CONTENT (consistent look)
====================== */

.msg .text{
  font-family:var(--font-body);
  font-size:1.3vw;                 /* was 1vw */
  line-height:1.55;
  color:#d0d0d0;

  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Vertical rhythm for common blocks */
.msg .text p{
  margin:0.26vw 0 0.39vw;          /* was 0.2vw 0 0.3vw */
  font-size:1.3vw;                 /* was 1vw */
}
.msg .text p:last-child{ margin-bottom:0; }

.msg .text ul,
.msg .text ol{
  margin:0.585vw 0 0.975vw;        /* was 0.45vw 0 0.75vw */
  padding-left:1.56vw;             /* was 1.2vw */
}
.msg .text li{
  margin:0.234vw 0;                /* was 0.18vw */
}

/* Inline styles */
.msg .text strong{
  font-weight:700;
  color:var(--bg-white-2);
}
.msg .text em{
  font-style:italic;
}
.msg .text a{
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:0.325vw;   /* was 0.25vw */
}

/* Inline code */
.msg .text code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:1.17vw;                /* was 0.9vw */
  padding:0.156vw 0.455vw;         /* was 0.12vw 0.35vw */
  border-radius:0.455vw;           /* was 0.35vw */
  background:rgba(255,255,255,0.08);
}

/* Code blocks */
.msg .text pre{
  margin:0.78vw 0 1.17vw;          /* was 0.6vw 0 0.9vw */
  padding:1.105vw 1.3vw;           /* was 0.85vw 1vw */
  border-radius:1.04vw;            /* was 0.8vw */
  background:rgba(255,255,255,0.08);
  overflow-x:auto;
}
.msg .text pre code{
  background:transparent;
  padding:0;
  display:block;
  white-space:pre;
  font-size:1.235vw;               /* was 0.95vw */
}

/* ======================
   CONTROLS AREA
====================== */

.chat-controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.91vw;                      /* was .7vw */
}

/* Suggestion chips */
.chat-suggestions{
  width:52vw;                      /* was 40vw */
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.52vw 0.585vw;              /* was 0.4vw .45vw */
}

.chip{
  background:var(--bg-white-2);
  border:0.104vw solid rgba(0,0,0,0.08); /* was 0.08vw */
  border-radius:0.65vw;            /* was 0.5vw */
  padding:0.845vw 1.3vw;           /* was 0.65vw 1vw */
  font-family:var(--font-body);
  font-size:1.235vw;               /* was 0.95vw */
  color:#4a4a4a;
  cursor:pointer;
  transition:transform 180ms ease;
}
.chip:hover{
  transform:translateY(-0.117vw);  /* was -0.09vw */
}

/* Input bar */
.chat-inputbar{
  width:54.6vw;                    /* was 42vw */
  height:2.6vw;                    /* was 2vw */
  background:var(--bg-white-2);
  border-radius:0.91vw;            /* was .7vw */
  padding:1.69vw;                  /* was 1.3vw */
  display:flex;
  align-items:center;
  gap:1.3vw;                       /* was 1vw */
}

/* Textarea input (wraps + can scroll internally) */
.chat-input{
  border:none;
  outline:none;
  flex:1;
  background-color: var(--bg-white-2);
  font-family:var(--font-body);
  font-size:1.04vw;                /* was .8vw */
  color:#606060;
  height:4.095vw;                  /* was 3.15vw */
  resize:none;                      /* do not expand manually */
  overflow-y:auto;                  /* internal scroll if needed */
  line-height:1.35;
  padding:0.455vw 0.325vw;         /* was 0.35vw 0.25vw */
  padding-top:0.52vw;              /* was .4vw */
  overflow-wrap:anywhere;
  word-break:break-word;
}

.chat-input:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

/* Send button */
.chat-send{
  width:2.47vw;                    /* was 1.9vw */
  height:2.47vw;                   /* was 1.9vw */
  border:0.065vw solid var(--red-dark); /* was 0.05vw */
  border-radius:0.78vw;            /* was 0.6vw */
  background:#c9592b;
  color:var(--bg-white-2);
  cursor:pointer;
  font-size:1.495vw;               /* was 1.15vw */
  display:grid;
  place-items:center;
  transition:transform 180ms ease;
}

.chat-send {
  width: 2.47vw;
  height: 2.47vw;
  border-radius: .78vw;
  border: none;
  background: #d4632c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-send:hover{
  transform:translateY(-0.039vw);  /* was -0.03vw */
}

.chat-send img {
  width:1.04vw;                    /* was .8vw */
  height:1.04vw;                   /* was .8vw */
  display: block;
  opacity: .2;
  margin-left:0.13vw;              /* was .1vw */
}

.chat-hint a{
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:0.325vw;   /* was 0.25vw */
}

/* Locked state (during intro AND while waiting on API) */
.chat-locked .chip,
.chat-locked .chat-input,
.chat-locked .chat-inputbar,
.chat-locked .chat-send{
  opacity:0.55;
  pointer-events:none;
}

/* Typing / loader bubble */
.typing-dots{
  display:inline-flex;
  gap:0.39vw;                      /* was 0.3vw */
  align-items:center;
  padding:0.195vw 0;               /* was 0.15vw 0 */
}

.typing-dots span{
  width:0.52vw;                    /* was 0.4vw */
  height:0.52vw;                   /* was 0.4vw */
  border-radius:99vw;
  background:rgba(255,255,255,0.7);
  display:inline-block;
  animation:typingBounce 1.15s infinite ease-in-out;
}
.typing-dots span:nth-child(2){ animation-delay:0.12s; }
.typing-dots span:nth-child(3){ animation-delay:0.24s; }

@keyframes typingBounce{
  0%,80%,100%{ transform:translateY(0); opacity:0.55; }
  40%{ transform:translateY(-0.325vw); opacity:1; }  /* was -0.25vw */
}

/* Bottom line + copyright */
.chat-bottom-line{
  width:100%;
  height:0.104vw;                  /* was 0.08vw */
  margin:2.925vw 0 1.625vw;        /* was 2.25vw 0 1.25vw */
  background:rgba(255,255,255,0.08);
}

.chat-copyright{
  text-align:center;
  font-family:var(--font-body);
  font-size:1.17vw;                /* was 0.9vw */
  color:var(--text-5);
}

}


@media screen and (min-width: 12in) and (max-width: 16in) {
  /* Footer shell */
.chat-footer{
  background:#3c3c3c;
  color:var(--bg-white-2);
  padding:4.2vw 0 1.4vw;
  position:relative;
}

/* Main column */
.chat-wrap{
  width:70vw;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:2.45vw;
}

/* Transcript panel (fixed height, internal scroll, no visible scrollbar) */
.chat-transcript{
  height:35vw;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;

  display:flex;
  flex-direction:column;
  gap:1.4vw;

  /* prevent long text from forcing horizontal scroll */
  overflow-wrap:anywhere;
  word-break:break-word;

  /* hide scrollbar visuals but keep scrolling */
  scrollbar-width:none;      /* Firefox */
  -ms-overflow-style:none;   /* IE/old Edge */
}
.chat-transcript::-webkit-scrollbar{
  width:0;
  height:0;
}

/* ======================
   MESSAGE ROWS
====================== */

.msg{
  display:flex;
  align-items:flex-start;
  gap:0.77vw;
}

/* Avatar */
.msg .avatar{
  width:1.75vw;
  height:1.75vw;
  border-radius:0.21vw;
  background:#c9592b;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
}
.msg.user .avatar{ background:#5a5a5a; }

.msg .avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Bubble container */
.msg .bubble{
  max-width:77vw;
}

/* Name */
.msg .name{
  font-family:var(--font-heading);
  font-size:1.47vw;
  color:#ffffff;
  margin-bottom:0.28vw;
  font-weight:normal;
}

/* ======================
   MARKDOWN CONTENT (consistent look)
====================== */

.msg .text{
  font-family:var(--font-body);
  font-size:1.4vw;
  line-height:1.55;
  color:#d0d0d0;

  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Vertical rhythm for common blocks */
.msg .text p{
  margin:0.28vw 0 0.42vw;
  font-size:1.4vw;
}
.msg .text p:last-child{ margin-bottom:0; }

.msg .text ul,
.msg .text ol{
  margin:0.63vw 0 1.05vw;
  padding-left:1.68vw;
}
.msg .text li{
  margin:0.252vw 0;
}

/* Inline styles */
.msg .text strong{
  font-weight:700;
  color:var(--bg-white-2);
}
.msg .text em{
  font-style:italic;
}
.msg .text a{
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:0.35vw;
}

/* Inline code */
.msg .text code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:1.26vw;
  padding:0.168vw 0.49vw;
  border-radius:0.49vw;
  background:rgba(255,255,255,0.08);
}

/* Code blocks */
.msg .text pre{
  margin:0.84vw 0 1.26vw;
  padding:1.19vw 1.4vw;
  border-radius:1.12vw;
  background:rgba(255,255,255,0.08);
  overflow-x:auto;
}
.msg .text pre code{
  background:transparent;
  padding:0;
  display:block;
  white-space:pre;
  font-size:1.33vw;
}

/* ======================
   CONTROLS AREA
====================== */

.chat-controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.98vw;
}

/* Suggestion chips */
.chat-suggestions{
  width:56vw;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.56vw 0.63vw;
}

.chip{
  background:var(--bg-white-2);
  border:0.112vw solid rgba(0,0,0,0.08);
  border-radius:0.7vw;
  padding:0.91vw 1.4vw;
  font-family:var(--font-body);
  font-size:1.33vw;
  color:#4a4a4a;
  cursor:pointer;
  transition:transform 180ms ease;
}
.chip:hover{
  transform:translateY(-0.126vw);
}

/* Input bar */
.chat-inputbar{
  width:58.8vw;
  height:2.8vw;
  background:var(--bg-white-2);
  border-radius:0.98vw;
  padding:1.82vw;
  display:flex;
  align-items:center;
  gap:1.4vw;
}

/* Textarea input (wraps + can scroll internally) */
.chat-input{
  border:none;
  outline:none;
  flex:1;
  background-color: var(--bg-white-2);
  font-family:var(--font-body);
  font-size:1.12vw;
  color:#606060;
  height:4.41vw;      /* fixed height */
  resize:none;         /* do not expand manually */
  overflow-y:auto;     /* internal scroll if needed */
  line-height:1.35;
  padding:0.49vw 0.35vw;
  padding-top:0.56vw;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.chat-input:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

/* Send button */
.chat-send{
  width:2.66vw;
  height:2.66vw;
  border:0.07vw solid var(--red-dark);
  border-radius:0.84vw;
  background:#c9592b;
  color:var(--bg-white-2);
  cursor:pointer;
  font-size:1.61vw;
  display:grid;
  place-items:center;
  transition:transform 180ms ease;
}

.chat-send {
  width: 2.66vw;
  height: 2.66vw;
  border-radius: .84vw;
  border: none;
  background: #d4632c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-send:hover{
  transform:translateY(-0.042vw);
}

.chat-send img {
  width:1.12vw;
  height:1.12vw;
  display: block;
  opacity:0.28;
  margin-left:0.14vw;
}

.chat-hint a{
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:0.35vw;
}

/* Locked state (during intro AND while waiting on API) */
.chat-locked .chip,
.chat-locked .chat-input,
.chat-locked .chat-inputbar,
.chat-locked .chat-send{
  opacity:0.55;
  pointer-events:none;
}

/* Typing / loader bubble */
.typing-dots{
  display:inline-flex;
  gap:0.42vw;
  align-items:center;
  padding:0.21vw 0;
}

.typing-dots span{
  width:0.56vw;
  height:0.56vw;
  border-radius:138.6vw;
  background:rgba(255,255,255,0.7);
  display:inline-block;
  animation:typingBounce 1.15s infinite ease-in-out;
}
.typing-dots span:nth-child(2){ animation-delay:0.12s; }
.typing-dots span:nth-child(3){ animation-delay:0.24s; }

@keyframes typingBounce{
  0%,80%,100%{ transform:translateY(0); opacity:0.55; }
  40%{ transform:translateY(-0.35vw); opacity:1; }
}

/* Bottom line + copyright */
.chat-bottom-line{
  width:100%;
  height:0.112vw;
  margin:3.15vw 0 1.75vw;
  background:rgba(255,255,255,0.08);
}

.chat-copyright{
  text-align:center;
  font-family:var(--font-body);
  font-size:1.26vw;
  color:var(--text-5);
}

}


@media screen and (min-width: 6in) and (max-width: 11in) {
  /* Footer shell */
.chat-footer{
  background:#3c3c3c;
  color:var(--bg-white-2);
  padding:4.5vw 0 1.5vw;                 /* 3 × 1.5 | 1 × 1.5 */
  position:relative;
}

/* Main column */
.chat-wrap{
  width:75vw;                            /* 50 × 1.5 */
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:2.625vw;                           /* 1.75 × 1.5 */
}

/* Transcript panel (fixed height, internal scroll, no visible scrollbar) */
.chat-transcript{
  height:50vw;                         /* 25 × 1.5 */
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;

  display:flex;
  flex-direction:column;
  gap:1.5vw;                             /* 1 × 1.5 */

  /* prevent long text from forcing horizontal scroll */
  overflow-wrap:anywhere;
  word-break:break-word;

  /* hide scrollbar visuals but keep scrolling */
  scrollbar-width:none;      /* Firefox */
  -ms-overflow-style:none;   /* IE/old Edge */
}
.chat-transcript::-webkit-scrollbar{
  width:0;
  height:0;
}

/* ======================
   MESSAGE ROWS
====================== */

.msg{
  display:flex;
  align-items:flex-start;
  gap:0.825vw;                           /* 0.55 × 1.5 */
}

/* Avatar */
.msg .avatar{
  width:3.25vw;                         /* 1.25 × 1.5 */
  height:auto;                        /* 1.25 × 1.5 */
  border-radius:0.525vw;                 /* 0.15 × 1.5 */
  background:#c9592b;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
}
.msg.user .avatar{ background:#5a5a5a; }

.msg .avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Bubble container */
.msg .bubble{
  max-width:82.5vw;                      /* 55 × 1.5 */
}

/* Name */
.msg .name{
  font-family:var(--font-heading);
  font-size:2.25vw;                     /* 1.05 × 1.5 */
  color:#ffffff;
  margin-bottom:0.3vw;                   /* 0.2 × 1.5 */
  font-weight:normal;
}

/* ======================
   MARKDOWN CONTENT (consistent look)
====================== */

.msg .text{
  font-family:var(--font-body);
  font-size:2vw;                       /* 1 × 1.5 */
  line-height:1.55;
  color:#d0d0d0;

  overflow-wrap:anywhere;
  word-break:break-word;
  padding-left: 1vw;
}

/* Vertical rhythm for common blocks */
.msg .text p{
  margin:0.3vw 0 0.45vw;                 /* 0.2 × 1.5 | 0.3 × 1.5 */
  font-size:2.05vw;                       /* 1 × 1.5 */
}
.msg .text p:last-child{ margin-bottom:0; }

.msg .text ul,
.msg .text ol{
  margin:0.675vw 0 1.125vw;              /* 0.45 × 1.5 | 0.75 × 1.5 */
  padding-left:1.8vw;                    /* 1.2 × 1.5 */
}
.msg .text li{
  margin:0.27vw 0;                       /* 0.18 × 1.5 */
}

/* Inline styles */
.msg .text strong{
  font-weight:700;
  color:var(--bg-white-2);
}
.msg .text em{
  font-style:italic;
}
.msg .text a{
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:0.375vw;         /* 0.25 × 1.5 */
}

/* Inline code */
.msg .text code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:1.75vw;                      /* 0.9 × 1.5 */
  padding:0.18vw 0.525vw;                /* 0.12 × 1.5 | 0.35 × 1.5 */
  border-radius:0.525vw;                 /* 0.35 × 1.5 */
  background:rgba(255,255,255,0.08);
}

/* Code blocks */
.msg .text pre{
  margin:0.9vw 0 1.35vw;                 /* 0.6 × 1.5 | 0.9 × 1.5 */
  padding:1.275vw 1.5vw;                 /* 0.85 × 1.5 | 1 × 1.5 */
  border-radius:1.2vw;                   /* 0.8 × 1.5 */
  background:rgba(255,255,255,0.08);
  overflow-x:auto;
}
.msg .text pre code{
  background:transparent;
  padding:0;
  display:block;
  white-space:pre;
  font-size:1.5vw;                     /* 0.95 × 1.5 */
}

/* ======================
   CONTROLS AREA
====================== */

.chat-controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.05vw;                            /* 0.7 × 1.5 */
}

/* Suggestion chips */
.chat-suggestions{
  width:70vw;                            /* 40 × 1.5 */
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.6vw 0.675vw;                     /* 0.4 × 1.5 | 0.45 × 1.5 */
}

.chip{
  background:var(--bg-white-2);
  border:0.12vw solid rgba(0,0,0,0.08);  /* 0.08 × 1.5 */
  border-radius:0.75vw;                  /* 0.5 × 1.5 */
  padding:1.25vw 1.5vw;                 /* 0.65 × 1.5 | 1 × 1.5 */
  font-family:var(--font-body);
  font-size:1.75vw;                     /* 0.95 × 1.5 */
  color:#4a4a4a;
  cursor:pointer;
  transition:transform 180ms ease;
}
.chip:hover{
  transform:translateY(-0.135vw);        /* 0.09 × 1.5 */
}

/* Input bar */
.chat-inputbar{
  width:73vw;                            /* 42 × 1.5 */
  height:5vw;                            /* 2 × 1.5 */
  background:var(--bg-white-2);
  border-radius:1.05vw;                  /* 0.7 × 1.5 */
  padding:1.95vw;                        /* 1.3 × 1.5 */
  display:flex;
  align-items:center;
  gap:1.5vw;                             /* 1 × 1.5 */
}

/* Textarea input (wraps + can scroll internally) */
.chat-input{
  border:none;
  outline:none;
  flex:1;
  background-color: var(--bg-white-2);
  font-family:var(--font-body);
  font-size:1.75vw;                       /* 0.8 × 1.5 */
  color:#606060;
  height:100%;                        /* 3.15 × 1.5 */
  resize:none;                           /* do not expand manually */
  overflow-y:auto;                       /* internal scroll if needed */
  line-height:1.35;
  padding:0.525vw 0.375vw;               /* 0.35 × 1.5 | 0.25 × 1.5 */
  padding-top:0.6vw;                     /* 0.4 × 1.5 */
  overflow-wrap:anywhere;
  word-break:break-word;
}

.chat-input:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

/* Send button */
.chat-send{
  width:3.25vw;                          /* 1.9 × 1.5 */
  height:3.25vw;                         /* 1.9 × 1.5 */
  border:0.075vw solid var(--red-dark);  /* 0.05 × 1.5 */
  border-radius:0.9vw;                   /* 0.6 × 1.5 */
  background:#c9592b;
  color:var(--bg-white-2);
  cursor:pointer;
  font-size:1.725vw;                     /* 1.15 × 1.5 */
  display:grid;
  place-items:center;
  transition:transform 180ms ease;
}

.chat-send {
  width: 3.25vw;
  height: 3.25vw;
  border-radius: .9vw;
  border: none;
  background: #d4632c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-send:hover{
  transform:translateY(-0.045vw);        /* 0.03 × 1.5 */
}

.chat-send img {
  width: 1.5vw;                          /* 0.8 × 1.5 */
  height: 1.5vw;                         /* 0.8 × 1.5 */
  display: block;
  opacity: .2;
  margin-left: 0.15vw;                   /* 0.1 × 1.5 */
}

.chat-hint a{
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:0.375vw;         /* 0.25 × 1.5 */
}

/* Locked state (during intro AND while waiting on API) */
.chat-locked .chip,
.chat-locked .chat-input,
.chat-locked .chat-inputbar,
.chat-locked .chat-send{
  opacity:0.55;
  pointer-events:none;
}

/* Typing / loader bubble */
.typing-dots{
  display:inline-flex;
  gap:0.45vw;                            /* 0.3 × 1.5 */
  align-items:center;
  padding:0.225vw 0;                     /* 0.15 × 1.5 */
}

.typing-dots span{
  width:0.6vw;                           /* 0.4 × 1.5 */
  height:0.6vw;                          /* 0.4 × 1.5 */
  border-radius:148.5vw;                 /* 99 × 1.5 */
  background:rgba(255,255,255,0.7);
  display:inline-block;
  animation:typingBounce 1.15s infinite ease-in-out;
}
.typing-dots span:nth-child(2){ animation-delay:0.12s; }
.typing-dots span:nth-child(3){ animation-delay:0.24s; }

@keyframes typingBounce{
  0%,80%,100%{ transform:translateY(0); opacity:0.55; }
  40%{ transform:translateY(-0.375vw); opacity:1; }   /* 0.25 × 1.5 */
}

/* Bottom line + copyright */
.chat-bottom-line{
  width:100%;
  height:0.12vw;                         /* 0.08 × 1.5 */
  margin:3.375vw 0 1.875vw;              /* 2.25 × 1.5 | 1.25 × 1.5 */
  background:rgba(255,255,255,0.08);
}

.chat-copyright{
  text-align:center;
  font-family:var(--font-body);
  font-size:1.5vw;                      /* 0.9 × 1.5 */
  color:var(--text-5);
  margin-bottom: .5vw;
}

}


@media screen and (min-width: 0in) and (max-width: 6in) {

    /* Footer shell */
.chat-footer{
  background:#3c3c3c;
  color:var(--bg-white-2);
  padding:6.5vw 0 1.5vw;                 /* 3 × 1.5 | 1 × 1.5 */
  position:relative;
}

/* Main column */
.chat-wrap{
  width:85vw;                            /* 50 × 1.5 */
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:2.625vw;                           /* 1.75 × 1.5 */
}

/* Transcript panel (fixed height, internal scroll, no visible scrollbar) */
.chat-transcript{
  height:87.5vw;                         /* 25 × 1.5 */
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;

  display:flex;
  flex-direction:column;
  gap:1.5vw;                             /* 1 × 1.5 */

  /* prevent long text from forcing horizontal scroll */
  overflow-wrap:anywhere;
  word-break:break-word;

  /* hide scrollbar visuals but keep scrolling */
  scrollbar-width:none;      /* Firefox */
  -ms-overflow-style:none;   /* IE/old Edge */
}
.chat-transcript::-webkit-scrollbar{
  width:0;
  height:0;
}

/* ======================
   MESSAGE ROWS
====================== */

.msg{
  display:flex;
  align-items:flex-start;
  gap:1.5vw;                           /* 0.55 × 1.5 */
}

/* Avatar */
.msg .avatar{
  width:5.5vw;                         /* 1.25 × 1.5 */
  height:5.5vw;                        /* 1.25 × 1.5 */
  border-radius:0.65vw;                 /* 0.15 × 1.5 */
  background:#c9592b;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  overflow:hidden;
}
.msg.user .avatar{ background:#5a5a5a; }

.msg .avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Bubble container */
.msg .bubble{
  max-width:82.5vw;                      /* 55 × 1.5 */
}

/* Name */
.msg .name{
  font-family:var(--font-heading);
  font-size:4vw;                     /* 1.05 × 1.5 */
  color:#ffffff;
  margin-bottom:0.9vw;                   /* 0.2 × 1.5 */
  font-weight:normal;
}

/* ======================
   MARKDOWN CONTENT (consistent look)
====================== */

.msg .text{
  font-family:var(--font-body);
  font-size:3.25vw;                       /* 1 × 1.5 */
  line-height:1.55;
  color:#d0d0d0;

  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Vertical rhythm for common blocks */
.msg .text p{
  margin:0.3vw 0 0.45vw;                 /* 0.2 × 1.5 | 0.3 × 1.5 */
  font-size:3.85vw;                       /* 1 × 1.5 */
}
.msg .text p:last-child{ margin-bottom:0; }

.msg .text ul,
.msg .text ol{
  margin:0.675vw 0 1.125vw;              /* 0.45 × 1.5 | 0.75 × 1.5 */
  padding-left:1.8vw;                    /* 1.2 × 1.5 */
}
.msg .text li{
  margin:0.27vw 0;                       /* 0.18 × 1.5 */
}

/* Inline styles */
.msg .text strong{
  font-weight:700;
  color:var(--bg-white-2);
}
.msg .text em{
  font-style:italic;
}
.msg .text a{
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:0.375vw;         /* 0.25 × 1.5 */
}

/* Inline code */
.msg .text code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:1.35vw;                      /* 0.9 × 1.5 */
  padding:0.18vw 0.525vw;                /* 0.12 × 1.5 | 0.35 × 1.5 */
  border-radius:0.525vw;                 /* 0.35 × 1.5 */
  background:rgba(255,255,255,0.08);
}

/* Code blocks */
.msg .text pre{
  margin:0.9vw 0 1.35vw;                 /* 0.6 × 1.5 | 0.9 × 1.5 */
  padding:1.275vw 1.5vw;                 /* 0.85 × 1.5 | 1 × 1.5 */
  border-radius:1.2vw;                   /* 0.8 × 1.5 */
  background:rgba(255,255,255,0.08);
  overflow-x:auto;
}
.msg .text pre code{
  background:transparent;
  padding:0;
  display:block;
  white-space:pre;
  font-size:1.425vw;                     /* 0.95 × 1.5 */
}

/* ======================
   CONTROLS AREA
====================== */

.chat-controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.05vw;                            /* 0.7 × 1.5 */
}

/* Suggestion chips */
.chat-suggestions{
  display: none !important;
  width:97vw;                            /* 40 × 1.5 */
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.9vw 0.975vw;                     /* 0.4 × 1.5 | 0.45 × 1.5 */
}

.chip{
  background:var(--bg-white-2);
  border:0.12vw solid rgba(0,0,0,0.08);  /* 0.08 × 1.5 */
  border-radius:0.75vw;                  /* 0.5 × 1.5 */
  padding:1.975vw 2.5vw;                 /* 0.65 × 1.5 | 1 × 1.5 */
  font-family:var(--font-body);
  font-size:2.5vw;                     /* 0.95 × 1.5 */
  color:#4a4a4a;
  cursor:pointer;
  transition:transform 180ms ease;
}
.chip:hover{
  transform:translateY(-0.135vw);        /* 0.09 × 1.5 */
}

/* Input bar */
.chat-inputbar{
  width:90vw;                            /* 42 × 1.5 */
  height:25vw;                            /* 2 × 1.5 */
  background:var(--bg-white-2);
  border-radius:1.05vw;                  /* 0.7 × 1.5 */
  padding:3vw;                        /* 1.3 × 1.5 */
  display:flex;
  align-items:center;
  gap:1.5vw;                             /* 1 × 1.5 */
  margin-top: 3vw;
}

/* Textarea input (wraps + can scroll internally) */
.chat-input{
  border:none;
  outline:none;
  flex:1;
  background-color: var(--bg-white-2);
  font-family:var(--font-body);
  font-size:16px;                       /* 0.8 × 1.5 */
  color:#606060;
  height:90%;                        /* 3.15 × 1.5 */
  resize:none;                           /* do not expand manually */
  overflow-y:auto;                       /* internal scroll if needed */
  line-height:1.35;
  padding:0.525vw 0.375vw;               /* 0.35 × 1.5 | 0.25 × 1.5 */
  padding-top:0.6vw;                     /* 0.4 × 1.5 */
  overflow-wrap:anywhere;
  word-break:break-word;
}

.chat-input:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

/* Send button */
.chat-send{
  width: 8vw;                          /* 1.9 × 1.5 */
  height:8vw;                         /* 1.9 × 1.5 */
  border:0.075vw solid var(--red-dark);  /* 0.05 × 1.5 */
  border-radius:0.9vw;                   /* 0.6 × 1.5 */
  background:#c9592b;
  color:var(--bg-white-2);
  cursor:pointer;
  font-size:1.725vw;                     /* 1.15 × 1.5 */
  display:grid;
  place-items:center;
  transition:transform 180ms ease;
}

.chat-send {
  width: 8vw;
  height: 8vw;
  border-radius: .9vw;
  border: none;
  background: #d4632c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-send:hover{
  transform:translateY(-0.045vw);        /* 0.03 × 1.5 */
}

.chat-send img {
  width: 4vw;                          /* 0.8 × 1.5 */
  height: 4vw;                         /* 0.8 × 1.5 */
  display: block;
  opacity: .2;
  margin-left: 0.2vw;                   /* 0.1 × 1.5 */
}

.chat-hint a{
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:0.375vw;         /* 0.25 × 1.5 */
}

/* Locked state (during intro AND while waiting on API) */
.chat-locked .chip,
.chat-locked .chat-input,
.chat-locked .chat-inputbar,
.chat-locked .chat-send{
  opacity:0.55;
  pointer-events:none;
}

/* Typing / loader bubble */
.typing-dots{
  display:inline-flex;
  gap:0.65vw;                            /* 0.3 × 1.5 */
  align-items:center;
  padding:0.225vw 0;                     /* 0.15 × 1.5 */
}

.typing-dots span{
  width:1.5vw;                           /* 0.4 × 1.5 */
  height:1.5vw;                          /* 0.4 × 1.5 */
  border-radius:148.5vw;                 /* 99 × 1.5 */
  background:rgba(255,255,255,0.7);
  display:inline-block;
  animation:typingBounce 1.15s infinite ease-in-out;
}
.typing-dots span:nth-child(2){ animation-delay:0.12s; }
.typing-dots span:nth-child(3){ animation-delay:0.24s; }

@keyframes typingBounce{
  0%,80%,100%{ transform:translateY(0); opacity:0.55; }
  40%{ transform:translateY(-0.375vw); opacity:1; }   /* 0.25 × 1.5 */
}

/* Bottom line + copyright */
.chat-bottom-line{
  width:100%;
  height:0.3vw;                         /* 0.08 × 1.5 */
  margin:3.375vw 0 1.875vw;              /* 2.25 × 1.5 | 1.25 × 1.5 */
  background:rgba(255,255,255,0.08);
}

.chat-copyright{
  text-align:center;
  font-family:var(--font-body);
  font-size:2.75vw;                      /* 0.9 × 1.5 */
  color:var(--text-5);
  margin-bottom: 1vw;
}


}






















/* ======================
   STICKY PHONE CTA (IMAGE ONLY)
====================== */

.phone-cta {
  position: fixed;
  bottom: 1vw;
  right: 1vw;
  z-index: 999;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  transition: transform 200ms ease;
}

/* PHONE IMAGE */
.phone-cta img {
  width: 5vw;          /* adjust if needed */
  height: auto;
  display: block;
}

/* HOVER LIFT */
.phone-cta:hover {
  transform: translateY(-1vw);
}

/* TOOLTIP */
.phone-tooltip {
  position: absolute;
  right: 2.6vw;
  top: 50%;
  transform: translateY(-50%) translateX(.25vw);
  background-color: var(--bg-black);
  color: var(--bg-white-2);
  font-family: var(--font-heading);
  font-size: 0.85vw;
  padding: 0.2vw 0.6vw;
  padding-bottom: .35vw;
  border-radius: 0.3vw;

  white-space: nowrap;
  opacity: 0;
  pointer-events: none;

  transition: opacity 180ms ease, transform 180ms ease;
}

/* TOOLTIP ARROW */
.phone-tooltip::after {
display: none;
}

/* SHOW TOOLTIP */
.phone-cta:hover .phone-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}


/* PHONE CTA VISIBILITY STATES */
.phone-cta {
  opacity: 0;
  pointer-events: none;
}


/* CARTOON BOUNCE ANIMATION */
@keyframes phone-bounce {
  0% {
    transform: translateY(12px);
  }
  50% {
    transform: translateY(-6px);
  }
  70% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(0);
  }
}

.phone-cta.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
  animation: phone-bounce 520ms ease-out;
}


/* HOVER LIFT */
.phone-cta.visible:hover {
  transform: translateY(-.2vw);
}


@media screen and (min-width: 20in) and (max-width: 25in) {
  /* ======================
   STICKY PHONE CTA (IMAGE ONLY)
====================== */

.phone-cta {
  position: fixed;
  bottom: 1.2vw;
  right: 1.2vw;
  z-index: 999;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  transition: transform 200ms ease;
}

/* PHONE IMAGE */
.phone-cta img {
  width: 6vw;          /* adjust if needed */
  height: auto;
  display: block;
}

/* HOVER LIFT */
.phone-cta:hover {
  transform: translateY(-1.2vw);
}

/* TOOLTIP */
.phone-tooltip {
  position: absolute;
  right: 3.12vw;
  top: 50%;
  transform: translateY(-50%) translateX(.3vw);
  background-color: var(--bg-black);
  color: var(--bg-white-2);
  font-family: var(--font-heading);
  font-size: 1.02vw;
  padding: 0.24vw 0.72vw;
  padding-bottom: .42vw;
  border-radius: 0.36vw;

  white-space: nowrap;
  opacity: 0;
  pointer-events: none;

  transition: opacity 180ms ease, transform 180ms ease;
}

/* TOOLTIP ARROW */
.phone-tooltip::after {
display: none;
}

/* SHOW TOOLTIP */
.phone-cta:hover .phone-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}


/* PHONE CTA VISIBILITY STATES */
.phone-cta {
  opacity: 0;
  pointer-events: none;
}


/* CARTOON BOUNCE ANIMATION */
@keyframes phone-bounce {
  0% {
    transform: translateY(9.6px);
  }
  50% {
    transform: translateY(-4.8px);
  }
  70% {
    transform: translateY(2.4px);
  }
  100% {
    transform: translateY(0);
  }
}

.phone-cta.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
  animation: phone-bounce 520ms ease-out;
}


/* HOVER LIFT */
.phone-cta.visible:hover {
  transform: translateY(-.24vw);
}

}


@media screen and (min-width: 16in) and (max-width: 20in) {
  /* ======================
   STICKY PHONE CTA (IMAGE ONLY)
====================== */

.phone-cta {
  position: fixed;
  bottom: 1.3vw;                 /* was 1vw */
  right: 1.3vw;                  /* was 1vw */
  z-index: 999;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  transition: transform 200ms ease;
}

/* PHONE IMAGE */
.phone-cta img {
  width: 6.5vw;                  /* was 5vw */
  height: auto;
  display: block;
}

/* HOVER LIFT */
.phone-cta:hover {
  transform: translateY(-1.3vw); /* was -1vw */
}

/* TOOLTIP */
.phone-tooltip {
  position: absolute;
  right: 3.38vw;                 /* was 2.6vw */
  top: 50%;
  transform: translateY(-50%) translateX(0.325vw); /* was .25vw */
  background-color: var(--bg-black);
  color: var(--bg-white-2);
  font-family: var(--font-heading);
  font-size: 1.105vw;            /* was 0.85vw */
  padding: 0.26vw 0.78vw;        /* was 0.2vw 0.6vw */
  padding-bottom: 0.455vw;       /* was .35vw */
  border-radius: 0.39vw;         /* was 0.3vw */

  white-space: nowrap;
  opacity: 0;
  pointer-events: none;

  transition: opacity 180ms ease, transform 180ms ease;
}

/* TOOLTIP ARROW */
.phone-tooltip::after {
display: none;
}

/* SHOW TOOLTIP */
.phone-cta:hover .phone-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* PHONE CTA VISIBILITY STATES */
.phone-cta {
  opacity: 0;
  pointer-events: none;
}

/* CARTOON BOUNCE ANIMATION */
@keyframes phone-bounce {
  0% {
    transform: translateY(8.4px);
  }
  50% {
    transform: translateY(-4.2px);
  }
  70% {
    transform: translateY(2.1px);
  }
  100% {
    transform: translateY(0);
  }
}

.phone-cta.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
  animation: phone-bounce 520ms ease-out;
}

/* HOVER LIFT */
.phone-cta.visible:hover {
  transform: translateY(-0.26vw);  /* was -.2vw */
}

}


@media screen and (min-width: 12in) and (max-width: 16in) {
  /* ======================
   STICKY PHONE CTA (IMAGE ONLY)
====================== */

.phone-cta {
  position: fixed;
  bottom: 1.4vw;
  right: 1.4vw;
  z-index: 999;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  transition: transform 200ms ease;
}

/* PHONE IMAGE */
.phone-cta img {
  width: 7vw;          /* adjust if needed */
  height: auto;
  display: block;
}

/* HOVER LIFT */
.phone-cta:hover {
  transform: translateY(-1.4vw);
}

/* TOOLTIP */
.phone-tooltip {
  position: absolute;
  right: 3.64vw;
  top: 50%;
  transform: translateY(-50%) translateX(0.35vw);
  background-color: var(--bg-black);
  color: var(--bg-white-2);
  font-family: var(--font-heading);
  font-size: 1.19vw;
  padding: 0.28vw 0.84vw;
  padding-bottom: 0.49vw;
  border-radius: 0.42vw;

  white-space: nowrap;
  opacity: 0;
  pointer-events: none;

  transition: opacity 180ms ease, transform 180ms ease;
}

/* TOOLTIP ARROW */
.phone-tooltip::after {
  display: none;
}

/* SHOW TOOLTIP */
.phone-cta:hover .phone-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* PHONE CTA VISIBILITY STATES */
.phone-cta {
  opacity: 0;
  pointer-events: none;
}

/* CARTOON BOUNCE ANIMATION */
@keyframes phone-bounce {
  0% {
    transform: translateY(7.2px);
  }
  50% {
    transform: translateY(-3.6px);
  }
  70% {
    transform: translateY(1.8px);
  }
  100% {
    transform: translateY(0);
  }
}

.phone-cta.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
  animation: phone-bounce 520ms ease-out;
}

/* HOVER LIFT */
.phone-cta.visible:hover {
  transform: translateY(-0.28vw);
}

}


@media screen and (min-width: 6in) and (max-width: 11in) {
  /* ======================
   STICKY PHONE CTA (IMAGE ONLY)
====================== */

.phone-cta {
  position: fixed;
  bottom: 1.75vw;                 /* 1 × 1.5 */
  right: 2.05vw;                  /* 1 × 1.5 */
  z-index: 999;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  transition: transform 200ms ease;
}

/* PHONE IMAGE */
.phone-cta img {
  width: 8.75vw;                  /* 5 × 1.5 */
  height: auto;
  display: block;
}

/* HOVER LIFT */
.phone-cta:hover {
  transform: translateY(-1.5vw); /* 1 × 1.5 */
}

/* TOOLTIP */
.phone-tooltip {
  position: absolute;
  right: 3.9vw;                  /* 2.6 × 1.5 */
  top: 50%;
  transform: translateY(-50%) translateX(0.375vw); /* 0.25 × 1.5 */
  background-color: var(--bg-black);
  color: var(--bg-white-2);
  font-family: var(--font-heading);
  font-size: 1.275vw;            /* 0.85 × 1.5 */
  padding: 0.3vw 0.9vw;          /* 0.2 × 1.5 | 0.6 × 1.5 */
  padding-bottom: 0.525vw;       /* 0.35 × 1.5 */
  border-radius: 0.45vw;         /* 0.3 × 1.5 */

  white-space: nowrap;
  opacity: 0;
  pointer-events: none;

  transition: opacity 180ms ease, transform 180ms ease;
}

/* TOOLTIP ARROW */
.phone-tooltip::after {
  display: none;
}

/* SHOW TOOLTIP */
.phone-cta:hover .phone-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* PHONE CTA VISIBILITY STATES */
.phone-cta {
  opacity: 0;
  pointer-events: none;
}

/* CARTOON BOUNCE ANIMATION */
@keyframes phone-bounce {
  0% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(-3px);
  }
  70% {
    transform: translateY(1.5px);
  }
  100% {
    transform: translateY(0);
  }
}

.phone-cta.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
  animation: phone-bounce 520ms ease-out;
}

/* HOVER LIFT */
.phone-cta.visible:hover {
  transform: translateY(-0.3vw);  /* 0.2 × 1.5 */
}

}





@media screen and (min-width: 0in) and (max-width: 6in) {
  /* ======================
   STICKY PHONE CTA (IMAGE ONLY)
====================== */

.phone-cta {
display: none;
}


}