/* ==========================================================================
   SABIA MAIN STYLES - CLS & REFLOW HARDENED
   ========================================================================== */
   :root {
    --color-primary: #0A6E6E;
    --color-primary-dark: #085858;
    --color-primary-light: #0C8484;
    --color-accent: #D4A84B;
    --color-accent-dark: #B8923F;
    --color-accent-light: #E5C06A;
    --color-nano-pop: #D4E157;
    --gradient-nano: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-nano-pop) 100%);
    --color-background: #FDFBF7;
    --color-background-alt: #F5F1E8;
    --color-text: #2D3436;
    --color-text-light: #636E72;
    --color-text-muted: #9BA3A7;
    --color-white: #FFFFFF;
    --color-dark: #1A1A2E;
    
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Source Sans Pro', sans-serif;
    
    --section-padding: 60px;
    --section-padding-mobile: 40px;
    
    /* Fixed Height Strategy */
    --navbar-height: 100px; 
    
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
}

@media (max-width: 991px) {
    :root { --navbar-height: 85px; }
}

*,::after,::before{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--navbar-height);overflow-x:hidden}
body{font-family:var(--font-body);font-size:18px;line-height:1.7;color:var(--color-text);background-color:var(--color-background);width:100%}

h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:600;line-height:1.3;color:var(--color-dark)}
a{text-decoration:none;transition:var(--transition-fast)}
img,svg{max-width:100%;height:auto}
section{overflow-x:clip}

.section-padding{padding:var(--section-padding) 0}
.container{padding-left:1rem;padding-right:1rem}
@media (min-width:1400px){.container{max-width:1320px;margin:0 auto}}

.section-label{display:inline-block;font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--color-accent);margin-bottom:0.75rem}
.section-title{font-size:3rem;margin-bottom:1rem;color:var(--color-dark)}
.section-subtitle{font-size:1.25rem;color:var(--color-text-light);max-width:700px;margin:0 auto}

.btn{font-family:var(--font-body);font-weight:600;padding:1rem 2rem;font-size:1.125rem;border-radius:var(--radius-sm);transition:var(--transition-normal);border:2px solid transparent;min-height:48px}
.btn-accent{background-color:var(--color-accent);color:var(--color-dark);border-color:var(--color-accent)}
.btn-accent:hover{background-color:var(--color-accent-dark);border-color:var(--color-accent-dark);color:var(--color-white);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-outline-light:hover{background-color:var(--color-white);color:var(--color-primary)}
.btn-lg{padding:1.25rem 2.5rem;font-size:1.25rem;min-height:56px}

/* Navbar Base - Always White */
#mainNav {
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(20px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.08);
    height: var(--navbar-height); 
    padding: 0;
    display: flex;
    align-items: center;
    transition: all var(--transition-normal);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.navbar-brand{display:flex;align-items:center;gap:.75rem;margin-right:3rem;flex-shrink:0}
.brand-icon{font-size:4rem;color:var(--color-accent);transition:var(--transition-fast);display:flex;align-items:center;flex-shrink:0}
.brand-icon img{width:4rem;height:4rem;object-fit:contain;transition:var(--transition-fast);display:block;visibility:visible;opacity:1}
.brand-text{font-family:var(--font-heading);font-size:2.25rem;font-weight:700;color:var(--color-dark);transition:var(--transition-normal);white-space:nowrap}
.nav-link{font-weight:600;font-size:1.125rem;color:var(--color-text)!important;padding:1rem 1.25rem!important;margin:0 .25rem;border-radius:var(--radius-sm);transition:var(--transition-fast);position:relative;min-height:48px;display:flex;align-items:center}
.nav-link span.info-name{white-space:nowrap}
.nav-link::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%) scaleX(0);width:80%;height:2px;background:var(--color-primary);transition:transform var(--transition-fast)}
.nav-link:hover::after{transform:translateX(-50%) scaleX(1)}
.nav-link:hover{color:var(--color-primary)!important;background:rgba(10,110,110,0.08)}
.navbar-toggler{border:none;padding:.5rem;background:rgba(10,110,110,0.08)}
.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2845, 52, 54, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}

/* Scrolled State - Same as base since always white */
#mainNav.scrolled{background:rgba(255,255,255,0.98);box-shadow:0 4px 30px rgba(0,0,0,0.1);}
#mainNav.scrolled .brand-text{color:var(--color-dark)}
#mainNav.scrolled .brand-icon{filter:none}
#mainNav.scrolled .brand-icon img{filter:none}
#mainNav.scrolled .nav-link{color:var(--color-text)!important}
#mainNav.scrolled .nav-link:hover{color:var(--color-primary)!important;background:rgba(10,110,110,0.08)}
#mainNav.scrolled .nav-link::after{background:var(--color-primary)}
#mainNav.scrolled .navbar-toggler{background:rgba(10,110,110,0.08)}
#mainNav.scrolled .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2845, 52, 54, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}

#mainNav.navbar-solid-bg{background-color:rgba(255,255,255,0.98)!important;box-shadow:0 2px 20px rgba(0,0,0,0.08);transition:all var(--transition-normal)}
#mainNav.navbar-solid-bg .nav-link,#mainNav.navbar-solid-bg .brand-text{color:var(--color-dark)!important}
#mainNav.navbar-solid-bg .brand-icon{color:var(--color-accent)}
#mainNav.navbar-solid-bg .brand-icon img{filter:none}

/* Hero Section */
.hero-section {
    min-height: 100vh;
    position: relative;
    background: linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 50%,var(--color-primary-light) 100%);
    padding-top: calc(var(--navbar-height) + 2rem);
    padding-bottom: 2rem;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hero-overlay{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");opacity:.5}

/* [FIX] Typography Locking to prevent CLS */
/* We set min-height to reserve space for the text block even if font swaps/loads late */
.hero-title {
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 1.25rem;
    line-height: 1.15;
    /* Reserve space for approx 2 lines on desktop */
    min-height: 2.3em; 
}

.hero-subtitle {
    font-size: 1.5rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2rem;
    max-width: 600px;
    /* Reserve space for approx 3 lines */
    min-height: 4.5em;
}

.hero-cta{display:flex;flex-wrap:wrap;gap:1rem}
.hero-trust-note{display:flex;align-items:center;color:rgba(255,255,255,0.85);font-size:1.125rem;padding-top:.5rem}
.hero-trust-note i{color:var(--color-accent);font-size:1.5rem}

/* Components (Unchanged) */
.about-pillar{text-align:center;padding:1.25rem;border-radius:var(--radius-md);background-color:var(--color-background);transition:var(--transition-normal)}
.about-pillar:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.pillar-icon{width:70px;height:70px;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem}
.pillar-icon i{font-size:1.75rem;color:var(--color-white)}
.service-card{background-color:var(--color-white);border-radius:var(--radius-md);padding:1.5rem;box-shadow:var(--shadow-sm);transition:var(--transition-normal);border:1px solid rgba(0,0,0,0.05);position:relative;overflow:hidden}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.service-card::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent),var(--color-nano-pop));transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.service-card:hover::after{transform:scaleX(1)}
.service-icon{width:80px;height:80px;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}
.service-icon i{font-size:2.25rem;color:var(--color-white)}
.service-icon.google-icon{background:linear-gradient(135deg,#4285F4 0%,#34A853 50%,#FBBC05 100%)}
.service-features{list-style:none;padding:0;margin:0}
.service-features li{display:flex;align-items:center;gap:.75rem;padding:.625rem 0;font-size:1.125rem;color:var(--color-text)}
.service-features li i{color:var(--color-primary);font-size:1.25rem}
.trust-card{background-color:var(--color-white);border-radius:var(--radius-lg);padding:2rem 1.5rem;box-shadow:var(--shadow-md);transition:var(--transition-normal);height:100%}
.trust-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-xl)}
.trust-icon{width:90px;height:90px;background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-accent-light) 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem}
.trust-icon i{font-size:2.5rem;color:var(--color-dark)}
.ai-section{background:linear-gradient(180deg,var(--color-background) 0%,var(--color-white) 100%)}
.ai-benefit-item{display:flex;gap:1.25rem;margin-bottom:1.25rem;padding:1.5rem;background-color:var(--color-white);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:var(--transition-normal);border-left:4px solid var(--color-primary)}
.ai-benefit-item:hover{transform:translateX(5px);box-shadow:var(--shadow-md)}
.benefit-icon i{font-size:1.75rem;color:var(--color-primary)}
.guarantees-section{background:linear-gradient(135deg,var(--color-background-alt) 0%,var(--color-background) 100%);border-radius:var(--radius-lg);padding:2rem 1.5rem;border:1px solid rgba(0,0,0,0.05)}
.guarantee-item{text-align:center;padding:1.25rem 0.75rem}
.guarantee-item i{font-size:2.75rem;color:var(--color-primary);margin-bottom:0.75rem;display:block}
.contact-section{background-color:var(--color-background)}
.contact-item{display:flex;align-items:center;gap:1.25rem;font-size:1.125rem;margin-bottom:1.25rem}
.contact-item i{width:48px;height:48px;background-color:var(--color-primary);color:var(--color-white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.contact-reassurance{background-color:rgba(10,110,110,0.08);border-radius:var(--radius-sm);border-left:3px solid var(--color-primary);display:flex;align-items:flex-start;padding:1rem;font-size:1.125rem}
.contact-reassurance i{color:var(--color-primary);flex-shrink:0;margin-top:2px;font-size:1.25rem}
.contact-form-card{background-color:var(--color-white);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-lg)}
.form-control{padding:1rem 1.25rem;font-size:1.125rem;border:2px solid #E8E8E8;border-radius:var(--radius-sm);min-height:48px}
.form-control:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(10,110,110,0.1)}
.footer-section{background-color:var(--color-dark);color:var(--color-white);padding:3rem 0 1.5rem}
.footer-social{display:flex;gap:.75rem}
.footer-social a{width:48px;height:48px;background-color:rgba(255,255,255,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-white);transition:var(--transition-normal);font-size:1.25rem}
.footer-social a:hover{background-color:var(--color-accent);color:var(--color-dark);transform:translateY(-3px)}
.footer-links{list-style:none;padding:0}
.footer-links a{color:rgba(255,255,255,0.7);font-size:1.125rem;text-decoration:none}
.footer-links a:hover{color:var(--color-accent)}
.footer-contact li{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;color:rgba(255,255,255,0.7);font-size:1.125rem}
.footer-divider{border-color:rgba(255,255,255,0.1);margin:2rem 0 1.25rem}
.copyright,.footer-legal a{font-size:1rem;color:rgba(255,255,255,0.5);text-decoration:none}
.footer-legal{list-style:none;padding:0;display:flex;gap:1.5rem;justify-content:flex-end}
.svg-illustration{width:100%;height:auto;max-height:450px;filter:drop-shadow(0 20px 40px rgba(0,0,0,0.15));transition:transform .4s cubic-bezier(0.175,0.885,0.32,1.275)}
.svg-illustration:hover{transform:translateY(-5px) scale(1.02)}

@keyframes float-slow{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes pulse-glow{0%,100%{opacity:.6;r:15}50%{opacity:.9;r:18}}
@keyframes dash-flow{to{stroke-dashoffset:-100}}
.animate-float{animation:float-slow 7s ease-in-out infinite}
.animate-pulse{animation:pulse-glow 4s ease-in-out infinite}
.animate-flow{stroke-dasharray:10;animation:dash-flow 20s linear infinite}
.visually-hidden-focusable:not(:focus):not(:focus-within){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-to-content{position:fixed;top:20px;left:20px;z-index:9999;background:var(--color-accent);color:var(--color-dark);padding:1rem 2rem;font-weight:700;border-radius:var(--radius-sm)}
.btn-floating-cta{position:fixed;bottom:30px;right:30px;z-index:1000;background:var(--color-accent);color:var(--color-dark);padding:1rem 1.75rem;font-size:1.125rem;border-radius:50px;box-shadow:0 4px 15px rgba(212,168,75,0.4);display:flex;align-items:center;gap:.5rem;font-weight:700;border:2px solid var(--color-white);min-height:48px}
.btn-floating-cta:hover{background:var(--color-accent-dark);color:var(--color-white);transform:translateY(-5px) scale(1.02)}
.btn-back-to-top{position:fixed;bottom:100px;right:30px;width:48px;height:48px;border-radius:50%;background:var(--color-primary);color:var(--color-white);border:none;box-shadow:var(--shadow-lg);z-index:990;opacity:0;visibility:hidden;transform:translateY(20px);transition:all .3s;font-size:1.25rem}
.btn-back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}

/* Tablet/Intermediate Screen Sizes */
@media (min-width:0px) and (max-width:385px) and (min-height:0px) and (max-height:760px){
  body{font-size:14px}
  :root{--navbar-height:75px}
  .navbar-brand{margin-right:1.5rem;gap:.5rem}
  .brand-icon{font-size:3rem}
  .brand-icon img{width:3rem;height:3rem}
  .brand-text{font-size:1.375rem}
  .nav-link{font-size:0.875rem;padding:.75rem 0.875rem!important;margin:0 .125rem}
  .section-label{font-size:0.75rem;margin-bottom:0.5rem}
  .section-title{font-size:1.625rem;margin-bottom:0.75rem}
  .section-subtitle{font-size:0.9375rem}
  .btn{font-size:0.875rem;padding:.75rem 1.5rem;min-height:44px}
  .btn-lg{font-size:0.9375rem;padding:.875rem 1.75rem;min-height:48px}
  .hero-title{font-size:2rem;margin-bottom:1rem;line-height:1.2;min-height:0}
  .hero-subtitle{font-size:1rem;margin-bottom:1.5rem;min-height:0}
  .hero-cta{gap:0.75rem}
  .hero-trust-note{font-size:0.875rem;padding-top:0.375rem}
  .hero-trust-note i{font-size:1.125rem}
  .service-card{padding:1.25rem}
  .service-card h3{font-size:1.25rem}
  .service-icon{width:60px;height:60px;margin-bottom:1rem}
  .service-icon i{font-size:1.75rem}
  .service-features li{font-size:0.875rem;padding:.375rem 0}
  .trust-card{padding:1.5rem 1.25rem}
  .trust-card h3{font-size:1.25rem}
  .trust-icon{width:70px;height:70px;margin:0 auto 1rem}
  .trust-icon i{font-size:2rem}
  .contact-item{font-size:0.875rem;margin-bottom:0.875rem}
  .contact-item i{width:40px;height:40px;font-size:1.125rem}
  .contact-reassurance{font-size:0.875rem;padding:0.875rem}
  .contact-reassurance i{font-size:1.125rem}
  .contact-form-card{padding:1.5rem}
  .form-control{padding:0.875rem 1rem;font-size:0.9375rem;min-height:44px}
  .footer-section{padding:2rem 0 1rem}
  .footer-links a{font-size:0.875rem}
  .footer-contact li{font-size:0.875rem;margin-bottom:0.75rem}
  .copyright,.footer-legal a{font-size:0.8125rem}
  .section-padding{padding:40px 0}
  .container{padding-left:0.75rem;padding-right:0.75rem}
  .hero-section{padding-top:calc(var(--navbar-height) + 0.5rem);padding-bottom:1.25rem}
}

/* Mobile Fixes */
@media (max-width:991px){
  .section-padding{padding:var(--section-padding-mobile) 0}
  .section-title{font-size:1.875rem}
  #mainNav{background:rgba(255,255,255,0.98);backdrop-filter:blur(20px);box-shadow:0 2px 20px rgba(0,0,0,0.08);padding:0}
  .nav-link{color:var(--color-text)!important;text-shadow:none}
  .nav-link::after{display:none}
  .navbar-collapse{background:rgba(255,255,255,0.98);padding:1rem;border-radius:var(--radius-md);margin-top:0.5rem;box-shadow:0 8px 32px rgba(0,0,0,0.12)}
  .navbar-toggler{background:rgba(10,110,110,0.08)}
  .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2845, 52, 54, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");filter:none}
  
  .hero-section{padding-top: calc(var(--navbar-height) + 0.75rem); padding-bottom: 1.5rem;}
  /* Resizing the reserved space for mobile since text wraps differently */
  .hero-title{font-size:2.75rem; min-height: 0;}
  .hero-subtitle{font-size:1.25rem; min-height: 0;}

  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  .contact-form-card{padding:1.5rem}
  .section-title{font-size:2.25rem}
  #mainNav.navbar-solid-bg .navbar-collapse .nav-link {
    color: var(--color-text) !important;
  }
}
@media (max-width:576px){
  .hero-title{font-size:2.25rem}
  .section-title{font-size:1.875rem}
  .btn-floating-cta{padding:0;width:64px;height:64px;justify-content:center;border-radius:50%;font-size:1.5rem}
  .btn-floating-cta .cta-text{display:none}
}
.footer-contact a:hover {
    color: var(--color-accent) !important;
    transition: var(--transition-fast);
}

.contact-item a:hover {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
}