:root {

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

  --color-primary: rgb(0, 82, 218);
  --color-secondary: rgb(46, 53, 56);
  --color-tertiary: rgb(250, 250, 250);

  /* RGB (for opacity control) */
  --color-primary-rgb: 0, 82, 218;
  --color-secondary-rgb: 46, 53, 56;
  --color-tertiary-rgb: 250, 250, 250;

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

  /* Backgrounds (ALL GRADIENTS) */
  --bg-primary: linear-gradient(145deg,rgba(0, 82, 218, 1) 1%, rgba(0, 0, 112, 1) 59%);

  --bg-secondary: linear-gradient(145deg,rgba(89, 85, 85, 1) 1%, rgba(46, 53, 56, 1) 59%);

  --bg-tertiary: linear-gradient(
    135deg,
    rgb(255, 255, 255),
    rgba(250, 250, 250, 0.999)
  );

  

  /* =========================
     TEXT (INVERTED FOR CONTRAST)
  ========================= */

  --text-primary: rgb(0, 82, 218);/* on white */
  --text-secondary: rgb(46, 53, 56); /* on white */
  --text-tertiary: rgb(255, 255, 255);   /* on white */

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

  --border-primary: rgb(0, 82, 218);
  --border-secondary: rgb(46, 53, 56);
  --border-tertiary:  rgb(255, 255, 255);

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

  --font-heading: "Oswald", Georgia, serif;
  --font-body: "Roboto Condensed", Arial, sans-serif;
  --font-cta: "Smooch 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;

  /* 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 Radius */
  --cta-radius-sm: 4px;
  --cta-radius-md: 8px;
  --cta-radius-lg: 999px;

  /* =========================
     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-tertiary);
  background-color: var(--bg-tertiary);
  
}









/* =========================
   CONTACT CTA STRIP
========================= */

.contact-cta-strip {
  background: var(--bg-primary);
  color: var(--text-tertiary);

  padding: var(--space-md) var(--space-lg);

  display: flex;
  flex-direction: column;     
  align-items: center;
  text-align: center;

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

/* CTA text */
.contact-cta-text {
  font-size: var(--font-size-lg);
  font-family: var(--font-cta);
  color: var(--text-tertiary);
  margin: 0;
}

/* Phones always inline */
.contact-cta-phones {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Contact item */
.contact-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: var(--space-sm);

  text-decoration: none;
  color: var(--text-tertiary);

  font-size: var(--font-size-md);
  transition: var(--transition-fast);
  font-family: var(--font-body);
}

.contact-item:hover {
  opacity: 0.8;
}

/* Icon container */
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  border: 1px solid var(--color-tertiary);
  border-radius: 50%;
  

  flex-shrink: 0;
}

/* Image inside icon */
.icon-box img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* =========================
   DESKTOP (ONE ROW)
========================= */

@media (min-width: 768px) {

  .contact-cta-strip {
    flex-direction: row;              /* ✅ everything in one line */
    justify-content: center;          /* keep centered */
    align-items: center;
    text-align: left;

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

  .contact-cta-text {
    white-space: nowrap;              /* prevents breaking */
  }

  .contact-cta-phones {
    flex-wrap: nowrap;                /* keep phones in one line */
  }

  .contact-email {
    white-space: nowrap;
  }

}










/* NAVBAR */
.site-header {
  background: var(--bg-tertiary);
  position: relative;
  z-index: 1000;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px 10px 20px;
}

/* Logo */
.nav__logo img {
  height: 80px;
}

/* Desktop */
.nav__desktop {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.nav__links {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
  padding-right: 190px;
}

.nav__links a {
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  
}

.nav__links a:hover {
  color: var(--color-primary);
 
}
/* CTA */
.nav__cta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--cta-padding-y) var(--cta-padding-x);
  background: var(--color-secondary);
  font-family: var(--font-cta);
  font-size: var(--font-size-lg);
  color: var(--cta-text-primary);
  border-radius: var(--cta-radius-md);
  text-decoration: none;
  margin-right: 30px;
 
}



.nav__cta:hover {
  background: var(--bg-primary);
  color: var(--text-tertiary);
}


.nav__cta img {
  width: 26px;
  height: 26px;
}





/* =========================
   TOGGLE BUTTON (ICON SWAP)
========================= */

.nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}

.nav__toggle img {
  width: 26px;
  height: 26px;
}

/* Hide close icon initially */
.icon-close {
  display: none;
}

/* When active */
.nav__toggle.active .icon-menu {
  display: none;
}

.nav__toggle.active .icon-close {
  display: block;
}

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

.overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-tertiary);

  width: 80%;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-normal);
  z-index: 1500;
}

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

/* =========================
   MOBILE MENU (GPU SMOOTH)
========================= */

.mobile-menu {
  position: fixed;
  top: 140px;
  left: 0;
  width: 300px;
  height: 100%;
  background: var(--color-tertiary);
  transform: translateX(-100%);
  transition: transform 0.35s ease;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  z-index: 2000;
}

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

/* Links */
.mobile-menu__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.mobile-menu__links a {
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  text-decoration: none;
}


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

/* CTA */
.mobile-menu__cta {
 display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 20px 30px;
  background: var(--color-secondary);
  font-family: var(--font-cta);
  font-size: var(--font-size-lg);
  color: var(--cta-text-primary);
  border-radius: var(--cta-radius-md);
  text-decoration: none;
  margin-right: 30px;
}


.mobile-menu__cta:hover {
  background: var(--bg-primary);
  color: var(--text-tertiary);
}

.mobile-menu__cta img {
  width: 26px;
  height: 26px;
}



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

@media (max-width: 768px) {
  .nav__desktop {
    display: none;
  }

  .nav__toggle {
    display: block;
  }
}










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

.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: var(--color-secondary);
}

.hero__slider {
    position: relative;
    width: 100%;
    height: 100vh;
}

/* =====================================================
   SLIDES
===================================================== */

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .8s ease,
        visibility .8s ease;
}

.hero__slide--active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

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

.hero__background {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    transition: transform 7s linear;
}

.hero__slide--active .hero__background img {
    transform: scale(1.08);
}

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

.hero__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            rgba(0,0,0,.18),
            rgba(0,0,0,.15)
        );

    z-index: 1;
}

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

.hero__content {

    position: relative;
    z-index: 5;

    width: min(900px,90%);

    height: 100%;

    margin-inline: auto;

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

    text-align:center;

}

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

.hero__eyebrow{

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

    gap:14px;

    margin-bottom:24px;

    

    color:var(--text-tertiary);

    text-transform:uppercase;

    letter-spacing:.12em;

    font-size:.9rem;

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

}

.hero__eyebrow img{

    width:18px;
    height:18px;

}

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

.hero__title{

    color:var(--text-tertiary);

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

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

    line-height:1.05;

    max-width:900px;

    margin-bottom:24px;

    text-transform:uppercase;

}

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

.hero__description{

    max-width:760px;

    color:var(--text-tertiary);

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

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

    line-height:1.8;

    margin-bottom:42px;

}

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

.hero__actions{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:nowrap;

}

.hero__button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    text-decoration:none;

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

    border-radius:999px;

    transition:all .35s ease;

    font-family:var(--font-cta);
    
    font-weight: 500;

    font-size:1.5rem;

    letter-spacing:.03em;

}

.hero__button img{

    width:22px;
    height:22px;

}

.hero__button--primary{

    background:var(--bg-primary);

    color:var(--text-tertiary);

}

.hero__button--secondary{

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

    color:var(--text-tertiary);

    background:transparent;

}

.hero__button:hover{

    transform:translateY(-5px);

}

.hero__button--primary:hover{

    box-shadow:
    0 20px 45px rgba(var(--color-primary-rgb),.35);

}

.hero__button--secondary:hover{

    background:white;

    color:var(--text-primary);

}

/* =====================================================
   PROGRESS
===================================================== */

.hero__progress{

    position:absolute;

    bottom:45px;

    left:90%;

    transform:translateX(-90%);

    width:40px;

    height:40px;

    z-index:20;

}

.hero__progress-svg{

    width:100%;

    height:100%;

    transform:rotate(-90deg);

}

.hero__progress-track{

    fill:none;

    stroke:rgba(255,255,255,.28);

    stroke-width:5;

}

.hero__progress-ring{

    fill:none;

    stroke:white;

    stroke-width:5;

    stroke-linecap:round;

    stroke-dasharray:276;

    stroke-dashoffset:276;

}

/* =====================================================
   ARROWS
===================================================== */

.hero__arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:58px;

    height:58px;

    border-radius:50%;

    border:none;

    cursor:pointer;

    backdrop-filter:blur(12px);

    background:rgba(255,255,255,.14);

    transition:.35s;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:20;

}

.hero__arrow img{

    width:22px;

    height:22px;

}

.hero__arrow:hover{

    background:var(--bg-primary);

    transform:
        translateY(-50%)
        scale(1.08);

}

.hero__arrow--previous{

    left:35px;

}

.hero__arrow--next{

    right:35px;

}

/* =====================================================
   INITIAL CONTENT ANIMATION
===================================================== */

.hero__content > *{

    opacity:0;

    transform:translateX(-80px);

}

.hero__slide--active .hero__content > *{

    opacity:1;

    transform:translateX(0);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.hero__slide--active .hero__eyebrow{

    transition-delay:.15s;

}

.hero__slide--active .hero__title{

    transition-delay:.35s;

}

.hero__slide--active .hero__description{

    transition-delay:.55s;

}

.hero__slide--active .hero__actions{

    transition-delay:.75s;

}

/* =====================================================
   LARGE TABLETS (≤ 1024px)
===================================================== */

@media (max-width: 1024px) {

    .hero__content{
        width:min(90%,780px);
        padding-inline:var(--space-md);
    }

    .hero__title{
        max-width:950px;
    }

    .hero__description{
        max-width:650px;
        line-height:1.7;
    }

    .hero__arrow{
        width:52px;
        height:52px;
    }

    .hero__arrow--previous{
        left:10px;
    }

    .hero__arrow--next{
        right:100px;
    }

    .hero__progress{
        right:20px;
        left:auto;
        transform:none;
    }

}


/* =====================================================
   TABLETS (≤ 768px)
===================================================== */

@media (max-width:768px){

    .hero{
        min-height:100svh;
    }

    .hero__slider{
        height:100svh;
    }

    .hero__content{

        width:92%;

        padding-inline:var(--space-md);

    }

    .hero__eyebrow{

        gap:10px;

        font-size:.8rem;

        margin-bottom:18px;

    }

    .hero__eyebrow img{

        width:15px;
        height:15px;

    }

    .hero__title{

        margin-bottom:18px;

    }

    .hero__description{

        font-size:1rem;

        line-height:1.65;

        margin-bottom:32px;

    }

    /* Only text size changes */

    .hero__button{

        font-size:1.25rem;

    }

    .hero__button img{

        width:20px;
        height:20px;

    }

    .hero__arrow{

        width:48px;
        height:48px;

    }

    .hero__arrow img{

        width:6px;
        height:6px;

    }

    .hero__arrow--previous{

        left:15px;

    }

    .hero__arrow--next{

        right:15px;

    }

    .hero__progress{

        width:36px;
        height:36px;

        bottom:25px;

        right:15px;

        left:auto;

        transform:none;

    }

}


/* =====================================================
   MOBILE (≤ 600px)
===================================================== */

@media (max-width:600px){

    .hero__content{

        width:94%;

    }

    .hero__eyebrow{

        gap:8px;

        letter-spacing:.08em;

        font-size:.75rem;

    }

    .hero__description{

        width:100%;

        line-height:1.6;

    }

    /* CTA layout remains unchanged */

    .hero__button{

        font-size:1.05rem;

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

    }

    .hero__button img{

        width:18px;
        height:18px;

    }

    .hero__arrow{

        width:42px;
        height:42px;

    }

    .hero__arrow img{

        width:16px;
        height:16px;

    }

}


/* =====================================================
   SMALL PHONES (≤ 480px)
===================================================== */

@media (max-width:480px){

    .hero__content{

        width:95%;

    }

    .hero__eyebrow{

        font-size:.7rem;

        gap:6px;

    }

    .hero__eyebrow img{

        width:12px;
        height:12px;

    }

    .hero__description{

        font-size:.95rem;

        margin-bottom:28px;

    }

    /* Layout unchanged */

    .hero__button{

        font-size:.95rem;

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

    }

    .hero__button img{

        width:16px;
        height:16px;

    }

    .hero__progress{

        width:32px;
        height:32px;

    }

}


/* =====================================================
   VERY SMALL DEVICES (≤ 360px)
===================================================== */

@media (max-width:360px){

    .hero__eyebrow{

        font-size:.65rem;

    }

    .hero__description{

        font-size:.9rem;

    }

    /* Still keeping CTA in one row */

    .hero__button{

        font-size:.82rem;

        gap:8px;

    }

}



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

.achievements{

    position:relative;

    overflow:hidden;

    background:var(--bg-primary);

    padding:100px 20px;

}

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

.achievements__container{

    width:min(1200px,92%);

    margin-inline:auto;

}

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

.achievements__header{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin-bottom:80px;

}

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

.achievements__eyebrow{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:24px;

    color:var(--text-tertiary);

    text-transform:uppercase;

    letter-spacing:.14em;

    font-size:.9rem;

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

}

.achievements__eyebrow img{

    width:18px;

    height:18px;

}

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

.achievements__title{

    color:var(--text-tertiary);

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

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

    line-height:1.1;

    max-width:820px;

    text-transform:uppercase;

}

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

.achievements__grid{

    display:grid;

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

    gap:40px;

    align-items:start;

}

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

.achievement{

    text-align:center;

    color:var(--text-tertiary);

}

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

.achievement__number{

    display:inline-block;

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

    font-weight:700;

    font-size:clamp(4rem,8vw,7rem);

    line-height:1;

    opacity:0;

    transform:translateY(60px);

}

.achievement.active .achievement__number{

    animation:numberRise .9s ease forwards;

}

.achievement__plus{

    display:inline-block;

    margin-left:5px;

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

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

    font-weight:700;

    vertical-align:top;

    opacity:0;

    transform:translateY(60px);

}

.achievement.active .achievement__plus{

    animation:numberRise .9s ease forwards;

    animation-delay:.15s;

}

/* =====================================================
   HEADING
===================================================== */

.achievement__heading{

    margin-top:18px;

    margin-bottom:16px;

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

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

    text-transform:uppercase;

    line-height:1.2;

    opacity:0;

    transform:translateY(35px);

}

.achievement.active .achievement__heading{

    animation:fadeUp .8s ease forwards;

    animation-delay:.3s;

}

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

.achievement__text{

    width:min(320px,100%);

    margin-inline:auto;

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

    font-size:1rem;

    line-height:1.8;

    opacity:.95;

    opacity:0;

    transform:translateY(30px);

}

.achievement.active .achievement__text{

    animation:fadeUp .8s ease forwards;

    animation-delay:.45s;

}

/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes numberRise{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* =====================================================
   HOVER
===================================================== */

.achievement{

    transition:transform .35s ease;

}

.achievement:hover{

    transform:translateY(-8px);

}

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

@media (max-width:900px){

    .achievements{

        padding:80px 20px;

    }

    .achievements__grid{

        gap:25px;

    }

}

@media (max-width:768px){

    .achievements__header{

        margin-bottom:60px;

    }

    .achievements__grid{

        gap:20px;

    }

    .achievement__text{

        font-size:.95rem;

        line-height:1.6;

    }

    


}

@media (max-width:600px){

    .achievements{

        padding:70px 15px;

    }

    .achievements__grid{

        gap:15px;

    }

    .achievement__heading{

        font-size:1.1rem;

    }

    .achievement__text{

        font-size:.85rem;

    }

}

@media (max-width:420px){

    .achievements__eyebrow{

        gap:8px;

        font-size:.7rem;

    }

    .achievements__eyebrow img{

        width:13px;

        height:13px;

    }

    .achievement__heading{

        font-size:1rem;

    }

    .achievement__text{

        display:none;

    }

}








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

.about{

    padding:100px 20px;

    background:var(--bg-tertiary);

}

.about__container{

    width:min(1250px,92%);

    margin-inline:auto;

}

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

.about__header{

    margin-bottom:70px;

    text-align:center;

}

.about__eyebrow{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:22px;

    text-transform:uppercase;

    letter-spacing:.12em;

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

    font-size:.9rem;

    color:var(--text-primary);

}

.about__eyebrow img{

    width:18px;

    height:18px;

}

.about__title{

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

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

    line-height:1.1;

    color:var(--text-secondary);

    text-transform:uppercase;

}

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

.about__content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

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

.about__description{

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

    font-size:1.05rem;

    line-height:1.9;

    color:var(--text-secondary);

    margin-bottom:45px;

}

/*=====================================================
    FEATURES
=====================================================*/

.about__features{

    display:grid;

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

    gap:22px 35px;

    margin-bottom:50px;

}

.about__feature{

    display:flex;

    align-items:center;

    gap:14px;

    padding-bottom:16px;

    border-bottom:1px solid rgba(var(--color-secondary-rgb),0.18);

}

.about__feature img{

    width:22px;

    height:22px;

    flex-shrink:0;

}

.about__feature span{

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

    font-size:1.05rem;

    font-weight:600;

    color:var(--text-secondary);

}

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

.about__cta{

    display:inline-flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

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

    font-size:1.7rem;

    color:var(--text-primary);

    transition:var(--transition-normal);

}

.about__cta img{

    width:24px;

    height:24px;

    transition:var(--transition-normal);

}

.about__cta:hover img{

    transform:translateX(2px);

}

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

.about__right{

    display:flex;

    justify-content:flex-end;

}

.about__image{

    width:100%;

    border-top:3px solid var(--border-primary);

    border-left:3px solid var(--border-primary);

    border-bottom:3px solid var(--border-primary);

    padding:18px 0 18px 18px;

}

.about__image img{

    display:block;

    width:100%;

    height:650px;

    object-fit:cover;

}

/*=====================================================
    HOVER
=====================================================*/

.about__image img{

    transition:.6s ease;

}

.about__image:hover img{

    transform:scale(1.03);

}

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

@media(max-width:1024px){

    .about{

        padding:80px 20px;

    }

    .about__content{

        gap:45px;

    }

    .about__image img{

        height:550px;

    }

}

@media(max-width:768px){

    .about__header{

        margin-bottom:50px;

    }

    .about__content{

        grid-template-columns:1fr;

    }

    .about__right{

        order:-1;

    }

    .about__image img{

        height:450px;

    }

}

@media(max-width:600px){

    .about{

        padding:70px 18px;

    }

    .about__features{

        gap:18px;

    }

    .about__feature span{

        font-size:.95rem;

    }

    .about__description{

        font-size:1rem;

        line-height:1.8;

    }

    .about__image{

        padding:14px 0 14px 14px;

    }

    .about__image img{

        height:380px;

    }

}

@media(max-width:480px){

    .about__features{

        grid-template-columns:1fr;

    }

    .about__eyebrow{

        font-size:.75rem;

        gap:8px;

    }

    .about__eyebrow img{

        width:14px;

        height:14px;

    }

    .about__cta{

        font-size:1.35rem;

    }

    .about__image img{

        height:320px;

    }

}

@media(max-width:360px){

    .about__title{

        font-size:2rem;

    }

    .about__description{

        font-size:.95rem;

    }

}









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

.services{

    padding:100px 20px;

    background:var(--bg-primary);

    overflow:hidden;

}

.services__container{

    width:min(1300px,92%);

    margin-inline:auto;

}

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

.services__header{

    text-align:center;

    margin-bottom:80px;

}

.services__eyebrow{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:22px;

    text-transform:uppercase;

    letter-spacing:.14em;

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

    font-size:.9rem;

    color:var(--text-tertiary);

}

.services__eyebrow img{

    width:18px;

    height:18px;

}

.services__title{

    max-width:820px;

    margin-inline:auto;

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

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

    line-height:1.1;

    text-transform:uppercase;

    color:var(--text-tertiary);

}

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

.services__list{

    display:flex;

    flex-direction:column;

    gap:70px;

}

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

.service-card{

    display:grid;

    grid-template-columns:42% 58%;

    align-items:center;

    background:var(--bg-tertiary);

    border-radius:24px;

    overflow:visible;

    border:none;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    position:relative;

}

.service-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 22px 60px rgba(0,0,0,.12);

}

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

.service-card__image-wrapper{

    position:relative;

    height:360px;

    overflow:hidden;

    border-radius:24px 0 0 24px;

}

.service-card__image{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .7s ease;

}

.service-card:hover .service-card__image{

    transform:scale(1.08);

}

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

.service-card__number{

    position:absolute;

    left:-35px;

    top:50%;

    transform:translateY(-50%);

    width:90px;

    height:90px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--bg-primary);

    color:var(--text-tertiary);

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

    font-size:2rem;

    font-weight:700;

    box-shadow:
        0 20px 45px rgba(var(--color-primary-rgb),0.25);

    z-index:5;

}

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

.service-card__content{

    padding:55px 60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    height:100%;

}

.service-card__title{

    margin-bottom:18px;

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

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

    line-height:1.15;

    color:var(--text-secondary);

    text-transform:uppercase;

}

.service-card__description{

    margin-bottom:35px;

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

    font-size:1.05rem;

    line-height:1.9;

    color:var(--text-secondary);

    max-width:560px;

}

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

.service-card__link{

    display:inline-flex;

    align-items:center;

    gap:12px;

    width:max-content;

    text-decoration:none;

    color:var(--text-primary);

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

    font-size:1rem;

    transition:var(--transition-normal);

}

.service-card__link img{

    width:24px;

    height:24px;

    transition:transform .3s ease;

}

.service-card__link:hover img{

    transform:translateX(4px);

}

/*=====================================================
    ACCESSIBILITY
=====================================================*/

.service-card__link:focus-visible{

    outline:3px solid var(--border-primary);

    outline-offset:6px;

    border-radius:6px;

}

.service-card__link:focus{

    outline:none;

}

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

.service-card__image-wrapper::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(0,0,0,0),
            rgba(0,0,0,.08)
        );

    pointer-events:none;

}

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

.service-card{

    opacity:0;

    transform:translateY(60px);

}

.service-card.service-card--visible{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .8s ease,

        transform .8s ease,

        box-shadow .35s ease;

}

/*=====================================================
    ALTERNATING CARDS
=====================================================*/

.service-card--reverse{

    grid-template-columns:58% 42%;

}


/*
    Reverse image corners
*/

.service-card--reverse 
.service-card__image-wrapper{

    order:2;

    border-radius:0 24px 24px 0;

}
.service-card__number {
    padding-left: 20px



}
/*
    Reverse content order
*/

.service-card--reverse 
.service-card__content{

    order:1;

}



/*=====================================================
    TABLETS
=====================================================*/

@media(max-width:1100px){


    .services{

        padding:85px 20px;

    }


    .services__list{

        gap:55px;

    }


    .service-card{

        grid-template-columns:45% 55%;

    }


    .service-card--reverse{

        grid-template-columns:55% 45%;

    }


    .service-card__content{

        padding:45px;

    }


    .service-card__description{

        font-size:1rem;

        line-height:1.75;

    }


    .service-card__number{

        width:75px;

        height:75px;

        left:-28px;

        font-size:1.7rem;

    }


}





/*=====================================================
    SMALL TABLETS
=====================================================*/

@media(max-width:850px){


    .services__header{

        margin-bottom:60px;

    }


    .service-card,
    .service-card--reverse{

        grid-template-columns:1fr;

    }



    /*
        Reset ordering
    */


    .service-card--reverse 
    .service-card__image-wrapper{

        order:1;

        border-radius:24px 24px 0 0;

    }


    .service-card--reverse 
    .service-card__content{

        order:2;

    }



    .service-card__image-wrapper{

        min-height:350px;

        border-radius:

            24px 24px 0 0;

    }


    .service-card__content{

        padding:40px;

    }


    .service-card__number{

        top:auto;

        bottom:-35px;

        left:30px;

        transform:none;

        width:75px;

        height:75px;

    }



}





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

@media(max-width:600px){


    .services{

        padding:70px 16px;

    }



    .services__container{

        width:100%;

    }



    .services__list{

        gap:40px;

    }



    .services__eyebrow{

        gap:8px;

        font-size:.75rem;

    }



    .services__eyebrow img{

        width:14px;

        height:14px;

    }



    .service-card{

        border-radius:18px;

    }



    .service-card__image-wrapper,
    .service-card--reverse 
    .service-card__image-wrapper{

        min-height:260px;

        border-radius:

        18px 18px 0 0;

    }



    .service-card__content{

        padding:

        55px 25px 35px;

    }



    .service-card__number{

        width:65px;

        height:65px;

        left:20px;

        bottom:-10px;

        font-size:1.5rem;

        border-radius:14px;

    }



    .service-card__title{

        font-size:1.6rem;

    }



    .service-card__description{

        font-size:.95rem;

        line-height:1.7;

        margin-bottom:25px;

    }



    .service-card__link{

        font-size:1.35rem;

    }



    .service-card__link img{

        width:20px;

        height:20px;

    }



}





/*=====================================================
    SMALL PHONES
=====================================================*/

@media(max-width:400px){


    .services{

        padding-inline:12px;

    }



    .service-card__content{

        padding:

        50px 20px 30px;

    }



    .service-card__title{

        font-size:1.4rem;

    }



    .service-card__description{

        font-size:.9rem;

    }



    .service-card__number{

        width:58px;

        height:58px;

        font-size:1.3rem;

    }


}





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

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


    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }



    .service-card{

        opacity:1;

        transform:none;

    }


    .service-card:hover{

        transform:none;

    }


    .service-card:hover 
    .service-card__image{

        transform:none;

    }


}



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


.contact-cta{

    position:relative;

    min-height:520px;

    display:flex;

    align-items:center;

    justify-content:center;

    background-image:
    url("/assets/images/bg.webp");

    background-size:cover;

    background-position:center;

    overflow:hidden;

}



/* Overlay */

.contact-cta__overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,.72),
        rgba(0,0,0,.65)
    );

}



/* Container */

.contact-cta__container{

    position:relative;

    z-index:2;

    width:min(900px,90%);

    text-align:center;

    color:var(--text-tertiary);

}



/* Eyebrow */

.contact-cta__eyebrow{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:25px;

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

    font-size:.9rem;

    text-transform:uppercase;

    letter-spacing:.14em;

}



.contact-cta__eyebrow img{

    width:18px;

    height:18px;

}



/* Title */

.contact-cta__title{

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

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

    line-height:1.05;

    text-transform:uppercase;

    margin-bottom:25px;

}



/* Description */

.contact-cta__description{

    max-width:700px;

    margin-inline:auto;

    margin-bottom:45px;

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

    font-size:1.15rem;

    line-height:1.8;

}



/* Buttons */

.contact-cta__actions{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

}



.contact-cta__button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:

    var(--cta-padding-y-lg)

    var(--cta-padding-x-lg);

    text-decoration:none;

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

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

    font-size:1.4rem;

    transition:var(--transition-normal);

}



.contact-cta__button img{

    width:24px;

    height:24px;

}



/* Primary */

.contact-cta__button--primary{

    background:var(--bg-primary);

    color:white;

}



/* Secondary */

.contact-cta__button--secondary{

    border:2px solid white;

    color:white;

    background:transparent;

}



/* Hover */

.contact-cta__button:hover{

    transform:translateY(-4px);

}



.contact-cta__button--secondary:hover{

    background:white;

    color:var(--text-primary);

}



/* Focus */

.contact-cta__button:focus-visible{

    outline:3px solid white;

    outline-offset:5px;

}



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


@media(max-width:768px){


    .contact-cta{

        min-height:600px;

    }


    .contact-cta__description{

        font-size:1rem;

    }


    .contact-cta__actions{

        gap:14px;

    }


    .contact-cta__button{

        font-size:1.15rem;

        padding:

        var(--cta-padding-y-md)

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

    }

}



@media(max-width:480px){


    .contact-cta{

        min-height:650px;

    }


    .contact-cta__eyebrow{

        font-size:.75rem;

    }


    .contact-cta__button{

        font-size:1rem;

    }


    .contact-cta__button img{

        width:18px;

        height:18px;

    }

}






/*=====================================================
    PROJECT GALLERY
=====================================================*/

.project-gallery{

    padding:110px 0;

    background:var(--bg-tertiary);

    overflow:hidden;

}

.project-gallery__container{

    width:100%;

}





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

.project-gallery__header{

    width:min(900px,92%);

    margin-inline:auto;

    text-align:center;

    margin-bottom:70px;

}

.project-gallery__eyebrow{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:24px;

    text-transform:uppercase;

    letter-spacing:.14em;

    font-size:.9rem;

    color:var(--text-primary);

}

.project-gallery__eyebrow img{

    width:18px;

    height:18px;

}

.project-gallery__title{

    margin:0 0 25px;

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

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

    line-height:1.1;

    text-transform:uppercase;

    color:var(--text-secondary);

}

.project-gallery__description{

    max-width:700px;

    margin-inline:auto;

    font-size:1.1rem;

    line-height:1.9;

    color:var(--text-secondary);

}





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

.project-gallery__viewport{

    overflow:hidden;

    outline:none;

}

.project-gallery__track{

    display:flex;

    gap:5px;

    width:max-content;

    animation:gallery-scroll 38s linear infinite;

}

.project-gallery__viewport:hover
.project-gallery__track{

    animation-play-state:paused;

}





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

.project-gallery__item{

    flex:0 0 auto;

    width:360px;

    border-radius:8px;

    overflow:hidden;

    background:white;

    box-shadow:

        0 20px 45px rgba(0,0,0,.08);

}

.project-gallery__item img{

    display:block;

    width:100%;

    height:380px;

    object-fit:cover;

    transition:.6s;

}

.project-gallery__item:hover img{

    transform:scale(1.06);

}





/*=====================================================
    ANIMATION
=====================================================*/

@keyframes gallery-scroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(calc(-50% - 15px));

    }

}





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

@media(max-width:992px){

    .project-gallery{

        padding:90px 0;

    }

    .project-gallery__item{

        width:380px;

    }

    .project-gallery__item img{

        height:500px;

    }

}





@media(max-width:768px){

    .project-gallery__header{

        margin-bottom:50px;

    }

    .project-gallery__item{

        width:320px;

    }

    .project-gallery__item img{

        height:430px;

    }

}





@media(max-width:480px){

    .project-gallery{

        padding:70px 0;

    }

    .project-gallery__item{

        width:260px;

    }

    .project-gallery__item img{

        height:340px;

    }

}


















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


.why-us{

    padding:100px 20px;

    background:var(--bg-primary);

    color:var(--text-tertiary);

}



.why-us__container{

    width:min(1200px,92%);

    margin-inline:auto;

}



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


.why-us__header{

    text-align:center;

    max-width:850px;

    margin-inline:auto;

    margin-bottom:70px;

}



.why-us__eyebrow{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

    margin-bottom:25px;

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

    font-size:.9rem;

    letter-spacing:.14em;

    text-transform:uppercase;

}



.why-us__eyebrow img{

    width:18px;

}



.why-us__title{

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

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

    text-transform:uppercase;

    line-height:1.1;

    margin-bottom:25px;

}



.why-us__intro{

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

    font-size:1.15rem;

    line-height:1.8;

}





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


.why-us__grid{

    display:grid;

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

    gap:0 50px;

}



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


.why-us__item{

    display:flex;

    gap:25px;

    padding:35px 0;

    border-bottom:1px solid rgba(255,255,255,.35);

}



.why-us__number{

    flex-shrink:0;

    width:65px;

    height:65px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:white;

    color:var(--text-primary);

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

    font-size:1.5rem;

    font-weight:700;

    border-radius:12px;

}



.why-us__content h3{

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

    text-transform:uppercase;

    font-size:0.7rem;

    margin-bottom:10px;

}



.why-us__content p{

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

    line-height:1.7;

    opacity:.95;

}






/*=====================================================
    HOVER
=====================================================*/


.why-us__item{

    transition:transform .3s ease;

}



.why-us__item:hover{

    transform:translateX(6px);

}



.why-us__item:hover 
.why-us__number{

    background:var(--color-secondary);

    color:white;

}





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


@media(max-width:900px){


    .why-us__grid{

        grid-template-columns:1fr;

    }



}



@media(max-width:600px){


    .why-us{

        padding:70px 16px;

    }



    .why-us__item{

        gap:18px;

    }



    .why-us__number{

        width:55px;

        height:55px;

        font-size:1.2rem;

    }



    .why-us__content h3{

        font-size:1.25rem;

    }



    .why-us__content p{

        font-size:.95rem;

    }


}




/* =====================================================
   FAQ SECTION
===================================================== */


.faq{

    width:100%;

    padding:100px 20px;

    background:var(--bg-tertiary);

}





.faq__container{

    width:min(1100px,92%);

    margin-inline:auto;

}





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


.faq__header{

    max-width:850px;

    margin-inline:auto;

    text-align:center;

    margin-bottom:70px;

}





.faq__eyebrow{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:25px;

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

    font-size:var(--font-size-sm);

    letter-spacing:.15em;

    text-transform:uppercase;

    color:var(--text-primary);

}





.faq__eyebrow img{

    width:18px;

    height:18px;

}





.faq__title{

    margin:0 0 25px;


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

    font-size:var(--font-size-display);

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

    text-transform:uppercase;

    color:var(--text-secondary);

}





.faq__description{

    max-width:750px;

    margin-inline:auto;

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

    font-size:var(--font-size-lg);

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

    color:var(--text-secondary);

}





/* =====================================================
   FAQ LIST
===================================================== */


.faq__list{

    display:flex;

    flex-direction:column;

    gap:18px;

}





/* =====================================================
   FAQ ITEM
===================================================== */


.faq__item{

    background:white;

    border:1px solid rgba(
        var(--color-secondary-rgb),
        .12
    );

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

    overflow:hidden;

    transition:

        border-color .3s ease,

        box-shadow .3s ease;

}





.faq__item:hover{

    border-color:rgba(
        var(--color-primary-rgb),
        .4
    );

}





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


.faq__question{

    width:100%;

    display:flex;

    align-items:center;

    gap:22px;

    padding:24px;

    border:none;

    background:transparent;

    cursor:pointer;

    text-align:left;

}





.faq__question:focus-visible{

    outline:

    3px solid var(--color-primary);

    outline-offset:-3px;

}





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


.faq__number{

    flex-shrink:0;

    width:55px;

    height:55px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:var(--bg-primary);

    color:white;


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


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

    font-size:var(--font-size-lg);

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

}





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


.faq__question-text{

    flex:1;


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

    font-size:var(--font-size-lg);

    font-weight:600;

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

    color:var(--text-secondary);

}





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


.faq__icon{


    flex-shrink:0;


    width:40px;

    height:40px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:var(--color-primary);

    color:white;


    font-family:Arial,sans-serif;

    font-size:28px;

    font-weight:300;


    line-height:1;


    transition:

        transform .35s ease,

        background .35s ease;

}







/* =====================================================
   ANSWER
===================================================== */


.faq__answer{


    max-height:0;

    overflow:hidden;


    transition:

        max-height .45s ease,

        padding .35s ease;


}





.faq__answer p{


    margin:0;


    padding:

        0 100px 28px;


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


    font-size:var(--font-size-md);


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


    color:var(--text-secondary);

}





/* =====================================================
   ACTIVE STATE
===================================================== */


.faq__item.active{


    box-shadow:

    0 15px 40px rgba(
        var(--color-secondary-rgb),
        .08
    );

}





.faq__item.active 
.faq__icon{


    transform:rotate(45deg);


    background:var(--color-secondary);


}





/*
   + rotated 45deg becomes ×
*/





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


@media(max-width:768px){



    .faq{

        padding:80px 16px;

    }




    .faq__header{

        margin-bottom:50px;

    }





    .faq__question{

        padding:18px;

        gap:14px;

    }





    .faq__number{


        width:42px;

        height:42px;


        font-size:var(--font-size-md);

    }






    .faq__question-text{


        font-size:var(--font-size-md);

    }






    .faq__icon{


        width:34px;

        height:34px;


        font-size:24px;

    }






    .faq__answer p{


        padding:

        0 20px 24px;


        font-size:.95rem;

    }


}





@media(max-width:480px){



    .faq__question{


        gap:10px;

    }




    .faq__number{

        width:36px;

        height:36px;

        font-size:.85rem;

    }



    .faq__question-text{

        font-size:.9rem;

    }


}










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

.location-map{

    width:100%;

    padding:100px 20px;

    background:var(--bg-primary);

}





.location-map__container{

    width:min(1200px,92%);

    margin-inline:auto;

}





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

.location-map__header{

    max-width:850px;

    margin-inline:auto;

    text-align:center;

    margin-bottom:60px;

}





.location-map__eyebrow{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:25px;

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

    font-size:var(--font-size-sm);

    letter-spacing:.15em;

    text-transform:uppercase;

    color:var(--text-tertiary);

}





.location-map__eyebrow img{

    width:18px;

    height:18px;

}





.location-map__title{

    margin:0 0 25px;

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

    font-size:var(--font-size-display);

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

    text-transform:uppercase;

    color:var(--text-tertiary);

}





.location-map__description{

    max-width:750px;

    margin-inline:auto;

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

    font-size:var(--font-size-lg);

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

    color:var(--text-tertiary);

}





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

.location-map__wrapper{

    overflow:hidden;

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

    border:1px solid rgba(var(--color-secondary-rgb),.12);

    box-shadow:

        0 20px 60px rgba(
            var(--color-secondary-rgb),
            .08
        );

}





.location-map__wrapper iframe{

    display:block;

    width:100%;

    height:600px;

    border:none;

}





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

@media(max-width:768px){

    .location-map{

        padding:80px 16px;

    }

    .location-map__header{

        margin-bottom:45px;

    }

    .location-map__wrapper iframe{

        height:450px;

    }

}





@media(max-width:480px){

    .location-map__wrapper iframe{

        height:350px;

    }

}





/*=====================================================
    FLOATING CONTACT BUTTONS
=====================================================*/

.floating-contact{

    position:fixed;

    left:25px;

    bottom:30px;

    z-index:9999;

    display:flex;

    flex-direction:column;

    gap:14px;


    opacity:0;

    visibility:hidden;

    transform:translateY(30px);


    transition:

        opacity .35s ease,

        transform .35s ease,

        visibility .35s ease;

}





/* ACTIVE STATE */

.floating-contact.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}





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

.floating-contact__button{

    display:flex;

    align-items:center;

    gap:12px;


    min-width:150px;


    padding:14px 22px;


    border-radius:999px;


    text-decoration:none;


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

    font-size:1rem;

    font-weight:700;


    color:white;


    box-shadow:

    0 15px 35px rgba(0,0,0,.18);


    transition:

    transform .3s ease,

    box-shadow .3s ease;

}



.floating-contact__button:hover{

    transform:translateY(-5px);

    box-shadow:

    0 20px 45px rgba(0,0,0,.25);

}





.floating-contact__button img{

    width:24px;

    height:24px;

}





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

.floating-contact__button--call{

    background:var(--bg-primary);

}





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

.floating-contact__button--whatsapp{

    background:#25D366;

}





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

@media(max-width:600px){


    .floating-contact{

        left:15px;

        bottom:20px;

        gap:10px;

    }



    .floating-contact__button{

        min-width:auto;

        width:55px;

        height:55px;

        padding:0;


        justify-content:center;

        border-radius:50%;

    }



    .floating-contact__button span{

        display:none;

    }



    .floating-contact__button img{

        width:26px;

        height:26px;

    }


}











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

.footer{

    width:100%;

    background:var(--bg-tertiary);

    color:var(--text-secondary);

}





.footer__container{

    width:min(1200px,92%);

    margin-inline:auto;

    padding:90px 0 60px;

    display:grid;

    grid-template-columns:1.4fr 1fr 1fr;

    gap:60px;

}





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

.footer__logo{

    display:inline-block;

    margin-bottom:24px;

}

.footer__logo img{

    width:180px;

    display:block;

}

.footer__title{

    margin:0 0 20px;

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

    font-size:1.8rem;

    text-transform:uppercase;

    color:var(--text-secondary);

}

.footer__text{

    margin:0;

    line-height:1.9;

    font-size:var(--font-size-md);

}





/* =====================================================
   HEADINGS
===================================================== */

.footer__heading{

    margin:0 0 25px;

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

    font-size:1.25rem;

    text-transform:uppercase;

}





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

.footer__links,
.footer__contacts{

    list-style:none;

    margin:0;

    padding:0;

}

.footer__links li,

.footer__contacts li{

    margin-bottom:18px;

}

.footer__links a,

.footer__contacts a{

    text-decoration:none;

    color:var(--text-secondary);

    transition:.3s;

}

.footer__links a:hover,

.footer__contacts a:hover{

    color:var(--color-primary);

}





.footer__contacts li{

    display:flex;

    align-items:center;

    gap:12px;

}

.footer__contacts img{

    width:20px;

    height:20px;

}





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

.footer__bottom{

    border-top:1px solid rgba(var(--color-secondary-rgb),.12);

    padding:25px 20px;

}

.footer__bottom-container{

    width:min(1200px,92%);

    margin-inline:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.footer__legal{

    display:flex;

    gap:25px;

    flex-wrap:wrap;

}

.footer__legal a{

    text-decoration:none;

    color:var(--text-secondary);

    transition:.3s;

}

.footer__legal a:hover{

    color:var(--color-primary);

}

.footer__copyright{

    margin:0;

    text-align:right;

    line-height:1.7;

}

.footer__copyright a{

    color:var(--color-primary);

    text-decoration:none;

    font-weight:600;

}

.footer__divider{

    margin:0 10px;

}





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

@media (max-width:900px){

    .footer__container{

        grid-template-columns:1fr;

        gap:50px;

    }

    .footer__bottom-container{

        flex-direction:column;

        align-items:flex-start;

    }

    .footer__copyright{

        text-align:left;

    }

}

@media (max-width:600px){

    .footer{

        text-align:left;

    }

    .footer__logo img{

        width:150px;

    }

    .footer__legal{

        flex-direction:column;

        gap:12px;

    }

}


























/*=====================================================
    ABOUT INTRODUCTION
=====================================================*/

.about-intro{

    padding:110px 20px;

    background:var(--bg-primary);

}

.about-intro__container{

    width:min(1250px,92%);

    margin-inline:auto;

}





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

.about-intro__header{

    max-width:900px;

    margin-inline:auto;

    text-align:center;

    margin-bottom:70px;

}

.about-intro__eyebrow{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:22px;

    text-transform:uppercase;

    letter-spacing:.14em;

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

    font-size:.9rem;

    color:var(--text-tertiary);

}

.about-intro__eyebrow img{

    width:18px;

    height:18px;

}

.about-intro__title{

    margin:0;

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

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

    line-height:1.1;

    text-transform:uppercase;

    color:var(--text-tertiary);

}





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

.about-intro__content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:start;

}





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

.about-intro__image{

    overflow:hidden;

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

    margin-bottom:35px;

}

.about-intro__image img{

    display:block;

    width:100%;

    height:620px;

    object-fit:cover;

    transition:.6s ease;

}

.about-intro__image:hover img{

    transform:scale(1.05);

}





/*=====================================================
    PARAGRAPHS
=====================================================*/

.about-intro__paragraph{

    margin:0 0 30px;

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

    font-size:1.05rem;

    line-height:2;

    color:var(--text-tertiary);

}

.about-intro__right .about-intro__paragraph:last-child{

    margin-bottom:0;

}





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

@media(max-width:992px){

    .about-intro{

        padding:90px 20px;

    }

    .about-intro__content{

        gap:45px;

    }

    .about-intro__image img{

        height:520px;

    }

}





@media(max-width:768px){

    .about-intro__header{

        margin-bottom:50px;

    }

    .about-intro__content{

        grid-template-columns:1fr;

    }

    .about-intro__image img{

        height:450px;

    }

}





@media(max-width:600px){

    .about-intro{

        padding:75px 18px;

    }

    .about-intro__paragraph{

        font-size:1rem;

        line-height:1.9;

    }

    .about-intro__image img{

        height:380px;

    }

}





@media(max-width:480px){

    .about-intro__eyebrow{

        font-size:.75rem;

        gap:8px;

    }

    .about-intro__eyebrow img{

        width:14px;

        height:14px;

    }

    .about-intro__image img{

        height:320px;

    }

}



/*=====================================================
    MISSION & VISION
=====================================================*/

.missionvision{

    padding:110px 20px;

    background:var(--bg-tertiary);

}

.missionvision__container{

    width:min(1250px,92%);

    margin-inline:auto;

}





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

.missionvision__header{

    max-width:900px;

    margin-inline:auto;

    text-align:center;

    margin-bottom:70px;

}

.missionvision__eyebrow{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:22px;

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

    font-size:.9rem;

    text-transform:uppercase;

    letter-spacing:.14em;

    color:var(--text-primary);

}

.missionvision__eyebrow img{

    width:18px;

    height:18px;

}

.missionvision__title{

    margin:0 0 25px;

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

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

    line-height:1.1;

    text-transform:uppercase;

    color:var(--text-secondary);

}

.missionvision__description{

    max-width:760px;

    margin-inline:auto;

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

    font-size:1.1rem;

    line-height:1.9;

    color:var(--text-secondary);

}





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

.missionvision__grid{

    display:grid;

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

    gap:35px;

}





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

.missionvision__card{

    background:white;

    padding:55px;

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

    border:1px solid rgba(var(--color-secondary-rgb),.08);

    box-shadow:

        0 20px 45px rgba(var(--color-secondary-rgb),.05);

    transition:

        transform .4s ease,

        box-shadow .4s ease,

        border-color .4s ease;

}

.missionvision__card:hover{

    transform:translateY(-8px);

    border-color:rgba(var(--color-primary-rgb),.25);

    box-shadow:

        0 30px 60px rgba(var(--color-secondary-rgb),.10);

}





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

.missionvision__icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    border-radius:50%;

    border:1px solid var(--color-secondary);

    background:none;

}

.missionvision__icon img{

    width:34px;

    height:34px;

}





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

.missionvision__label{

    display:inline-block;

    margin-bottom:18px;

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

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.18em;

    color:var(--text-primary);

}

.missionvision__heading{

    margin:0 0 22px;

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

    font-size:2rem;

    line-height:1.2;

    text-transform:uppercase;

    color:var(--text-secondary);

}

.missionvision__card p{

    margin:0;

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

    font-size:1.05rem;

    line-height:2;

    color:var(--text-secondary);

}





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

@media(max-width:992px){

    .missionvision{

        padding:90px 20px;

    }

    .missionvision__card{

        padding:40px;

    }

}





@media(max-width:768px){

    .missionvision__header{

        margin-bottom:50px;

    }

    .missionvision__grid{

        grid-template-columns:1fr;

    }

}





@media(max-width:600px){

    .missionvision{

        padding:70px 18px;

    }

    .missionvision__card{

        padding:30px;

    }

    .missionvision__heading{

        font-size:1.6rem;

    }

    .missionvision__card p{

        font-size:1rem;

        line-height:1.9;

    }

}





@media(max-width:480px){

    .missionvision__eyebrow{

        gap:8px;

        font-size:.75rem;

    }

    .missionvision__eyebrow img{

        width:14px;

        height:14px;

    }

    .missionvision__title{

        font-size:2.2rem;

    }

    .missionvision__icon{

        width:60px;

        height:60px;

    }

    .missionvision__icon img{

        width:28px;

        height:28px;

    }

}





























/*=====================================================
    CONTACT INFORMATION
=====================================================*/

.contactinfo{

    padding:110px 20px;

    background:var(--bg-tertiary);

}

.contactinfo__container{

    width:min(1250px,92%);

    margin-inline:auto;

}





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

.contactinfo__header{

    max-width:850px;

    margin-inline:auto;

    text-align:center;

    margin-bottom:70px;

}

.contactinfo__eyebrow{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:22px;

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

    font-size:.9rem;

    text-transform:uppercase;

    letter-spacing:.14em;

    color:var(--text-primary);

}

.contactinfo__eyebrow img{

    width:18px;

    height:18px;

}

.contactinfo__title{

    margin:0 0 25px;

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

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

    line-height:1.1;

    text-transform:uppercase;

    color:var(--text-secondary);

}

.contactinfo__description{

    max-width:720px;

    margin-inline:auto;

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

    font-size:1.1rem;

    line-height:1.9;

    color:var(--text-secondary);

}





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

.contactinfo__grid{

    display:grid;

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

    gap:35px;

    margin-bottom:70px;

}





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

.contactinfo__card{

    padding:45px 35px;

    background:#fff;

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

    border:1px solid rgba(var(--color-secondary-rgb),.08);

    text-align:center;

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

    box-shadow:

        0 18px 45px rgba(var(--color-secondary-rgb),.05);

}

.contactinfo__card:hover{

    transform:translateY(-8px);

    border-color:rgba(var(--color-primary-rgb),.25);

    box-shadow:

        0 25px 55px rgba(var(--color-secondary-rgb),.10);

}





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

.contactinfo__card>img{

    width:70px;

    height:70px;

    margin-bottom:25px;

}





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

.contactinfo__label{

    display:block;

    margin-bottom:16px;

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

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--text-primary);

}

.contactinfo__card h3{

    margin:0 0 18px;

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

    font-size:2rem;

    text-transform:uppercase;

    color:var(--text-secondary);

}

.contactinfo__card p{

    margin:0 0 28px;

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

    font-size:1rem;

    line-height:1.9;

    color:var(--text-secondary);

}

.contactinfo__card>a{

    display:inline-block;

    text-decoration:none;

    color:var(--text-primary);

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

    font-weight:700;

    font-size:1.05rem;

    transition:var(--transition-normal);

}

.contactinfo__card>a:hover{

    color:var(--text-secondary);

}





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

.contactinfo__socials{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

}

.contactinfo__socials a{

    padding:10px 18px;

    border-radius:999px;

    text-decoration:none;

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

    font-weight:600;

    color:var(--text-primary);

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

    transition:var(--transition-normal);

}

.contactinfo__socials a:hover{

    background:var(--bg-primary);

    color:#fff;

    border-color:transparent;

}





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

.contactinfo__cta{

    padding:70px 50px;

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

    background:var(--bg-primary);

    text-align:center;

}

.contactinfo__cta h3{

    margin:0 0 20px;

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

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

    text-transform:uppercase;

    color:#fff;

}

.contactinfo__cta p{

    max-width:700px;

    margin:0 auto 40px;

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

    font-size:1.05rem;

    line-height:1.9;

    color:rgba(255,255,255,.92);

}





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

.contactinfo__buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}

.contactinfo__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

    text-decoration:none;

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

    font-size:1rem;

    font-weight:700;

    transition:var(--transition-normal);

}

.contactinfo__button--primary{

    background:#fff;

    color:var(--text-primary);

}

.contactinfo__button--primary:hover{

    transform:translateY(-3px);

}

.contactinfo__button--secondary{

    border:2px solid rgba(255,255,255,.35);

    color:#fff;

}

.contactinfo__button--secondary:hover{

    background:#fff;

    color:var(--text-primary);

    border-color:#fff;

}





/*=====================================================
    ACCESSIBILITY
=====================================================*/

.contactinfo a:focus-visible{

    outline:3px solid var(--color-primary);

    outline-offset:4px;

}





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

@media(max-width:1024px){

    .contactinfo{

        padding:90px 20px;

    }

    .contactinfo__grid{

        gap:25px;

    }

    .contactinfo__card{

        padding:35px 25px;

    }

}





@media(max-width:900px){

    .contactinfo__grid{

        grid-template-columns:1fr;

    }

}





@media(max-width:768px){

    .contactinfo__header{

        margin-bottom:50px;

    }

    .contactinfo__cta{

        padding:50px 30px;

    }

}





@media(max-width:600px){

    .contactinfo{

        padding:70px 18px;

    }

    .contactinfo__title{

        font-size:2.2rem;

    }

    .contactinfo__description{

        font-size:1rem;

    }

    .contactinfo__card h3{

        font-size:1.6rem;

    }

    .contactinfo__cta h3{

        font-size:2rem;

    }

}





@media(max-width:480px){

    .contactinfo__eyebrow{

        gap:8px;

        font-size:.75rem;

    }

    .contactinfo__eyebrow img{

        width:14px;

        height:14px;

    }

    .contactinfo__card{

        padding:30px 20px;

    }

    .contactinfo__card>img{

        width:58px;

        height:58px;

    }

    .contactinfo__buttons{

        flex-direction:column;

    }

    .contactinfo__button{

        width:100%;

    }

}









































































































/* =====================================================
   TERMS OF SERVICE
===================================================== */

.legal-hero{

    width:100%;

    padding:120px 20px 90px;

    background:var(--bg-tertiary);

    text-align:center;

}





.legal-hero__container{

    width:min(900px,92%);

    margin-inline:auto;

}





.legal-hero__eyebrow{

    display:inline-block;

    margin-bottom:22px;

    padding:10px 20px;

    border-radius:999px;

    background: none;

    color:var(--color-primary);

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

    font-size:var(--font-size-sm);

    font-weight:600;

    letter-spacing:.12em;

    text-transform:uppercase;

}





.legal-hero__title{

    margin:0 0 25px;

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

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

    line-height:1.1;

    text-transform:uppercase;

    color:var(--text-secondary);

}






.legal-hero__description{

    max-width:760px;

    margin-inline:auto;

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

    font-size:var(--font-size-lg);

    line-height:1.8;

    color:var(--text-secondary);

}





/* =====================================================
   LAYOUT
===================================================== */

.legal{

    padding:90px 20px;

    background:var(--bg-primary);

}





.legal__container{

    width:min(1250px,92%);

    margin-inline:auto;

    display:grid;

    grid-template-columns:320px 1fr;

    gap:60px;

    align-items:start;

}





/* =====================================================
   SIDEBAR
===================================================== */

.legal__sidebar{

    position:sticky;

    top:120px;

}





.legal__card{

    padding:30px;

    background:#fff;

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

    border:1px solid rgba(var(--color-secondary-rgb),.08);

    box-shadow:0 12px 35px rgba(var(--color-secondary-rgb),.06);

}





.legal__card h2{

    margin:0 0 25px;

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

    font-size:1.5rem;

    color:var(--text-secondary);

}





.legal__card ul{

    margin:0;

    padding:0;

    list-style:none;

}





.legal__card li{

    margin-bottom:15px;

}





.legal__card a{

    color:var(--text-secondary);

    text-decoration:none;

    transition:.3s;

    line-height:1.6;

}





.legal__card a:hover{

    color:var(--color-primary);

    padding-left:8px;

}





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

.legal__content{

    display:flex;

    flex-direction:column;

    gap:35px;

}





.legal__intro{

    padding:40px;

    background:#fff;

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

    border-left:6px solid var(--color-primary);

    box-shadow:0 10px 30px rgba(var(--color-secondary-rgb),.05);

}





.legal__intro p{

    margin:0 0 20px;

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

    font-size:var(--font-size-md);

    line-height:1.9;

    color:var(--text-secondary);

}





.legal__intro p:last-child{

    margin-bottom:0;

}





/* =====================================================
   TERMS
===================================================== */

.legal__section{

    padding:40px;

    background:#fff;

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

    border:1px solid rgba(var(--color-secondary-rgb),.08);

    box-shadow:0 10px 30px rgba(var(--color-secondary-rgb),.05);

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}





.legal__section:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 45px rgba(var(--color-secondary-rgb),.08);

}





.legal__section h2{

    margin:0 0 20px;

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

    font-size:2rem;

    color:var(--text-secondary);

}





.legal__section p{

    margin:0;

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

    font-size:var(--font-size-md);

    line-height:1.9;

    color:var(--text-secondary);

}





/* =====================================================
   CONTACT LIST
===================================================== */

.legal__contact-list{

    margin:30px 0 0;

    padding:0;

    list-style:none;

}





.legal__contact-list li{

    margin-bottom:18px;

    padding-bottom:18px;

    border-bottom:1px solid rgba(var(--color-secondary-rgb),.08);

    line-height:1.8;

}





.legal__contact-list li:last-child{

    margin-bottom:0;

    padding-bottom:0;

    border:none;

}





.legal__contact-list a{

    color:var(--color-primary);

    text-decoration:none;

    transition:.3s;

}





.legal__contact-list a:hover{

    color:var(--color-secondary);

}





/* =====================================================
   THANK YOU
===================================================== */

.legal__closing{

    padding:50px;

    text-align:center;

    background:var(--bg-tertiary);

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

}





.legal__closing h2{

    margin:0 0 25px;

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

    font-size:2.5rem;

    text-transform:uppercase;

    color:var(--text-secondary);

}





.legal__closing p{

    max-width:850px;

    margin-inline:auto;

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

    font-size:var(--font-size-lg);

    line-height:2;

    color:var(--text-secondary);

}





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

.legal ::selection{

    background:var(--color-primary);

    color:#fff;

}





/* =====================================================
   SCROLL OFFSET
===================================================== */

.legal__section{

    scroll-margin-top:120px;

}





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

@media (max-width:992px){

    .legal__container{

        grid-template-columns:1fr;

    }

    .legal__sidebar{

        position:relative;

        top:0;

    }

}





@media (max-width:768px){

    .legal-hero{

        padding:90px 16px 70px;

    }

    .legal{

        padding:70px 16px;

    }

    .legal__intro,

    .legal__section,

    .legal__closing,

    .legal__card{

        padding:28px;

    }

    .legal__section h2{

        font-size:1.6rem;

    }

}





@media (max-width:480px){

    .legal-hero__title{

        font-size:2.2rem;

    }

    .legal__section h2{

        font-size:1.35rem;

    }

    .legal__intro,

    .legal__section,

    .legal__closing,

    .legal__card{

        padding:22px;

    }

    .legal__closing h2{

        font-size:2rem;

    }

}























/* =====================================================
   PRIVACY POLICY PAGE
===================================================== */



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

.privacy-hero{

    width:100%;

    padding:120px 20px 90px;

    background:var(--bg-tertiary);

    text-align:center;

}





.privacy-hero__container{

    width:min(900px,92%);

    margin-inline:auto;

}





.privacy-hero__eyebrow{

    display:inline-block;

    margin-bottom:22px;

    padding:10px 22px;

    border-radius:999px;

    background:none;

    color:var(--color-primary);

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

    font-size:var(--font-size-sm);

    font-weight:600;

    letter-spacing:.15em;

    text-transform:uppercase;

}





.privacy-hero__title{

    margin:0 0 25px;

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

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

    line-height:1.1;

    text-transform:uppercase;

    color:var(--text-secondary);

}





.privacy-hero__description{

    max-width:760px;

    margin-inline:auto;

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

    font-size:var(--font-size-lg);

    line-height:1.8;

    color:var(--text-secondary);

}





/* =====================================================
   MAIN LAYOUT
===================================================== */

.privacy{

    width:100%;

    padding:100px 20px;

    background:var(--bg-primary);

}





.privacy__container{

    width:min(1250px,92%);

    margin-inline:auto;

    display:grid;

    grid-template-columns:320px 1fr;

    gap:60px;

    align-items:start;

}





/* =====================================================
   SIDEBAR
===================================================== */

.privacy__sidebar{

    position:sticky;

    top:120px;

}





.privacy__card{

    background:#fff;

    padding:32px;

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

    border:1px solid rgba(
        var(--color-secondary-rgb),
        .08
    );

    box-shadow:
        0 15px 40px rgba(
            var(--color-secondary-rgb),
            .05
        );

}





.privacy__card h2{

    margin:0 0 24px;

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

    font-size:1.5rem;

    color:var(--text-secondary);

}





.privacy__card ul{

    list-style:none;

    margin:0;

    padding:0;

}





.privacy__card li{

    margin-bottom:16px;

}





.privacy__card li:last-child{

    margin-bottom:0;

}





.privacy__card a{

    display:block;

    color:var(--text-secondary);

    text-decoration:none;

    line-height:1.7;

    transition:

        color .3s ease,

        padding-left .3s ease;

}





.privacy__card a:hover{

    color:var(--color-primary);

    padding-left:10px;

}





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

.privacy__content{

    display:flex;

    flex-direction:column;

    gap:35px;

}





/* =====================================================
   INTRODUCTION
===================================================== */

.privacy__intro{

    padding:40px;

    background:#fff;

    border-left:6px solid var(--color-primary);

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

    box-shadow:

        0 12px 35px rgba(
            var(--color-secondary-rgb),
            .05
        );

}





.privacy__intro p{

    margin:0 0 20px;

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

    font-size:var(--font-size-md);

    line-height:1.9;

    color:var(--text-secondary);

}





.privacy__intro p:last-child{

    margin-bottom:0;

}





/* =====================================================
   PRIVACY SECTIONS
===================================================== */

.privacy__section{

    background:#fff;

    padding:40px;

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

    border:1px solid rgba(
        var(--color-secondary-rgb),
        .08
    );

    box-shadow:

        0 12px 35px rgba(
            var(--color-secondary-rgb),
            .05
        );

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}





.privacy__section:hover{

    transform:translateY(-4px);

    box-shadow:

        0 20px 45px rgba(
            var(--color-secondary-rgb),
            .08
        );

}





.privacy__section h2{

    margin:0 0 20px;

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

    font-size:2rem;

    line-height:1.3;

    color:var(--text-secondary);

}





.privacy__section p{

    margin:0;

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

    font-size:var(--font-size-md);

    line-height:1.9;

    color:var(--text-secondary);

}





/* =====================================================
   ANCHOR OFFSET
===================================================== */

.privacy__section{

    scroll-margin-top:120px;

}





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

.privacy ::selection{

    background:var(--color-primary);

    color:#fff;

}





/* =====================================================
   CONTACT LIST
===================================================== */

.privacy__contact-list{

    list-style:none;

    margin:30px 0 0;

    padding:0;

}





.privacy__contact-list li{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    align-items:flex-start;

    padding:18px 0;

    border-bottom:1px solid rgba(
        var(--color-secondary-rgb),
        .08
    );

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

    font-size:var(--font-size-md);

    line-height:1.8;

    color:var(--text-secondary);

}





.privacy__contact-list li:first-child{

    padding-top:0;

}





.privacy__contact-list li:last-child{

    border-bottom:none;

    padding-bottom:0;

}





.privacy__contact-list strong{

    color:var(--text-secondary);

    font-weight:700;

}





.privacy__contact-list a{

    color:var(--color-primary);

    text-decoration:none;

    transition:color .3s ease;

}





.privacy__contact-list a:hover{

    color:var(--color-secondary);

}





/* =====================================================
   CLOSING SECTION
===================================================== */

.privacy__closing{

    padding:60px 50px;

    background:var(--bg-tertiary);

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

    text-align:center;

}





.privacy__closing h2{

    margin:0 0 25px;

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

    font-size:2.5rem;

    line-height:1.2;

    text-transform:uppercase;

    color:var(--text-secondary);

}





.privacy__closing p{

    max-width:850px;

    margin-inline:auto;

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

    font-size:var(--font-size-lg);

    line-height:2;

    color:var(--text-secondary);

}





/* =====================================================
   GLOBAL LINK STYLES
===================================================== */

.privacy__content a{

    color:var(--color-primary);

    text-decoration:none;

    transition:

        color .3s ease,

        opacity .3s ease;

}





.privacy__content a:hover{

    color:var(--color-secondary);

}





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

.privacy__content a:focus-visible,

.privacy__card a:focus-visible{

    outline:3px solid var(--color-primary);

    outline-offset:4px;

    border-radius:4px;

}





/* =====================================================
   SMOOTH SCROLLING
===================================================== */

html{

    scroll-behavior:smooth;

}





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

@media (max-width:1100px){

    .privacy__container{

        grid-template-columns:280px 1fr;

        gap:40px;

    }

}





@media (max-width:992px){

    .privacy{

        padding:80px 20px;

    }

    .privacy__container{

        grid-template-columns:1fr;

    }

    .privacy__sidebar{

        position:relative;

        top:0;

        order:-1;

    }

    .privacy__card{

        margin-bottom:15px;

    }

}





@media (max-width:768px){

    .privacy-hero{

        padding:90px 16px 70px;

    }

    .privacy{

        padding:70px 16px;

    }

    .privacy__card,

    .privacy__intro,

    .privacy__section,

    .privacy__closing{

        padding:28px;

    }

    .privacy__section h2{

        font-size:1.6rem;

    }

    .privacy__closing h2{

        font-size:2rem;

    }

    .privacy__closing p{

        font-size:var(--font-size-md);

        line-height:1.9;

    }

}





@media (max-width:600px){

    .privacy__card ul{

        display:grid;

        grid-template-columns:1fr;

        gap:12px;

    }

}





@media (max-width:480px){

    .privacy-hero__title{

        font-size:2.2rem;

    }

    .privacy-hero__description{

        font-size:1rem;

    }

    .privacy__card,

    .privacy__intro,

    .privacy__section,

    .privacy__closing{

        padding:22px;

    }

    .privacy__section h2{

        font-size:1.35rem;

    }

    .privacy__section p,

    .privacy__intro p,

    .privacy__contact-list li{

        font-size:.95rem;

    }

    .privacy__closing h2{

        font-size:1.75rem;

    }

}





/* =====================================================
   LARGE DESKTOPS
===================================================== */

@media (min-width:1400px){

    .privacy__container{

        width:min(1320px,90%);

    }

}





/* =====================================================
   PRINT STYLES
===================================================== */

@media print{

    .privacy__sidebar{

        display:none;

    }

    .privacy{

        padding:0;

    }

    .privacy__container{

        display:block;

        width:100%;

    }

    .privacy__section,

    .privacy__intro,

    .privacy__closing{

        box-shadow:none;

        border:1px solid #ddd;

        page-break-inside:avoid;

    }

    .privacy-hero{

        padding:30px 0;

    }

}








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


.serviceintrohero {

    padding: 110px 0 90px;

    background: var(--bg-tertiary);

}



.serviceintrohero__container {

    width: min(
        calc(100% - 48px),
        var(--container-width)
    );

    margin-inline: auto;

}



.serviceintrohero__content {

    max-width: 850px;

    margin-inline: auto;

    text-align: center;

}



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


.serviceintrohero__eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-sm);


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


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

    font-size: var(--font-size-sm);

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

    letter-spacing: .15em;

    text-transform: uppercase;


    color: var(--text-primary);

}



.serviceintrohero__eyebrow img {

    width: 14px;

    height: 14px;

}





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


.serviceintrohero__title {


    margin: 0 0 var(--space-lg);


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


    font-size: var(--font-size-display);


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


    text-transform: uppercase;


    color: var(--text-primary);

}



.serviceintrohero__title span {

    display: block;

    color: var(--color-primary);

}





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


.serviceintrohero__description {


    max-width: 720px;

    margin-inline: auto;


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


    font-size: var(--font-size-lg);


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


    color: var(--text-secondary);

}





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


@media(max-width:768px){


    .serviceintrohero {

        padding: 80px 0 70px;

    }


    .serviceintrohero__title {

        font-size: 2.5rem;

    }


    .serviceintrohero__eyebrow {

        flex-wrap: wrap;

    }


}


/* =====================================================
   SERVICE GUIDE
   Used by all individual service sections
====================================================== */

.serviceguide {

    padding: var(--space-xxl) 0;

    background: var(--bg-tertiary);

    overflow: hidden;

}


.serviceguide__container {

    width: min(calc(100% - 48px), 1200px);

    margin-inline: auto;

}


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

.serviceguide__header {

    max-width: 900px;

    margin: 0 auto var(--space-xxl);

    text-align: center;

}


.serviceguide__eyebrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-sm);

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

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

    font-size: var(--font-size-sm);

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

    letter-spacing: .15em;

    text-transform: uppercase;

    color: var(--text-primary);

}


.serviceguide__eyebrow img {

    width: 14px;

    height: 14px;

}


.serviceguide__title {

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

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

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

    line-height: 1.1;

    text-transform: uppercase;

    color: var(--text-primary);

}


.serviceguide__intro {

    max-width: 760px;

    margin-inline: auto;

    font-size: var(--font-size-lg);

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

    color: var(--text-secondary);

}


/* =====================================================
   IMAGE + CONTENT
====================================================== */

.serviceguide__layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

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

    align-items: center;

    margin-bottom: var(--space-xxl);

}


.serviceguide--reverse .serviceguide__layout {

    direction: rtl;

}


.serviceguide--reverse .serviceguide__content,

.serviceguide--reverse .serviceguide__image {

    direction: ltr;

}


.serviceguide__image {

    position: relative;

}


.serviceguide__image img {

    width: 100%;

    aspect-ratio: 4/5;

    object-fit: cover;

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

    display: block;

}


/* =====================================================
   SUB SERVICES
====================================================== */

.serviceguide__content {

    display: flex;

    flex-direction: column;

    gap: var(--space-lg);

}


.serviceguide__subservice {

    padding-bottom: var(--space-lg);

    border-bottom: 1px solid rgba(var(--color-secondary-rgb), .12);

}


.serviceguide__subservice:last-child {

    border-bottom: none;

    padding-bottom: 0;

}


.serviceguide__subtitle {

    margin-bottom: .6rem;

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

    font-size: 1.45rem;

    color: var(--text-primary);

    text-transform: uppercase;

}


.serviceguide__subservice p {

    margin: 0;

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

    color: var(--text-secondary);

}


/* =====================================================
   BENEFITS
====================================================== */

.serviceguide__benefits {

    margin-bottom: var(--space-xxl);

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

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

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

}


.serviceguide__benefits-title {

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

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

    font-size: 2rem;

    color: var(--text-primary);

    text-align: center;

    text-transform: uppercase;

}


.serviceguide__benefits ul {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));

    gap: var(--space-md);

    list-style: none;

    padding: 0;

    margin: 0;

}


.serviceguide__benefits li {

    position: relative;

    padding-left: 28px;

    color: var(--text-secondary);

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

}


.serviceguide__benefits li::before {

    content: "";

    position: absolute;

    left: 0;

    top: .45rem;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: var(--color-primary);

}


/* =====================================================
   DID YOU KNOW
====================================================== */

.serviceguide__fact {

    max-width: 950px;

    margin-inline: auto;

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

    border-left: 6px solid var(--color-primary);

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

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

}


.serviceguide__fact h3 {

    margin-bottom: var(--space-md);

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

    font-size: 2rem;

    text-transform: uppercase;

    color: var(--text-primary);

}


.serviceguide__fact p {

    margin: 0;

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

    color: var(--text-secondary);

}


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

@media (max-width: 900px) {

    .serviceguide__layout {

        grid-template-columns: 1fr;

    }

    .serviceguide--reverse .serviceguide__layout {

        direction: ltr;

    }

    .serviceguide__image img {

        aspect-ratio: 16/10;

    }

}


@media (max-width: 600px) {

    .serviceguide {

        padding: var(--space-xl) 0;

    }

    .serviceguide__title {

        font-size: 2.2rem;

    }

    .serviceguide__subtitle {

        font-size: 1.25rem;

    }

    .serviceguide__benefits ul {

        grid-template-columns: 1fr;

    }

}