:root {
  --brand-accent: #ff7701;
  --brand-primary: #12a7cb;
  --main-side-padding: 138px;
}

/* =========================
   Be Vietnam Pro (local) — ALL weights + italic
   Path: static/css/styles.css  -> ../fonts/...
   ========================= */

/* 100 Thin */
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* 200 ExtraLight */
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* 300 Light */
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* 400 Regular */
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* 500 Medium */
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* 600 SemiBold */
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* 700 Bold */
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* 800 ExtraBold */
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* 900 Black */
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("../fonts/BeVietnamPro-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}


/* =========================
   DM Serif Display (local)
   Folder: static/fonts/DM_Serif_Display/...
   ========================= */
@font-face {
  font-family: "DM Serif Display";
  src: url("../fonts/DM_Serif_Display/DMSerifDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("../fonts/DM_Serif_Display/DMSerifDisplay-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


  
  /* =========================
     styles
    ========================= */

  /* prevents the browser from faking weights/styles if it can't find a face */
  html { font-synthesis: none; }

  body {
    margin: 10px;
    font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: rgb(245,245,245);
  }

  .bg-blue {
    background: rgb(197,244,255);
  }
  
  .bg-purple {
    background: rgb(206,186,255);
  }

  .bg-green {
    background: rgb(177,206,181);
  }

  .bg-orange {
    background: rgba(255, 211, 179, 1);
  }

  .hero {
    background-image: url("/static/img/Rectangle-49-scaled.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .logo img {
    height: 200px;
    max-width: 756px;
  }
  
  .btn-primary {
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    border-radius: 44px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    padding: 13px 20px;
    border: none;
    margin: 8px;
    font-family: inherit;
  }
  
  .heading-title {
    font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #FFFFFF;
    font-family: inherit;
  }
  
  .heading-title-xl {
    font-size: 65px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1;
    font-family: "DM Serif Display", sans-serif;
  }

  .heading-title-md {
    font-size: 48px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1;
    font-family: "DM Serif Display", sans-serif;
  }

  .heading-title-md-black {
    font-size: 48px;
    font-weight: 400;
    color: black;
    line-height: 1;
    font-family: "DM Serif Display", sans-serif;
  }

  .service-area-subtitle {
    text-align: center;
  }

  .service-area-title {
    max-width: 700px;
    text-align: center;
  }



  .nav-container {
    display: flex;
    justify-content: right;
  }

  .nav-container button{
    transition: color 450ms cubic-bezier(.2,.8,.2,1);
  }  

  .nav-container button:hover {
    color: var(--brand-accent);
  }

  .nav-dropdown{
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  
  .nav-dropbtn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  
  .nav-caret{
    width: 20px;
    height: 20px;
    display: inline-block;
    position: relative;
    top: 1px;
  }
  
  .nav-menu{
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 999;
  
    padding: 10px;
  
    /* fade behavior */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0ms linear 180ms;
  }
  
  .nav-dropdown.is-open .nav-menu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0ms;
  }
  
  
  /* the item style you requested */
  .nav-menu-item{
    display: inline-block;
    padding: 14px 18px;
  
    text-align: center;
  
    border-radius: 999px;
    border: none;
  
    background: rgba(236, 234, 234, 0.4);
    color: white;
  
    text-decoration: none;
    white-space: nowrap;
  
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  .nav-menu-item:hover{
    background: rgba(236, 234, 234, 0.55);
  }
  

  .contact-form .field,
  .contact-form .form-field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px;
    padding: 8px;
  }

  .contact-form .field select {
    color: gray;
  }
  
  .contact-form label {
    display: block;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #111;
    margin: 0;
  }
  
  /* Base control styling */
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    width: 100%;
    background: rgba(248, 248, 248, 1);
    border: 0;
    padding: 14px 16px;
    font-size: 16px;
    line-height: 1.2;
    color: #030202;
    outline: none;
    box-sizing: border-box;
  
    /* feels “largish” */
    min-height: 52px;
  }
  
  /* textarea: let it be taller */
  .contact-form textarea {
    min-height: 140px;
    resize: vertical;
  }
  
  /* Placeholder color */
  .contact-form input::placeholder,
  .contact-form textarea::placeholder {
    color: rgb(161, 156, 156);
    opacity: 1;
    font-size: 15px;
    font-weight: 100;
  }

  /* Optional: make select arrow look cleaner in some browsers */
  .contact-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

  }
  
  .contact-form .contact-submit {
    background: var(--brand-primary);
    color: #fff;
    border: 0;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    min-height: 52px;
    width: 100%;
  }
  
  .contact-form .contact-submit:hover {
    background: var(--brand-accent);
  }
  
  .ripple-row{
    display: flex;
    align-items: center; /* vertical align */
    gap: 12px;           /* space between button + text */
  }
  
  /* keep the h2 from adding weird top/bottom spacing */
  .ripple-row .heading-title{
    margin: 0;
    line-height: 1;
  }

  .heading-subtitle {
    font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 100;
    line-height: 1.2;
  }

  .heading-subtitle-black {
    font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    color: black;
    font-size: 24px;
    font-weight: 100;
    line-height: 1.2;
  }
  

.ripple-core {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
    position: relative;
    z-index: 5;
}

.ripple-arrow {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

/* make sure rings can show outside the 40x40 area */
.ripple-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  isolation: isolate;
  overflow: visible; /* important */
}

/* base ring */
.ripple-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0.75);
  z-index: 1;
  pointer-events: none;

  border: 2px solid rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.06);

  opacity: 0;
  animation: rippleOut 2.4s ease-out infinite;
}

/* stagger the rings so they ripple one after another */
.ripple-ring.r1 { animation-delay: 0s; }
.ripple-ring.r2 { animation-delay: 0.8s; }
.ripple-ring.r3 { animation-delay: 1.6s; }

/* the actual ripple motion */
@keyframes rippleOut {
  0%   { transform: translate(-50%, -50%) scale(0.75); opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: 0.25; }
  100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
}

.title-wrapper {
  line-height: 0;
}

.title-wrapper-centered {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.title-wrapper-centered-services {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.title-wrapper-centered h2 {
  margin: 0;
}

.title-wrapper-centered p {
  margin: 0;
  max-width: 800px;
  font-size: 20px;
  text-align: center;
}


.title-wrapper-centered-services {
  margin: 0;
}

.title-wrapper-centered-services p {
  margin: 0;
  max-width: 1200px;
  font-size: 20px;
  text-align: center;
}


.info-section p {
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: 0;
  max-width: 600px;
  color: #6C6C6C;
}

.info-section h2 {
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  max-width: 600px;
  font-family: "DM Serif Display", sans-serif;
}

.title-row{
  margin: 0;
  line-height: 1.1;
}

.title-row .rating{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-left: 10px;
  white-space: nowrap; /* keep star+(5.0) together */
}

.title-row{
  margin: 0;
  line-height: 1;           /* tighter baseline math */
}

.rating{
  display: inline-flex;
  align-items: baseline;     /* key */
  gap: 10px;
  margin-left: 12px;
  white-space: nowrap;
}

/* your sizing */
.star-rating{
  width: 32px;
  height: 32px;
  display: inline-block;
  object-fit: contain;

  /* baseline fix: images sit on baseline weirdly */
  position: relative;
  top: 2px;                  /* tweak 1–4px until perfect */
}

.rating-text{
  font-size: 32px;
  font-weight: 100;
  font-style: italic;
  line-height: 1;
}

/* =========================
   Reviews Gallery
   ========================= */

   .reviews-gallery{
    --gap: 18px;
    --arrow: 48px;
    --arrow-bg: rgba(0,0,0,0.14);     /* translucent gray circle */
    --arrow-bg-hover: rgba(0,0,0,0.20);
    --arrow-fg: #000;
    --radius: 18px;
    padding-left: var(--main-side-padding);
    padding-right: var(--main-side-padding);
    padding-bottom: 100px;
  
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 14px;
    align-items: center;
  
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .reviews-gallery{
    position: relative; /* REQUIRED for absolutely-positioned arrows */
  }
  
  .reviews-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
  
    width: var(--arrow);
    height: var(--arrow);
    border-radius: 999px;
    border: 0;
    background: var(--arrow-bg);
    color: var(--arrow-fg);
  
    display: grid;
    place-items: center;
    cursor: pointer;
  
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
    transition: background 250ms ease, transform 250ms ease;
  }
  
  .reviews-arrow:hover{
    background: var(--arrow-bg-hover);
    transform: translateY(-50%) translateY(-1px);
  }
  
  /* put them OVER the cards, not in the outer padding area */
  .reviews-arrow.is-left  { left:  calc(var(--main-side-padding) + 10px); }
  .reviews-arrow.is-right { right: calc(var(--main-side-padding) + 10px); }
  
  .reviews-arrow svg{ width: 22px; height: 22px; }
  
  .reviews-viewport{
    overflow: hidden;    /* key: prevents page stretching */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .reviews-track{
    display: flex;
    gap: var(--gap);
    will-change: transform;
    transform: translate3d(0,0,0);
  }
  
  .review-card{
    /* 3-up layout: 3 cards visible inside viewport */
    flex: 0 0 calc((100% - (var(--gap) * 2)) / 3);
    box-sizing: border-box;
  
    background: #fff;
    padding: 32px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.10);
  
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 14px;
    max-width: 500px;
  }
  
  .review-head{
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    align-items: center;
  }
  
  .review-avatar{
    width: 64px;
    height: 64px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 24px;
  }
  
  .review-name{
    font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.1;
    padding-left: 8px;
  }
  
  .review-stars{
    font-size: 18px;
    letter-spacing: 2px;
    opacity: 0.8;
    color: var(--brand-accent);
    padding-left: 8px;
  }
  
  .review-quote{
    margin: 0;
    font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: rgba(134, 134, 139, 1);
    ;
  }
  
  .review-media{
    margin: 0;
    overflow: hidden;
  }
  
  .review-media img{
    width: 100%;
    height: 220px;
    display: block;
    object-fit: cover;
  }
  
  .reviews-dots{
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 2px;
  }
  
  .reviews-dots {padding-top: 36px;}
  .reviews-dots .dot{
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 0;
    background: rgb(214,238,245); /* default */
    cursor: pointer;
    transition: transform 200ms ease, background 200ms ease;
  }
  
  .reviews-dots .dot[aria-current="true"]{
    background: rgb(18,167,203);  /* active */
  }
  
  
  /* responsive */
  @media (max-width: 900px){
    .review-card{ flex-basis: calc((100% - var(--gap)) / 2); } /* 2-up */
  }
  @media (max-width: 640px){
    .reviews-gallery{ grid-template-columns: 44px 1fr 44px; }
    .review-card{ flex-basis: 100%; } /* 1-up */
  }
  

  /* ===== Services cards ===== */

.services-grid{
  --card-radius: 18px;
  --card-pad: 16px;           /* this is the equal top/left/right inset you asked for */
  --gap: 22px;

  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);

  /* match your overall page padding system */
  padding-left: var(--main-side-padding);
  padding-right: var(--main-side-padding);
  box-sizing: border-box;
}

.service-card{
  background: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
  overflow: hidden;

  display: grid;
  grid-template-rows: auto 1fr; /* image then content area */

  transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms ease;
}

.service-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.14);
}

/* image inset: equal top/left/right margins */
.service-media{
  padding: var(--card-pad) var(--card-pad) 0 var(--card-pad);
  background: transparent;
}

.service-media img{
  width: 100%;
  height: 300px;
  display: block;
  object-fit: cover;
}

/* title area below picture with padding to “carry” the card height */
.service-title{
  margin: 0;
  padding: 18px var(--card-pad) 28px var(--card-pad);
  text-align: center;
  font-family: "DM Serif Display", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  color: #111;
}

/* responsive */
@media (max-width: 980px){
  .services-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .services-grid{ grid-template-columns: 1fr; }
}

.service-area-buttons {
  display: flex;
  flex-direction: row;
  gap: 18px;
  align-items: center;
}

.service-area-btn {
  background: #F3F3F3;
  font-family: "DM Serif Display", Sans-serif;
  font-weight: 500;
  font-size: 18px;
  padding: 16px;
  min-width: 160px;
  border-radius: 999px;
  border: none;
  background: rgb(236, 234, 234);
  text-shadow: 0px 0px 10px rgba(0,0,0,0.3)
}

.service-areas-map{
  width: 1200px;
  height: 400px;
  margin-top: 24px;
  overflow: hidden;
}

.nav-active {
  color: var(--brand-accent);
}

/* make btn-primary styling apply cleanly to BOTH <a> and <button> */
.nav-container .btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* anchors */
  cursor: pointer;
  transition: color 450ms cubic-bezier(.2,.8,.2,1);
}

/* hover for BOTH anchor + button */
.nav-container .btn-primary:hover{
  color: var(--brand-accent);
}

/* optional: active state */
.nav-container .nav-active{
  color: var(--brand-accent);
}


html, body {
  overflow-x: hidden;
}

/* 2) Make the service area buttons wrap on mobile */
.service-area-buttons{
  flex-wrap: wrap;
  justify-content: center;
}

/* Optional: let buttons shrink nicely on small screens */
@media (max-width: 900px){
  .service-area-btn{
    min-width: 140px;
    flex: 1 1 140px;
  }
}

/* 3) Make the map responsive */
.service-areas-map{
  width: 100%;
  max-width: 1200px;
}

@media (max-width: 900px){
  .service-areas-map{
    max-width: 100%;
    height: 320px; /* pick a mobile-friendly height */
  }
  .review-card{
    flex: 0 0 100%;     /* one card = full viewport width */
    max-width: none;    /* CRITICAL: remove the 500px cap */
    width: 100%;
  }
  .reviews-gallery{
    grid-template-columns: 1fr; /* don’t squeeze viewport into the middle column */
  }
}

@media (max-width: 640px){
  .reviews-gallery{
    grid-template-columns: 1fr; /* don’t squeeze viewport into the middle column */
  }
}

.hp-wrap{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}