/* =========================================================
Devaign — styles.css (LIGHT THEME)
- Mobile-first
- Clean spacing (no clutter)
- Near-black (no pure #000)
- Teal accent
ALL HEADINGS (H1,H2,H4,H4) SHOULD USE THE BLACK GRADIENT AS COLOR 
AND THE SPAN SHOULD USE TEAL GRADIENT

========================================================= */

/**********************************************************************************************************************************
GLOBAL STYLES STARTS  ||  GLOBAL STYLES STARTS  ||  GLOBAL STYLES STARTS  ||  GLOBAL STYLES STARTS  ||  GLOBAL STYLES STARTS  
***********************************************************************************************************************************/

/* =================================================================================================================================
1.THEME ROOT VARIABLE  STYLES STARTS HERE  ||  1. THEME ROOT VARIABLE STYLES STARTS HERE  ||  1. THEME ROOT VARIABLE STYLES STARTS HERE   ||  1. THEME ROOT STYLES STARTS HERE
================================================================================================================================= */
:root{

  /* ------------------------------------------
     COLOR SYSTEM
  ------------------------------------------ */
  --bg:#f5f5f7;
  --bg2:#ededf0;
  --panel:#ffffff;

  --ink:#121415;
  --dark2:#383c3e;

  --muted: rgba(56,60,62,.84);
  --muted2: rgba(56,60,62,.68);

  --line: rgba(18,20,21,.12);
  --line2: rgba(18,20,21,.08);

  --teal:#0497b2;
  --tealWash: rgba(4,151,178,.10);
  --bullet:#0497b2;

  /* ------------------------------------------
     GRADIENTS
  ------------------------------------------ */
  --bg-a:linear-gradient(90deg, #ffffff 0%, #e9e9ea 100%);
  --bg-b:linear-gradient(90deg, #cecece 0%, #e9e9ea 100%);
  --bg-c:#b8b8b8;

  --grad-black: linear-gradient(90deg, #3b3b3b 0%, #575757 100%);
  --grad-teal:  linear-gradient(90deg, #0d8aa6 0%, #10b4c7 100%);

  /* ------------------------------------------
     SHADOWS
  ------------------------------------------ */
  --shadow: 0 18px 50px rgba(18,20,21,.10);
  --shadow2: 0 28px 70px rgba(18,20,21,.11);

  /* ------------------------------------------
     LAYOUT
  ------------------------------------------ */
  --max: 1160px;
  --navH: 72px;
  --gutter: 28px;

  /* ------------------------------------------
     RADIUS
  ------------------------------------------ */
  --r-xl: 30px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  /* ------------------------------------------
     TRANSITIONS
  ------------------------------------------ */
  --ease: cubic-bezier(.2,.9,.2,1);
}

/* =================================================================================================================================
1.THEME ROOT VARIABLE STYLES ENDS HERE  ||  1. THEME ROOT VARIABLE STYLES ENDS HERE  ||  1. THEME ROOT VARIABLE STYLES ENDS HERE  
================================================================================================================================= */


/* ======================================================================================================================
RESET STYLES STARTS HERE  ||  RESET STYLES STARTS HERE  ||  RESET STYLES STARTS HERE  ||  RESET STYLES STARTS HERE ||  RESET STYLES STARTS HERE
======================================================================================================================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-optical-sizing: auto;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button, input, select, textarea{ font: inherit; color: inherit; }
:focus-visible{ outline: 2px solid rgba(4,151,178,.55); outline-offset: 3px; }
body.no-scroll{ overflow: hidden; }

/* page transition */
body.page-enter{ opacity: 0; }
body.page-ready{ opacity: 1; transition: opacity .22s var(--ease); }
body.page-exit{ opacity: 0; transition: opacity .18s var(--ease); }
/* ======================================================================================================================
RESET STYLES ENDS HERE  ||  RESET STYLES ENDS HERE  ||  RESET STYLES ENDS HERE  ||  RESET STYLES ENDS HERE ||  RESET STYLES 
======================================================================================================================= */


/* ======================================================================================================================
LAYOUT STYLES STARTS HERE  ||  LAYOUT STYLES STARTS HERE  ||  LAYOUT STYLES STARTS HERE  ||  LAYOUT STYLES STARTS HERE   
======================================================================================================================= */
.container{
  width: min(var(--max), calc(100% - 28px)); /* tighter side padding */
  margin-inline: auto;
}
.wrap{
  width: min(1120px, calc(100% - 28px));
  margin-inline: auto;
}

.section{
  padding: clamp(24px, 5.5vw, 46px) 0;
}
.fullvh{
  min-height: 100vh;
  display: grid;
  align-content: start;
}

.divider{
  height:1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(18,20,21,.12), transparent);
  opacity: .9;
}

.center{ text-align:center; }
/* ======================================================================================================================
LAYOUT STYLES ENDS HERE  ||  LAYOUT STYLES ENDS HERE  ||  LAYOUT STYLES ENDS HERE  ||  LAYOUT STYLES ENDS HERE   || LAYOUT 
======================================================================================================================= */


/* ======================================================================================================================
GLOBAL MOBILE GUTTERS STARTS HERE  ||  GLOBAL MOBILE GUTTERS STARTS HERE  ||  GLOBAL MOBILE GUTTERS STARTS HERE
======================================================================================================================= */
@media (max-width: 980px){
  :root{ --gutter: 22px; }
}

@media (max-width: 640px){
  :root{ --gutter: 18px; }
}

/* Use the gutter variable everywhere */
.container,
.wrap{
  width: min(var(--max), calc(100% - var(--gutter)));
  margin-inline: auto;
}
/* ======================================================================================================================
GLOBAL MOBILE GUTTERS ENDS HERE  ||  GLOBAL MOBILE GUTTERS ENDS HERE  ||  GLOBAL MOBILE GUTTERS ENDS HERE
======================================================================================================================= */


/* ======================================================================================================================
CARD SPACING NORMALISATION STARTS HERE  ||  CARD SPACING NORMALISATION STARTS HERE  ||  CARD SPACING NORMALISATION
======================================================================================================================= */
.card,
.panel,
.service-card,
.process-card,
.feature-card{
  border-radius: var(--r-lg);
}

@media (max-width: 640px){
  .card,
  .panel,
  .service-card,
  .process-card,
  .feature-card{
    padding: 14px !important;
    border-radius: 18px;
  }
}
/* ======================================================================================================================
CARD SPACING NORMALISATION ENDS HERE  ||  CARD SPACING NORMALISATION ENDS HERE  ||  CARD SPACING NORMALISATION
======================================================================================================================= */


/* ======================================================================================================================
MOBILE GRID SPACING STARTS HERE  ||  MOBILE GRID SPACING STARTS HERE  ||  MOBILE GRID SPACING
======================================================================================================================= */
.grid,
.cards,
.services-grid,
.process-grid{
  gap: 14px;
}

@media (max-width: 640px){
  .grid,
  .cards,
  .services-grid,
  .process-grid{
    gap: 12px;
  }
}
/* ======================================================================================================================
MOBILE GRID SPACING ENDS HERE  ||  MOBILE GRID SPACING ENDS HERE  ||  MOBILE GRID SPACING
======================================================================================================================= */



/* ======================================================================================================================
MOBILE SECTION SPACING STARTS HERE  ||  MOBILE SECTION SPACING STARTS HERE  ||  MOBILE SECTION SPACING
======================================================================================================================= */
@media (max-width: 640px){
  .section{
    padding: 28px 0;
  }
}
/* ======================================================================================================================
MOBILE SECTION SPACING ENDS HERE  ||  MOBILE SECTION SPACING ENDS HERE  ||  MOBILE SECTION SPACING
======================================================================================================================= */


/* ======================================================================================================================
MOBILE HERO BACKGROUND CONTROL STARTS HERE  ||  MOBILE HERO BACKGROUND CONTROL STARTS HERE  ||  MOBILE HERO BACKGROUND CONTROL
======================================================================================================================= */
@media (max-width: 640px){
  .hero{
    background-position: center top;
  }
}
/* ======================================================================================================================
MOBILE HERO BACKGROUND CONTROL ENDS HERE  ||  MOBILE HERO BACKGROUND CONTROL ENDS HERE  ||  MOBILE HERO BACKGROUND CONTROL
======================================================================================================================= */


/* ======================================================================================================================
TYPOGRAPHY STYLES STARTS HERE  ||  TYPOGRAPHY STYLES STARTS HERE  ||  TYPOGRAPHY STYLES STARTS HERE  ||  TYPOGRAPHY STYLES 
======================================================================================================================= */
/*CODE FOR GLOBAL FONT FAMILY (HEADINGS VS BODY)  || CODE FOR GLOBAL FONT FAMILY (HEADINGS VS BODY)*/
h1, h2, h3, h4, h5, h6,
.title{
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-optical-sizing: auto;
  margin: 0;
}
h1{
  font-size: clamp(38px, 7.5vw, 72px);
  line-height: 1.3;
  letter-spacing: -0.03em;
  background: var(--grad-black);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color: transparent;
}
h2{
  font-size: clamp(30px, 4.8vw, 44px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  background: var(--grad-black);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color: transparent;
}
h3{
  margin:0;
  font-size: 16px;
  letter-spacing: -0.01em;
  background: var(--grad-black);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color: transparent;
}

h4{
  margin:0;
  font-size: 16px;
  letter-spacing: -0.01em;
  background: var(--grad-black);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color: transparent;
}
h5{
  font-size: 18px;
  letter-spacing: -0.015em;
  color: #f5f5f7;
  display: inline-block; /* prevents clipping edge */
  line-height: 1.05;     /* reduces glyph cutoff */
}

p{ margin: 12px 0; color: var(--muted); }
.lead{
  font-size: clamp(18px, 1.1vw, 18px);
  color: rgba(56,60,62,.82);
  max-width: 860px;
  margin-inline: auto;
}
.small{ font-size: 13px; color: var(--muted2); }
.teal{ 
   background: var(--grad-teal);
  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;

  display: inline-block; /* prevents clipping edge */
  line-height: 1.05;     /* reduces glyph cutoff */
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
* { -webkit-text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.title{ font-family: "Geist", sans-serif; font-weight: 800; }

/* ======================================================================================================================
TYPOGRAPHY STYLES ENDS HERE  ||  TYPOGRAPHY STYLES ENDS HERE  ||  TYPOGRAPHY STYLES ENDS HERE  ||  TYPOGRAPHY STYLES ENDS  
======================================================================================================================= */


/* ======================================================================================================================
BUTTON STYLES STARTS HERE  ||  BUTTON STYLES STARTS HERE  ||  BUTTON STYLES STARTS HERE  ||  BUTTON STYLES STARTS HERE   
======================================================================================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.50);
  color: rgba(18,20,21,.92);
  cursor:pointer;
  transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
  user-select:none;
  white-space: nowrap;
  height: 44px;
  font-weight: 500;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.78);
  border-color: rgba(4,151,178,.25);
  box-shadow: 0 14px 34px rgba(18,20,21,.10);
}
.btn:active{ transform: translateY(0); }

.btn.primary{
  background: linear-gradient(180deg, rgba(4,151,178,.95), rgba(4,151,178,.78));
  border-color: rgba(4,151,178,.55);
  color: #e7e9eb;
}
.btn.primary:hover{
  background: linear-gradient(180deg, rgba(4,151,178,1), rgba(4,151,178,.82));
}

.btn.ghost{
  background: rgba(255,255,255,.40);
  border-color: rgba(18,20,21,.14);
}

.arrow-right::after{ content:"→"; opacity:.9; }
.arrow-out::after{ content:"↗"; opacity:.9; }
.arrow-down::after{ content:"↓"; opacity:.9; }

/* force equal button sizes for nav */
.btn-equal{
  min-width: 156px;
}
/* ======================================================================================================================
BUTTON STYLES ENDS HERE  ||  BUTTON STYLES ENDS HERE  ||  BUTTON STYLES ENDS HERE  ||  BUTTON STYLES ENDS HERE    
======================================================================================================================= */


/* ======================================================================================================================
LINKS (NON-BUTTON CTAs) STYLES STARTS HERE  ||  LINKS (NON-BUTTON CTAs) STYLES STARTS HERE  ||  LINKS (NON-BUTTON CTAs) 
======================================================================================================================= */
@keyframes nudgeLoop { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-2px);} }

.cta-link{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: rgba(4,151,178,.70);
  text-decoration: none;
  font-weight: 600;
  transition: transform .18s var(--ease), color .18s var(--ease);
}
.cta-link .arrow{ transition: transform .18s var(--ease); }
.cta-link:hover{ color: rgba(4,151,178,1); transform: translateY(-1px); }
.cta-link:hover .arrow{ transform: translateX(3px); }
.cta-link.attn{ animation: nudgeLoop 2.8s ease-in-out infinite; }
.cta-link.attn:hover{ animation:none; }
/* ======================================================================================================================
LINKS (NON-BUTTON CTAs) STYLES ENDS HERE  ||  LINKS (NON-BUTTON CTAs) STYLES ENDS HERE  ||  LINKS (NON-BUTTON CTAs) ENDS
======================================================================================================================= */


/* ======================================================================================================================
NAVBAR STYLES STARTS HERE  ||  NAVBAR STYLES STARTS HERE  ||  NAVBAR STYLES STARTS HERE  ||  NAVBAR STYLES STARTS HERE  || NAVBAR STYLES
======================================================================================================================= */
.nav{
  position: sticky;
  top: 0;
  z-index: 1500;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(18,20,21,.10);
  overflow: visible;
}
.nav-inner{
  height: var(--navH);
  display:flex;
  align-items:center;
  gap: 18px;
}
.brand img{ height: 29px; display:block; }

.nav-links{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
}
.nav-actions{
  display:flex;
  align-items:center;
  gap: 12px;
}

.nav-link{
  color: rgba(18,20,21,.72);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color .18s var(--ease), transform .18s var(--ease), background .18s var(--ease);
  padding: 10px 10px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.nav-link:hover{
  color: rgba(4,151,178,.95);
  transform: translateY(-1px);
  background: rgba(255,255,255,.55);
}
.nav-link.is-active{
  color: rgba(18,20,21,.92);
  background: rgba(4,151,178,.06);
  border: 1px solid rgba(4,151,178,.20);
}

.nav-dd{ position: relative; overflow: visible; }
.nav-dd-btn{ background: transparent; border: 0; cursor: pointer; }
.nav-caret{ opacity: .70; transition: transform .18s var(--ease), opacity .18s var(--ease); }
.nav-dd:hover .nav-caret{ transform: rotate(180deg); opacity: .95; }
.nav-dd:hover .nav-dd-panel{ display:block; }

.nav-dd.open .nav-caret{ transform: rotate(180deg); opacity: .95; }
.nav-dd.open .nav-dd-panel{ display:block; }

.nav-dd-panel{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(320px, 86vw);
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(18,20,21,.12);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 22px 70px rgba(18,20,21,.12);
  display: none;
}
.dd-item{
  display:block;
  padding: 12px 12px;
  border-radius: 12px;
  color: rgba(18,20,21,.82);
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.dd-item:hover{
  background: rgba(4,151,178,.08);
  color: rgba(4,151,178,.95);
  transform: translateY(-1px);
}

/* Burger */
.burger{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.burger:hover{ background: rgba(255,255,255,.78); }
.lines{ display:flex; flex-direction: column; gap: 5px; }
.lines span{ width: 18px; height: 2px; background: rgba(18,20,21,.85); border-radius: 99px; }

@media (max-width: 980px){
  .nav-links{ display:none; }
  .burger{ display:inline-flex; }
}
/* ======================================================================================================================
NAVBAR STYLES ENDS HERE  ||  NAVBAR STYLES ENDS HERE  ||  NAVBAR STYLES ENDS HERE  ||  NAVBAR STYLES ENDS  ||  NAVBAR STYLES
======================================================================================================================= */

/* =========================
MOBILE DRAWER
========================= */
.mobile-overlay{
  position: fixed; inset: 0;
  background: rgba(18,20,21,.40);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease), visibility .2s var(--ease);
  z-index: 1600;
}
.mobile-drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 92vw);
  background: rgba(245,245,247,.96);
  border-left: 1px solid rgba(18,20,21,.10);
  box-shadow: 0 22px 70px rgba(18,20,21,.18);
  transform: translateX(102%);
  transition: transform .22s var(--ease);
  z-index: 1700;
  padding: 14px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.mobile-overlay.open{ opacity: 1; visibility: visible; }
.mobile-drawer.open{ transform: translateX(0); }

.drawer-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(18,20,21,.10);
}
.drawer-links{
  display:flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
  overflow: auto;
}
.drawer-links a{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  opacity: .92;
  color: rgba(18,20,21,.78);
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), color .18s var(--ease);
}
.drawer-links a:hover{
  background: rgba(4,151,178,.06);
  border-color: rgba(4,151,178,.16);
  transform: translateY(-1px);
  color: rgba(18,20,21,.92);
}
.drawer-links a.active{
  opacity: 1;
  border-color: rgba(4,151,178,.35);
  background: rgba(4,151,178,.08);
}
.drawer-cta{
  margin-top: auto;
  display:flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(18,20,21,.10);
}

.footer-grid-3{
  grid-template-columns: 1.9fr 1.2fr 1.2fr; /* 3 columns */
}

.footer-icons{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  justify-content: flex-start;
}

/* Desktop: collapse buttons behave like normal headings */
@media (min-width: 981px){
  .collapse-title{
    pointer-events: none;
    padding: 0;
    margin: 0 0 10px;
  }
  .collapse-caret{ display:none; }
  .collapse-body{ display:flex !important; }
}

@media (max-width: 980px){

  .footer-grid-3{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* collapse on mobile */
  .collapse-title{
    width: 100%;
    display:flex;
    justify-content: space-between;
    align-items:center;
    background: transparent;
    border: 0;
    color: rgba(245,245,247,.92);
    font-size: 14px;
    font-weight: 700;
    padding: 10px 0;
    cursor: pointer;
    text-align:left;
  }

  .collapse-body{
    display:none;
    padding-bottom: 8px;
  }

  .footer-col.is-open .collapse-body{
    display:flex;
  }

  .footer-col.is-open .collapse-caret{
    transform: rotate(180deg);
  }

  /* NO ARROWS ON MOBILE FOOTER */
  .footer-links a,
  .footer-contact a{
    padding-left: 0 !important;
  }
  .footer-links a::before,
  .footer-contact a::before{
    content: none !important;
    display:none !important;
  }
}


/*CODE FOR NAV RIGHT ALIGNMENT  || CODE FOR NAV RIGHT ALIGNMENT*/
.nav-actions{ margin-left: auto; }

/* Burger: no background, no border */
.burger{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* lines */
.lines{ display:flex; flex-direction: column; gap: 5px; }
.lines span{
  width: 18px;
  height: 2px;
  background: rgba(18,20,21,.85);
  border-radius: 99px;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}

/* burger -> X */
.burger.is-open .lines span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger.is-open .lines span:nth-child(2){ opacity: 0; }
.burger.is-open .lines span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px){
  .nav-links{ display:none; }
  .burger{ display:inline-flex; }

  /* hide ALL buttons on mobile navbar */
  .nav-actions .btn{ display:none !important; }

  /* smaller logo on mobile */
  .nav .brand img{ height: 22px; }
}


/* =================================================================================================================================
.FINAL CTA STYLES STARTS HERE  ||  . FINAL CTA STYLES STARTS HERE  ||  . FINAL CTA STYLES STARTS HERE   ||  . FINAL CTA STYLES STARTS HERE
================================================================================================================================= */
/* =========================
CTA STRIP
========================= */
.cta-strip{
  padding: clamp(56px, 6vw, 104px) 0;
  background:
    radial-gradient(900px 520px at 16% 32%, rgba(4,151,178,.10), transparent 64%),
    linear-gradient(180deg, var(--bg2), var(--bg));
}
.cta-inner{
  border: 1px solid rgba(18,20,21,.10);
  background: rgba(255,255,255,.65);
  border-radius: var(--r-xl);
  padding: 28px 22px;
  text-align:center;
  box-shadow: var(--shadow);
}
.cta-actions{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 18px;
  justify-content:center;
}

/* =========================
CTA HEADING GRADIENT
========================= */
.cta-title{
  margin: 0 0 10px;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;

  background: linear-gradient(90deg, #3b3b3b 0%, #575757 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================
CTA META ROW
========================= */
.cta-meta{
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(18,20,21,.08);

  display:flex;
  justify-content:center;
  gap: 160px;
  text-align:center;
}

.cta-meta-item strong{
  display:block;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;

  background: linear-gradient(90deg, #0d8aa6 0%, #10b4c7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cta-meta-item span{
  display:block;
  margin-top: 4px;
  font-size: 13px;
  color: rgba(56,60,62,.75);
}

@media (max-width: 820px){
  .cta-meta{
    flex-direction:column;
    gap: 18px;
  }
}
/* =================================================================================================================================
. FINAL CTA STYLES ENDS HERE  ||  . FINAL CTA STYLES ENDS HERE  ||  . FINAL CTA STYLES ENDS HERE   || . FINAL CTA STYLES ENDS HERE
================================================================================================================================= */


/* =================================================================================================================================
. FOOTER STYLES STARTS HERE  ||  . FOOTER STYLES STARTS HERE  ||  . FOOTER STYLES STARTS HERE   ||  . FOOTER STYLES STARTS HERE
================================================================================================================================= */
/* =========================================================
   FOOTER — FINAL OVERRIDE (paste at END of styles.css)
   Fixes:
   - Background not applying (targets .site-footer)
   - Desktop 3 columns balanced
   - Mobile: single-column stack in your R1–R6 order
   - Collapsible headings with NO white button bg
   - Quicklinks no longer jump above logo
   - Icons stay 1 row; shrink on small screens
   - Removes arrow pseudo-elements (no arrows)
========================================================= */

/* Base footer (your HTML uses .site-footer) */
.site-footer{
  background: rgba(18,20,21,.94);
  color: rgba(245,245,247,.92);
  border-top: 1px solid rgba(245,245,247,.10);
  padding: 64px 0 18px;
}

/* GRID — Desktop: 3 columns (logo wider) */
.site-footer .footer-grid{
  display: grid !important;
  grid-template-columns: 1.9fr 1.1fr 1.1fr !important;
  gap: 28px !important;
  align-items: start !important;
}

/* Brand column sizing */
.site-footer .footer-brand{
  min-width: 0;
}
.site-footer .footer-logo img{
  height: 34px;
  width: auto;
  display: block;
}

/* Footer paragraph */
.site-footer .footer-desc{
  margin: 14px 0 0;
  max-width: 48ch;
  color: rgba(245,245,247,.72);
  line-height: 1.6;
  font-size: 13px;
}

/* Links */
.site-footer .footer-links{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.site-footer .footer-links a{
  color: rgba(245,245,247,.72);
  font-size: 13px;
  text-decoration: none;
  transition: color .18s ease, transform .18s ease, background .18s ease;
  padding: 4px 0;
}
.site-footer .footer-links a:hover{
  color: rgba(4,151,178,.95);
  transform: translateY(-1px);
}

/* Remove ALL footer arrow pseudo-elements (you don’t want them) */
.site-footer .footer-links a::before,
.site-footer .footer-contact a::before{
  content: none !important;
  display: none !important;
}

/* =========================
   COLLAPSE TITLES (no button bg)
========================= */
.site-footer .footer-title{
  margin: 0;
}

.site-footer .collapse-title{
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: rgba(245,245,247,.92) !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

/* No arrows/carets shown */
.site-footer .collapse-caret{ display: none !important; }

/* =========================
   SOCIAL ICONS (no bg by default)
========================= */

/* Desktop icons under logo/text */
.site-footer .footer-social--desktop{
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
  flex-wrap: nowrap;            /* keep 1 row */
}
.site-footer .footer-social--desktop .social-link{
  color: rgba(245,245,247,.92);
  text-decoration: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: transparent !important; /* no bg */
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.site-footer .footer-social--desktop .social-link:hover{
  background: rgba(245,245,247,.08);
  color: rgba(245,245,247,.98);
  transform: translateY(-1px);
}

/* Mobile icons row (R5) */
.site-footer .footer-social--mobile{
  display: none; /* enabled on mobile below */
}

/* Bottom line (ONLY 1 divider above rights) */
.site-footer .footer-bottom{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(245,245,247,.10);
  text-align: center;
}
.site-footer .footer-rights{
  margin: 0;
  font-size: 12px;
  color: rgba(245,245,247,.55);
}

/* =========================================================
   MOBILE — YOUR REQUIRED ORDER + SINGLE COLUMN
   R1 logo, R2 text, R3 quicklinks, R4 services, R5 icons row, R6 rights
========================================================= */
@media (max-width: 980px){

  /* force single column stack */
  .site-footer .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Ensure nothing re-orders above logo */
  .site-footer .footer-grid > *{
    order: initial !important;
  }

  /* Collapsible behavior uses your existing JS (.is-open on .footer-col) */
  .site-footer .footer-col .footer-links{
    display: none;
    margin-top: 10px;
  }
  .site-footer .footer-col.is-open .footer-links{
    display: flex;
  }

  /* IMPORTANT: headings must NOT look like white buttons */
  .site-footer .collapse-title{
    padding: 10px 0 !important;
  }

  /* Mobile icons move OUT of brand column */
  .site-footer .footer-social--desktop{
    display: none !important;
  }

  .site-footer .footer-social--mobile{
    display: flex !important;
    justify-content: space-between; /* keeps one line */
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: nowrap;             /* keep 1 row */
  }

  .site-footer .footer-social--mobile .social-link{
    color: rgba(245,245,247,.92);
    text-decoration: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: transparent !important; /* no bg */
    transition: background .18s ease, transform .18s ease;
    font-size: 14px;
    flex: 0 0 auto;
  }
  .site-footer .footer-social--mobile .social-link:hover{
    background: rgba(245,245,247,.08);
    transform: translateY(-1px);
  }
}

/* Extra-small phones: shrink icons so they don't wrap into blocks */
@media (max-width: 420px){
  .site-footer .footer-social--mobile{
    gap: 8px;
  }
  .site-footer .footer-social--mobile .social-link{
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
}

/* =================================================================================================================================
. FOOTER STYLES ENDS HERE  ||  . FOOTER STYLES ENDS HERE  ||  . FOOTER STYLES ENDS HERE   || . FOOTER STYLES ENDS HERE   ||   . FOOTER STYLES ENDS HERE
================================================================================================================================= */


/* =================================================================================================================================
. BOOK A CALL MODAL STYLES STARTS HERE  ||  . BOOK A CALL MODAL STYLES STARTS HERE  ||  . BOOK A CALL MODAL STYLES STARTS HERE   ||  . BOOK A CALL MODAL STYLES STARTS HERE
================================================================================================================================= */


/* =================================================================================================================================
. BOOK A CALL MODAL STYLES ENDS HERE  ||  . BOOK A CALL MODAL STYLES ENDS HERE  ||  . BOOK A CALL MODAL STYLES ENDS HERE   || . BOOK A CALL MODAL STYLES ENDS HERE   ||   . BOOK A CALL MODAL STYLES ENDS HERE
================================================================================================================================= */


/* =================================================================================================================================
. CONTACT MODAL STYLES STARTS HERE  ||  . CONTACT MODAL STYLES STARTS HERE  ||  . CONTACT MODAL STYLES STARTS HERE   ||  . CONTACT MODAL STYLES STARTS HERE
================================================================================================================================= */
/* =========================
MODALS (keep functional)
========================= */
.modal-overlay{
  position: fixed; inset: 0;
  background: rgba(18,20,21,.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease), visibility .2s var(--ease);
  z-index: 1800;
}
.modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-48%) scale(.98);
  width: min(720px, calc(100% - 28px));
  max-height: min(86vh, 820px);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(18,20,21,.12);
  border-radius: var(--r-xl);
  box-shadow: 0 40px 120px rgba(18,20,21,.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease), visibility .2s var(--ease), transform .2s var(--ease);
  z-index: 1900;
  overflow:hidden;
}
.modal.open{ opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); }
.modal-overlay.open{ opacity: 1; visibility: visible; }

.modal__close{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(18,20,21,.12);
  background: rgba(255,255,255,.70);
  cursor:pointer;
}
.modal__close:hover{ background: rgba(255,255,255,.95); }
.modal__head{ padding: 22px 22px 12px; }
.modal__scroll{ padding: 0 22px 22px; overflow:auto; max-height: calc(86vh - 80px); }

.form{ display:flex; flex-direction: column; gap: 12px; }
.field{ display:flex; flex-direction: column; gap: 8px; }
label{ font-size: 12px; color: rgba(18,20,21,.72); }
input, select, textarea{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(18,20,21,.12);
  border-radius: 14px;
  padding: 12px 12px;
  outline: none;
}
textarea{ min-height: 120px; resize: vertical; }
::placeholder{ color: rgba(56,60,62,.45); }
input:focus, select:focus, textarea:focus{
  border-color: rgba(4,151,178,.45);
  box-shadow: 0 0 0 3px rgba(4,151,178,.14);
}

/* =================================================================================================================================
. CONTACT MODAL STYLES ENDS HERE  ||  . CONTACT MODAL STYLES ENDS HERE  ||  . CONTACT MODAL STYLES ENDS HERE   || . CONTACT MODAL STYLES ENDS HERE   ||   . CONTACT MODAL STYLES ENDS HERE


/* =================================================================================================================================
. FLOATING WHATSAPP STYLES STARTS HERE  ||  . FLOATING WHATSAPP STYLES STARTS HERE  ||  . FLOATING WHATSAPP STYLES STARTS HERE   ||  . FLOATING WHATSAPP STYLES STARTS HERE
================================================================================================================================= */


/* =================================================================================================================================
. FLOATING WHATSAPP STYLES ENDS HERE  ||  . FLOATING WHATSAPP STYLES ENDS HERE  ||  . FLOATING WHATSAPP STYLES ENDS HERE   || . FLOATING WHATSAPP STYLES ENDS HERE   ||   . FLOATING WHATSAPP STYLES ENDS HERE
================================================================================================================================= */





/***********************************************************************************************************************************
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
GLOBAL STYLES ENDS  ||  GLOBAL STYLES ENDS  ||  GLOBAL STYLES ENDS  ||  GLOBAL STYLES ENDS  ||  GLOBAL STYLES ENDS  ||  GLOBAL STYLES
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<    
***********************************************************************************************************************************/


/**********************************************************************************************************************************
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
HOME PAGE STYLES STARTS  ||  HOME PAGE STYLES STARTS  ||  HOME PAGE STYLES STARTS  ||  HOME PAGE STYLES STARTS  ||  HOME PAGE STYLES STARTS
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<  
***********************************************************************************************************************************/

/* =================================================================================================================================
1.HOME PAGE HERO SECTION STYLES STARTS HERE  ||  1. HOME PAGE HERO SECTION STYLES STARTS HERE  ||  1. HOME PAGE HERO SECTION STYLES STARTS HERE   
================================================================================================================================= */
.hero{
  min-height: calc(100vh - var(--navH));
  display:grid;
  align-items: start;
  padding: clamp(64px, 8vw, 96px) 0 48px;
  position: relative;
  overflow: hidden;
  background: url("images/hero_bg.png") center/cover no-repeat;
}

/* (OPTIONAL) If you prefer an image background instead of the color gradients:
background:
    radial-gradient(1000px 520px at 18% 18%, rgba(4,151,178,.12), transparent 60%),
    radial-gradient(900px 520px at 86% 18%, rgba(18,20,21,.05), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--bg));
}
*/

.hero-text#bg-text{
  position:absolute;
  inset: 0;
  display:flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  margin: 0;

  font-size: clamp(160px, 22vw, 420px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;

  background: linear-gradient(
    180deg,
    rgba(18,20,21,0) 0%,
    rgba(18,20,21,.06) 24%,
    rgba(18,20,21,.03) 54%,
    transparent 78%,
    transparent 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  opacity: .55;
  transform: translateY(-2%);
}

.hero-inner{ position: relative; z-index: 2; }
.hero-stack{ display:grid; gap: 14px; position: relative; z-index: 2; }
.kicker-teal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 8px 12px;
  color: rgba(56,60,62,.70);
  font-size: 13px;
  letter-spacing: .02em;
  margin-bottom: 4px;
}
.hero-title{
  max-width: 27ch;
  margin-inline: auto;
  text-wrap: wrap;
  margin-bottom: 2%;
  background: var(--grad-black);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  
}
.hero-lead{
  max-width: 82ch;
  margin-inline: auto;
  line-height: 2;
  margin-top: 12px;
  margin-bottom: 52px;
}
.hero-actions{
  display:flex;
  gap: 20px;
  justify-content:center;
  flex-wrap: wrap;
  margin-top: 6px;
}
/* =================================================================================================================================
1. HOME PAGE HERO SECTION STYLES ENDS HERE  ||  1. HOME PAGE HERO SECTION STYLES ENDS HERE  ||  1. HOME PAGE HERO SECTION STYLES ENDS HERE   
================================================================================================================================= */


/* =================================================================================================================================
2. HOME PAGE SECTION 2: LOGO STRIP - STYLES STARTS HERE  ||  2. HOME PAGE SECTION 2: LOGO STRIP - STYLES STARTS HERE  ||  2. HOME PAGE   
================================================================================================================================= */
.logo-strip{ padding: 22px 0; }
.logo-strip-card{
  position: relative;
  padding: 16px 0;
  overflow: hidden;
  background: transparent;
}
.logo-strip-card::before,
.logo-strip-card::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(18,20,21,.14), transparent);
  opacity:.45;
}
.logo-strip-card::before{ top:0; }
.logo-strip-card::after{ bottom:0; }

.logo-strip{ position: relative; }
.logo-strip .container{ position: relative; }
.logo-strip .container::before,
.logo-strip .container::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 56px;
  pointer-events:none;
  z-index: 3;
}
.logo-strip .container::before{
  left:0;
  background: linear-gradient(90deg, rgba(245,245,247,1), rgba(245,245,247,0));
}
.logo-strip .container::after{
  right:0;
  background: linear-gradient(270deg, rgba(245,245,247,1), rgba(245,245,247,0));
}

.logo-strip-head{
  display:flex;
  align-items:center;
  justify-content: center;
  position: relative;
  padding: 0 10px 5px;
}
.logo-strip-actions{
  position:absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  gap: 8px;
}
.logo-strip-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(18,20,21,.12);
  background: rgba(255,255,255,.50);
  cursor:pointer;
}
.logo-strip-btn:hover{ background: rgba(255,255,255,.78); }

.logo-strip-viewport{
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.logo-strip-viewport::-webkit-scrollbar{ display:none; }
.logo-strip-viewport::before,
.logo-strip-viewport::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 74px;
  pointer-events:none;
  z-index: 2;
}
.logo-strip-viewport::before{
  left:0;
  background: linear-gradient(90deg, rgba(245,245,247,1), rgba(245,245,247,0));
}
.logo-strip-viewport::after{
  right:0;
  background: linear-gradient(270deg, rgba(245,245,247,1), rgba(245,245,247,0));
}

.logo-strip-row{
  display:flex;
  align-items:center;
  gap: 94px;
  padding: 1px 22px;
  min-width: max-content;
  margin-top: 18px;
}
.logo-strip-item{
  height: 24px;
  width: auto;
  opacity: .80;
  filter: grayscale(1);
  transition: opacity .22s var(--ease), filter .22s var(--ease), transform .22s var(--ease);
}
.logo-strip-item:hover{
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-1px);
}
/* =================================================================================================================================
2. HOME PAGE SECTION 2: LOGO STRIP - STYLES ENDS HERE  ||  2. HOME PAGE SECTION 2: LOGO STRIP - STYLES ENDS HERE  ||  2. HOME PAGE  
================================================================================================================================= */


/* =================================================================================================================================
3. HOME PAGE SECTION 3: WHAT WE DO - STYLES STARTS HERE  ||  3. HOME PAGE SECTION 3: WHAT WE DO - STYLES STARTS HERE  ||  3. HOME PAGE   
================================================================================================================================= */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  color: rgba(56, 60, 62, 0.38);
  font-size: 12px;
  letter-spacing: .02em;
  margin-bottom: 20px;
}

.h2{
  margin: 14px 0 0;
  font-size: clamp(40px, 3.6vw, 46px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin-bottom: 40px;
  text-wrap: balance;
}
.h2 .teal{ 
  background: var(--grad-teal);
  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;

  display: inline-block; /* prevents clipping edge */
  line-height: 1.05;     /* reduces glyph cutoff */
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.p{
  margin-bottom: 40px;
  color: rgba(56,60,62,.84);
  line-height: 1.95;
  font-size: 14px;
  max-width: 60ch;
}

.stack-10{ margin-top: 10px; }
.stack-14{ margin-top: 14px; 
           background: var(--grad-black);
           -webkit-background-clip:text;
           background-clip:text;
           color:transparent;}
.stack-18{ margin-top: 18px; }

.stack-19{
  width: 150ch;
}

.action-row{
  margin-top: 18px;
  display:flex;
  align-items:center;
  gap: 16px;
  flex-wrap: wrap;
}

.link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(18,20,21,.12);
  background: rgba(255,255,255,.50);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.78);
  border-color: rgba(4,151,178,.25);
}
.link .arr{
  color: var(--teal);
  display:inline-block;
  animation: nudge 1.5s ease-in-out infinite;
}
.link:hover .arr{ animation-play-state: paused; }
@keyframes nudge{ 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(5px);} }

.btn-build{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(18,20,21,.14);
  background: rgba(18,20,21,.92);
  color: var(--bg);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  box-shadow: 0 14px 34px rgba(18,20,21,.18);
  transition: transform .18s ease, filter .18s ease;
  white-space: nowrap;
}
.btn-build:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.spark{ width:18px; height:18px; display:inline-block; }

.svc-item{
  position: relative;
  padding: 18px 18px;
  border-radius: var(--r-lg);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms cubic-bezier(.2,.7,.2,1), background 220ms ease;
  text-align: center;
}
.svc-item:hover{
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}
.svc-item .hp-icon{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 0 auto 10px;
}

.svc-desc{
  margin-inline: auto; /* keeps paragraph centered but readable */
}
.svc-ttl{
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: var(--grad-black);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.svc-desc{
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(56,60,62,.80);
  max-width: 42ch;
}

/*CODE FOR HOMEPAGE SERVICE ICON WRAPPER RESET  || CODE FOR HOMEPAGE SERVICE ICON WRAPPER RESET*/
#hp-icons{
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: inherit;
}


.home-services{
  padding: clamp(48px, 6vw, 104px) 0;
  background:
    radial-gradient(900px 520px at 80% 20%, rgba(4,151,178,.08), transparent 60%),
    radial-gradient(700px 420px at 20% 75%, rgba(18,20,21,.05), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg));
  overflow:hidden;
}

.home-grid{
  display:grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(58px, 4vw, 74px);
  align-items: start;
  position: relative;
}
.home-grid::after{
  content:"";
  position:absolute;
  top: 6px;
  bottom: 6px;
  left: calc(42.5% + (clamp(58px, 4vw, 74px) / 2));
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(18,20,21,.10), transparent);
  opacity: .55;
  pointer-events:none;
}
.home-left{ padding-right: 10px; }
.home-right{ padding-left: 10px; margin-top: 2% }

.home-svc-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.home-svc{ padding: 16px 0; }
.home-svc:nth-child(odd){ padding-right: 18px; }
.home-svc:nth-child(even){ padding-left: 18px; }

@media (max-width: 980px){
  .home-grid{ grid-template-columns: 1fr; gap: 26px; }
  .home-grid::after{ display:none; }
  .home-left,.home-right{ padding:0; }
  .home-svc-grid{ grid-template-columns: 1fr; }
  .home-svc{ padding: 8px 0; }
  .home-svc:nth-child(odd), .home-svc:nth-child(even){ padding:0; }
}

/*CODE FOR SERVICES CTA POSITION (MOBILE ONLY)  || CODE FOR SERVICES CTA POSITION (MOBILE ONLY)*/
.services-mobile-cta{ display:none; }

@media (max-width: 980px){
  /* hide CTA from the left column on mobile */
  .home-left .action-row{ display:none; }

  /* show CTA after the last card */
  .services-mobile-cta{
    display:flex;
    justify-content:center;
    margin-top: 14px;
    padding-top: 10px;
  }
}
/* =================================================================================================================================
3. HOME PAGE SECTION 3: WHAT WE DO - STYLES ENDS HERE  ||  2. HOME PAGE SECTION 2: WHAT WE DO - STYLES ENDS HERE  ||  2. HOME PAGE  
================================================================================================================================= */



/**********************************************************************************************************************************
HOME PAGE STYLES ENDS  ||  HOME PAGE STYLES ENDS  ||  HOME PAGE STYLES ENDS  ||  HOME PAGE STYLES ENDS  ||  HOME PAGE STYLES ENDS   
***********************************************************************************************************************************/



/**********************************************************************************************************************************
SERVICES PAGE STYLES STARTS  ||  SERVICES PAGE STYLES STARTS  ||  SERVICES PAGE STYLES STARTS  ||  SERVICES PAGE STYLES STARTS  ||  PAGE SERVICES STYLES STARTS  
***********************************************************************************************************************************/

/* =================================================================================================================================
1. SERVICES PAGE HERO SECTION STYLES STARTS HERE  ||  1. SERVICES PAGE HERO SECTION STYLES STARTS HERE  ||  1. SERVICES PAGE HERO SECTION STYLES STARTS HERE   
================================================================================================================================= */

/* =================================================================================================================================
1. SERVICES PAGE HERO SECTION STYLES ENDS HERE  ||  1. SERVICES PAGE HERO SECTION STYLES ENDS HERE  ||  1. SERVICES PAGE HERO SECTION STYLES ENDS HERE   
================================================================================================================================= */


/* =================================================================================================================================
2. SERVICES PAGE SECTION 2: BRAND IDENTITY - STYLES STARTS HERE  ||  2. SERVICES PAGE SECTION 2: BRAND IDENTITY - STYLES STARTS HERE  ||  2. SERVICES PAGE   
================================================================================================================================= */

/* =================================================================================================================================
2. SERVICES PAGE SECTION 2: BRAND IDENTITY - STYLES ENDS HERE  ||  2. SERVICES PAGE SECTION 2: BRAND IDENTITY - STYLES ENDS HERE  ||  2. SERVICES PAGE  
================================================================================================================================= */



/* =================================================================================================================================
3. SERVICES PAGE SECTION 3: WEBSITE DESIGN - STYLES STARTS HERE  ||  3. SERVICES PAGE SECTION 3: WEBSITE DESIGN - STYLES STARTS HERE  ||  3. SERVICES PAGE   
================================================================================================================================= */

/* =================================================================================================================================
3. SERVICES PAGE SECTION 3: WEBSITE DESIGN - STYLES ENDS HERE  ||  3. SERVICES PAGE SECTION 3: WEBSITE DESIGN - STYLES ENDS HERE  ||  3. SERVICES PAGE  
================================================================================================================================= */


/* =================================================================================================================================
4. SERVICES PAGE SECTION 4: GRAPHIC DESIGN - STYLES STARTS HERE  ||  4. SERVICES PAGE SECTION 4: GRAPHIC DESIGN - STYLES STARTS HERE  ||  4. SERVICES PAGE   
================================================================================================================================= */

/* =================================================================================================================================
4. SERVICES PAGE SECTION 4: GRAPHIC DESIGN - STYLES ENDS HERE  ||  4. SERVICES PAGE SECTION 4: GRAPHIC DESIGN - STYLES ENDS HERE  ||  4. SERVICES PAGE  
================================================================================================================================= */


/* =================================================================================================================================
5. SERVICES PAGE SECTION 5: BRAND & LAUNCH SUPPORT - STYLES STARTS HERE  ||  5. SERVICES PAGE SECTION 5: BRAND & LAUNCH SUPPORT - STYLES STARTS HERE  ||  5. SERVICES PAGE   
================================================================================================================================= */

/* =================================================================================================================================
5. SERVICES PAGE SECTION 5: BRAND & LAUNCH SUPPORT - STYLES ENDS HERE  ||  5. SERVICES PAGE SECTION 5: BRAND & LAUNCH SUPPORT - STYLES ENDS HERE  ||  5. SERVICES PAGE  
================================================================================================================================= */


/* =================================================================================================================================
6. SERVICES PAGE SECTION 6: HOW WE WORK - STYLES STARTS HERE  ||  6. SERVICES PAGE SECTION 6: HOW WE WORK - STYLES STARTS HERE  ||  6. SERVICES PAGE   
================================================================================================================================= */

/* =================================================================================================================================
6. SERVICES PAGE SECTION 6: HOW WE WORK - STYLES ENDS HERE  ||  6. SERVICES PAGE SECTION 6: HOW WE WORK - STYLES ENDS HERE  ||  6. SERVICES PAGE  
================================================================================================================================= */


/* =================================================================================================================================
7. SERVICES PAGE SECTION 7: OUR RECENT WORK - STYLES STARTS HERE  ||  7. SERVICES PAGE SECTION 7: OUR RECENT WORK - STYLES STARTS HERE  ||  7. SERVICES PAGE   
================================================================================================================================= */

/* =================================================================================================================================
7. SERVICES PAGE SECTION 7: OUR RECENT WORK - STYLES ENDS HERE  ||  7. SERVICES PAGE SECTION 7: OUR RECENT WORK - STYLES ENDS HERE  ||  7. SERVICES PAGE  
================================================================================================================================= */

/**********************************************************************************************************************************
SERVICES PAGE STYLES ENDS  ||  SERVICES PAGE STYLES ENDS  ||  SERVICES PAGE STYLES ENDS  ||  SERVICES PAGE STYLES ENDS  ||  SERVICES PAGE STYLES ENDS  
***********************************************************************************************************************************/




/**********************************************************************************************************************************
ABOUT PAGE STYLES STARTS  ||  ABOUT PAGE STYLES STARTS  ||  ABOUT PAGE STYLES STARTS  ||  ABOUT PAGE STYLES STARTS  ||  ABOUT PAGE  
***********************************************************************************************************************************/

/* =================================================================================================================================
1. ABOUT PAGE HERO SECTION STYLES STARTS HERE  ||  1. ABOUT PAGE HERO SECTION STYLES STARTS HERE  ||  1. ABOUT PAGE HERO SECTION STYLES STARTS HERE   
================================================================================================================================= */

/* =================================================================================================================================
1. ABOUT PAGE HERO SECTION STYLES ENDS HERE  ||  1. ABOUT PAGE HERO SECTION STYLES ENDS HERE  ||  1. ABOUT PAGE HERO SECTION STYLES ENDS HERE   
================================================================================================================================= */


/* =================================================================================================================================
2. ABOUT PAGE SECTION 2: WHY BUSINESSES CHOOSE DEVAIGN - STYLES STARTS HERE  ||  2. ABOUT PAGE SECTION 2: WHY BUSINESSES CHOOSE DEVAIGN - STYLES STARTS HERE  ||  2. ABOUT PAGE   
================================================================================================================================= */

/* =================================================================================================================================
2. ABOUT PAGE SECTION 2: WHY BUSINESSES CHOOSE DEVAIGN - STYLES ENDS HERE  ||  2. ABOUT PAGE SECTION 2: WHY BUSINESSES CHOOSE DEVAIGN - STYLES ENDS HERE  ||  2. ABOUT PAGE  
================================================================================================================================= */



/* =================================================================================================================================
3.  ABOUT PAGE SECTION 3: WHO WE WORK WITH - STYLES STARTS HERE  ||  3. ABOUT PAGE SECTION 3: WHO WE WORK WITH - STYLES STARTS HERE  ||  3. ABOUT PAGE   
================================================================================================================================= */
/* ======================================================================================================================
ABOUT — WHO WE WORK BEST WITH
Left heading + right list (matches homepage services overview structure)
====================================================================================================================== */
.about-fit{
  padding: clamp(48px, 6vw, 92px) 0;
}

.about-fit .container{
  max-width: 1180px;
}

.about-fit__grid{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(22px, 3vw, 48px);
  align-items: start;
}

/* divider like your home section */
@media (min-width: 981px){
  .about-fit__grid::after{
    content:"";
    position:absolute;
    top: 6px;
    bottom: 6px;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(18,20,21,.10), transparent);
    opacity: .55;
    pointer-events:none;
  }

  .about-fit__left{ padding-right: 10px; }
  .about-fit__right{ padding-left: 10px; }
}

.about-fit__eyebrow{
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.65;
  margin: 0 0 12px;
}

.about-fit__title{
  margin: 0 0 14px;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.1;
}

.about-fit__intro{
  margin: 0;
  opacity: 0.8;
  line-height: 1.65;
  font-size: 14px;
  color: rgba(56,60,62,.84);
  max-width: 52ch;
}

.about-fit__list{
  display: grid;
  gap: 12px;
}

.about-fit__item{
  padding: 14px 0;
  border-bottom: 1px solid rgba(18,20,21,.08);
  line-height: 1.7;
  font-size: 14px;
  color: rgba(56,60,62,.84);
}

/* Responsive */
@media (max-width: 980px){
  .about-fit__grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .about-fit__grid::after{ display:none; }
  .about-fit__left, .about-fit__right{ padding: 0; }
}
/* =================================================================================================================================
3. ABOUT PAGE SECTION 3: WHO WE WORK WITH - STYLES ENDS HERE  ||  3. ABOUT PAGE SECTION 3: WHO WE WORK WITH - STYLES ENDS HERE  ||  3. ABOUT PAGE  
================================================================================================================================= */


/* =================================================================================================================================
4. ABOUT PAGE SECTION 4: HOW WE WORK - STYLES STARTS HERE  ||  4. ABOUT PAGE SECTION 4: HOW WE WORK - STYLES STARTS HERE  ||  4. ABOUT PAGE   
================================================================================================================================= */
/* ======================================================================================================================
ABOUT - WHAT WORKING WITH US LOOKS LIKE (Process pills only)
- Center aligned heading, copy, CTA
- Pills match screenshot
- No filled background
- No nested card look
====================================================================================================================== */

.about-work{
  padding: clamp(48px, 6vw, 92px) 0;
}

/* Center everything in this block */
.about-work__head,
.about-work__cta{
  text-align: center;
}

/* Keep copy width tidy and aligned with other page spacing */
.about-work__copy{
  max-width: 1220px;
  margin: 0 auto 22px;
  line-height: 1.75;
  text-align: left;
  margin-bottom: 50px;
  color: rgba(56,60,62,.84);
}

/* ===== Process row: keep 6 across (and scroll on smaller screens instead of wrapping) ===== */
.about-work .process-grid--six{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
}

/* Pills - scoped to About only so services page is untouched */
.about-work .process-card{
  background: transparent !important;                 /* no filled bg */
  border: 1px solid rgba(18,20,21,.10) !important;
  border-radius: 18px !important;

  padding: 14px 16px !important;                      /* pill padding */
  min-height: 52px !important;                        /* clean pill height */
  height: 52px !important;

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

  box-shadow: none !important;                        /* no card shadow */
  transform: none !important;
}

/* Title styling to match pill look */
.about-work .process-card__title{
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap;                                /* keep in one line like screenshot */
}

/* Hover: subtle, still no filled bg "card" */
@media (hover:hover){
  .about-work .process-card:hover{
    border-color: rgba(18,20,21,.18) !important;
    transform: translateY(-1px) !important;
  }
}

/* CTA link (non-button) */
.about-work__cta{
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.about-work__link{
  color: #0497b2;
  text-decoration: none;
  border-bottom: 1px solid rgba(18,20,21,.25);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
  font-weight: 700;
  margin-top: 20px;
}

.about-work__link:hover{
  color: rgba(4,151,178,.95);
  border-color: rgba(4,151,178,.55);
}

/* Responsive: keep 1 row by allowing horizontal scroll instead of wrapping */
@media (max-width: 1100px){
  .about-work .process-grid--six{
    grid-template-columns: repeat(6, max-content);
    justify-content: start;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .about-work .process-card{
    width: max-content;
    min-width: 180px;  /* adjust if you want tighter */
  }
}
/* =================================================================================================================================
4. ABOUT PAGE SECTION 4: HOW WE WORK - STYLES ENDS HERE  ||  4. ABOUT PAGE SECTION 4: HOW WE WORK - STYLES ENDS HERE  ||  4. ABOUT PAGE  
================================================================================================================================= */


/* =================================================================================================================================
5. ABOUT PAGE SECTION 5: WHAT OUR CLIENTS SAY ABOUT US - STYLES STARTS HERE  ||  5. ABOUT PAGE SECTION 5: WHAT OUR CLIENTS SAY ABOUT US - STYLES STARTS HERE  ||  5. ABOUT PAGE   
================================================================================================================================= */

/* =================================================================================================================================
5. ABOUT PAGE SECTION 5: WHAT OUR CLIENTS SAY ABOUT US - STYLES ENDS HERE  ||  5. ABOUT PAGE SECTION 5: WHAT OUR CLIENTS SAY ABOUT US - STYLES ENDS HERE  ||  5. ABOUT PAGE  
================================================================================================================================= */


/**********************************************************************************************************************************
ABOUT PAGE STYLES ENDS  ||  ABOUT PAGE STYLES ENDS  ||  ABOUT PAGE STYLES ENDS  ||  ABOUT PAGE STYLES ENDS  ||  ABOUT PAGE STYLES ENDS  
***********************************************************************************************************************************/



/**********************************************************************************************************************************
CONTACT PAGE STYLES STARTS  ||  CONTACT PAGE STYLES STARTS  ||  CONTACT PAGE STYLES STARTS  ||  CONTACT PAGE STYLES STARTS  ||  CONTACT  
***********************************************************************************************************************************/

/* =================================================================================================================================
1. CONTACT PAGE HERO SECTION STYLES STARTS HERE  ||  1. CONTACT PAGE HERO SECTION STYLES STARTS HERE  ||  1. CONTACT PAGE HERO SECTION STYLES STARTS HERE   
================================================================================================================================= */

/* =================================================================================================================================
1. CONTACT PAGE HERO SECTION STYLES ENDS HERE  ||  1. CONTACT PAGE HERO SECTION STYLES ENDS HERE  ||  1. CONTACT PAGE HERO SECTION STYLES ENDS HERE   
================================================================================================================================= */


/* =================================================================================================================================
2. CONTACT PAGE: DEFAULT CONTACT - STYLES STARTS HERE  ||  2. CONTACT PAGE: DEFAULT CONTACT - STYLES STARTS HERE  ||  2. CONTACT PAGE   
================================================================================================================================= */

/* =================================================================================================================================
2. CONTACT PAGE: DEFAULT CONTACT - STYLES ENDS HERE  ||  2. CONTACT PAGE: DEFAULT CONTACT - STYLES ENDS HERE  ||  2. CONTACT PAGE  
================================================================================================================================= */


/* =================================================================================================================================
2. CONTACT PAGE: DYNAMIC FORM - STYLES STARTS HERE  ||  2. CONTACT PAGE: DYNAMIC FORM - STYLES STARTS HERE  ||  2. CONTACT PAGE   
================================================================================================================================= */

/* =================================================================================================================================
2. CONTACT PAGE: DYNAMIC FORM - STYLES ENDS HERE  ||  2. CONTACT PAGE: DYNAMIC FORM - STYLES ENDS HERE  ||  2. CONTACT PAGE  
================================================================================================================================= */

/**********************************************************************************************************************************
CONTACT PAGE STYLES ENDS  ||  CONTACT PAGE STYLES ENDS  ||  CONTACT PAGE STYLES ENDS  ||  CONTACT PAGE STYLES ENDS  ||  CONTACT PAGE 
***********************************************************************************************************************************/




/* =========================
HERO (LIGHT)
- Optional background-image code is included below (commented)
========================= */



/* =========================
RECENT WORK
========================= */
.recent-work-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 980px){
  .recent-work-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .recent-work-grid{ grid-template-columns: 1fr; }
}

.work-card{
  border-radius: 18px;
  border: 1px solid rgba(18,20,21,.10);
  background: rgba(255,255,255,.55);
  overflow:hidden;
  transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.work-card:hover{
  transform: translateY(-2px);
  border-color: rgba(4,151,178,.22);
  background: rgba(255,255,255,.72);
}
.work-img{
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  opacity: .96;
}
.work-meta{
  padding: 16px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.work-title{
  font-weight: 700;
  color: rgba(18,20,21,.92);
  margin: 0;
}













/* ========================= WHATSAPP FLOAT ========================= */
.whatsapp-float{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: transparent;      /* no background */
  box-shadow: none;            /* remove blob shadow */
  z-index: 1400;
  transition: transform .12s var(--ease);
}

.whatsapp-float:hover{ transform: translateY(-3px); }

.whatsapp-float img{
  width: 44px;
  height: 44px;
  display:block;
}



/* =========================
SCROLL REVEAL (mobile-safe)
========================= */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  body.page-ready, body.page-exit{ transition:none; }
}

body { opacity: 1 !important; visibility: visible !important; }




/* ========================================================================================================================
ABOUT PAGE STYLES STARTS HERE || .....
======================================================================================================================== */
    :root{
      --bg: #f5f5f7;
      --ink: #121415;
      --muted: #a6a6a6;
      --dark2: #383c3e;
      --teal: #0497b2;

      /* added (your CSS used it) */
      --ease: cubic-bezier(.2,.7,.2,1);

      /* about block tokens */
      --about-radius: 22px;
      --about-shadow: 0 18px 55px rgba(18,20,21,.10);
    }

    *{ box-sizing: border-box; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: var(--bg);
      color: var(--ink);
    }

    /* =========================
       ABOUT BLOCKS (INSERTED AFTER HERO)
       ========================== */
    .about-blocks{
      padding: clamp(70px, 8vw, 120px) 0;
      background:
        radial-gradient(900px 520px at 80% 18%, rgba(4,151,178,.08), transparent 60%),
        radial-gradient(700px 420px at 20% 78%, rgba(18,20,21,.05), transparent 60%),
        linear-gradient(180deg, var(--bg), var(--bg));
    }

    .about-wrap{
      width: min(1120px, calc(100% - 48px));
      margin: 0 auto;
    }

    .about-row{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(22px, 3.6vw, 64px);
      align-items: center;
      padding: clamp(34px, 4vw, 56px) 0;
      position: relative;
    }

    .about-row::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(18,20,21,.12), transparent);
      pointer-events:none;
    }
    .about-row:last-of-type::after{ display:none; }

    .about-row:hover{
      background: rgba(255,255,255,.55);
      border-radius: var(--about-radius);
      box-shadow: var(--about-shadow);
      padding-left: 18px;
      padding-right: 18px;
      margin-left: -18px;
      margin-right: -18px;
      transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s ease;
      transform: translateY(-2px);
    }

    .about-row--flip .about-left{ order: 2; }
    .about-row--flip .about-right{ order: 1; }

    .about-left, .about-right{ padding: 8px 10px; }

    .about-kicker{
      margin: 0 0 14px;
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(56,60,62,.58);
      font-weight: 700;
    }

    .about-title{
      margin: 0 0 16px;
      font-size: clamp(28px, 3.1vw, 42px);
      line-height: 1.15;
      letter-spacing: -0.02em;
      font-weight: 800;
      text-wrap: balance;
    }
    .about-title span{ color: var(--teal); }

    .about-copy{
      margin: 0;
      font-size: 14px;
      line-height: 1.95;
      color: rgba(56,60,62,.85);
      max-width: 72ch;
    }

    .about-panel{
      border-top: 1px solid rgba(18,20,21,.12);
      padding-top: 18px;
      max-width: 60ch;
    }
    .about-panel__title{
      margin: 0 0 14px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: rgba(18,20,21,.92);
    }

    .about-list{
      list-style: none;
      padding: 0;
      margin: 0;
      display:grid;
      gap: 12px;
    }
    .about-list li{
      position: relative;
      padding-left: 16px;
      font-size: 14px;
      line-height: 1.75;
      color: rgba(56,60,62,.85);
    }
    .about-list li::before{
      content:"";
      position:absolute;
      left:0;
      top: 9px;
      width:6px;
      height:6px;
      border-radius:50%;
      background: var(--teal);
      opacity: .92;
      box-shadow: 0 0 0 4px rgba(4,151,178,.14);
    }

    .about-row.has-dividers .about-left{
      position: relative;
    }
    .about-row.has-dividers .about-left::after{
      content:"";
      position:absolute;
      right: calc(-1 * (clamp(22px, 3.6vw, 64px) / 2));
      top: 10%;
      height: 80%;
      width: 1px;
      background: linear-gradient(180deg, transparent, rgba(18,20,21,.14), transparent);
      opacity: .55;
      pointer-events:none;
    }

    @media (max-width: 980px){
      .about-row{
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 28px 0;
      }
      .about-row:hover{
        background: transparent;
        box-shadow: none;
        transform: none;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
      }
      .about-row--flip .about-left{ order: 0; }
      .about-row--flip .about-right{ order: 0; }
      .about-row.has-dividers .about-left::after{ display:none; }
    }

    /* keep the middle divider correct when the row is flipped */
    .about-row.about-row--flip.has-dividers .about-left::after{
      right: auto;
      left: calc(-1 * (clamp(22px, 3.6vw, 64px) / 2));
    }

    /* =========================================================
       SECTION 1 — OUR APPROACH
       ========================================================= */
    .our-approach{
      padding: clamp(70px, 8vw, 120px) 0;
      background: var(--bg);
      min-height: 100vh;
      align-content: start;
    }

    .our-approach__header{
      text-align:center;
      max-width: 760px;
      margin:0 auto clamp(60px, 6vw, 90px);
    }
    .our-approach__title{
      margin: 0;
      font-size:clamp(30px, 3.6vw, 46px);
      line-height:1.15;
      letter-spacing:-.02em;
      font-weight:800;
    }

    .our-approach__kicker{
      font-size:12px;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:rgba(56,60,62,.55);
      margin-bottom:14px;
      font-weight:700;
      align-items: center;
    }

    .our-approach-text, #approach-text{
      max-width: 0ch;
      margin-inline: auto;
      font-size: clamp(16px, 1.1vw, 16px);
      line-height: 1.95;
      color: rgba(56,60,62,.85);
      max-width: 1100px;
      margin-inline: auto;
    }

    
  /* ========================================================================================================================
     ABOUT PAGE STYLES ENDS HERE || .....
  ======================================================================================================================== */

  /* =========================......
   SERVICE PAGE STYLES STARTS HERE || .....
   ========================== ....*/
    :root{
      --bg:#f5f5f7;
      --ink:#121415;
      --dark2:#383c3e;
      --muted:#a6a6a6;
      --teal:#0497b2;
      --tealSoft: rgba(4,151,178,.16);
      --tealSoft2: rgba(4,151,178,.10);

      --cardShadow: 0 18px 50px rgba(18,20,21,.10);
      --radius: 22px;
      --shadow: 0 18px 50px rgba(18,20,21,.10);
      --card: rgba(255,255,255,.55);
      --ease: cubic-bezier(.2,.7,.2,1);
    }
    :root{
      --ink:#121415;
      --muted: rgba(56,60,62,.84);
      --line: rgba(18,20,21,.10);

      /* Poster palette */
      --bg-a:linear-gradient(90deg, #ffffff 0%, #e9e9ea 100%);
      --bg-b:linear-gradient(90deg, #cecece 0%, #e9e9ea 100%);
      --bg-c:#b8b8b8;

      /* Bullet / accent */
      --bullet:#0497b2;

      /* Heading gradients */
      --grad-black: linear-gradient(90deg, #3b3b3b 0%, #575757 100%);
      --grad-teal:  linear-gradient(90deg, #0d8aa6 0%, #10b4c7 100%);

      --shadow: 0 18px 50px rgba(18,20,21,.10);

      --r-xl: 30px;
      --r-lg: 22px;

      --max: 1160px;
      --ease: cubic-bezier(.2,.9,.2,1);
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: var(--bg);
      color: var(--ink);
    }
    a{ color: inherit; }

    .wrap{
      width: min(1120px, calc(100% - 28px));
      margin: 0 auto;
    }

    *{ box-sizing:border-box; }
    html,body{ margin:0; padding:0; }
    body{
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg-a);
      color: var(--ink);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      overflow-x:hidden;
    }
    img{ max-width:100%; display:block; }
    a{ color: inherit; text-decoration:none; }

    .ds-wrap{
      width: min(var(--max), calc(100% - 28px));
      margin-inline: auto;
    }

    /* Each service block has its own background (alternating as requested) */
    .ds-block{
      padding: clamp(56px, 7vw, 110px) 0;
      position: relative;
      overflow: hidden;
      background: var(--bg-a);
    }
    #brand-identity-section{ background: var(--bg-a); }
    #website-design-section{ background: var(--bg-b); }
    #graphic-design-section{ background: var(--bg-a); }
    #launch-kit-section{ background: var(--bg-b); }

    /* Soft top/bottom fade edges so sections feel premium */
    .ds-block::before{
      content:"";
      position:absolute;
      inset:-2px 0;
      background:
        radial-gradient(900px 520px at 70% 20%, rgba(4,151,178,.06), transparent 60%),
        radial-gradient(900px 520px at 25% 85%, rgba(18,20,21,.05), transparent 62%);
      opacity: .75;
      pointer-events:none;
    }

    /* Content grid */
    .ds-grid{
      position: relative;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(28px, 4vw, 68px);
      align-items: start;
      z-index: 1; /* above section ::before */
      transition: transform .22s var(--ease);
    }

    /* Subtle vertical divider like your overview */
    .ds-grid::after{
      content:"";
      position:absolute;
      top: 8px;
      bottom: 8px;
      left: 50%;
      width: 1px;
      background: linear-gradient(180deg, transparent, rgba(18,20,21,.10), transparent);
      opacity: .5;
      pointer-events:none;
      transform: translateX(-.5px);
      transition: opacity .22s var(--ease);
    }

    /* Flip layout */
    .ds-block.ds-flip .ds-left{ order: 2; }
    .ds-block.ds-flip .ds-right{ order: 1; }

    /* LEFT column: centered */
    .ds-left{
      padding-top: 6px;
      display:grid;
      justify-items:center;
      text-align:center;
      gap: 14px;
    }

    .ds-icon{
      width: 92px;
      height: 92px;
      display:grid;
      place-items:center;
    }
    .ds-icon img{
      width: 92px;
      height: 92px;
      object-fit: contain;
      object-position: center;
      user-select:none;
      pointer-events:none;
    }

    .ds-title{
      margin: 2px 0 0;
      font-size: clamp(34px, 3.8vw, 56px);
      letter-spacing: -0.03em;
      line-height: 1.06;
      font-weight: 800;
      text-wrap: balance;

      background: var(--grad-black);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .ds-title span{
      background: var(--grad-teal);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      padding-bottom: 2px;
    }

    .ds-subtitle{
      margin: 0;
      max-width: 44ch;
      color: rgba(56,60,62,.82);
      line-height: 1.9;
      font-size: 14px;
    }

    .ds-cta{
      margin-top: 12px;
      width: fit-content;
      display:inline-flex;
      align-items:center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 999px;
      border: 1px solid rgba(18,20,21,.12);
      background: rgba(255,255,255,.55);
      color: rgba(18,20,21,.90);
      font-weight: 600;
      letter-spacing: -0.01em;
      transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
      white-space: nowrap;
      height: 44px;
    }
    .ds-cta .arr{
      color: var(--bullet);
      display:inline-block;
      transition: transform .18s var(--ease);
    }
    .ds-cta:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.78);
      border-color: rgba(4,151,178,.25);
      box-shadow: 0 14px 34px rgba(18,20,21,.10);
    }
    .ds-cta:hover .arr{ transform: translateX(4px); }

    .ds-right{
      padding-top: 12px;
    }

    .ds-right-lead{
      margin: 0 0 14px;
      color: rgba(56,60,62,.86);
      font-size: 15px;
      line-height: 1.9;
      max-width: 72ch;
    }

    .ds-right-label{
      margin: 18px 0 10px;
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(56,60,62,.55);
      font-weight: 800;
    }

    .ds-list{
      margin: 0;
      padding: 0;
      list-style: none;
      display:grid;
      gap: 10px;
    }

    .ds-list li{
      position: relative;
      padding-left: 26px;
      color: rgba(56,60,62,.84);
      font-size: 14px;
      line-height: 1.75;
    }

    .ds-list li::before{
      content:"";
      position:absolute;
      left: 0;
      top: 10px;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--bullet);
      box-shadow: 0 0 0 2px rgba(4,151,178,.14);
    }

    .ds-note{
      margin-top: 14px;
      color: rgba(56,60,62,.78);
      font-size: 14px;
      line-height: 1.85;
    }

    .ds-block:hover .ds-grid{
      transform: translateY(-1px);
    }
    .ds-block:hover .ds-grid::after{
      opacity: .75;
    }

    @media (max-width: 980px){
      .ds-grid{
        grid-template-columns: 1fr;
        gap: 18px;
      }
      .ds-grid::after{ display:none; }
      .ds-block.ds-flip .ds-left,
      .ds-block.ds-flip .ds-right{ order: 0; }
      .ds-left{ align-items:center; }
      .ds-subtitle{ max-width: 60ch; }
    }

    /* =========================
       PROCESS SECTION
       ========================= */
    .process-section{
      padding: clamp(70px, 8vw, 120px) 0;
      background: var(--bg-a);
      position: relative;
      overflow: hidden;
    }

    .process-section::before{
      content:"";
      position:absolute;
      inset:-2px 0;
      background:
        radial-gradient(900px 520px at 70% 20%, rgba(4,151,178,.06), transparent 60%),
        radial-gradient(900px 520px at 25% 85%, rgba(18,20,21,.05), transparent 62%);
      opacity:.75;
      pointer-events:none;
    }

    .process-header{
      position:relative;
      z-index:1;
      text-align:center;
      max-width: 820px;
      margin: 0 auto clamp(46px, 6vw, 78px);
    }

    .process-kicker{
      font-size:12px;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:rgba(56,60,62,.55);
      margin-bottom:14px;
      font-weight:700;
    }

    .process-title{
      margin:0 0 14px;
      font-size: clamp(30px, 3.6vw, 46px);
      line-height:1.15;
      letter-spacing:-.02em;
      font-weight: 800;

      background: var(--grad-black);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      text-wrap: balance;
    }
    .process-title span{
      background: var(--grad-teal);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .process-intro{
      margin:0;
      color: rgba(56,60,62,.82);
      font-size: 14px;
      line-height: 1.9;
    }

    .process-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(18px, 2.2vw, 28px);
      align-items: stretch;
    }

    .process-grid::after{
      content:"";
      position:absolute;
      inset: 0;
      pointer-events:none;
      z-index: 3;
    }

    .process-grid::after{
      background: none;
    }

    .process-divider{
      position:absolute;
      width: 1px;
      background: linear-gradient(
        180deg,
        transparent,
        rgba(18,20,21,.12),
        transparent
      );
      opacity: .55;
      pointer-events:none;
      z-index: 3;
    }

    .process-divider.row-1{ top: 0; height: calc((100% - clamp(18px, 2.2vw, 28px)) / 2); }
    .process-divider.row-2{ bottom: 0; height: calc((100% - clamp(18px, 2.2vw, 28px)) / 2); }

    .process-divider.d1{
      left: calc(
        ((100% - (2 * clamp(18px, 2.2vw, 28px))) / 3)
        + (clamp(18px, 2.2vw, 28px) / 2)
      );
    }
    .process-divider.d2{
      left: calc(
        (2 * ((100% - (2 * clamp(18px, 2.2vw, 28px))) / 3))
        + (3 * (clamp(18px, 2.2vw, 28px) / 2))
      );
    }
    @media (max-width: 980px){
      .process-divider{ display:none !important; }
    }

    .process-card{
      position: relative;
      padding: 26px 22px 28px;
      border-radius: 18px;
      border-top: 1px solid rgba(18,20,21,.12);
      border-bottom: 1px solid rgba(18,20,21,.12);
      transition:
        transform .22s var(--ease),
        box-shadow .22s var(--ease),
        background .22s var(--ease),
        border-color .22s var(--ease);
      background: rgba(255,255,255,.0);
      min-height: 230px;
      display:grid;
      justify-items:center;
      text-align:center;
      overflow:hidden;
    }

    .process-card:hover{
      background: rgba(255,255,255,.65);
      box-shadow: 0 20px 60px rgba(18,20,21,.10);
      transform: translateY(-4px);
      border-top-color: rgba(4,151,178,.16);
      border-bottom-color: rgba(4,151,178,.16);
    }

    .process-card.is-active{
      background: rgba(255,255,255,.65);
      box-shadow: 0 20px 60px rgba(18,20,21,.10);
      transform: translateY(-4px);
      border-top-color: rgba(4,151,178,.16);
      border-bottom-color: rgba(4,151,178,.16);
    }

    .process-num{
      width: 92px;
      height: 92px;
      display:grid;
      place-items:center;
      margin-bottom: 14px;
      position: relative;
    }
    .process-num span{
      font-weight: 800;
      font-size: 64px;
      letter-spacing: -0.04em;
      line-height:1;
      background: var(--grad-black);
      -webkit-background-clip:text;
      background-clip:text;
      color: transparent;
      opacity: .15;
    }

    .process-step-title{
      margin-top: -20px;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.01em;
      background: var(--grad-black);
      -webkit-background-clip:text;
      background-clip:text;
      color: transparent;
    }

    .process-step-text{
      margin:0;
      font-size: 14px;
      line-height: 1.85;
      color: rgba(56,60,62,.85);
      max-width: 42ch;
    }

    .process-card::after{ display:none; }

    .process-card:nth-child(1)::after,
    .process-card:nth-child(4)::after{
      content:"";
      position:absolute;
      top: 12%;
      right: calc(-1 * (clamp(18px, 2.2vw, 28px) / 2));
      height: 76%;
      width: 1px;
      background: linear-gradient(
        180deg,
        transparent,
        rgba(18,20,21,.12),
        transparent
      );
      opacity: .55;
      pointer-events:none;
      display:block;
    }

    .process-card:nth-child(2)::after,
    .process-card:nth-child(5)::after{
      content:"";
      position:absolute;
      top: 12%;
      right: calc(-1 * (clamp(18px, 2.2vw, 28px) / 2));
      height: 76%;
      width: 1px;
      background: linear-gradient(
        180deg,
        transparent,
        rgba(18,20,21,.12),
        transparent
      );
      opacity: .55;
      pointer-events:none;
      display:block;
    }

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

      .process-card:nth-child(1)::after,
      .process-card:nth-child(2)::after,
      .process-card:nth-child(4)::after,
      .process-card:nth-child(5)::after{
        display:none !important;
      }

      .process-card{
        min-height: auto;
        padding: 22px 18px 24px;
      }

      @media (hover:none){
        .process-card:hover{
          transform:none;
          box-shadow:none;
          background: transparent;
        }
        .process-card.is-active{
          transform:none;
          box-shadow:none;
          background: rgba(255,255,255,.55);
        }
      }
    }

    .recent-section{
      padding: clamp(70px, 8vw, 120px) 0;
      background: #ffffff;
      position: relative;
      overflow: hidden;
    }

    .recent-section::before{
      content:"";
      position:absolute;
      inset:-2px 0;
      background:
        radial-gradient(900px 520px at 70% 20%, rgba(4,151,178,.06), transparent 60%),
        radial-gradient(900px 520px at 25% 85%, rgba(18,20,21,.05), transparent 62%);
      opacity:.75;
      pointer-events:none;
    }

    .recent-header{
      position:relative;
      z-index:1;
      text-align:center;
      max-width: 860px;
      margin: 0 auto clamp(40px, 5.5vw, 70px);
    }

    .recent-kicker{
      font-size:12px;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:rgba(56,60,62,.55);
      margin-bottom:14px;
      font-weight:700;
    }

    .recent-title{
      margin:0 0 14px;
      font-size: clamp(30px, 3.6vw, 46px);
      line-height:1.15;
      letter-spacing:-.02em;
      font-weight: 800;

      background: var(--grad-black);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      text-wrap: balance;
    }
    .recent-title span{
      background: var(--grad-teal);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .recent-intro{
      margin:0;
      color: rgba(56,60,62,.82);
      font-size: 14px;
      line-height: 1.9;
    }

    .recent-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(16px, 2.2vw, 26px);
      align-items: stretch;
    }

    .recent-card{
      position:relative;
      border-radius: 22px;
      overflow:hidden;
      background: rgba(255,255,255,.35);
      box-shadow: 0 18px 50px rgba(18,20,21,.08);
      transition:
        transform .22s var(--ease),
        box-shadow .22s var(--ease),
        border-color .22s var(--ease),
        background .22s var(--ease);
      min-height: 420px;
      display:grid;
      grid-template-rows: 1fr auto;
    }

    .recent-media{
      position:relative;
      overflow:hidden;
      height: 280px;
      background: rgba(0,0,0,.03);
    }

    .recent-media img{
      width:100%;
      height:100%;
      object-fit: cover;
      transform: scale(1.02);
      transition: transform .38s var(--ease), filter .38s var(--ease);
      user-select:none;
      pointer-events:none;
    }

    .recent-media::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(
        180deg,
        rgba(0,0,0,.00) 40%,
        rgba(0,0,0,.10) 100%
      );
      opacity:.55;
      pointer-events:none;
      transition: opacity .22s var(--ease);
    }

    .recent-body{
      padding: 18px 18px 20px;
      background: rgba(255,255,255,.38);
      backdrop-filter: blur(6px);
    }

    .recent-name{
      margin:0 0 8px;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.01em;

      background: var(--grad-black);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .recent-desc{
      margin:0 0 14px;
      color: rgba(56,60,62,.86);
      font-size: 14px;
      line-height: 1.85;
      max-width: 64ch;
    }

    .recent-tags{
      display:flex;
      flex-wrap:wrap;
      gap: 10px 12px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .recent-tags li{
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .01em;
      color: rgba(56,60,62,.62);
      background: rgba(255,255,255,.0);
    }

    .recent-card:hover{
      transform: translateY(-5px);
      box-shadow: 0 26px 70px rgba(18,20,21,.14);
      border: 1px solid rgba(63, 64, 64, 0.1);
      background: rgba(255,255,255,.48);
    }
    .recent-card:hover .recent-media img{
      transform: scale(1.06);
      filter: saturate(1.02) contrast(1.03);
    }
    .recent-card:hover .recent-media::after{
      opacity:.35;
    }

    .recent-card:focus-within{
      outline: 2px solid rgba(4,151,178,.22);
      outline-offset: 3px;
    }

    @media (max-width: 980px){
      .recent-grid{
        grid-template-columns: 1fr;
      }
      .recent-card{
        min-height: auto;
      }
      .recent-media{
        min-height: 240px;
      }
    }

    @media (hover:none){
      .recent-card:hover{
        transform:none;
        box-shadow: 0 18px 50px rgba(18,20,21,.08);
      }
      .recent-card:hover .recent-media img{
        transform: scale(1.02);
        filter:none;
      }
    }
  /* ========================================================================================================================
   SERVICE PAGE STYLES ENDS HERE || .....
  ======================================================================================================================== */

  /* =========================......
   CONTACT PAGE STYLES STARTS HERE || .....
   ========================== ....*/
    :root{
      /* Uses your poster palette / gradients (already consistent with your site work) */
      --bg-a:#f5f5f7;
      --ink:#121415;
      --muted: rgba(56,60,62,.82);
      --muted2: rgba(56,60,62,.60);
      --line: rgba(18,20,21,.12);
      --teal:#0497b2;

      --shadow: 0 20px 60px rgba(18,20,21,.10);
      --r-xl: 28px;
      --ease: cubic-bezier(.2,.9,.2,1);
      --max-form: 820px;
    }

    /* Section wrapper (no dark section before footer) */
    /* CONTACT section should be transparent so hero bg stays clean */
    #contact-dynamic{   
      position: relative;
      padding: 0 0 clamp(56px, 6.5vw, 84px);
      background: transparent;
      overflow: visible;
    }
    #contact-dynamic::before{ display:none; }

    #contact-dynamic .wrap{
      width: min(var(--max-form), calc(100% - 28px));
      margin-inline: auto;
      position: relative;
      z-index: 1;
    } 

    /* Pull the contact panel upward so it overlaps hero */
#contact-dynamic .wrap{
  margin-top: -110px; /* adjust to taste */
}

/* Keep panel clean */
.contact-panel{
  overflow: visible; /* important: avoid clipping long form */
}

    /* Optional mode pill under hero */
    .contact-mode-pill{
      display:none;
      width: fit-content;
      margin: 14px auto 0;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(4,151,178,.22);
      background: rgba(4,151,178,.08);
      color: rgba(18,20,21,.82);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: -0.01em;
    }
    .contact-mode-pill.is-on{ display:inline-flex; }

    /* Panel */
    .contact-panel{
      margin-top: 22px;
      background: rgba(255,255,255,.65);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(18,20,21,.10);
      border-radius: var(--r-xl);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .contact-panel__inner{
      padding: clamp(18px, 3.2vw, 28px);
    }

    /* Form */
    .contact-form{
      display:grid;
      gap: 14px;
    }

    .contact-row{
      display:grid;
      gap: 8px;
    }

    .contact-label{
      font-size: 11px;
      letter-spacing: .04em;
      text-transform: uppercase;
      font-weight: 800;
      color: rgba(56,60,62,.65);
    }

    .contact-field{
      width: 100%;
      padding: 5px 14px;
      border-radius: 14px;
      border: 1px solid rgba(18,20,21,.12);
      background: rgba(255,255,255,.85);
      outline: none;
      transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
      font: inherit;
      color: inherit;
      font-size: 14px;
    }
    .contact-field:focus{
      border-color: rgba(4,151,178,.35);
      box-shadow: 0 0 0 4px rgba(4,151,178,.12);
      background: #fff;
    }
    textarea.contact-field{
      min-height: 100px;
      resize: vertical;
    }

    .contact-hint{
      margin-top: -2px;
      font-size: 12px;
      color: rgba(56,60,62,.58);
      line-height: 1.6;
    }

    /* Quote fields container (same form, toggled) */
    .contact-quote-fields{
      border-top: 1px solid rgba(18,20,21,.10);
      margin-top: 10px;
      padding-top: 5px;
    }
    .contact-quote-fields.is-collapsed{
      border-top-color: transparent;
      margin-top: 0;
      padding-top: 0;
    }
    .contact-quote-fields .contact-quote-inner{
      display:grid;
      gap: 14px;
      overflow:hidden;
      max-height: 900px;
      opacity: 1;
      transform: translateY(0);
      transition: max-height .26s var(--ease), opacity .18s var(--ease), transform .26s var(--ease);
    }
    .contact-quote-fields.is-collapsed .contact-quote-inner{
      max-height: 0;
      opacity: 0;
      transform: translateY(-6px);
      pointer-events:none;
    }

    /* Actions */
    .contact-actions{
      display:flex;
      gap: 12px;
      align-items:center;
      padding-top: 8px;
      flex-wrap: wrap;
    }

    /* Uses your existing .btn styles, just stabilizes sizing */
    .contact-actions .btn{
      height: 46px;
      min-width: 170px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
    }

    .contact-meta{
      font-size: 12px;
      color: rgba(56,60,62,.58);
      line-height: 1.6;
    }

    @media (max-width: 520px){
      .contact-actions{
        flex-direction: column;
        align-items: stretch;
      }
      .contact-actions .btn{
        width:100%;
        min-width: 0;
      }
    }

  /* ========================================================================================================================
   CONTACT PAGE STYLES ENDS HERE || .....
  ======================================================================================================================== */

  
  /* =========================================================
   MOBILE-FIRST PATCH (Devaign)
   Paste at the very bottom of styles.css
   ========================================================= */

/* 1) Prevent edge-to-edge content on mobile */
@media (max-width: 768px){
  .container,
  .wrap,
  .about-wrap,
  .cf-inner{
    width: min(1120px, calc(100% - 52px)) !important;
  }
}

/* 2) Better type hierarchy on mobile (headings bolder, body slightly smaller) */
@media (max-width: 768px){
  body{
    -webkit-text-size-adjust: 100%;
  }

  .hero-title{
    font-size: clamp(34px, 7.5vw, 44px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
  }

  .hero-lead,
  .lead{
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: rgba(56,60,62,.88) !important; /* darker for readability */
  }

  /* Make normal paragraphs a touch darker too */
  p{
    color: rgba(56,60,62,.86);
  }
}

/* 3) Kill “100vh section” problems on mobile (address bar / vertical space issues) */
@media (max-width: 768px){
  .hero{
    min-height: auto !important;
    height: auto !important;
    padding: 56px 0 40px !important;
  }

  /* Any sections you forced to 100vh: remove it on mobile */
  section[style*="100vh"],
  .our-approach{
    min-height: auto !important;
  }
}

/* 4) HERO spacing: tighten gaps so buttons fit */
@media (max-width: 768px){
  .hero-stack{
    gap: 14px !important;
  }

  .hero-actions{
    gap: 10px !important;
    margin-top: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* Make 2 buttons sit side-by-side when possible */
  .hero-actions .btn{
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
  }
}

/* 5) NAV on mobile: hide top CTA buttons, show logo + burger */
@media (max-width: 768px){
  .nav-actions a.btn{
    display: none !important; /* hides Start a Project + Book a Call in navbar */
  }
  .nav .brand{
    display: inline-flex !important;
  }
  .nav-actions .burger{
    display: inline-flex !important;
  }
}

/* 6) “What we do” cards alignment (center icon + title on mobile) */
@media (max-width: 768px){
  .service-card,
  .services-card,
  .what-we-do-card{
    text-align: center !important;
  }
  .service-card img,
  .service-card svg,
  .service-card .icon{
    margin-inline: auto !important;
  }
}

/* 7) Make “View all services” button sit at bottom on mobile when stacked */
@media (max-width: 768px){
  .what-we-do,
  .services-section{
    display: block !important;
  }
  .services-section .btn,
  .what-we-do .btn{
    margin-top: 18px !important;
  }
}

/* 8) Recent work cards smaller on mobile */
@media (max-width: 768px){
  .work-card,
  .portfolio-card{
    border-radius: 18px !important;
  }
  .work-card img,
  .portfolio-card img{
    height: auto !important;
  }
}

/* 9) CTA meta (Free + 24h) side-by-side on mobile */
@media (max-width: 768px){
  .cta-meta{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    text-align: center !important;
  }
}



.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(18,20,21,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 9998;
}
.modal-overlay.open{
  opacity: 1;
  pointer-events: auto;
}

.modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100% - 24px));
  max-height: min(70vh, 560px);
  overflow: auto;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(18,20,21,.12);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(18,20,21,.20);
}
.modal.open{
  opacity: 1;
  pointer-events: auto;
}



/*please note that the following style swere taken from inline css on individual pages and some might be a 
duplicate/redundant/repeating here and pleaes help out with that and ensure to use this structure for code 
guidance using comments so ensure to note global styles like nav, footer floating whatsapp and every other 
consistent code

this is the code devision style i want you to use especially for pages
THIS IS THE KIND OF SCTRUCTURE I WANT YOU TO ADOPT FOR SECTIONING CODES USING COMMENTS FOR EASIER NAVIGATION AND EMSURE
THAT THEY ARE THIS LONG SO I CAN EASILY SEE COZ IT IS EASY TO PASS THE FOLLOWING COMMENT
/*ABOUT SECTION STYLES*/
/*SO USE THE FOLLOWING STRUCTURE  TO SEPARATE PAGES, SECTIONS AND PARTICULAR CODE EXPLAINATIONS SO THERE ARE 3 TYPES 
FOR PAGE STYLES, SECTION STYLES AND PARTICULAR CODE 
/* ======================================================================================================================
ABOUT PAGE STYLES STARTS HERE  ||  ABOUT PAGE STYLES STARTS HERE  ||  ABOUT PAGE STYLES STARTS HERE  ||  ABOUT PAGE STYLES STARTS HERE    
======================================================================================================================= */

/* ========================================== ABOUT HERO SECTION STARTS HERE ======================================== */
 
/*CODE FOR ...... || CODE FOR.....  || CODE FOR..... UNTIL END OF LINE*/                  /* (FOR PARTICULAR SECTIONS)*/

/********************************************************************
USE THIS DESIGN FOR GLOBAL, AND PAGE/LOCAL DISTINCTIONS
********************************************************************/

/* ======================================================================================================================
LINKS (NON-BUTTON CTAs) STYLES STARTS HERE  ||  LINKS (NON-BUTTON CTAs) STYLES STARTS HERE  ||  LINKS (NON-BUTTON CTAs) 
======================================================================================================================= */
/*SO I WILL JUST PASTE THEM AND THEN YOU WILL STRUCTURE THEM WELL ACCORDING TO ROOT, THEME, TYPOGRAPHY, BUTTON, NAVABR, 
FOOTER CODES AND THEN SPECIFIC PAGE CODES WITH THEIR SECTION AND PARTICULAR CODES AND FOR EACH CODE MENTION WHERE IT STARTS AND ENDS AS I HAVE SHOWN*/

/*THESE WE COPIED FROM ABOUT PAGE*/
<style>
    :root{
      --bg: #f5f5f7;
      --ink: #121415;
      --muted: #a6a6a6;
      --dark2: #383c3e;
      --teal: #0497b2;

      --ease: cubic-bezier(.2,.7,.2,1);

      --about-radius: 22px;
      --about-shadow: 0 18px 55px rgba(18,20,21,.10);
    }

    *{ box-sizing: border-box; }

    /* =========================
       ABOUT (2 SECTIONS ONLY)
       Between HERO and TESTIMONIALS
       ========================== */
    .about-sections{
      padding: clamp(64px, 7vw, 110px) 0;
      background:
        radial-gradient(900px 520px at 80% 18%, rgba(4,151,178,.08), transparent 60%),
        radial-gradient(700px 420px at 20% 78%, rgba(18,20,21,.05), transparent 60%),
        linear-gradient(180deg, var(--bg), var(--bg));
    }

    .about-wrap{
      width: min(1120px, calc(100% - 48px));
      margin: 0 auto;
    }

    .about-row{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(22px, 3.6vw, 64px);
      align-items: start;
      padding: clamp(32px, 3.6vw, 52px);
      border-radius: var(--about-radius);
      background: rgba(255,255,255,.55);
      border: 1px solid rgba(18,20,21,.10);
      box-shadow: var(--about-shadow);
      position: relative;
      overflow: hidden;
    }

    

    .about-left, .about-right{ padding: 6px 8px; }

    .about-kicker{
      margin: 0 0 12px;
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(56,60,62,.58);
      font-weight: 700;
    }

    .about-title{
      margin: 0 0 14px;
      font-size: clamp(28px, 3.1vw, 42px);
      line-height: 1.15;
      letter-spacing: -0.02em;
      font-weight: 800;
      text-wrap: balance;
    }
    .about-title span{ color: var(--teal); }

    .about-copy{
      margin: 0;
      font-size: 14px;
      line-height: 1.95;
      color: rgba(56,60,62,.85);
      max-width: 72ch;
    }

    .about-panel{
      margin-top: 18px;
      border-top: 1px solid rgba(18,20,21,.10);
      padding-top: 16px;
      max-width: 60ch;
    }

    .about-panel__title{
      margin: 0 0 12px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: rgba(18,20,21,.92);
    }

    .about-list{
      list-style: none;
      padding: 0;
      margin: 0;
      display:grid;
      gap: 12px;
    }

    .about-list li{
      position: relative;
      padding-left: 16px;
      font-size: 14px;
      line-height: 1.75;
      color: rgba(56,60,62,.85);
    }

    .about-list li::before{
      content:"";
      position:absolute;
      left:0;
      top: 9px;
      width:6px;
      height:6px;
      border-radius:50%;
      background: var(--teal);
      opacity: .92;
      box-shadow: 0 0 0 4px rgba(4,151,178,.14);
    }

    @media (max-width: 980px){
      .about-row{
        grid-template-columns: 1fr;
        padding: 26px;
      }
    }

    /* =========================
       "WHAT CLIENTS SAY" CAROUSEL CSS (kept)
       ========================== */
    .cf-hero {
      position: relative;
      padding: clamp(32px, 4vw, 64px) 0;
      color: var(--ink);
      background:
        radial-gradient(900px 480px at 80% 30%, rgba(4,151,178,.10), transparent 60%),
        radial-gradient(700px 380px at 30% 40%, rgba(18,20,21,.06), transparent 58%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg) 60%, rgba(18,20,21,.02) 100%);
      overflow: hidden;
      height: fit-content;
      margin-bottom: 10%;
    }

    .cf-inner {
      width: min(1120px, calc(100% - 48px));
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: clamp(22px, 3vw, 42px);
      align-items: center;
    }

    .cf-title {
      margin: 0 0 14px;
      font-size: clamp(34px, 4vw, 54px);
      line-height: 1.05;
      letter-spacing: -0.02em;
      font-weight: 700;
      color: var(--ink);
    }
    .cf-title span{ color: var(--teal); }

    .cf-sub {
      margin-top: 30px;
      max-width: 52ch;
      color: rgba(56,60,62,.88);
      font-size: 14px;
      line-height: 1.6;
    }
    .cf-hi{ color: var(--teal); font-weight: 600; }

    /* consistent link row */
    .cta-links{
      display:flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 12px;
    }

    .cta-link{
      display:inline-flex;
      gap: 8px;
      align-items:center;
      text-decoration: none;
      font-weight: 600;
      transition: transform .18s var(--ease), color .18s var(--ease);
      margin-top: 20px;
    }

    .cta-link .arrow{
      transition: transform .18s var(--ease);
    }

    .cta-link:hover{
      transform: translateY(-1px);
    }

    .cta-link:hover .arrow{
      transform: translateX(3px);
    }

    .cta-link.primary{
      color: rgba(18,20,21,.92);
      margin-right: 27%;
    }
    .cta-link.primary:hover{
      color: var(--teal);
    }

    .cta-link.alt{
      color: var(--teal);
    }
    .cta-link.alt:hover{
      color: rgba(18,20,21,.92);
    }

    .cf-right { position: relative; min-height: 380px; }
    .cf-glow {
      position: absolute;
      inset: -120px -120px -120px -120px;
      background: radial-gradient(closest-side at 70% 30%, rgba(4,151,178,.10), transparent 70%);
      pointer-events: none;
      opacity: .65;
    }

    .cf-carousel { position: relative; height: 420px; display: grid; place-items: center; }

    .cf-viewport {
      width: min(760px, 100%);
      height: 340px;
      position: relative;
      overflow: hidden;
      border-radius: 22px;
      mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    }

    .cf-track {
      display: flex;
      height: 100%;
      gap: 18px;
      will-change: transform;
      transform: translateX(0);
      align-items: center;
    }

    .cf-card {
      flex: 0 0 520px;
      height: 100%;
      border-radius: 22px;
      padding: 36px 34px;
      background: linear-gradient(180deg, rgba(237, 237, 237, 0.85), rgba(245,245,247,.70));
      border: 1px solid rgba(18,20,21,.10);
      box-shadow: 0 22px 60px rgba(18,20,21,.10);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      text-align: center;
    }

    .cf-card.is-dim { opacity: .92; }

    .cf-quote {
      margin-top: 20px;
      padding: 40px 10px;
      font-size: 22px;
      line-height: 1.55;
      color: rgba(18,20,21,.92);
      letter-spacing: -0.01em;
      text-wrap: balance;
    }

    .cf-stars {
      margin-top: 9px;
      margin-bottom: 10px;
      font-size: 12px;
      letter-spacing: .14em;
      color: var(--teal);
    }

    .cf-name {
      margin-top: -17px;
      font-size: 17px;
      font-weight: 500;
      letter-spacing: .10em;
      text-transform: uppercase;
      color: rgba(56,60,62,.78);
      opacity: .48;
    }

    .cf-dots {
      position: absolute;
      right: -40px;
      top: 20px;
      width: 320px;
      height: 320px;
      background-image: radial-gradient(rgba(18,20,21,.28) 1px, transparent 1px);
      background-size: 10px 10px;
      opacity: .14;
      pointer-events: none;
      mask-image: radial-gradient(circle at 40% 40%, #000 0%, transparent 62%);
    }

    .cf-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      border-radius: 999px;
      border: 1px solid rgba(18,20,21,.14);
      background: rgba(245,245,247,.75);
      color: rgba(18,20,21,.70);
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: transform .16s ease, background .16s ease, border-color .16s ease;
      z-index: 3;
    }
    .cf-nav:hover {
      transform: translateY(-50%) scale(1.04);
      background: rgba(245,245,247,.92);
      border-color: rgba(18,20,21,.22);
    }
    .cf-prev { left: -10px; }
    .cf-next { right: -10px; }

    @media (max-width: 980px) {
      .cf-inner { grid-template-columns: 1fr; }
      .cf-right { min-height: 420px; }
    }
    @media (max-width: 780px) {
      .cf-nav { display: none; }
      .cf-viewport { width: 100%; }
      .cf-card { flex-basis: 86%; }
      .cf-quote { font-size: 18px; }
    }

    /* =========================
   ABOUT — CLEAN STRUCTURE
========================= */

.about-section{
  padding: clamp(70px, 8vw, 120px) 0;
}

.about-inner{
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
}

.about-header{
  max-width: 760px;
  margin-bottom: clamp(40px, 4vw, 70px);
}

.about-header h2{
  font-size: clamp(30px, 3.5vw, 44px);
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.about-header p{
  font-size: 15px;
  line-height: 1.9;
  color: rgba(56,60,62,.82);
}

.about-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px);
}

.about-item span.about-tag{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
}

.about-item h3{
  margin: 8px 0 8px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.about-item p{
  margin:0;
  font-size:14px;
  line-height:1.85;
  color: rgba(56,60,62,.80);
}

.about-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 4vw, 70px);
}

.about-split h2{
  font-size: clamp(26px, 3vw, 36px);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.about-split p{
  font-size:14px;
  line-height:1.9;
  color: rgba(56,60,62,.82);
  margin-bottom: 18px;
}

.about-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.about-list li{
  font-size:14px;
  line-height:1.8;
  color: rgba(56,60,62,.85);
  padding-left:16px;
  position:relative;
}

.about-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background: var(--teal);
}

/* Responsive */
@media (max-width: 980px){
  .about-grid{
    grid-template-columns: 1fr;
  }
  .about-split{
    grid-template-columns: 1fr;
  }
}
  </style>

   



  /*THESE WERE COPIED FROM SERVICES PAGE*/
   <style>
    :root{
      --bg:#f5f5f7;
      --ink:#121415;
      --dark2:#383c3e;
      --muted:#a6a6a6;
      --teal:#0497b2;
      --tealSoft: rgba(4,151,178,.16);
      --tealSoft2: rgba(4,151,178,.10);

      --cardShadow: 0 18px 50px rgba(18,20,21,.10);
      --radius: 22px;
      --shadow: 0 18px 50px rgba(18,20,21,.10);
      --card: rgba(255,255,255,.55);
      --ease: cubic-bezier(.2,.7,.2,1);
    }
    :root{
      --ink:#121415;
      --muted: rgba(56,60,62,.84);
      --line: rgba(18,20,21,.10);

      /* Poster palette */
      --bg-a:linear-gradient(90deg, #ffffff 0%, #e9e9ea 100%);
      --bg-b:linear-gradient(90deg, #cecece 0%, #e9e9ea 100%);
      --bg-c:#b8b8b8;

      /* Bullet / accent */
      --bullet:#0497b2;

      /* Heading gradients */
      --grad-black: linear-gradient(90deg, #3b3b3b 0%, #575757 100%);
      --grad-teal:  linear-gradient(90deg, #0d8aa6 0%, #10b4c7 100%);

      --shadow: 0 18px 50px rgba(18,20,21,.10);

      --r-xl: 30px;
      --r-lg: 22px;

      --max: 1160px;
      --ease: cubic-bezier(.2,.9,.2,1);
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: var(--bg);
      color: var(--ink);
    }
    a{ color: inherit; }

    .wrap{
      width: min(1120px, calc(100% - 28px));
      margin: 0 auto;
    }

    *{ box-sizing:border-box; }
    html,body{ margin:0; padding:0; }
    body{
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg-a);
      color: var(--ink);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      overflow-x:hidden;
    }
    img{ max-width:100%; display:block; }
    a{ color: inherit; text-decoration:none; }

    .ds-wrap{
      width: min(var(--max), calc(100% - 28px));
      margin-inline: auto;
    }

    /* Each service block has its own background (alternating as requested) */
    .ds-block{
      padding: clamp(56px, 7vw, 110px) 0;
      position: relative;
      overflow: hidden;
      background: var(--bg-a);
    }
    #brand-identity-section{ background: var(--bg-a); }
    #website-design-section{ background: var(--bg-b); }
    #graphic-design-section{ background: var(--bg-a); }
    #launch-kit-section{ background: var(--bg-b); }

    /* Soft top/bottom fade edges so sections feel premium */
    .ds-block::before{
      content:"";
      position:absolute;
      inset:-2px 0;
      background:
        radial-gradient(900px 520px at 70% 20%, rgba(4,151,178,.06), transparent 60%),
        radial-gradient(900px 520px at 25% 85%, rgba(18,20,21,.05), transparent 62%);
      opacity: .75;
      pointer-events:none;
    }

    /* Content grid */
    .ds-grid{
      position: relative;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(28px, 4vw, 68px);
      align-items: start;
      z-index: 1; /* above section ::before */
      transition: transform .22s var(--ease);
    }

    /* Subtle vertical divider like your overview */
    .ds-grid::after{
      content:"";
      position:absolute;
      top: 8px;
      bottom: 8px;
      left: 50%;
      width: 1px;
      background: linear-gradient(180deg, transparent, rgba(18,20,21,.10), transparent);
      opacity: .5;
      pointer-events:none;
      transform: translateX(-.5px);
      transition: opacity .22s var(--ease);
    }

    /* Flip layout */
    .ds-block.ds-flip .ds-left{ order: 2; }
    .ds-block.ds-flip .ds-right{ order: 1; }

    /* LEFT column: centered */
    .ds-left{
      padding-top: 6px;
      display:grid;
      justify-items:center;
      text-align:center;
      gap: 14px;
    }

    .ds-icon{
      width: 92px;
      height: 92px;
      display:grid;
      place-items:center;
    }
    .ds-icon img{
      width: 92px;
      height: 92px;
      object-fit: contain;
      object-position: center;
      user-select:none;
      pointer-events:none;
    }

    .ds-title{
      margin: 2px 0 0;
      font-size: clamp(34px, 3.8vw, 56px);
      letter-spacing: -0.03em;
      line-height: 1.06;
      font-weight: 800;
      text-wrap: balance;

      background: var(--grad-black);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .ds-title span{
      background: var(--grad-teal);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      padding-bottom: 2px;
    }

    .ds-subtitle{
      margin: 0;
      max-width: 44ch;
      color: rgba(56,60,62,.82);
      line-height: 1.9;
      font-size: 14px;
    }

    .ds-cta{
      margin-top: 12px;
      width: fit-content;
      display:inline-flex;
      align-items:center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 999px;
      border: 1px solid rgba(18,20,21,.12);
      background: rgba(255,255,255,.55);
      color: rgba(18,20,21,.90);
      font-weight: 600;
      letter-spacing: -0.01em;
      transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
      white-space: nowrap;
      height: 44px;
    }
    .ds-cta .arr{
      color: var(--bullet);
      display:inline-block;
      transition: transform .18s var(--ease);
    }
    .ds-cta:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.78);
      border-color: rgba(4,151,178,.25);
      box-shadow: 0 14px 34px rgba(18,20,21,.10);
    }
    .ds-cta:hover .arr{ transform: translateX(4px); }

    .ds-right{
      padding-top: 12px;
    }

    .ds-right-lead{
      margin: 0 0 14px;
      color: rgba(56,60,62,.86);
      font-size: 15px;
      line-height: 1.9;
      max-width: 72ch;
    }

    .ds-right-label{
      margin: 18px 0 10px;
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(56,60,62,.55);
      font-weight: 800;
    }

    .ds-list{
      margin: 0;
      padding: 0;
      list-style: none;
      display:grid;
      gap: 10px;
    }

    .ds-list li{
      position: relative;
      padding-left: 26px;
      color: rgba(56,60,62,.84);
      font-size: 14px;
      line-height: 1.75;
    }

    .ds-list li::before{
      content:"";
      position:absolute;
      left: 0;
      top: 10px;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--bullet);
      box-shadow: 0 0 0 2px rgba(4,151,178,.14);
    }

    .ds-note{
      margin-top: 14px;
      color: rgba(56,60,62,.78);
      font-size: 14px;
      line-height: 1.85;
    }

    .ds-block:hover .ds-grid{
      transform: translateY(-1px);
    }
    .ds-block:hover .ds-grid::after{
      opacity: .75;
    }

    @media (max-width: 980px){
      .ds-grid{
        grid-template-columns: 1fr;
        gap: 18px;
      }
      .ds-grid::after{ display:none; }
      .ds-block.ds-flip .ds-left,
      .ds-block.ds-flip .ds-right{ order: 0; }
      .ds-left{ align-items:center; }
      .ds-subtitle{ max-width: 60ch; }
    }

    /* =========================
       PROCESS SECTION
       ========================= */
    .process-section{
      padding: clamp(70px, 8vw, 120px) 0;
      background: var(--bg-a);
      position: relative;
      overflow: hidden;
    }

    .process-section::before{
      content:"";
      position:absolute;
      inset:-2px 0;
      background:
        radial-gradient(900px 520px at 70% 20%, rgba(4,151,178,.06), transparent 60%),
        radial-gradient(900px 520px at 25% 85%, rgba(18,20,21,.05), transparent 62%);
      opacity:.75;
      pointer-events:none;
    }

    .process-header{
      position:relative;
      z-index:1;
      text-align:center;
      max-width: 820px;
      margin: 0 auto clamp(46px, 6vw, 78px);
    }

    .process-kicker{
      font-size:12px;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:rgba(56,60,62,.55);
      margin-bottom:14px;
      font-weight:700;
    }

    .process-title{
      margin:0 0 14px;
      font-size: clamp(30px, 3.6vw, 46px);
      line-height:1.15;
      letter-spacing:-.02em;
      font-weight: 800;

      background: var(--grad-black);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      text-wrap: balance;
    }
    .process-title span{
      background: var(--grad-teal);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .process-intro{
      margin:0;
      color: rgba(56,60,62,.82);
      font-size: 14px;
      line-height: 1.9;
    }

    .process-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(18px, 2.2vw, 28px);
      align-items: stretch;
    }

    .process-grid::after{
      content:"";
      position:absolute;
      inset: 0;
      pointer-events:none;
      z-index: 3;
    }

    .process-grid::after{
      background: none;
    }

    .process-divider{
      position:absolute;
      width: 1px;
      background: linear-gradient(
        180deg,
        transparent,
        rgba(18,20,21,.12),
        transparent
      );
      opacity: .55;
      pointer-events:none;
      z-index: 3;
    }

    .process-divider.row-1{ top: 0; height: calc((100% - clamp(18px, 2.2vw, 28px)) / 2); }
    .process-divider.row-2{ bottom: 0; height: calc((100% - clamp(18px, 2.2vw, 28px)) / 2); }

    .process-divider.d1{
      left: calc(
        ((100% - (2 * clamp(18px, 2.2vw, 28px))) / 3)
        + (clamp(18px, 2.2vw, 28px) / 2)
      );
    }
    .process-divider.d2{
      left: calc(
        (2 * ((100% - (2 * clamp(18px, 2.2vw, 28px))) / 3))
        + (3 * (clamp(18px, 2.2vw, 28px) / 2))
      );
    }
    @media (max-width: 980px){
      .process-divider{ display:none !important; }
    }

    .process-card{
      position: relative;
      padding: 26px 22px 28px;
      border-radius: 18px;
      border-top: 1px solid rgba(18,20,21,.12);
      border-bottom: 1px solid rgba(18,20,21,.12);
      transition:
        transform .22s var(--ease),
        box-shadow .22s var(--ease),
        background .22s var(--ease),
        border-color .22s var(--ease);
      background: rgba(255,255,255,.0);
      min-height: 230px;
      display:grid;
      justify-items:center;
      text-align:center;
      overflow:hidden;
    }

    .process-card:hover{
      background: rgba(255,255,255,.65);
      box-shadow: 0 20px 60px rgba(18,20,21,.10);
      transform: translateY(-4px);
      border-top-color: rgba(4,151,178,.16);
      border-bottom-color: rgba(4,151,178,.16);
    }

    .process-card.is-active{
      background: rgba(255,255,255,.65);
      box-shadow: 0 20px 60px rgba(18,20,21,.10);
      transform: translateY(-4px);
      border-top-color: rgba(4,151,178,.16);
      border-bottom-color: rgba(4,151,178,.16);
    }

    .process-num{
      width: 92px;
      height: 92px;
      display:grid;
      place-items:center;
      margin-bottom: 14px;
      position: relative;
    }
    .process-num span{
      font-weight: 800;
      font-size: 64px;
      letter-spacing: -0.04em;
      line-height:1;
      background: var(--grad-black);
      -webkit-background-clip:text;
      background-clip:text;
      color: transparent;
      opacity: .15;
    }

    .process-step-title{
      margin-top: -20px;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.01em;
      background: var(--grad-black);
      -webkit-background-clip:text;
      background-clip:text;
      color: transparent;
    }

    .process-step-text{
      margin:0;
      font-size: 14px;
      line-height: 1.85;
      color: rgba(56,60,62,.85);
      max-width: 42ch;
    }

    .process-card::after{ display:none; }

    .process-card:nth-child(1)::after,
    .process-card:nth-child(4)::after{
      content:"";
      position:absolute;
      top: 12%;
      right: calc(-1 * (clamp(18px, 2.2vw, 28px) / 2));
      height: 76%;
      width: 1px;
      background: linear-gradient(
        180deg,
        transparent,
        rgba(18,20,21,.12),
        transparent
      );
      opacity: .55;
      pointer-events:none;
      display:block;
    }

    .process-card:nth-child(2)::after,
    .process-card:nth-child(5)::after{
      content:"";
      position:absolute;
      top: 12%;
      right: calc(-1 * (clamp(18px, 2.2vw, 28px) / 2));
      height: 76%;
      width: 1px;
      background: linear-gradient(
        180deg,
        transparent,
        rgba(18,20,21,.12),
        transparent
      );
      opacity: .55;
      pointer-events:none;
      display:block;
    }

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

      .process-card:nth-child(1)::after,
      .process-card:nth-child(2)::after,
      .process-card:nth-child(4)::after,
      .process-card:nth-child(5)::after{
        display:none !important;
      }

      .process-card{
        min-height: auto;
        padding: 22px 18px 24px;
      }

      @media (hover:none){
        .process-card:hover{
          transform:none;
          box-shadow:none;
          background: transparent;
        }
        .process-card.is-active{
          transform:none;
          box-shadow:none;
          background: rgba(255,255,255,.55);
        }
      }
    }

    .recent-section{
      padding: clamp(70px, 8vw, 120px) 0;
      background: #ffffff;
      position: relative;
      overflow: hidden;
    }

    .recent-section::before{
      content:"";
      position:absolute;
      inset:-2px 0;
      background:
        radial-gradient(900px 520px at 70% 20%, rgba(4,151,178,.06), transparent 60%),
        radial-gradient(900px 520px at 25% 85%, rgba(18,20,21,.05), transparent 62%);
      opacity:.75;
      pointer-events:none;
    }

    .recent-header{
      position:relative;
      z-index:1;
      text-align:center;
      max-width: 860px;
      margin: 0 auto clamp(40px, 5.5vw, 70px);
    }

    .recent-kicker{
      font-size:12px;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:rgba(56,60,62,.55);
      margin-bottom:14px;
      font-weight:700;
    }

    .recent-title{
      margin:0 0 14px;
      font-size: clamp(30px, 3.6vw, 46px);
      line-height:1.15;
      letter-spacing:-.02em;
      font-weight: 800;

      background: var(--grad-black);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      text-wrap: balance;
    }
    .recent-title span{
      background: var(--grad-teal);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .recent-intro{
      margin:0;
      color: rgba(56,60,62,.82);
      font-size: 14px;
      line-height: 1.9;
    }

    .recent-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(16px, 2.2vw, 26px);
      align-items: stretch;
    }

    .recent-card{
      position:relative;
      border-radius: 22px;
      overflow:hidden;
      background: rgba(255,255,255,.35);
      box-shadow: 0 18px 50px rgba(18,20,21,.08);
      transition:
        transform .22s var(--ease),
        box-shadow .22s var(--ease),
        border-color .22s var(--ease),
        background .22s var(--ease);
      min-height: 420px;
      display:grid;
      grid-template-rows: 1fr auto;
    }

    .recent-media{
      position:relative;
      overflow:hidden;
      height: 280px;
      background: rgba(0,0,0,.03);
    }

    .recent-media img{
      width:100%;
      height:100%;
      object-fit: cover;
      transform: scale(1.02);
      transition: transform .38s var(--ease), filter .38s var(--ease);
      user-select:none;
      pointer-events:none;
    }

    .recent-media::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(
        180deg,
        rgba(0,0,0,.00) 40%,
        rgba(0,0,0,.10) 100%
      );
      opacity:.55;
      pointer-events:none;
      transition: opacity .22s var(--ease);
    }

    .recent-body{
      padding: 18px 18px 20px;
      background: rgba(255,255,255,.38);
      backdrop-filter: blur(6px);
    }

    .recent-name{
      margin:0 0 8px;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.01em;

      background: var(--grad-black);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .recent-desc{
      margin:0 0 14px;
      color: rgba(56,60,62,.86);
      font-size: 14px;
      line-height: 1.85;
      max-width: 64ch;
    }

    .recent-tags{
      display:flex;
      flex-wrap:wrap;
      gap: 10px 12px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .recent-tags li{
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .01em;
      color: rgba(56,60,62,.62);
      background: rgba(255,255,255,.0);
    }

    .recent-card:hover{
      transform: translateY(-5px);
      box-shadow: 0 26px 70px rgba(18,20,21,.14);
      border: 1px solid rgba(63, 64, 64, 0.1);
      background: rgba(255,255,255,.48);
    }
    .recent-card:hover .recent-media img{
      transform: scale(1.06);
      filter: saturate(1.02) contrast(1.03);
    }
    .recent-card:hover .recent-media::after{
      opacity:.35;
    }

    .recent-card:focus-within{
      outline: 2px solid rgba(4,151,178,.22);
      outline-offset: 3px;
    }

    @media (max-width: 980px){
      .recent-grid{
        grid-template-columns: 1fr;
      }
      .recent-card{
        min-height: auto;
      }
      .recent-media{
        min-height: 240px;
      }
    }

    @media (hover:none){
      .recent-card:hover{
        transform:none;
        box-shadow: 0 18px 50px rgba(18,20,21,.08);
      }
      .recent-card:hover .recent-media img{
        transform: scale(1.02);
        filter:none;
      }
    }
  </style>



    /*THESE WERE CPIED FROM CONTACT PAGE*/

     <style>
    :root{
      --bg-a:#f5f5f7;
      --ink:#121415;
      --muted: rgba(56,60,62,.80);
      --muted2: rgba(56,60,62,.60);
      --line: rgba(18,20,21,.12);
      --teal:#0497b2;

      --shadow: 0 20px 60px rgba(18,20,21,.10);
      --shadow2: 0 14px 40px rgba(18,20,21,.10);
      --r-xl: 28px;
      --r-lg: 20px;
      --ease: cubic-bezier(.2,.9,.2,1);

      --max: 1120px;
      --form-max: 720px; /* default */
      --quote-max: 760px; /* dynamic */
    }

    /* Keep hero shorter on contact page */
    body.contact-page .hero{
      min-height: auto !important;
      padding-bottom: clamp(36px, 7vw, 84px) !important;
    }
    body.contact-page .hero-actions{
      display:none !important; /* remove hero CTAs */
    }

    /* Contact section overlays hero background (not underneath) */
    #contact-dynamic{
      position: relative;
      padding: 0 0 clamp(56px, 6.5vw, 84px);
      background: transparent; /* important */
      margin-top: clamp(-56px, -7vw, -84px); /* pulls upward onto hero */
      z-index: 5;
    }

    .contact-wrap{
      width: min(var(--max), calc(100% - 28px));
      margin-inline: auto;
      position: relative;
      z-index: 5;
    }

    /* Default layout: 2 columns (form + info) */
    .contact-grid{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(18px, 3vw, 42px);
  align-items: start;
}

/* “No card” feel – just dividers + hover */
.contact-side-title{
  margin: 0 0 10px;
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.02em;
}
.contact-side-copy{
  margin: 0 0 18px;
  color: rgba(56,60,62,.82);
  line-height: 1.7;
}

.contact-direct{
  display: grid;
  gap: 10px;
}

.contact-direct-item{
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  padding: 12px 10px;
  border-bottom: 1px solid rgba(18,20,21,.12);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, background .18s ease;
}
.contact-direct-item:hover{
  background: rgba(255,255,255,.45);
  transform: translateY(-1px);
  border-radius: 14px;
}

.contact-direct-icon{
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(18,20,21,.12);
  background: rgba(255,255,255,.55);
}

.contact-direct-label{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(56,60,62,.60);
  font-weight: 800;
}
.contact-direct-value{
  color: rgba(18,20,21,.88);
  font-weight: 600;
}

.contact-social-row{
  display: flex;
  gap: 12px;
  margin-top: 16px;
  align-items: center;
}
.contact-social{
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(18,20,21,.12);
  background: rgba(255,255,255,.45);
  color: rgba(18,20,21,.78);
  transition: transform .18s ease, background .18s ease;
}
.contact-social:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.70);
}

/* MOBILE: form first, get in touch below */
@media (max-width: 900px){
  .contact-grid{
    grid-template-columns: 1fr;
  }
  .contact-panel{ order: 1; }
  .contact-side{ order: 2; }
}

    /* Quote mode: centered single column, wider (~60%) */
    body.is-quote .contact-grid{
      grid-template-columns: 1fr;
      justify-items: center;
    }
    body.is-quote .contact-panel{
      width: min(60%, var(--quote-max));
      max-width: 100%;
    }
    body.is-quote .contact-info{
      display:none;
    }

    /* Form panel */
    .contact-panel{
      width: min(100%, var(--form-max));
      background: rgba(255,255,255,.70);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(18,20,21,.10);
      border-radius: var(--r-xl);
      box-shadow: var(--shadow);
      overflow: visible;
    }
    .contact-panel__inner{
      padding: clamp(18px, 3.2vw, 30px);
    }

    /* Form */
    .contact-form{ display:grid; gap: 14px; }
    .contact-row{ display:grid; gap: 8px; }

    .contact-label{
      font-size: 11px;
      letter-spacing: .04em;
      text-transform: uppercase;
      font-weight: 800;
      color: rgba(56,60,62,.62);
    }

    .contact-field{
      width: 100%; 
      padding: 5px 14px;
      border-radius: 14px;
      border: 1px solid rgba(18,20,21,.12);
      background: rgba(255,255,255,.92);
      outline: none;
      transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
      font: inherit;
      color: inherit;
      font-size: 14px;
    }
    .contact-field:focus{
      border-color: rgba(4,151,178,.35);
      box-shadow: 0 0 0 4px rgba(4,151,178,.12);
      background: #fff;
    }
    textarea.contact-field{ min-height: 100px; resize: vertical; }

    .contact-hint{
      margin-top: -2px;
      font-size: 12px;
      color: rgba(56,60,62,.58);
      line-height: 1.6;
    }

    /* Only use 2-column where you approved */
    .grid-2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    /* Quote block show/hide (no clipping) */
    .contact-quote-fields{ margin-top: 6px; }
    .contact-quote-fields.is-collapsed{ display:none; }
    .contact-quote-inner{
      display:grid;
      gap: 14px;
      padding-top: 5px;
      border-top: 1px solid rgba(18,20,21,.10);
    }

    /* Goals in 2 columns */
    .goal-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 12px;
      padding: 4px 0 0;
    }
    .goal-grid label{
      display:flex;
      gap: 10px;
      align-items: flex-start;
      font-size: 14px;
      color: rgba(18,20,21,.78);
    }
    .goal-grid input{ transform: translateY(2px); }

    /* Actions */
    .contact-actions{
      display:flex;
      gap: 12px;
      align-items:center;
      padding-top: 10px;
      flex-wrap: wrap;
    }
    .contact-actions .btn{
      height: 46px;
      min-width: 170px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
    }
    .contact-meta{
      font-size: 12px;
      color: rgba(56,60,62,.58);
      line-height: 1.6;
    }

    /* Right info (DEFAULT only) — no cards, dividers, hover */
    .contact-info{
      padding-top: 160px;
    }
    .contact-info h2{
      margin: 0 0 10px;
      font-size: clamp(22px, 2.2vw, 30px);
      letter-spacing: -0.02em;
    }
    .contact-info p{
      margin: 0 0 18px;
      color: rgba(56,60,62,.72);
      line-height: 1.7;
      max-width: 60ch;
      margin-bottom: 40px;
    }

    .info-rows{
      border-top: 1px solid rgba(18,20,21,.10);
    }

    .info-row{
      display:flex;
      align-items:center;
      gap: 12px;
      padding: 14px 2px;
      border-bottom: 1px solid rgba(18,20,21,.10);
      color: rgba(18,20,21,.82);
      text-decoration:none;
      transition: background .16s var(--ease), transform .16s var(--ease);
      border-radius: 14px;
      margin-bottom: 20px;
    }
    .info-row:hover{
      background: rgba(255,255,255,.55);
      transform: translateY(-1px);
    }
    .info-ico{
      width: 38px; height: 38px;
      border-radius: 12px;
      display:flex; align-items:center; justify-content:center;
      border: 1px solid rgba(18,20,21,.10);
      color: rgba(18,20,21,.78);
      flex: 0 0 auto;
    }
    .info-text b{
      display:block;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: rgba(56, 60, 62, 0.451);
      margin-bottom: 4px;
    }
    .info-text span{
      font-weight: 600;
      color: rgba(18,20,21,.86);
    }

    /* Email + Call in 2 columns */
    .info-grid-2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 8px;
    }

    /* WhatsApp + Social (no cards) */
    .social-row{
      display:flex;
      gap: 40px;
      align-items:center;
      flex-wrap: wrap;
      margin-left: 10px;
      /*border-bottom: 1px solid rgba(18,20,21,.10);
      border-radius: 14px;*/
    }
    .social-btn{
      width: 42px; height: 42px;
      border-radius: 14px;
      display:flex; align-items:center; 
      justify-content:center;
      color: rgba(18,20,21,.78);
      text-decoration:none;
      margin-left: 5px;
      transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
    }
    .social-btn:hover{
      transform: translateY(-1px);
      border-color: rgba(4,151,178,.30);
      box-shadow: var(--shadow2);
    }

    /* Modal (no freezing) */
    .modal-overlay{
      position: fixed;
      inset: 0;
      background: rgba(18,20,21,.55);
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s var(--ease);
      z-index: 9998;
    }
    .modal-overlay.open{ opacity: 1; pointer-events: auto; }

    .modal{
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(.98);
      width: min(520px, calc(100% - 28px));
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(10px);
      box-shadow: 0 30px 90px rgba(18,20,21,.22);
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s var(--ease), transform .18s var(--ease);
      z-index: 9999;
      padding: 18px;
    }
    .modal.open{
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, -50%) scale(1);
    }
    .modal__close{
      position:absolute;
      right: 12px;
      top: 10px;
      width: 36px;
      height: 36px;
      border-radius: 12px;
      border: 1px solid rgba(18,20,21,.10);
      background: rgba(255,255,255,.85);
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
    }
    body.no-scroll{ overflow: hidden !important; height: 100%; }

    /* Mobile */
    @media (max-width: 980px){
      .contact-grid{ grid-template-columns: 1fr; }
      body.is-quote .contact-panel{ width: 100%; }
      .info-grid-2{ grid-template-columns: 1fr; }
    }
    @media (max-width: 640px){
      .grid-2{ grid-template-columns: 1fr; }
      .goal-grid{ grid-template-columns: 1fr; }
    }
    /* ✅ CONTACT: stop the SECTION from painting any background on top of the hero */
#contact-dynamic,
#contact-dynamic.section{
  background: transparent !important;
  overflow: visible !important; /* allow the card to sit over hero without clipping */
}

/* ✅ remove the old blurred/radial overlay layer completely */
#contact-dynamic::before{
  content: none !important;
  display: none !important;
}

/* ✅ only the CARD overlaps the hero (not the whole section) */
#contact-dynamic .contact-panel{
  margin-top: clamp(-56px, -7vw, -84px);   /* pull the card upward */
  transform: none !important;              /* if you previously used transform */
}
  </style>



/*PLEASE NOTE YES I ADDED SCRIPT CODES HERE, THOSE THAT SHOULD BELONG TO THE GLOBAL JS YOU WILL ADD THEM THERE AND 
THOSE THAT SHOULD BE KEPT IN THE SPECIFIC PAGES PLEASE NOTE THEM AND ALSO THE REASON WHY I ADDED THESE AS WELL IS 
BECAUSE I WANT YOU TO DOUCLE CHECK AND ENSURE THAT YOU DO NOT CUASE CONFLICT WHEN MAKING CHAMES TO CHE JS CODE AND 
PLEASE REMEMBER SOMTHING THAT THESE 2 FILES STYLES AND SCTIPT ARE GLOBAL FILES THEY COVER ALL 4 PAGES CURRENTLY */


/* ======================================================================================================================
MOBILE NAVBAR FIXES (<= 600px)  ||  MOBILE NAVBAR FIXES (<= 600px)  ||  MOBILE NAVBAR FIXES (<= 600px)
======================================================================================================================= */
@media (max-width: 600px){
  .nav-inner{
    gap: 10px;
    padding: 10px 0;
  }

  .nav .brand img{
    height: 24px;
    width: auto;
  }

  /* Hide top CTAs in navbar on small screens (user requested) */
  .nav-actions a.btn{
    display:none !important;
  }

  /* Burger stays on the far right */
  .nav-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }

  .burger{
    margin-right:2% ;
  }
}



/* ======================================================================================================================
GLOBAL MOBILE PADDING (<= 600px)  ||  GLOBAL MOBILE PADDING (<= 600px)
======================================================================================================================= */
@media (max-width: 600px){
  .container{
    width: min(1120px, calc(100% - 28px));
  }
}



/* ======================================================================================================================
VIEWPORT HEIGHT SAFETY (MOBILE)  ||  VIEWPORT HEIGHT SAFETY (MOBILE)
Use svh/dvh so sections don't "jump" due to mobile browser UI.
======================================================================================================================= */
:root{
  --vh-safe: 100svh;
}
@supports (height: 100dvh){
  :root{ --vh-safe: 100dvh; }
}
/* Use this utility where you previously used height:100vh */
.vh-safe{
  min-height: var(--vh-safe);
}



.whatsapp-float i{
  font-size: 20px;
  line-height: 1;
}/* if SVG still exists, hide it when using FA */






/* ======================================================================================================================
TYPOGRAPHY — MOBILE CONTRAST (<= 600px)  ||  TYPOGRAPHY — MOBILE CONTRAST (<= 600px)
Fix "everything looks the same weight" by enforcing hierarchy.
======================================================================================================================= */
@media (max-width: 600px){
  h1, .hero-title{ font-weight: 800; letter-spacing: -0.02em; }
  h2{ font-weight: 700; }
  h3{ font-weight: 700; }
  .lead, .hero-lead{ font-size: 14px; line-height: 1.75; }
  .hero-title{ font-size: clamp(34px, 9vw, 46px); }
}

/* ========================= CALENDLY MODAL ========================= */
.cal-modal{
  position: fixed; inset: 0;
  display:none;
  z-index: 3000;
}
.cal-modal.open{ display:block; }

.cal-modal-backdrop{
  position:absolute; inset:0;
  background: rgba(18,20,21,.55);
}

.cal-modal-panel{
  position: relative;
  width: min(920px, calc(100% - 28px));
  height: min(680px, calc(100svh - 120px));
  margin: 60px auto;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(18,20,21,.25);
}

.cal-modal-close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 0;
  background: rgba(18,20,21,.08);
  cursor:pointer;
  font-size: 22px;
  line-height: 38px;
}

.cal-iframe{
  width: 100%;
  height: 100%;
  border: 0;
}