:root {

  /* =========================
     BASE COLOR SYSTEM
  ========================= */

  --color-primary: rgb(40, 55, 146);
  --color-secondary: rgb(246, 179, 28);
  --color-tertiary: rgb(250, 250, 250);

  /* RGB (for opacity control) */
  --color-primary-rgb: 40, 55, 146;
  --color-secondary-rgb: 246, 179, 28;
  --color-tertiary-rgb: 250, 250, 250;

  /* =========================
     SEMANTIC COLORS
  ========================= */

  /* Backgrounds (ALL GRADIENTS) */
  --bg-primary: linear-gradient(168deg,rgba(2, 0, 36, 1) 0%, rgba(40, 55, 146, 1) 70%, rgba(36, 123, 255, 1) 100%);

  --bg-secondary: linear-gradient(177deg,rgba(246, 179, 48, 1) 49%, rgba(196, 93, 2, 1) 100%);

  --bg-tertiary: radial-gradient(circle,rgba(237, 237, 237, 1) 0%, rgba(196, 196, 196, 1) 100%);




  /* =========================
     BORDERS
  ========================= */

  --border-primary: rgb(40, 55, 146);
  --border-secondary: rgb(246, 179, 28);
  --border-tertiary: rgb(255, 255, 255);

  /* =========================
     TYPOGRAPHY
  ========================= */

  --font-heading: "Open Sans", Georgia, serif;
  --font-body: "Dosis", Arial, sans-serif;
  --font-cta: "PT Sans", "Roboto", Arial, sans-serif;

  /* Font Sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 3rem;
  --font-size-display: clamp(2.5rem, 5vw, 4rem);

  /* Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-bold: 700;
  --font-black: 900;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;

  /* =========================
     SPACING SYSTEM
  ========================= */

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 64px;

  /* =========================
     CTA SYSTEM
  ========================= */

  /* Padding */
  --cta-padding-y-sm: 8px;
  --cta-padding-y-md: 12px;
  --cta-padding-y-lg: 16px;

  --cta-padding-x-sm: 16px;
  --cta-padding-x-md: 24px;
  --cta-padding-x-lg: 32px;

  --cta-padding-y: var(--cta-padding-y-md);
  --cta-padding-x: var(--cta-padding-x-md);

  /* CTA Backgrounds (GRADIENTS) */
  --cta-bg-primary: linear-gradient(168deg,rgba(2, 0, 36, 1) 0%, rgba(40, 55, 146, 1) 70%, rgba(36, 123, 255, 1) 100%);





  --cta-bg-secondary: linear-gradient(177deg,rgba(246, 179, 48, 1) 49%, rgba(196, 93, 2, 1) 100%);





  --cta-bg-tertiary: radial-gradient(circle,rgba(237, 237, 237, 1) 0%, rgba(196, 196, 196, 1) 100%);



/* ==========================
     Shadow System
========================== */
--shadow-sm: 0 4px 10px rgba(0,0,0,0.08);

--shadow-md: 0 10px 30px rgba(0,0,0,0.15);

--shadow-lg: 0 20px 60px rgba(0,0,0,0.25);



 
 
  /* =========================
     BORDER RADIUS
  ========================= */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

 
  /* =========================
     TRANSITIONS
  ========================= */

  --transition-fast: 0.2s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;

}


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

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  line-height: var(--line-height-base);
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
  
}




html,
body{
  overflow-x:hidden;
}

/* =========================
   HEADER
========================= */

.site-header{
  position:sticky;
  top:0;
  z-index:5000;

  width:100%;

  background:white;
  border-bottom:1px solid rgba(0,0,0,0.06);
}

/* =========================
   NAVBAR
========================= */

.nav{
  width:100%;

  min-height:88px;

  display:grid;
  grid-template-columns:auto 1fr auto;

  align-items:center;

  gap:clamp(1rem, 2vw, 2rem);

  padding-inline:clamp(1rem, 3vw, 2rem);
}

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

.nav__left{
  display:flex;
  align-items:center;

  min-width:0;
}

.nav__logo{
  display:inline-flex;
  align-items:center;

  text-decoration:none;
}

.nav__logo-image{
  width:auto;
  height:clamp(56px, 6vw, 82px);

  object-fit:contain;
  display:block;
}

/* =========================
   CENTER
========================= */

.nav__center{
  display:flex;
  justify-content:center;

  min-width:0;
}

.nav__links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;

  gap:clamp(1rem, 2vw, 2.5rem);

  list-style:none;

  margin:0;
  padding:0;
}

.nav__item{
  min-width:0;
}

.nav__link{
  position:relative;

  display:inline-flex;

  text-decoration:none;

  font-family:var(--font-body);
  font-size:clamp(0.95rem, 1vw, 1.05rem);
  font-weight:600;

  white-space:nowrap;

  color:var(--color-primary);

  transition:var(--transition-normal);
}

.nav__link::after{
  content:"";

  position:absolute;
  left:0;
  bottom:-6px;

  width:0%;
  height:2px;

  background:var(--color-secondary);

  transition:width 0.3s ease;
}

.nav__link:hover{
  color:var(--color-secondary);
}

.nav__link:hover::after{
  width:100%;
}

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

.nav__right{
  display:flex;
  align-items:center;
  justify-content:flex-end;

  gap:1rem;

  min-width:0;
}

/* =========================
   CTA
========================= */

.nav__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:0.75rem;

  padding:0.9rem 1.25rem;

  border:2px solid var(--color-primary);
  border-radius:12px;

  background:transparent;

  text-decoration:none;

  transition:
  transform 0.3s ease,
  border-color 0.3s ease;
}

.nav__cta:hover{
  transform:translateY(-2px);
}

.nav__cta-text{
  color:var(--color-primary);

  font-family:var(--font-heading);
  font-size:0.9rem;
  font-weight:800;

  letter-spacing:0.05em;

  white-space:nowrap;
}

.nav__cta-icon{
  width:20px;
  height:20px;

  flex-shrink:0;
}

/* =========================
   TOGGLE
========================= */

.nav__toggle{
  display:none;

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

  width:52px;
  height:52px;

  padding:0;

  border:none;
  border-radius:50%;

  background:transparent;

  cursor:pointer;
}

.nav__toggle-icon{
  width:28px;
  height:28px;

  object-fit:contain;
}

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

.nav-overlay{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,0.5);

  opacity:0;
  visibility:hidden;

  transition:
  opacity 0.35s ease,
  visibility 0.35s ease;

  z-index:6000;
}

.nav-overlay.active{
  opacity:1;
  visibility:visible;
}

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

.mobile-menu{
  position:fixed;
  top:0;
  right:0;

  width:min(100%, 420px);
  height:100vh;

  padding:1.5rem;

  background:white;

  transform:translateX(100%);

  transition:transform 0.4s ease;

  z-index:7000;

  display:flex;
  flex-direction:column;

  overflow-y:auto;
}

.mobile-menu.active{
  transform:translateX(0);
}

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

.mobile-menu__top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:1rem;

  margin-bottom:2rem;
}

.mobile-menu__logo{
  display:inline-flex;
}

.mobile-menu__logo-image{
  height:72px;
  width:auto;

  object-fit:contain;
}

.mobile-menu__close{
  display:flex;
  align-items:center;
  justify-content:center;

  width:52px;
  height:52px;

  padding:0;

  border:none;
  background:transparent;

  cursor:pointer;

  flex-shrink:0;
}

.mobile-menu__close-icon{
  width:28px;
  height:28px;
}

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

.mobile-menu__body{
  flex:1;

  display:flex;
  flex-direction:column;
  justify-content:center;

  gap:2rem;
}

.mobile-menu__links{
  list-style:none;

  display:flex;
  flex-direction:column;

  gap:1.25rem;

  margin:0;
  padding:0;
}

.mobile-menu__link{
  text-decoration:none;

  font-family:var(--font-body);
  font-size:clamp(1.25rem, 4vw, 1.75rem);
  font-weight:700;

  color:var(--color-primary);

  transition:color 0.3s ease;
}

.mobile-menu__link:hover{
  color:var(--color-secondary);
}

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

.mobile-menu__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:0.75rem;

  width:100%;

  padding:1rem 1.25rem;

  border:2px solid var(--color-primary);
  border-radius:12px;

  background:none;

  text-decoration:none;
}

.mobile-menu__cta-text{
  color:var(--color-primary);

  font-family:var(--font-heading);
  font-size:1rem;
  font-weight:800;

  letter-spacing:0.05em;
}

.mobile-menu__cta-icon{
  width:22px;
  height:22px;
}

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

@media (max-width: 992px){

  .nav{
    min-height:84px;
  }

  .nav__center{
    display:none;
  }

  .nav__cta{
    display:none;
  }

  .nav__toggle{
    display:flex;
  }

}

@media (max-width: 576px){

  .nav{
    min-height:78px;

    padding-inline:1rem;
  }

  .nav__logo-image{
    height:56px;
  }

  .nav__toggle{
    width:46px;
    height:46px;
  }

  .nav__toggle-icon{
    width:24px;
    height:24px;
  }

  .mobile-menu{
    width:100%;
  }

}



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

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

/* =========================================
   BACKGROUND SLIDER
========================================= */

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

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero-slide.active {
  opacity: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

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

  background:
    linear-gradient(
      rgba(0,0,0,0.52),
      rgba(0,0,0,0.32)
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,0.2),
      rgba(0,0,0,0.6)
    );
}

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

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

  width: min(90%, 900px);

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

  text-align: center;

  padding:
    clamp(7rem, 10vw, 10rem)
    clamp(1rem, 3vw, 2rem);

  color: var(--color-tertiary);
}

/* =========================================
   EYEBROW
========================================= */

.hero-eyebrow {
  position: relative;

  margin: 0 0 clamp(1rem, 2vw, 1.5rem);

  font-size: clamp(0.85rem, 1vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: var(--color-secondary);
}

.hero-eyebrow::after {
  content: "";

  display: block;

  width: 80%;
  height: 2px;

  margin: 0.6rem auto 0;

  background: var(--color-secondary);

  border-radius: 999px;
}

/* =========================================
   TITLE
========================================= */

.hero-title {
  margin: 0;

  font-family: var(--font-heading);
  font-size: var(--font-size-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;

  text-wrap: balance;

  

  text-shadow: var(--shadow-md);
}

/* =========================================
   DESCRIPTION
========================================= */

.hero-description {
  margin-top: clamp(1.2rem, 2vw, 2rem);

  max-width: 65ch;

  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.8;

  color: rgba(var(--color-tertiary-rgb), 0.92);

  text-wrap: pretty;
}

/* =========================================
   CTA GROUP
========================================= */

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 2vw, 1.5rem);

  margin-top: clamp(2rem, 4vw, 3rem);

  flex-wrap: nowrap;
}

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

.hero-btn {
  position: relative;

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

  min-width: clamp(140px, 15vw, 180px);

  padding:
    clamp(0.9rem, 2vw, 1rem)
    clamp(1.5rem, 3vw, 2rem);

  border-radius: var(--radius-md);

  font-family: var(--font-cta);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    background var(--transition-normal),
    color var(--transition-normal);

  overflow: hidden;
}

/* =========================================
   PRIMARY CTA
========================================= */

.hero-btn-primary {
  background: var(--bg-secondary);
  color: #111;

  box-shadow: var(--shadow-md);
}

.hero-btn-primary:hover,
.hero-btn-primary:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* =========================================
   SECONDARY CTA
========================================= */

.hero-btn-secondary {
  background: transparent;

  color: var(--color-tertiary);

  border: 2px solid rgba(
    var(--color-tertiary-rgb),
    0.9
  );

  backdrop-filter: blur(8px);
}

.hero-btn-secondary:hover,
.hero-btn-secondary:focus-visible {
  background: rgba(
    var(--color-tertiary-rgb),
    0.1
  );

  transform: translateY(-3px);
}

/* =========================================
   ACCESSIBILITY FOCUS STATES
========================================= */

.hero-btn:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 4px;
}

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

@media (max-width: 768px) {

  .hero {
    min-height: 100svh;
  }

  .hero-description {
    line-height: 1.7;
  }

  .hero-cta-group {
    gap: 0.8rem;
  }

  .hero-btn {
    min-width: 140px;
    padding-inline: 1.25rem;
  }

}

@media (max-width: 480px) {

  .hero-content {
    width: min(92%, 700px);
  }

  .hero-title {
    font-size: clamp(1rem, 8vw, 2.5rem);
  }

  .hero-description {
    font-size: 1rem;
  }

}








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

.about-section{
  position:relative;

  padding:
  clamp(5rem, 10vw, 8rem)
  clamp(1.5rem, 4vw, 3rem);

  overflow:hidden;

  background:var(--bg-primary);

  isolation:isolate;
}

/* =========================
   CONTAINER
========================= */

.about-section__container{
  width:min(100%, 1300px);

  margin-inline:auto;

  display:flex;
  flex-direction:column;

  align-items:center;

  gap:
  clamp(3rem, 6vw, 5rem);

  text-align:center;
}

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

.about-section__content{
  width:min(100%, 950px);

  display:flex;
  flex-direction:column;

  align-items:center;

  gap:
  clamp(1.5rem, 3vw, 2rem);
}

/* =========================
   EYEBROW
========================= */

.about-section__eyebrow{
  position:relative;

  display:inline-flex;

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

  margin:0;

  padding-bottom:1rem;

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

  font-size:
  clamp(
    0.8rem,
    1vw,
    1rem
  );

  font-weight:
  var(--font-bold);

  letter-spacing:0.18em;

  color:
  var(--color-tertiary);

  text-transform:uppercase;

  text-wrap:balance;
}

/* UNDERLINE */

.about-section__eyebrow::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  transform:translateX(-50%);

  width:clamp(90px, 8vw, 130px);
  height:2px;

  border-radius:999px;

  background:
  var(--color-secondary);

  box-shadow:
  0 0 12px rgba(
    var(--color-secondary-rgb),
    0.45
  );
}

/* =========================
   TITLE
========================= */

.about-section__title{
  margin:0;



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

  font-size:
  clamp(2.5rem, 5vw, 5rem);

  line-height:1.1;

  font-weight:
  var(--font-black);

  color:
  var(--color-tertiary);

  text-wrap:balance;
}

/* =========================
   TEXT GROUP
========================= */

.about-section__text-group{
  display:flex;
  flex-direction:column;

  align-items:center;

  gap:
  clamp(1.25rem, 2vw, 1.75rem);
}

/* =========================
   TEXT
========================= */

.about-section__text{
  margin:0;

  max-width:850px;

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

  font-size:
  clamp(1rem, 1.5vw, 1.2rem);

  line-height:1.9;

  color:
  rgba(
    var(--color-tertiary-rgb),
    0.92
  );

  text-wrap:pretty;
}

/* =========================
   IMAGES OUTER WRAPPER
========================= */

.about-section__images-wrapper{
  width:100%;

  padding:
  clamp(1rem, 2vw, 1.5rem);

  border:
  2px solid rgba(
    var(--color-tertiary-rgb)
  );

  border-radius:
  var(--radius-sm);

  background: none;

  backdrop-filter:
  blur(10px);

  box-shadow:
  var(--shadow-lg);

  overflow:hidden;
}

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

.about-section__images{
  width:100%;

  display:grid;

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

  gap:
  clamp(1rem, 2vw, 1.5rem);
}

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

.about-section__image-card{
  position:relative;

  margin:0;

  overflow:hidden;

  border-radius:
  var(--radius-sm);

  min-height:
  clamp(320px, 40vw, 520px);

  background:
  rgba(
    var(--color-tertiary-rgb),
    0.03
  );

  isolation:isolate;
}

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

.about-section__image{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transition:
  transform var(--transition-slow);

  will-change:transform;
}

/* IMAGE OVERLAY */

.about-section__image-card::after{
  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    to top,
    rgba(0,0,0,0.28),
    rgba(0,0,0,0.02)
  );

  pointer-events:none;
}

/* HOVER EFFECT */

.about-section__image-card:hover
.about-section__image{
  transform:scale(1.05);
}

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

.about-section__bottom{
  width:min(100%, 900px);

  display:flex;
  flex-direction:column;

  align-items:center;

  gap:
  clamp(1.5rem, 3vw, 2rem);
}

/* =========================
   STATEMENT
========================= */

.about-section__statement{
  margin:0;

  max-width:780px;

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

  font-size:
  clamp(1.05rem, 1.7vw, 1.3rem);

  line-height:1.9;

  font-weight:
  var(--font-bold);

  color:
  var(--color-tertiary);

  text-wrap:pretty;
}

/* =========================
   LINK
========================= */

.about-section__link{
  display:inline-flex;

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

  gap:
  var(--space-sm);

  padding:
  var(--cta-padding-y)
  var(--cta-padding-x);

  border-radius:
  var(--radius-lg);

  border:
  2px solid rgba(
    var(--color-tertiary-rgb),
    0.85
  );

  background:
  rgba(
    var(--color-tertiary-rgb),
    0.05
  );

  backdrop-filter:
  blur(10px);

  text-decoration:none;

  box-shadow:
  var(--shadow-sm);

  transition:
  transform var(--transition-normal),
  box-shadow var(--transition-normal),
  background var(--transition-normal);

  min-height:56px;
}

/* HOVER + FOCUS */

.about-section__link:hover,
.about-section__link:focus-visible{
  transform:
  translateY(-4px);

  box-shadow:
  var(--shadow-lg);

  background:
  rgba(
    var(--color-tertiary-rgb),
    0.12
  );
}

/* ACCESSIBILITY */

.about-section__link:focus-visible{
  outline:
  3px solid var(--color-secondary);

  outline-offset:4px;
}

/* =========================
   LINK TEXT
========================= */

.about-section__link-text{
  font-family:
  var(--font-cta);

  font-size:
  clamp(0.9rem, 1vw, 1rem);

  font-weight:
  var(--font-bold);

  letter-spacing:0.08em;

  color:
  var(--color-tertiary);

  text-transform:uppercase;
}

/* =========================
   LINK ICON
========================= */

.about-section__link-icon{
  width:20px;
  height:20px;

  object-fit:contain;

  flex-shrink:0;
}

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

@media (max-width: 992px){

  .about-section__images{
    grid-template-columns:1fr;
  }

  .about-section__image-card{
    min-height:420px;
  }

}

@media (max-width: 768px){

  .about-section{
    padding:
    clamp(4rem, 10vw, 6rem)
    clamp(1.25rem, 5vw, 1.5rem);
  }

  .about-section__title{
    max-width:100%;
  }

  .about-section__image-card{
    min-height:320px;
  }

  .about-section__images-wrapper{
    padding:1rem;
  }

}

@media (prefers-reduced-motion: reduce){

  .about-section__image,
  .about-section__link{
    transition:none;
  }

  .about-section__image-card:hover
  .about-section__image{
    transform:none;
  }

}





















/* =========================
   ACHIEVEMENTS SECTION
========================= */

.achievements-section{
  position:relative;

  padding:
  clamp(5rem, 10vw, 8rem)
  clamp(1.5rem, 4vw, 3rem);

  background:
  var(--bg-tertiary);

  overflow:hidden;
}

/* =========================
   CONTAINER
========================= */

.achievements-section__container{
  width:min(100%, 1300px);

  margin-inline:auto;

  display:flex;
  flex-direction:column;

  align-items:center;

  text-align:center;

  gap:
  clamp(3rem, 6vw, 5rem);
}

/* =========================
   HEADER
========================= */

.achievements-section__header{
  width:min(100%, 900px);

  display:flex;
  flex-direction:column;

  align-items:center;

  gap:
  clamp(1.25rem, 2vw, 1.75rem);
}

/* =========================
   EYEBROW
========================= */

.achievements-section__eyebrow{
  position:relative;

  display:inline-flex;

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

  margin:0;

  padding-bottom:1rem;

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

  font-size:
  clamp(0.8rem, 1vw, 1rem);

  font-weight:
  var(--font-bold);

  letter-spacing:0.18em;

  text-transform:uppercase;

  color:
  var(--color-primary);

  text-wrap:balance;
}

/* UNDERLINE */

.achievements-section__eyebrow::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  transform:translateX(-50%);

  width:
  clamp(90px, 8vw, 130px);

  height:2px;

  border-radius:999px;

  background:
  var(--color-secondary);

  box-shadow:
  0 0 12px rgba(
    var(--color-secondary-rgb),
    0.45
  );
}

/* =========================
   TITLE
========================= */

.achievements-section__title{
  margin:0;


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

  font-size:
  clamp(2.5rem, 5vw, 5rem);

  line-height:1.1;

  font-weight:
  var(--font-black);

  color:
  var(--color-primary);

  text-wrap:balance;
}

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

.achievements-section__content{
  width:100%;

  display:grid;

  grid-template-columns:
  minmax(280px, 500px)
  minmax(400px, 1fr);

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

  gap:
  clamp(2rem, 5vw, 5rem);
}

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

.achievements-section__left{
  display:flex;
  justify-content:center;
}

/* =========================
   STATEMENT
========================= */

.achievements-section__statement{
  margin:0;

  max-width:500px;

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

  font-size:
  clamp(1rem, 1.5vw, 1.2rem);

  line-height:1.9;

  color:
  rgba(
    var(--color-primary-rgb),
    0.98
  );

  text-wrap:pretty;
}

/* =========================
   CARDS WRAPPER
========================= */

.achievements-section__cards-wrapper{
  width:100%;

  padding:
  clamp(1rem, 2vw, 1.5rem);

  border: 2px solid rgba(
    var(--color-primary-rgb),
    0.95
  );
  
  
    
  

  border-radius:
  var(--radius-sm);

  overflow:hidden;
}

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

.achievements-section__right{
  display:grid;

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

  gap:
  clamp(1rem, 2vw, 1.5rem);
}

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

.achievement-card{
  position:relative;

  min-height:180px;

  display:flex;
  flex-direction:column;

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

  text-align:center;

  padding:
  clamp(1.5rem, 3vw, 2rem);

  border-radius:
  var(--radius-md);
 
  border: rgba(var(--color-primary-rgb), 0.85) solid 2px;

  transition:
  transform var(--transition-normal),
  border-color var(--transition-normal);

  overflow:hidden;
}

/* HOVER */

.achievement-card:hover{
  transform:
  translateY(-6px);

  border-color:
  rgba(
    var(--color-secondary-rgb),
    0.45
  );
}

/* =========================
   NUMBER
========================= */

.achievement-card__number{
  font-family:
  var(--font-heading);

  font-size:
  clamp(3rem, 4vw, 5rem);

  line-height:1;

  font-weight:900;

  color:
  var(--color-primary);
}

/* =========================
   LABEL
========================= */

.achievement-card__label{
  margin-top:
  var(--space-md);

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

  font-size:
  clamp(0.9rem, 1vw, 1rem);

  font-weight:
  var(--font-bold);

  line-height:
  var(--line-height-normal);

  color:
  var(--color-primary);

  text-wrap:balance;
}

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

@media (max-width: 992px){

  .achievements-section__content{
    grid-template-columns:1fr;
  }

  .achievements-section__statement{
    max-width:100%;
  }

}

@media (max-width: 768px){

  .achievements-section__right{
    grid-template-columns:
    repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 540px){

  .achievements-section__right{
    grid-template-columns:1fr;
  }

}


/* =========================
   SERVICES SECTION
========================= */

.services-section{
  position:relative;

  padding:
  clamp(5rem, 10vw, 8rem)
  clamp(1.5rem, 4vw, 3rem);

  background:
  var(--bg-primary);

  overflow:hidden;

  isolation:isolate;
}

/* =========================
   CONTAINER
========================= */

.services-section__container{
  width:min(100%, 1300px);

  margin-inline:auto;

  display:flex;
  flex-direction:column;

  align-items:center;

  text-align:center;

  gap:
  clamp(3rem, 6vw, 5rem);
}

/* =========================
   HEADER
========================= */

.services-section__header{
  width:min(100%, 900px);

  display:flex;
  flex-direction:column;

  align-items:center;

  gap:
  clamp(1.25rem, 2vw, 1.75rem);
}

/* =========================
   EYEBROW
========================= */

.services-section__eyebrow-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
}

.services-section__eyebrow{
  position:relative;

  display:inline-flex;

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

  margin:0;

  padding-bottom:1rem;

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

  font-size:
  clamp(0.8rem, 1vw, 1rem);

  font-weight:
  var(--font-bold);

  letter-spacing:0.18em;

  text-transform:uppercase;

  color:
  var(--color-tertiary);

  text-wrap:balance;
}

/* UNDERLINE */

.services-section__eyebrow::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  transform:
  translateX(-50%);

  width:
  clamp(90px, 8vw, 130px);

  height:2px;

  border-radius:999px;

  background:
  var(--color-secondary);

  box-shadow:
  0 0 12px rgba(
    var(--color-secondary-rgb),
    0.45
  );
}

/* =========================
   TITLE
========================= */

.services-section__title{
  margin:0;
  
  font-family:
  var(--font-heading);

  font-size:
  clamp(2.5rem, 5vw, 5rem);

  line-height:1.1;

  font-weight:
  var(--font-black);

  color:
  var(--color-tertiary);

  text-wrap:balance;
}

/* =========================
   DESCRIPTION
========================= */

.services-section__description{
  margin:0;

  max-width:800px;

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

  font-size:
  clamp(1rem, 1.5vw, 1.2rem);

  line-height:1.9;

  color:
  rgba(
    var(--color-tertiary-rgb),
    0.88
  );

  text-wrap:pretty;
}

/* =========================
   GRID
========================= */

.services-section__grid{
  width:100%;

  display:grid;

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

  gap:
  clamp(1.5rem, 3vw, 2rem);
}

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

.service-card{
  display:grid;

  /* IMAGE TAKES 45%+ */
  grid-template-columns:
  minmax(260px, 45%)
  1fr;

  align-items:stretch;

  overflow:hidden;

  border-radius:
  var(--radius-md);

  background:
  var(--color-tertiary);

  box-shadow:
  var(--shadow-md);

  transition:
  transform var(--transition-normal),
  box-shadow var(--transition-normal);

  text-align:left;

  min-height:100%;

  isolation:isolate;
}

/* HOVER */

.service-card:hover{
  transform:
  translateY(-6px);

  box-shadow:
  var(--shadow-lg);
}

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

.service-card__image-wrapper{
  position:relative;

  overflow:hidden;

  min-height:100%;

  background:
  rgba(
    var(--color-primary-rgb),
    0.05
  );
}

/* IMAGE OVERLAY */

.service-card__image-wrapper::after{
  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    to top,
    rgba(0,0,0,0.28),
    rgba(0,0,0,0.02)
  );

  pointer-events:none;
}

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

.service-card__image{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transition:
  transform var(--transition-slow);

  will-change:transform;
}

.service-card:hover
.service-card__image{
  transform:scale(1.06);
}

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

.service-card__content{
  display:flex;
  flex-direction:column;

  justify-content:center;

  padding:
  clamp(1.5rem, 3vw, 2rem);

  gap:
  var(--space-md);
}

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

.service-card__title{
  margin:0;

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

  font-size:
  clamp(1.5rem, 2vw, 2rem);

  line-height:1.2;

  font-weight:
  var(--font-bold);

  color:
  var(--color-primary);

  text-wrap:balance;
}

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

.service-card__text{
  margin:0;

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

  font-size:
  clamp(0.95rem, 1.2vw, 1.05rem);

  line-height:1.8;

  color:
  rgba(
    var(--color-primary-rgb),
    0.82
  );

  text-wrap:pretty;
}

/* =========================
   SERVICE LIST
========================= */

.service-card__list{
  display:flex;
  flex-direction:column;

  gap:
  0.8rem;

  margin:0;

  padding-left:
  1.2rem;
}

/* =========================
   SERVICE LIST ITEM
========================= */

.service-card__list-item{
  font-family:
  var(--font-body);

  font-size:
  clamp(0.92rem, 1vw, 1rem);

  line-height:1.7;

  color:
  rgba(
    var(--color-primary-rgb),
    0.9
  );

  text-wrap:pretty;
}

/* BULLET COLOR */

.service-card__list-item::marker{
  color:
  var(--color-secondary);
}

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

.services-section__bottom{
  display:flex;

  justify-content:center;
}

/* =========================
   LINK
========================= */

.services-section__link{
  display:inline-flex;

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

  gap:
  var(--space-sm);

  padding:
  var(--cta-padding-y)
  var(--cta-padding-x);

  min-height:56px;

  border-radius:
  var(--radius-lg);

  background:none;

  border:
  2px solid rgba(
    var(--color-tertiary-rgb),
    0.9
  );

  text-decoration:none;

  transition:
  transform var(--transition-normal),
  box-shadow var(--transition-normal),
  background var(--transition-normal);

  box-shadow:
  var(--shadow-sm);
}

/* HOVER + FOCUS */

.services-section__link:hover,
.services-section__link:focus-visible{
  transform:
  translateY(-4px);

  box-shadow:
  var(--shadow-lg);

  background:
  rgba(
    var(--color-tertiary-rgb),
    0.08
  );
}

/* ACCESSIBILITY */

.services-section__link:focus-visible{
  outline:
  3px solid var(--color-secondary);

  outline-offset:4px;
}

/* =========================
   LINK TEXT
========================= */

.services-section__link-text{
  font-family:
  var(--font-cta);

  font-size:
  clamp(0.9rem, 1vw, 1rem);

  font-weight:
  var(--font-bold);

  letter-spacing:0.08em;

  color:
  var(--color-tertiary);

  text-transform:uppercase;
}

/* =========================
   LINK ICON
========================= */

.services-section__link-icon{
  width:22px;
  height:22px;

  object-fit:contain;

  flex-shrink:0;
}

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

@media (max-width: 992px){

  .services-section__grid{
    grid-template-columns:1fr;
  }

}

@media (max-width: 768px){

  .service-card{
    grid-template-columns:1fr;
  }

  .service-card__image-wrapper{
    height:320px;
  }

  .service-card__content{
    text-align:center;
  }

  .service-card__list{
    align-items:flex-start;
  }

  .services-section__title{
    max-width:100%;
  }

}

@media (max-width: 540px){

  .services-section{
    padding:
    clamp(4rem, 10vw, 6rem)
    clamp(1.25rem, 5vw, 1.5rem);
  }

  .service-card__image-wrapper{
    height:280px;
  }

}

/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce){

  .service-card,
  .service-card__image,
  .services-section__link{
    transition:none;
  }

  .service-card:hover{
    transform:none;
  }

  .service-card:hover
  .service-card__image{
    transform:none;
  }

}







/* =========================
   WHO WE SERVE SECTION
========================= */

.who-we-serve-section{
  position:relative;

  padding:
  clamp(5rem, 10vw, 8rem)
  clamp(1.5rem, 4vw, 3rem);

  background:
  var(--bg-tertiary);

  overflow:hidden;
}

/* =========================
   CONTAINER
========================= */

.who-we-serve-section__container{
  width:min(100%, 1300px);

  margin:0 auto;

  display:flex;
  flex-direction:column;

  align-items:center;

  text-align:center;

  gap:
  clamp(3rem, 6vw, 5rem);
}

/* =========================
   HEADER
========================= */

.who-we-serve-section__header{
  width:min(100%, 900px);

  display:flex;
  flex-direction:column;

  align-items:center;

  gap:
  clamp(1.25rem, 2vw, 1.75rem);
}

/* =========================
   EYEBROW
========================= */

.who-we-serve-section__eyebrow{
  position:relative;

  display:inline-flex;

  padding-bottom:1rem;

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

  font-size:
  clamp(0.82rem, 1vw, 1rem);

  font-weight:
  var(--font-bold);

  letter-spacing:0.18em;

  text-transform:uppercase;

  color:
  var(--color-secondary);
}

.who-we-serve-section__eyebrow::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  transform:
  translateX(-50%);

  width:100%;
  height:2px;

  background:
  var(--color-secondary);
}

/* =========================
   TITLE
========================= */

.who-we-serve-section__title{
  margin:0;

  max-width:900px;

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

  font-size:
  clamp(2.5rem, 5vw, 5rem);

  line-height:
  var(--line-height-tight);

  font-weight:
  var(--font-black);

  color:
  var(--color-primary);

  text-wrap:balance;
}

/* =========================
   DESCRIPTION
========================= */

.who-we-serve-section__description{
  margin:0;

  max-width:780px;

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

  font-size:
  clamp(1rem, 1.4vw, 1.15rem);

  line-height:
  var(--line-height-loose);

  color:
  rgba(
    var(--color-primary-rgb),
    0.82
  );
}

/* =========================
   GRID
========================= */

.who-we-serve-grid{
  width:100%;

  display:grid;

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

  gap:
  clamp(1rem, 2vw, 1.5rem);
}

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

.who-we-serve-card{
  position:relative;

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

  gap:
  clamp(1rem, 2vw, 1.5rem);

  text-align:center;

  min-height:140px;

  padding:
  clamp(1.5rem, 3vw, 2rem);

  transition:
  var(--transition-normal);
}

.who-we-serve-card:hover{
  transform:
  translateY(-6px);
}

/* =========================
   TITLE
========================= */

.who-we-serve-card__title{
  margin:0;

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

  font-size:
  clamp(1.2rem, 1.8vw, 1.6rem);

  line-height:
  var(--line-height-tight);

  font-weight:
  var(--font-black);

  color:
  var(--color-primary);
}

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

.who-we-serve-card__icon{
  width:
  clamp(42px, 4vw, 58px);

  height:
  clamp(42px, 4vw, 58px);

  flex-shrink:0;

  opacity:0.9;
}

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

@media (max-width: 992px){

  .who-we-serve-grid{
    grid-template-columns:
    repeat(2, 1fr);
  }

}

@media (max-width: 640px){

  .who-we-serve-section{
    padding:
    clamp(4rem, 10vw, 6rem)
    clamp(1.25rem, 5vw, 1.5rem);
  }

  .who-we-serve-grid{
    grid-template-columns:1fr;
  }

  .who-we-serve-card{
    flex-direction:column;

    min-height:auto;
  }

}



















/* =========================
   WHY CHOOSE US SECTION
========================= */

.why-section{
  position:relative;

  padding:
  clamp(5rem, 10vw, 8rem)
  clamp(1.5rem, 4vw, 3rem);

  background:
  var(--bg-tertiary);

  overflow:hidden;
}

/* =========================
   CONTAINER
========================= */

.why-section__container{
  width:min(100%, 1300px);

  margin-inline:auto;

  display:flex;
  flex-direction:column;

  align-items:center;

  text-align:center;

  gap:
  clamp(3rem, 6vw, 5rem);
}

/* =========================
   HEADER
========================= */

.why-section__header{
  width:min(100%, 900px);

  display:flex;
  flex-direction:column;

  align-items:center;

  gap:
  clamp(1.25rem, 2vw, 1.75rem);
}

/* =========================
   EYEBROW WRAPPER
========================= */

.why-section__eyebrow-wrapper{
  display:flex;

  align-items:center;
  justify-content:center;
}

/* =========================
   EYEBROW
========================= */

.why-section__eyebrow{
  position:relative;

  display:inline-flex;

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

  margin:0;

  padding-bottom:1rem;

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

  font-size:
  clamp(0.8rem, 1vw, 1rem);

  font-weight:
  var(--font-bold);

  letter-spacing:0.18em;

  text-transform:uppercase;

  color:
  var(--color-primary);

  text-wrap:balance;
}

/* UNDERLINE */

.why-section__eyebrow::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  transform:
  translateX(-50%);

  width:
  clamp(90px, 8vw, 130px);

  height:2px;

  border-radius:999px;

  background:
  var(--color-secondary);

  box-shadow:
  0 0 12px rgba(
    var(--color-secondary-rgb),
    0.45
  );
}

/* =========================
   TITLE
========================= */

.why-section__title{
  margin:0;

  

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

  font-size:
  clamp(2.5rem, 5vw, 5rem);

  line-height:1.1;

  font-weight:
  var(--font-black);

  color:
  var(--color-primary);

  text-wrap:balance;
}

/* =========================
   DESCRIPTION
========================= */

.why-section__description{
  margin:0;

  max-width:800px;

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

  font-size:
  clamp(1rem, 1.5vw, 1.2rem);

  line-height:1.9;

  color:
  rgba(
    var(--color-primary-rgb),
    0.85
  );

  text-wrap:pretty;
}

/* =========================
   GRID
========================= */

.why-section__grid{
  width:100%;

  display:grid;

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

  gap:
  clamp(2rem, 3vw, 3rem);
}

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

.why-card{
  position:relative;

  display:flex;
  flex-direction:column;

  align-items:flex-start;

  text-align:left;

  padding-top:
  clamp(2rem, 3vw, 2.5rem);

  transition:
  transform var(--transition-normal);

  min-height:100%;
}

/* HOVER */

.why-card:hover{
  transform:
  translateY(-6px);
}

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

.why-card__number{
  position:absolute;

  top:0;
  left:0;

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

  font-size:
  clamp(1rem, 1.5vw, 1.2rem);

  font-weight:
  var(--font-black);

  line-height:1;

  letter-spacing:0.08em;

  color:
  rgba(
    var(--color-primary-rgb),
    0.9
  );
}

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

.why-card__icon-wrapper{
  display:flex;

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

  width:72px;
  height:72px;

  border-radius:50%;

  background:
  rgba(
    var(--color-secondary-rgb),
    0.92
  );

  margin-bottom:
  var(--space-lg);
}

/* ICON */

.why-card__icon{
  width:32px;
  height:32px;

  object-fit:contain;
}

/* =========================
   TITLE
========================= */

.why-card__title{
  margin:0;

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

  font-size:
  clamp(1.25rem, 1.6vw, 1.6rem);

  font-weight:
  var(--font-black);

  line-height:1.3;

  color:
  var(--color-primary);

  text-wrap:balance;
}

/* =========================
   TEXT
========================= */

.why-card__text{
  margin-top:
  var(--space-md);

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

  font-size:
  clamp(0.95rem, 1.1vw, 1.05rem);

  line-height:1.9;

  color:
  rgba(
    var(--color-primary-rgb),
    0.82
  );

  text-wrap:pretty;
}

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

@media (max-width: 992px){

  .why-section__grid{
    grid-template-columns:
    repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 600px){

  .why-section__grid{
    grid-template-columns:1fr;
  }

}

/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce){

  .why-card{
    transition:none;
  }

  .why-card:hover{
    transform:none;
  }

}





/* =========================
   CTA SECTION
========================= */

.cta-section{
  position:relative;

  padding:
  clamp(5rem, 10vw, 8rem)
  clamp(1.5rem, 4vw, 3rem);

  background:
  var(--bg-primary);

  overflow:hidden;

  isolation:isolate;
}

/* =========================
   CONTAINER
========================= */

.cta-section__container{
  width:min(100%, 1000px);

  margin-inline:auto;

  display:flex;
  flex-direction:column;

  align-items:center;

  text-align:center;

  gap:
  clamp(1.5rem, 3vw, 2rem);
}

/* =========================
   EYEBROW
========================= */

.cta-section__eyebrow{
  position:relative;

  display:inline-flex;

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

  margin:0;

  padding-bottom:1rem;

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

  font-size:
  clamp(0.8rem, 1vw, 1rem);

  font-weight:
  var(--font-bold);

  letter-spacing:0.18em;

  text-transform:uppercase;

  color:
  var(--color-tertiary);

  text-wrap:balance;
}

/* UNDERLINE */

.cta-section__eyebrow::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  transform:
  translateX(-50%);

  width:
  clamp(90px, 8vw, 130px);

  height:2px;

  border-radius:999px;

  background:
  var(--color-secondary);

  box-shadow:
  0 0 12px rgba(
    var(--color-secondary-rgb),
    0.45
  );
}

/* =========================
   TITLE
========================= */

.cta-section__title{
  margin:0;



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

  font-size:
  clamp(2.5rem, 5vw, 5rem);

  line-height:1.1;

  font-weight:
  var(--font-black);

  color:
  var(--color-tertiary);

  text-wrap:balance;
}

/* =========================
   DESCRIPTION
========================= */

.cta-section__description{
  margin:0;

  max-width:760px;

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

  font-size:
  clamp(1rem, 1.5vw, 1.2rem);

  line-height:1.9;

  color:
  rgba(
    var(--color-tertiary-rgb),
    0.88
  );

  text-wrap:pretty;
}

/* =========================
   ACTIONS
========================= */

.cta-section__actions{
  display:flex;

  justify-content:center;

  width:100%;

  margin-top:
  clamp(0.5rem, 2vw, 1rem);
}

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

.cta-section__button{
  display:inline-flex;

  flex-direction:column;

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

  gap:
  0.35rem;

  min-width:
  clamp(260px, 30vw, 340px);

  min-height:72px;

  padding:
  clamp(1rem, 2vw, 1.25rem)
  clamp(1.5rem, 3vw, 2rem);

  border-radius:
  var(--radius-lg);

  background: none;

  border:
  2px solid rgba(
    var(--color-tertiary-rgb),
    0.98
  );

  backdrop-filter:
  blur(10px);

  text-decoration:none;

  box-shadow:
  var(--shadow-md);

  transition:
  transform var(--transition-normal),
  box-shadow var(--transition-normal),
  background var(--transition-normal);
}

/* HOVER */

.cta-section__button:hover{
  transform:
  translateY(-6px);

  background:
  rgba(
    var(--color-tertiary-rgb),
    0.12
  );

  box-shadow:
  var(--shadow-lg);
}

/* ACCESSIBILITY */

.cta-section__button:focus-visible{
  outline:
  3px solid var(--color-secondary);

  outline-offset:4px;
}

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

.cta-section__button-label{
  font-family:
  var(--font-cta);

  font-size:
  clamp(0.9rem, 1vw, 1rem);

  font-weight:
  var(--font-bold);

  letter-spacing:0.08em;

  text-transform:uppercase;

  color:
  rgba(
    var(--color-tertiary-rgb),
    0.82
  );
}

/* =========================
   PHONE NUMBER
========================= */

.cta-section__button-number{
  font-family:
  var(--font-heading);

  font-size:
  clamp(1.4rem, 2vw, 2rem);

  font-weight:
  var(--font-black);

  line-height:1.2;

  color:
  var(--color-tertiary);
}

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

@media (max-width: 540px){

  .cta-section{
    padding:
    clamp(4rem, 10vw, 6rem)
    clamp(1.25rem, 5vw, 1.5rem);
  }

  .cta-section__title{
    max-width:100%;
  }

  .cta-section__button{
    width:100%;
  }

}

/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce){

  .cta-section__button{
    transition:none;
  }

  .cta-section__button:hover{
    transform:none;
  }

}


















/* =========================
   OPERATING HOURS SECTION
========================= */

.operating-hours-section{
  position:relative;

  padding:
  clamp(5rem, 10vw, 8rem)
  clamp(1.5rem, 4vw, 3rem);

  background:
  var(--bg-tertiary);

  overflow:hidden;
}

/* =========================
   CONTAINER
========================= */

.operating-hours-section__container{
  width:min(100%, 1300px);

  margin-inline:auto;

  display:flex;
  flex-direction:column;

  align-items:center;

  gap:
  clamp(3rem, 6vw, 5rem);
}

/* =========================
   HEADER
========================= */

.operating-hours-section__header{
  width:min(100%, 850px);

  display:flex;
  flex-direction:column;

  align-items:center;

  text-align:center;

  gap:
  clamp(1.25rem, 2vw, 1.75rem);
}

/* =========================
   EYEBROW
========================= */

.operating-hours-section__eyebrow{
  position:relative;

  display:inline-flex;

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

  margin:0;

  padding-bottom:
  1rem;

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

  font-size:
  clamp(0.8rem, 1vw, 1rem);

  font-weight:
  var(--font-bold);

  letter-spacing:0.18em;

  text-transform:uppercase;

  color:
  var(--color-primary);
}

/* UNDERLINE */

.operating-hours-section__eyebrow::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  transform:
  translateX(-50%);

  width:
  clamp(90px, 8vw, 140px);

  height:2px;

  border-radius:999px;

  background:
  var(--color-secondary);
}

/* =========================
   TITLE
========================= */

.operating-hours-section__title{
  margin:0;

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

  font-size:
  clamp(2.5rem, 5vw, 5rem);

  line-height:
  var(--line-height-tight);

  font-weight:
  var(--font-black);

  color:
  var(--color-primary);

  text-wrap:balance;
}

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

.operating-hours-section__content{
  width:100%;

  display:grid;

  grid-template-columns:
  1fr 1fr;

  align-items:center;

  gap:
  clamp(2rem, 4vw, 4rem);
}

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

.operating-hours-section__left{
  display:flex;
  flex-direction:column;

  gap:
  clamp(1.5rem, 3vw, 2rem);
}

/* =========================
   DESCRIPTION
========================= */

.operating-hours-section__description{
  margin:0;

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

  font-size:
  clamp(1rem, 1.5vw, 1.15rem);

  line-height:
  var(--line-height-loose);

  color:
  rgba(
    var(--color-primary-rgb),
    0.82
  );

  text-wrap:pretty;
}

/* =========================
   HOURS LIST
========================= */

.operating-hours-list{
  display:flex;
  flex-direction:column;

  gap:
  var(--space-md);
}

/* =========================
   HOURS ITEM
========================= */

.operating-hours-list__item{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:
  var(--space-lg);

  padding:
  clamp(1rem, 2vw, 1.25rem)
  clamp(1.25rem, 2vw, 1.5rem);

  border-radius:
  var(--radius-lg);

  background:
  rgba(
    var(--color-primary-rgb),
    0.04
  );

  border:
  1px solid rgba(
    var(--color-primary-rgb),
    0.08
  );

  transition:
  transform var(--transition-normal),
  box-shadow var(--transition-normal);
}

.operating-hours-list__item:hover{
  transform:
  translateY(-4px);

  box-shadow:
  var(--shadow-md);
}

/* =========================
   DAY
========================= */

.operating-hours-list__day{
  font-family:
  var(--font-heading);

  font-size:
  clamp(1rem, 1.4vw, 1.2rem);

  font-weight:
  var(--font-bold);

  color:
  var(--color-primary);
}

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

.operating-hours-list__time{
  font-family:
  var(--font-body);

  font-size:
  clamp(0.95rem, 1.2vw, 1rem);

  font-weight:
  var(--font-bold);

  color:
  var(--color-secondary);
}

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

.operating-hours-section__right{
  position:relative;
}

/* =========================
   IMAGE BORDER WRAPPER
========================= */

.operating-hours-section__image-border{
  padding:
  clamp(0.8rem, 1.5vw, 1rem);

  border:
  2px solid var(--border-primary);

  border-radius: var(--radius-md);
 

  box-shadow:
  var(--shadow-md);
}

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

.operating-hours-section__image-wrapper{
  position:relative;

  overflow:hidden;

  border-radius:
  var(--radius-sm);

  min-height:100%;
}

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

.operating-hours-section__image{
  width:100%;
  height:100%;

  min-height:
  650px;

  object-fit:cover;

  transition:
  transform var(--transition-slow);
}

.operating-hours-section__image-wrapper:hover
.operating-hours-section__image{
  transform:scale(1.05);
}

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

.operating-hours-section__location-card{
  position:absolute;

  left:
  clamp(1rem, 2vw, 1.5rem);

  bottom:
  clamp(1rem, 2vw, 1.5rem);

  display:flex;
  flex-direction:column;

  gap:
  0.35rem;

  padding:
  clamp(1rem, 2vw, 1.25rem);

  border-radius:
  var(--radius-sm);

  background:
  rgba(
    var(--color-primary-rgb),
    0.92
  );

  border:
  1px solid rgba(
    var(--color-tertiary-rgb),
    0.15
  );

  backdrop-filter:
  blur(10px);

  box-shadow:
  var(--shadow-lg);

  max-width:
  320px;
}

/* =========================
   LOCATION LABEL
========================= */

.operating-hours-section__location-label{
  font-family:
  var(--font-body);

  font-size:
  clamp(0.75rem, 1vw, 0.9rem);

  font-weight:
  var(--font-bold);

  letter-spacing:0.14em;

  text-transform:uppercase;

  color:
  rgba(
    var(--color-tertiary-rgb),
    0.75
  );
}

/* =========================
   LOCATION TEXT
========================= */

.operating-hours-section__location-text{
  font-family:
  var(--font-heading);

  font-size:
  clamp(1rem, 1.5vw, 1.2rem);

  font-weight:
  var(--font-bold);

  line-height:
  1.4;

  color:
  var(--color-tertiary);
}

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

@media (max-width: 992px){

  .operating-hours-section__content{
    grid-template-columns:1fr;
  }

  .operating-hours-section__left{
    order:2;
  }

  .operating-hours-section__right{
    order:1;
  }

}

@media (max-width: 768px){

  .operating-hours-section{
    padding:
    clamp(4rem, 10vw, 6rem)
    clamp(1.25rem, 5vw, 1.5rem);
  }

  .operating-hours-section__left{
    text-align:center;
  }

  .operating-hours-list__item{
    flex-direction:column;

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

    text-align:center;
  }

  .operating-hours-section__image{
    min-height:420px;
  }

  .operating-hours-section__location-card{
    left:1rem;
    right:1rem;
    bottom:1rem;

    max-width:none;
  }

}

/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce){

  .operating-hours-list__item,
  .operating-hours-section__image{
    transition:none;
  }

  .operating-hours-list__item:hover{
    transform:none;
  }

}







/* =========================
   PROCESS SECTION
========================= */

.process-section{
  position:relative;

  padding:
  clamp(5rem, 10vw, 8rem)
  clamp(1.5rem, 4vw, 3rem);

  background:
  var(--bg-primary);

  overflow:hidden;
}

/* =========================
   CONTAINER
========================= */

.process-section__container{
  width:min(100%, 1300px);

  margin-inline:auto;

  display:flex;
  flex-direction:column;

  align-items:center;

  gap:
  clamp(3rem, 6vw, 5rem);
}

/* =========================
   HEADER
========================= */

.process-section__header{
  width:min(100%, 900px);

  display:flex;
  flex-direction:column;

  align-items:center;

  text-align:center;

  gap:
  clamp(1.25rem, 2vw, 1.75rem);
}

/* =========================
   EYEBROW
========================= */

.process-section__eyebrow{
  position:relative;

  display:inline-flex;

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

  margin:0;

  padding-bottom:
  1rem;

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

  font-size:
  clamp(0.8rem, 1vw, 1rem);

  font-weight:
  var(--font-bold);

  letter-spacing:
  0.18em;

  text-transform:uppercase;

  color:
  var(--color-tertiary);
}

/* UNDERLINE */

.process-section__eyebrow::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  transform:
  translateX(-50%);

  width:
  clamp(90px, 8vw, 140px);

  height:2px;

  border-radius:
  999px;

  background:
  var(--color-secondary);
}

/* =========================
   TITLE
========================= */

.process-section__title{
  margin:0;



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

  font-size:
  clamp(2.5rem, 5vw, 5rem);

  line-height:
  var(--line-height-tight);

  font-weight:
  var(--font-black);

  color:
  var(--color-tertiary);

  text-wrap:balance;
}

/* =========================
   DESCRIPTION
========================= */

.process-section__description{
  margin:0;

  max-width:
  800px;

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

  font-size:
  clamp(1rem, 1.5vw, 1.2rem);

  line-height:
  var(--line-height-loose);

  color:
  rgba(
    var(--color-tertiary-rgb),
    0.82
  );

  text-wrap:pretty;
}

/* =========================
   GRID
========================= */

.process-section__grid{
  width:100%;

  display:grid;

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

  gap:
  clamp(2rem, 4vw, 3rem);
}

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

.process-card{
  position:relative;

  display:flex;
  flex-direction:column;

  gap:
  clamp(1rem, 2vw, 1.25rem);

  padding-top:
  clamp(2rem, 4vw, 3rem);

  text-align:left;
}

/* =========================
   NUMBER
========================= */

.process-card__number{
  position:absolute;

  left:0;
  top:0;

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

  font-size:
  clamp(3rem, 6vw, 5rem);

  line-height:1;

  font-weight:
  var(--font-black);

  color:
  rgba(
    var(--color-secondary-rgb),
    0.98
  );

  pointer-events:none;

  user-select:none;
}

/* =========================
   TITLE
========================= */

.process-card__title{
  position:relative;

  margin:0;

  padding-top:
  clamp(2rem, 4vw, 2.5rem);

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

  font-size:
  clamp(1.35rem, 2vw, 1.8rem);

  line-height:
  var(--line-height-tight);

  font-weight:
  var(--font-black);

  color:
  var(--color-tertiary);

  z-index:1;
}

/* =========================
   TEXT
========================= */

.process-card__text{
  position:relative;

  margin:0;

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

  font-size:
  clamp(0.98rem, 1.2vw, 1.08rem);

  line-height:
  var(--line-height-loose);

  color:
  rgba(
    var(--color-tertiary-rgb),
    0.82
  );

  z-index:1;
}

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

@media (max-width: 992px){

  .process-section__grid{
    grid-template-columns:
    repeat(2, 1fr);
  }

}

@media (max-width: 640px){

  .process-section{
    padding:
    clamp(4rem, 10vw, 6rem)
    clamp(1.25rem, 5vw, 1.5rem);
  }

  .process-section__grid{
    grid-template-columns:1fr;
  }

}






/* =========================
   MAP SECTION
========================= */

.map-section{
  position: relative;
  padding: clamp(5rem, 10vw, 8rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--bg-tertiary);
  overflow: hidden;
}

/* =========================
   CONTAINER
========================= */

.map-section__container{
  width: min(100%, 1200px);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

/* =========================
   HEADER
========================= */

.map-section__header{
  width: min(100%, 800px);

  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: center;
}

/* EYEBROW (UNDERLINED) */

.map-section__eyebrow{
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 1vw, 1rem);
  font-weight: var(--font-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-secondary);

  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-secondary);
}

/* TITLE */

.map-section__title{
  margin: 0;

  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: var(--line-height-tight);
  font-weight: var(--font-black);
  color: var(--color-primary);

  text-wrap: balance;
}

/* DESCRIPTION */

.map-section__description{
  margin: 0;
  max-width: 650px;

  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: var(--line-height-loose);
  color: rgba(var(--color-primary-rgb), 0.85);
}

/* =========================
   MAP WRAPPER
========================= */

.map-section__map-wrapper{
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;

  box-shadow: var(--shadow-lg);

  /* keeps ratio consistent */
  aspect-ratio: 16 / 9;

  border: 2px solid var(--color-primary);
}

/* MAP */

.map-section__map{
  width: 100%;
  height: 100%;
  border: 0;
}

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

@media (max-width: 768px){

  .map-section__map-wrapper{
    aspect-ratio: 4 / 3;
  }

}




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

.footer{
  position: relative;

  padding:
  clamp(4rem, 8vw, 6rem)
  clamp(1.5rem, 4vw, 3rem)
  clamp(2rem, 4vw, 3rem);

  background:
  var(--bg-primary);

  overflow: hidden;
}

/* =========================
   CONTAINER
========================= */

.footer__container{
  width: min(100%, 1300px);

  margin: 0 auto;

  display: flex;
  flex-direction: column;

  gap:
  clamp(3rem, 6vw, 4rem);
}

/* =========================
   TOP
========================= */

.footer__top{
  display: grid;

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

  gap:
  clamp(2rem, 4vw, 4rem);
}

/* =========================
   COLUMN
========================= */

.footer__column{
  display: flex;
  flex-direction: column;

  gap:
  clamp(1.25rem, 2vw, 1.5rem);
}

/* =========================
   TITLE
========================= */

.footer__title{
  position: relative;

  margin: 0;

  width: fit-content;

  padding-bottom: 0.75rem;

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

  font-size:
  clamp(1.3rem, 2vw, 1.6rem);

  font-weight:
  var(--font-black);

  color:
  var(--color-tertiary);
}

.footer__title::after{
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 60px;
  height: 2px;

  background:
  var(--color-secondary);
}

/* =========================
   NAV
========================= */

.footer__nav{
  display: flex;
  flex-direction: column;

  gap:
  1rem;
}

/* =========================
   LINKS
========================= */

.footer__link,
.footer__contact-link,
.footer__developer{
  width: fit-content;

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

  font-size:
  clamp(0.95rem, 1vw, 1rem);

  line-height:
  var(--line-height-normal);

  color:
  rgba(
    var(--color-tertiary-rgb),
    0.92
  );

  text-decoration: none;

  transition:
  var(--transition-normal);
}

.footer__link:hover,
.footer__contact-link:hover,
.footer__developer:hover{
  color:
  var(--color-primary);

  transform:
  translateX(4px);
}

/* =========================
   CONTACT GROUP
========================= */

.footer__contact-group{
  display: flex;
  flex-direction: column;

  gap:
  1rem;
}

/* =========================
   LOCATION
========================= */

.footer__location{
  margin: 0;

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

  font-size:
  clamp(0.95rem, 1vw, 1rem);

  color:
  rgba(
    var(--color-tertiary-rgb),
    0.9
  );
}

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

.footer__bottom{
  padding-top:
  clamp(2rem, 4vw, 2.5rem);

  border-top:
  1px solid rgba(
    var(--color-tertiary-rgb),
    0.2
  );

  display: flex;
  flex-direction: column;

  align-items: center;

  text-align: center;

  gap:
  1rem;
}

/* =========================
   CAPTION
========================= */

.footer__caption{
  margin: 0;

  max-width: 750px;

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

  font-size:
  clamp(0.95rem, 1vw, 1rem);

  line-height:
  var(--line-height-loose);

  color:
  rgba(
    var(--color-tertiary-rgb),
    0.9
  );
}

/* =========================
   DEVELOPER
========================= */

.footer__developer{
  font-weight:
  var(--font-bold);

  letter-spacing:
  0.04em;
}

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

@media (max-width: 900px){

  .footer__top{
    grid-template-columns:
    1fr 1fr;
  }

}

@media (max-width: 640px){

  .footer{
    padding:
    clamp(3rem, 8vw, 5rem)
    clamp(1.25rem, 5vw, 1.5rem)
    2rem;
  }

  .footer__top{
    grid-template-columns:
    1fr;

    text-align: center;
  }

  .footer__column{
    align-items: center;
  }

  .footer__title{
    width: auto;
  }

  .footer__title::after{
    left: 50%;

    transform:
    translateX(-50%);
  }

  .footer__link,
  .footer__contact-link,
  .footer__developer{
    width: auto;
  }

}





























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

.services-page-hero{
  padding:
  clamp(6rem, 10vw, 9rem)
  clamp(1.5rem, 4vw, 3rem)
  clamp(5rem, 8vw, 7rem);

  background:
  var(--bg-primary);
}

.services-page-hero__container{
  width:min(100%, 1100px);

  margin:0 auto;

  display:flex;
  flex-direction:column;

  align-items:center;

  text-align:center;

  gap:
  clamp(1.5rem, 3vw, 2rem);
}

.services-page-hero__eyebrow{
  position:relative;

  display:inline-flex;

  padding-bottom:1rem;

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

  font-size:
  clamp(0.82rem, 1vw, 1rem);

  font-weight:
  var(--font-bold);

  letter-spacing:
  0.18em;

  text-transform:
  uppercase;

  color:
  var(--color-tertiary);
}

.services-page-hero__eyebrow::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  transform:
  translateX(-50%);

  width:100%;
  height:2px;

  background:
  var(--color-secondary);
}

.services-page-hero__title{
  margin:0;

  max-width:1000px;

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

  font-size:
  clamp(2.8rem, 6vw, 6rem);

  line-height:
  var(--line-height-tight);

  font-weight:
  var(--font-black);

  color:
  var(--color-tertiary);

  text-wrap:
  balance;
}

.services-page-hero__description{
  margin:0;

  max-width:900px;

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

  font-size:
  clamp(1rem, 1.4vw, 1.2rem);

  line-height:
  var(--line-height-loose);

  color:
  rgba(var(--color-tertiary-rgb), 0.82);
}

/* =========================
   SERVICES SECTION
========================= */

.services-deep-section{
  padding:
  clamp(4rem, 8vw, 6rem)
  clamp(1.5rem, 4vw, 3rem)
  clamp(6rem, 10vw, 8rem);

  background:
  var(--bg-primary);
}

.services-deep-section__container{
  width:min(100%, 1300px);

  margin:0 auto;

  display:flex;
  flex-direction:column;

  gap:
  clamp(5rem, 8vw, 7rem);
}

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

.deep-service-card{
  display:flex;
  flex-direction:column;

  gap:
  clamp(2rem, 4vw, 3rem);
}

/* =========================
   MEDIA SHELL
========================= */

.deep-service-card__media-shell{
  position:relative;

  padding:
  clamp(0.8rem, 1.5vw, 1rem);

  border:
  1px solid rgba(var(--color-tertiary-rgb), 0.1);

  border-radius:
  calc(var(--radius-xl) + 8px);

  background:
  rgba(var(--color-tertiary-rgb), 0.03);

  overflow:hidden;
}

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

.deep-service-card__image-wrapper{
  position:relative;

  overflow:hidden;

  border-radius:
  var(--radius-xl);

  min-height:
  clamp(320px, 50vw, 580px);
}

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

.deep-service-card__image{
  width:100%;
  height:100%;

  object-fit:cover;

  aspect-ratio:
  16 / 8;

  transform:scale(1);

  transition:
  transform 900ms ease;
}

.deep-service-card__image-wrapper:hover
.deep-service-card__image{
  transform:scale(1.06);
}

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

.deep-service-card__overlay{
  position:absolute;

  inset:0;

  background:
  linear-gradient(
    to top,
    rgba(0,0,0,0.92) 8%,
    rgba(0,0,0,0.5) 45%,
    rgba(0,0,0,0.12) 100%
  );

  z-index:1;
}

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

.deep-service-card__image-content{
  position:absolute;

  left:0;
  bottom:0;

  width:100%;

  z-index:2;

  display:flex;
  flex-direction:column;

  gap:
  clamp(1rem, 2vw, 1.5rem);

  padding:
  clamp(1.5rem, 4vw, 4rem);
}

/* =========================
   NUMBER
========================= */

.deep-service-card__number{
  display:inline-flex;

  width:max-content;

  padding:
  0.7rem 1rem;

  border-radius:
  999px;

  border:
  1px solid rgba(255,255,255,0.14);

  background:
  rgba(255,255,255,0.08);

  backdrop-filter:
  blur(10px);

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

  font-size:
  clamp(0.9rem, 1vw, 1rem);

  font-weight:
  900;

  letter-spacing:
  0.18em;

  color:
  var(--color-secondary);
}

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

.deep-service-card__image-title{
  margin:0;

  max-width:760px;

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

  font-size:
  clamp(2rem, 5vw, 4.5rem);

  line-height:
  var(--line-height-tight);

  font-weight:
  var(--font-black);

  color:#ffffff;

  text-wrap:
  balance;
}

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

.deep-service-card__image-description{
  margin:0;

  max-width:760px;

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

  font-size:
  clamp(1rem, 1.4vw, 1.2rem);

  line-height:
  var(--line-height-loose);

  color:
  rgba(255,255,255,0.88);
}

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

.deep-service-card__content{
  display:flex;
  flex-direction:column;

  gap:
  clamp(2rem, 4vw, 3rem);
}

/* =========================
   INTRO
========================= */

.deep-service-card__intro{
  margin:0;

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

  font-size:
  clamp(1rem, 1.35vw, 1.15rem);

  line-height:
  var(--line-height-loose);

  color:
  rgba(var(--color-tertiary-rgb), 0.82);
}

/* =========================
   SUBSERVICES
========================= */

.deep-service-card__subservices{
  display:grid;

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

  gap:
  clamp(1.5rem, 3vw, 2rem);
}

/* =========================
   SUBSERVICE
========================= */

.deep-service-card__subservice{
  display:flex;
  flex-direction:column;

  gap:
  1rem;

  padding:
  clamp(1.5rem, 3vw, 2rem);

  border-left:
  2px solid var(--color-secondary);

  background:
  rgba(var(--color-tertiary-rgb), 0.03);

  border-radius:
  0 var(--radius-md) var(--radius-md) 0;
}

/* =========================
   SUBSERVICE TITLE
========================= */

.deep-service-card__subservice-title{
  margin:0;

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

  font-size:
  clamp(1.2rem, 2vw, 1.5rem);

  line-height:
  var(--line-height-tight);

  font-weight:
  var(--font-black);

  color:
  var(--color-tertiary);
}

/* =========================
   SUBSERVICE TEXT
========================= */

.deep-service-card__subservice-text{
  margin:0;

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

  font-size:
  clamp(0.98rem, 1.2vw, 1.05rem);

  line-height:
  var(--line-height-loose);

  color:
  rgba(var(--color-tertiary-rgb), 0.8);
}

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

@media (max-width: 992px){

  .deep-service-card__subservices{
    grid-template-columns:1fr;
  }

}

@media (max-width: 768px){

  .services-page-hero{
    padding:
    clamp(5rem, 10vw, 7rem)
    clamp(1.25rem, 5vw, 1.5rem)
    clamp(4rem, 8vw, 5rem);
  }

  .services-deep-section{
    padding:
    clamp(3rem, 8vw, 4rem)
    clamp(1.25rem, 5vw, 1.5rem)
    clamp(5rem, 10vw, 6rem);
  }

  .services-deep-section__container{
    gap:
    clamp(4rem, 8vw, 5rem);
  }

  .deep-service-card__image-wrapper{
    min-height:420px;
  }

  .deep-service-card__image{
    aspect-ratio:auto;
  }

  .deep-service-card__image-title{
    font-size:
    clamp(1.8rem, 7vw, 3rem);
  }

}