/*
 * Fezaton Enterprises — Premium Design Layer
 * Version 1.3.0
 *
 * Design rule: preserve the existing Fezaton brand colours.
 * This layer improves hierarchy, spacing, typography, depth and responsiveness
 * without replacing the company's colour palette.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root{
  --fezaton-ease:cubic-bezier(.16,1,.3,1);
  --fezaton-shadow:0 18px 50px rgba(0,0,0,.08);
  --fezaton-shadow-hover:0 24px 70px rgba(0,0,0,.13);
}

html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',Montserrat,sans-serif;
  letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;
}
.font-serif,
h1.font-serif,h2.font-serif,h3.font-serif,h4.font-serif,
h1,h2,h3,h4,h5,h6{
  font-family:'Playfair Display',Georgia,serif;
}
h1,h2,h3,h4,h5,h6{letter-spacing:-.025em}
p{max-width:72ch}

/* Navigation */
nav.fixed{
  height:76px !important;
  background-color:hsl(var(--background) / .96) !important;
  border-bottom:1px solid hsl(var(--border) / .8) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:height .35s var(--fezaton-ease), box-shadow .35s var(--fezaton-ease), background-color .35s ease;
}
nav.fixed .container-main{padding-left:1.75rem;padding-right:1.75rem}
nav.fixed img{
  height:50px !important;
  width:auto;
  object-fit:contain;
  transition:height .35s var(--fezaton-ease),transform .35s var(--fezaton-ease);
}
nav.fixed .nav-link{
  position:relative;
  padding:10px 0;
  font-weight:600;
  letter-spacing:.12em;
  transition:color .25s ease;
}
nav.fixed .nav-link:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:1px;
  height:2px;
  background:hsl(var(--accent));
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .3s var(--fezaton-ease);
}
nav.fixed .nav-link:hover:after,
nav.fixed .nav-link.text-foreground.font-semibold:after{transform:scaleX(1)}
body.fezaton-scrolled nav.fixed{
  height:68px !important;
  box-shadow:0 8px 30px rgba(0,0,0,.08);
}
body.fezaton-scrolled nav.fixed img{height:44px !important}

/* Hero */
#root > div > section:first-child{
  min-height:680px;
  height:100svh;
}
#root > div > section:first-child > .relative.z-10{
  padding-top:76px;
}
#root > div > section:first-child .bg-black\/40{
  background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.42) 48%,rgba(0,0,0,.22) 100%) !important;
}
#root > div > section:first-child h1{
  max-width:850px;
  font-size:clamp(3.1rem,6.4vw,6.7rem);
  line-height:.98;
  letter-spacing:-.045em;
  text-wrap:balance;
  text-shadow:0 2px 20px rgba(0,0,0,.12);
}
#root > div > section:first-child p.text-primary-foreground\/70{
  color:hsl(var(--primary-foreground) / .84) !important;
  font-size:clamp(1rem,1.5vw,1.2rem);
  max-width:620px;
}
#root > div > section:first-child a{
  border-radius:4px;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
  transition:transform .3s var(--fezaton-ease),box-shadow .3s var(--fezaton-ease),background-color .25s ease;
}
#root > div > section:first-child a:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(0,0,0,.22);
}
#root > div > section:first-child .absolute.bottom-16{
  bottom:34px;
}

/* Section rhythm */
#root > div > section:not(:first-child){
  scroll-margin-top:90px;
}
#root > div > section.py-\[12vh\]{
  padding-top:clamp(76px,9vw,132px);
  padding-bottom:clamp(76px,9vw,132px);
}
.section-label{
  font-size:10px !important;
  letter-spacing:.24em !important;
  line-height:1.5;
}

/* Editorial headings */
#root h2.font-serif{
  font-size:clamp(2.15rem,4vw,3.5rem);
  line-height:1.05;
}
#root h3.font-serif{line-height:1.12}

/* Who we are */
#root > div > section:nth-child(2) .grid{
  gap:clamp(40px,8vw,120px);
}

/* Service cards */
#root .grid.md\:grid-cols-2.gap-px.bg-border > div{
  border-radius:0;
  transition:transform .4s var(--fezaton-ease),box-shadow .4s var(--fezaton-ease),background-color .3s ease;
}
#root .grid.md\:grid-cols-2.gap-px.bg-border > div:hover{
  position:relative;
  z-index:2;
  transform:translateY(-5px);
  box-shadow:var(--fezaton-shadow-hover);
}
#root .grid.md\:grid-cols-2.gap-px.bg-border h3{
  max-width:560px;
}
#root .grid.md\:grid-cols-2.gap-px.bg-border p{
  max-width:600px;
}

/* Process */
#root .grid.md\:grid-cols-4.gap-8 > div{
  position:relative;
  transition:transform .3s var(--fezaton-ease);
}
#root .grid.md\:grid-cols-4.gap-8 > div:hover{transform:translateY(-4px)}
#root .grid.md\:grid-cols-4.gap-8 > div:before{
  content:"";
  position:absolute;
  top:-1px;left:0;
  width:34px;height:2px;
  background:hsl(var(--accent));
  transition:width .3s var(--fezaton-ease);
}
#root .grid.md\:grid-cols-4.gap-8 > div:hover:before{width:64px}

/* Why choose us */
#root .bg-primary h2{max-width:680px}
#root .bg-primary a,
#root .bg-secondary a{
  border-radius:4px;
  transition:transform .3s var(--fezaton-ease),box-shadow .3s var(--fezaton-ease),background-color .25s ease;
}
#root .bg-primary a:hover,
#root .bg-secondary a:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}

/* Industry pills */
#root .flex.flex-wrap.justify-center.gap-4 span{
  border-radius:999px;
  padding:11px 19px;
  transition:border-color .25s ease,color .25s ease,transform .25s var(--fezaton-ease);
}
#root .flex.flex-wrap.justify-center.gap-4 span:hover{
  border-color:hsl(var(--primary));
  color:hsl(var(--foreground));
  transform:translateY(-2px);
}

/* CTA */
#root > div > section:last-child{
  position:relative;
  overflow:hidden;
}
#root > div > section:last-child h2{max-width:820px}

/* Generic links/buttons */
#root a:not(.nav-link){
  outline-offset:4px;
}
#root a:focus-visible,
#root button:focus-visible{
  outline:2px solid hsl(var(--accent));
}

/* About / services internal page hero */
#root .pt-20 > section:first-child{
  padding-top:clamp(130px,16vh,190px) !important;
  padding-bottom:clamp(100px,14vh,170px) !important;
}
#root .pt-20 > section:first-child h1{
  font-size:clamp(3rem,6vw,6rem);
}

/* Services list */
#root .pt-20 .border-b.border-border.py-12{
  transition:padding .3s var(--fezaton-ease),background-color .3s ease;
}
#root .pt-20 .border-b.border-border.py-12:hover{
  background:hsl(var(--secondary) / .55);
  padding-left:18px;
  padding-right:18px;
}

/* Contact form / fields */
#root input,#root textarea,#root select{
  border-radius:3px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
#root input:focus,#root textarea:focus,#root select:focus{
  border-color:hsl(var(--primary));
  box-shadow:0 0 0 3px hsl(var(--primary) / .12);
  outline:none;
}

/* Mobile refinement */
@media (max-width: 767px){
  nav.fixed{height:68px !important}
  nav.fixed .container-main{padding-left:1rem;padding-right:1rem}
  nav.fixed img{height:44px !important;max-width:190px}
  #root > div > section:first-child{
    min-height:650px;
    height:100svh;
  }
  #root > div > section:first-child > .relative.z-10{padding-top:68px}
  #root > div > section:first-child h1{
    font-size:clamp(2.65rem,12vw,4.2rem);
    line-height:1;
    max-width:100%;
  }
  #root > div > section:first-child p.text-primary-foreground\/70{
    font-size:1rem;
    line-height:1.65;
  }
  #root > div > section:first-child .absolute.bottom-16{
    bottom:24px;
    left:1rem;
  }
  #root > div > section.py-\[12vh\]{
    padding-top:76px;
    padding-bottom:76px;
  }
  #root h2.font-serif{font-size:2.25rem}
  #root .grid.md\:grid-cols-2.gap-px.bg-border > div{padding:32px 26px}
  #root .pt-20 .border-b.border-border.py-12:hover{
    padding-left:8px;
    padding-right:8px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}


/* =========================================================
   FEZATON VISUAL REFINEMENT — v1.2.0
   Preserve existing architecture, imagery, logo and brand colours.
   This layer refines neutrals, readability, contrast and responsive
   behaviour without changing the existing page concept.
   ========================================================= */

:root{
  /* Existing Fezaton brand colours retained:
     Primary blue: hsl(197 71% 52%) / #0092AC
     Accent red:   hsl(0 72% 51%)  / #DD2929 */
  --fezaton-near-black:#15171A;
  --fezaton-charcoal:#2B2F33;
  --fezaton-off-white:#F7F8FA;
  --fezaton-warm-white:#FAFAF8;
  --fezaton-white:#FFFFFF;
  --fezaton-border:#E5E7EB;
  --fezaton-muted-text:#4B5563;
  --fezaton-blue:#0092AC;
  --fezaton-red:#DD2929;

  /* Feed the existing design system softer neutral values. */
  --background:0 0% 100%;
  --foreground:210 10% 9%;
  --card:0 0% 100%;
  --card-foreground:210 10% 9%;
  --popover:0 0% 100%;
  --popover-foreground:210 10% 9%;
  --secondary:210 20% 97%;
  --secondary-foreground:210 10% 9%;
  --muted:210 18% 95%;
  --muted-foreground:215 16% 30%;
  --border:214 20% 91%;
  --input:214 20% 91%;
  --ring:197 71% 52%;
}

body{
  color:#15171A;
  background:#FFFFFF;
  font-size:16px;
  line-height:1.65;
}

/* Keep the requested editorial/body typography distinction. */
h1,h2,
h1.font-serif,h2.font-serif{
  font-family:'Playfair Display',Georgia,serif;
}
h3,h4,h5,h6{
  font-family:'DM Sans',Montserrat,sans-serif;
}
h3.font-serif,h4.font-serif,h5.font-serif,h6.font-serif{
  font-family:'Playfair Display',Georgia,serif;
}
h1,h2,h3,h4,h5,h6{
  color:#15171A;
}
p,li{
  color:inherit;
}
.text-muted-foreground{
  color:#4B5563 !important;
}
.text-foreground{
  color:#15171A !important;
}
.text-primary{
  color:#0092AC !important;
}
.text-accent{
  color:#DD2929 !important;
}

/* Softer neutral section treatment — no new colours added to the brand. */
#root > div > section:nth-child(3),
#root > div > section:nth-child(6){
  background:#F7F8FA;
}
#root > div > section:nth-child(3) .bg-secondary,
#root > div > section:nth-child(6) .bg-secondary{
  background:#FAFAF8;
}

/* Existing dark/brand sections stay brand-led. */
#root .bg-primary{
  background-color:#0092AC !important;
}
#root .bg-accent{
  background-color:#DD2929 !important;
}

/* Navigation: same structure, cleaner contrast and less tracking. */
nav.fixed{
  background:rgba(255,255,255,.97) !important;
  border-bottom-color:#E5E7EB !important;
}
nav.fixed .nav-link{
  letter-spacing:.055em;
  color:#2B2F33;
}
nav.fixed .nav-link:hover,
nav.fixed .nav-link.text-foreground.font-semibold{
  color:#15171A;
}
nav.fixed .nav-link:after{
  background:#DD2929;
}
body.fezaton-scrolled nav.fixed{
  box-shadow:0 8px 26px rgba(21,23,26,.08);
}

/* Hero: preserve image, composition and content; strengthen left-side readability. */
#root > div > section:first-child .bg-black\/40{
  background:
    linear-gradient(
      90deg,
      rgba(21,23,26,.78) 0%,
      rgba(21,23,26,.58) 42%,
      rgba(21,23,26,.30) 72%,
      rgba(21,23,26,.18) 100%
    ) !important;
}
#root > div > section:first-child h1{
  text-shadow:0 3px 24px rgba(0,0,0,.22);
}
#root > div > section:first-child p.text-primary-foreground\/70{
  color:rgba(255,255,255,.90) !important;
}

/* Body copy: stronger readability without making the interface heavy. */
#root p{
  line-height:1.68;
}
#root .text-sm{
  line-height:1.6;
}

/* Service cards: retain the grid, add quiet elevation and clearer separation. */
#root .grid.md\:grid-cols-2.gap-px.bg-border{
  background:#E5E7EB;
}
#root .grid.md\:grid-cols-2.gap-px.bg-border > div{
  background:#FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(229,231,235,.35);
}
#root .grid.md\:grid-cols-2.gap-px.bg-border > div:hover{
  box-shadow:0 18px 45px rgba(21,23,26,.10);
}

/* Buttons: preserve existing positions/styles while standardising usability. */
#root a,
#root button{
  -webkit-tap-highlight-color:transparent;
}
#root a.bg-primary,
#root button.bg-primary{
  background:#0092AC !important;
  color:#FFFFFF !important;
}
#root a.bg-accent,
#root button.bg-accent{
  background:#DD2929 !important;
  color:#FFFFFF !important;
}
#root a.bg-primary,
#root a.bg-accent,
#root a[class*="border-primary"]{
  min-height:48px;
}
#root a[class*="px-8"][class*="py-4"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#root a.bg-primary:hover{
  background:#218FCA !important;
}
#root a.bg-accent:hover{
  background:#C92323 !important;
}

/* Forms: clearer fields, labels and focus treatment. */
#root input,
#root textarea,
#root select{
  min-height:48px;
  color:#15171A;
  background:#FFFFFF;
  border-color:#D9DEE5;
}
#root textarea{
  min-height:120px;
}
#root input::placeholder,
#root textarea::placeholder{
  color:#6B7280;
  opacity:1;
}
#root input:focus,
#root textarea:focus,
#root select:focus{
  border-color:#0092AC;
  box-shadow:0 0 0 3px rgba(50,164,221,.14);
}

/* Accessible keyboard focus that remains visible against every surface. */
#root a:focus-visible,
#root button:focus-visible,
#root input:focus-visible,
#root textarea:focus-visible,
#root select:focus-visible{
  outline:3px solid rgba(221,41,41,.55);
  outline-offset:3px;
}

/* Footer: retain the existing blue brand section and improve text contrast. */
#root footer{
  background:#0092AC !important;
}
#root footer .text-primary-foreground\/60{
  color:rgba(255,255,255,.82) !important;
}

/* Small editorial details: red remains an accent, not a second dominant colour. */
#root .section-label{
  color:#DD2929;
  letter-spacing:.18em !important;
}
#root .border-t.border-border:before{
  background:#DD2929;
}

/* Mobile: preserve the current structure while improving legibility/touch comfort. */
@media (max-width:767px){
  body{
    font-size:16px;
    line-height:1.65;
  }
  nav.fixed .nav-link{
    letter-spacing:.04em;
  }
  #root > div > section:first-child .bg-black\/40{
    background:
      linear-gradient(
        90deg,
        rgba(21,23,26,.80) 0%,
        rgba(21,23,26,.58) 70%,
        rgba(21,23,26,.35) 100%
      ) !important;
  }
  #root > div > section:first-child h1{
    font-size:clamp(2.55rem,11.5vw,4rem);
    line-height:1.02;
  }
  #root > div > section:first-child p.text-primary-foreground\/70{
    font-size:1rem;
    line-height:1.65;
  }
  #root a,
  #root button{
    min-height:48px;
  }
  #root .grid.md\:grid-cols-2.gap-px.bg-border > div{
    box-shadow:none;
  }
}

/* Respect users who request reduced motion. */
@media (prefers-reduced-motion:reduce){
  nav.fixed,
  nav.fixed img,
  #root a,
  #root button,
  #root .grid.md\:grid-cols-2.gap-px.bg-border > div{
    transition:none !important;
  }
}


/* Final readability refinement: white hero/slider copy + transparent, more visible logo */
#root > div > section:first-child .text-primary-foreground\/80,
#root > div > section:first-child h1,
#root > div > section:first-child .text-primary-foreground\/70{
  color:#FFFFFF !important;
  text-shadow:0 2px 18px rgba(0,0,0,.38);
}
#root > div > section:first-child .bg-black\/40{
  background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.52) 52%,rgba(0,0,0,.28) 100%) !important;
}
nav.fixed img{
  height:60px !important;
  width:auto !important;
  background:transparent !important;
}
body.fezaton-scrolled nav.fixed img{
  height:54px !important;
}
@media (max-width:767px){
  nav.fixed img{height:56px !important;}
  body.fezaton-scrolled nav.fixed img{height:52px !important;}
  #root > div > section:first-child h1{
    text-shadow:0 2px 16px rgba(0,0,0,.45);
  }
}


/* Services navigation dropdown: preserve the existing navigation while making service categories easy to discover. */
.services-nav{position:relative;height:100%;display:flex;align-items:center;}
.services-caret{border:0;background:transparent;padding:4px 2px;line-height:1;font-size:14px;cursor:pointer;}
.services-dropdown{position:absolute;top:calc(100% + 1px);left:-18px;width:330px;background:#FFFFFF;border:1px solid #E5E7EB;box-shadow:0 18px 45px rgba(21,23,26,.12);padding:0 0 10px;}
.services-dropdown-link{display:block;padding:11px 16px;color:#2B2F33;font-size:14px;line-height:1.35;transition:background .2s ease,color .2s ease,padding-left .2s ease;}
.services-dropdown-link:hover,.services-dropdown-link:focus-visible{background:#F7F8FA;color:#0092AC;padding-left:20px;}
.services-dropdown-link.active{color:#0092AC;font-weight:600;background:#F7F8FA;}
.mobile-services-list{margin-top:10px;margin-left:14px;border-left:2px solid #E5E7EB;padding-left:14px;display:grid;gap:10px;}
.mobile-services-list a{color:#4B5563;line-height:1.45;}
.services-mobile-toggle{border:1px solid #E5E7EB;background:#F7F8FA;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1;}
@media (max-width:767px){
  .services-dropdown{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .services-dropdown-link{transition:none;}
}


/* =========================================================
   FEZATON HEADER + FOOTER ELEGANCE — v1.5.0
   Premium corporate treatment while preserving the existing
   Fezaton layout, logo and blue/red brand identity.
   ========================================================= */

/* Header: cleaner proportions, stronger logo presence and quiet depth. */
nav.fixed{
  height:80px !important;
  background:rgba(255,255,255,.985) !important;
  border-bottom:1px solid #E8EBEF !important;
  box-shadow:0 2px 14px rgba(21,23,26,.035);
}
nav.fixed .container-main{
  padding-left:clamp(1rem,3vw,2.25rem);
  padding-right:clamp(1rem,3vw,2.25rem);
}
nav.fixed img{
  height:62px !important;
  max-width:210px;
  object-fit:contain;
}
nav.fixed .nav-link{
  font-size:13px;
  font-weight:700;
  letter-spacing:.075em;
  color:#252A30;
}
nav.fixed .nav-link:hover,
nav.fixed .nav-link.text-foreground.font-semibold{
  color:#15171A !important;
}
nav.fixed .nav-link:after{
  bottom:-1px;
  height:2px;
  background:#DD2929;
}
nav.fixed .services-caret{
  color:#68717B;
  transition:color .2s ease,transform .2s ease;
}
nav.fixed .services-nav:hover .services-caret,
nav.fixed .services-caret:focus-visible{
  color:#DD2929;
}
.services-dropdown{
  top:calc(100% + 9px);
  left:-22px;
  width:355px;
  border:1px solid #E4E8ED;
  border-top:2px solid #DD2929;
  border-radius:0 0 8px 8px;
  box-shadow:0 22px 55px rgba(15,31,45,.14);
  padding-bottom:12px;
}
.services-dropdown:before{
  content:"";
  position:absolute;
  top:-8px;
  left:42px;
  width:14px;
  height:14px;
  background:#FFFFFF;
  border-left:1px solid #E4E8ED;
  border-top:1px solid #DD2929;
  transform:rotate(45deg);
}
.services-dropdown-link{
  position:relative;
  padding:13px 18px;
  font-weight:500;
}
.services-dropdown-link:after{
  content:"→";
  position:absolute;
  right:18px;
  opacity:0;
  transform:translateX(-5px);
  transition:opacity .2s ease,transform .2s ease;
}
.services-dropdown-link:hover:after,
.services-dropdown-link:focus-visible:after,
.services-dropdown-link.active:after{
  opacity:1;
  transform:translateX(0);
}
body.fezaton-scrolled nav.fixed{
  height:72px !important;
  box-shadow:0 8px 30px rgba(21,23,26,.085);
}
body.fezaton-scrolled nav.fixed img{height:54px !important;}

/* Footer: deep navy, structured columns and restrained red accents. */
#root footer.fezaton-footer{
  position:relative;
  overflow:hidden;
  background:#08243B !important;
  color:#FFFFFF !important;
  padding:0 !important;
}
#root footer.fezaton-footer:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,#DD2929 0%,#DD2929 34%,#0092AC 67%,#0092AC 100%);
}
#root footer.fezaton-footer .container-main{
  position:relative;
  z-index:1;
}
.fezaton-footer-main{
  display:grid;
  grid-template-columns:1.45fr .75fr 1.25fr 1fr;
  gap:clamp(30px,4vw,68px);
  padding:68px 0 54px;
}
.fezaton-footer-brand{
  max-width:330px;
}
.fezaton-footer-logo-link{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  background:transparent;
  border-radius:0;
  box-shadow:none;
}
.fezaton-footer-logo{
  display:block;
  width:auto;
  height:67px;
  object-fit:contain;
}
.fezaton-footer-tagline{
  margin:20px 0 4px !important;
  color:#FFFFFF !important;
  font-family:'Playfair Display',Georgia,serif;
  font-size:20px;
  line-height:1.25;
}
.fezaton-footer-description{
  margin:0 !important;
  color:rgba(255,255,255,.68) !important;
  font-size:14px;
  line-height:1.7;
}
.fezaton-footer-kicker{
  position:relative;
  display:inline-block;
  margin:3px 0 18px;
  color:#FFFFFF;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.fezaton-footer-kicker:before{
  content:"";
  display:block;
  width:28px;
  height:2px;
  margin-bottom:9px;
  background:#DD2929;
}
.fezaton-footer-links{
  display:grid;
  gap:10px;
}
.fezaton-footer-links a{
  color:rgba(255,255,255,.68) !important;
  font-size:14px;
  line-height:1.5;
  transition:color .2s ease,transform .2s ease;
}
.fezaton-footer-links a:hover,
.fezaton-footer-links a:focus-visible{
  color:#FFFFFF !important;
  transform:translateX(3px);
}
.fezaton-footer-contact-list{
  display:grid;
  gap:12px;
}
.fezaton-footer-contact-list a{
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:rgba(255,255,255,.72) !important;
  font-size:13px;
  line-height:1.5;
  overflow-wrap:anywhere;
  transition:color .2s ease;
}
.fezaton-footer-contact-list a:hover,
.fezaton-footer-contact-list a:focus-visible{
  color:#FFFFFF !important;
}
.fezaton-footer-contact-list svg{flex:0 0 auto;margin-top:2px;color:#0092AC;}
.fezaton-footer-cta{
  display:inline-flex !important;
  align-items:center;
  gap:12px;
  margin-top:22px;
  padding:12px 17px;
  background:#DD2929;
  color:#FFFFFF !important;
  font-size:13px;
  font-weight:700;
  letter-spacing:.025em;
  border-radius:3px;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
  transition:background .2s ease,transform .25s var(--fezaton-ease),box-shadow .25s ease;
}
.fezaton-footer-cta:hover,
.fezaton-footer-cta:focus-visible{
  background:#C92323 !important;
  color:#FFFFFF !important;
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(0,0,0,.20);
}
.fezaton-whatsapp{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  margin-top:20px;
  padding:10px 14px;
  background:#25D366;
  color:#FFFFFF !important;
  border-radius:3px;
  font-size:13px;
  font-weight:700;
  transition:background .2s ease,transform .2s ease;
}
.fezaton-whatsapp:hover,
.fezaton-whatsapp:focus-visible{
  background:#1EBE5D !important;
  color:#FFFFFF !important;
  transform:translateY(-1px);
}
.fezaton-footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 0 24px;
  border-top:1px solid rgba(255,255,255,.11);
  color:rgba(255,255,255,.48);
  font-size:12px;
}
.fezaton-footer-bottom-links{
  display:flex;
  align-items:center;
  gap:10px;
}
.fezaton-footer-bottom-links a{
  color:rgba(255,255,255,.58) !important;
  transition:color .2s ease;
}
.fezaton-footer-bottom-links a:hover{color:#FFFFFF !important;}
.fezaton-footer-dot{color:#DD2929;}

@media (max-width: 1024px){
  .fezaton-footer-main{grid-template-columns:1.35fr 1fr 1.35fr;}
  .fezaton-footer-contact{grid-column:1 / -1;}
}
@media (max-width: 767px){
  nav.fixed{height:70px !important;}
  nav.fixed img{height:56px !important;max-width:190px;}
  body.fezaton-scrolled nav.fixed{height:66px !important;}
  body.fezaton-scrolled nav.fixed img{height:52px !important;}
  .services-dropdown{display:none;}
  .fezaton-footer-main{
    grid-template-columns:1fr;
    gap:38px;
    padding:58px 0 42px;
  }
  .fezaton-footer-brand{max-width:100%;}
  .fezaton-footer-logo{height:60px;}
  .fezaton-footer-contact{grid-column:auto;}
  .fezaton-footer-bottom{
    align-items:flex-start;
    flex-direction:column;
    gap:9px;
    padding:20px 0 22px;
  }
  .fezaton-footer-bottom-links{flex-wrap:wrap;}
}
@media (prefers-reduced-motion:reduce){
  .services-dropdown-link:after,
  .fezaton-footer-links a,
  .fezaton-footer-contact-list a,
  .fezaton-footer-cta,
  .fezaton-whatsapp{transition:none !important;}
}


/* =========================================================
   FEZATON BRAND COLOUR + NAVIGATION/SOCIAL REFINEMENTS — v1.6.0
   Logo blue: #0092AC. Keep the interface visually uniform.
   ========================================================= */
:root{
  --fezaton-blue:#0092AC;
  --fezaton-red:#DD2929;
  --primary:191 100% 33.7%;
  --ring:191 100% 33.7%;
}

/* Replace the lighter cyan with the exact blue used in the logo. */
#root .bg-primary{background-color:var(--fezaton-blue) !important;}
#root .text-primary{color:var(--fezaton-blue) !important;}
#root .border-primary{border-color:var(--fezaton-blue) !important;}
#root .text-accent{color:var(--fezaton-red) !important;}
#root a:hover,
#root button:hover{--tw-text-opacity:1;}

/* Services dropdown: no repeated heading; every hover state fills the row. */
.services-dropdown{
  padding:6px 0 0 !important;
  overflow:hidden;
  background:#FFFFFF !important;
  z-index:100;
}
.services-dropdown:before{z-index:-1;}
.services-dropdown-link{
  width:100%;
  margin:0 !important;
  padding:14px 20px !important;
  background:#FFFFFF !important;
  color:#252A30 !important;
  border-left:3px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease,padding-left .18s ease !important;
}
.services-dropdown-link:hover,
.services-dropdown-link:focus-visible,
.services-dropdown-link.active{
  background:#EAF5F7 !important;
  color:#007F96 !important;
  border-left-color:var(--fezaton-blue);
  padding-left:24px !important;
}
.services-dropdown-link:after{color:var(--fezaton-blue);}

/* Footer social links. */
.fezaton-socials{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:20px;
}
.fezaton-social-link{
  display:inline-flex !important;
  align-items:center;
  gap:10px;
  width:max-content;
  color:rgba(255,255,255,.72) !important;
  font-size:13px;
  line-height:1.4;
  transition:color .2s ease,transform .2s ease;
}
.fezaton-social-link svg{
  width:19px;
  height:19px;
  flex:0 0 19px;
  color:var(--fezaton-blue);
}
.fezaton-social-link:hover,
.fezaton-social-link:focus-visible{
  color:#FFFFFF !important;
  transform:translateX(3px);
}
.fezaton-social-link:hover svg,
.fezaton-social-link:focus-visible svg{color:#FFFFFF;}

/* Footer blue accents use the same exact logo blue. */
#root footer.fezaton-footer:before{
  background:linear-gradient(90deg,var(--fezaton-red) 0%,var(--fezaton-red) 34%,var(--fezaton-blue) 67%,var(--fezaton-blue) 100%) !important;
}
.fezaton-footer-contact-list svg{color:var(--fezaton-blue) !important;}

@media (max-width:767px){
  .services-dropdown{display:none !important;}
  .mobile-services-list a:hover,
  .mobile-services-list a:focus-visible{
    color:var(--fezaton-blue) !important;
  }
  .fezaton-socials{gap:9px;}
}


.fezaton-social-kicker{
  margin-top:20px;
  margin-bottom:10px;
  color:#FFFFFF;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}


/* =========================================================
   FEZATON UX REFINEMENT — v1.7.0
   Services dropdown reliability, icon-only social links and
   improved homepage information hierarchy.
   ========================================================= */

/* Keep a continuous pointer path from Services to its dropdown.
   The previous 9px visual gap caused the menu to close while moving
   the cursor from the trigger into the dropdown. */
.services-nav::after{
  content: none !important;
  position:absolute;
  top:100%;
  left:-22px;
  width:355px;
  height:12px;
  background:transparent;
  z-index:99;
}
.services-dropdown{
  top:calc(100% + 1px) !important;
  z-index:100 !important;
}

/* Full-width hover coverage for every service item. */
.services-dropdown-link{
  display:flex !important;
  align-items:center;
  min-height:50px;
  box-sizing:border-box;
}

/* Social media: icon-only links, with accessible labels retained in markup. */
.fezaton-socials{
  flex-direction:row !important;
  align-items:center;
  gap:12px !important;
  margin-top:14px !important;
}
.fezaton-social-link{
  width:42px !important;
  height:42px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  color:#FFFFFF !important;
  background:rgba(255,255,255,.04);
  transform:none !important;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.fezaton-social-link span{display:none !important;}
.fezaton-social-link svg{
  width:19px !important;
  height:19px !important;
  color:#0092AC !important;
}
.fezaton-social-link:hover,
.fezaton-social-link:focus-visible{
  background:#0092AC !important;
  border-color:#0092AC !important;
  color:#FFFFFF !important;
  transform:translateY(-2px) !important;
}
.fezaton-social-link:hover svg,
.fezaton-social-link:focus-visible svg{color:#FFFFFF !important;}

/* Why Choose Us now sits directly after Services and before How We Work. */
@media (min-width:768px){
  #root > div > section.bg-primary .container-main{max-width:1180px;}
}

@media (max-width:767px){
  .services-nav::after{display:none;}
  .fezaton-socials{gap:10px !important;}
  .fezaton-social-link{width:40px !important;height:40px !important;}
}


/* Header contact alignment — v1.8 */
.fezaton-header-contact{
  margin-left:auto !important;
  flex:0 0 auto;
  white-space:nowrap;
}
.fezaton-header-contact a{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.fezaton-header-contact svg{
  color:var(--fezaton-blue,#0092AC) !important;
  stroke:currentColor;
  flex:0 0 auto;
}
@media (min-width:1100px){
  .fezaton-header-contact{gap:1.25rem;}
}


/* =========================================================
   FEZATON HEADER LOGO REFINEMENT — v1.9.1.0
   Larger logo with a tighter left alignment while preserving
   the spacious right-side contact area.
   ========================================================= */
@media (min-width:768px){
  nav.fixed .container-main{
    padding-left:clamp(.65rem,1.5vw,1.25rem) !important;
    padding-right:clamp(1rem,2.5vw,2rem) !important;
  }
  nav.fixed img{
    height:68px !important;
    max-width:235px !important;
    transform:translateX(-2px);
  }
  body.fezaton-scrolled nav.fixed img{
    height:60px !important;
  }
}
@media (min-width:1400px){
  nav.fixed .container-main{
    padding-left:1rem !important;
  }
  nav.fixed img{
    height:70px !important;
    max-width:245px !important;
  }
}
@media (max-width:767px){
  nav.fixed img{
    height:58px !important;
    max-width:200px !important;
  }
  body.fezaton-scrolled nav.fixed img{
    height:54px !important;
  }
}


/* =========================================================
   HEADER ICON + SERVICES CHEVRON REFINEMENT — v1.9.2
   ========================================================= */

/* Keep the email and phone icons clearly visible in Fezaton blue. */
.fezaton-header-contact a svg{
  width:19px !important;
  height:19px !important;
  color:#0092AC !important;
  stroke:#0092AC !important;
  stroke-width:2 !important;
  opacity:1 !important;
}
.fezaton-header-contact a:hover svg,
.fezaton-header-contact a:focus-visible svg{
  color:#0092AC !important;
  stroke:#0092AC !important;
}

/* Replace the old text-style "⌄" with a clean, professional chevron. */
.services-caret{
  position:relative !important;
  width:22px !important;
  height:28px !important;
  padding:0 !important;
  margin-left:1px !important;
  font-size:0 !important;
  line-height:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:transparent !important;
}
.services-caret::after{
  content:"" !important;
  width:7px !important;
  height:7px !important;
  border-right:1.8px solid #334155 !important;
  border-bottom:1.8px solid #334155 !important;
  transform:rotate(45deg) translateY(-2px) !important;
  transform-origin:center !important;
  transition:transform .2s ease,border-color .2s ease !important;
}
.services-caret:hover::after,
.services-caret:focus-visible::after,
.services-nav:hover .services-caret::after{
  border-color:#0092AC !important;
}
.services-nav:has(.services-dropdown) .services-caret[aria-expanded="true"]::after{
  transform:rotate(225deg) translateY(-2px) !important;
}
@supports not selector(:has(*)){
  .services-caret[aria-expanded="true"]::after{
    transform:rotate(225deg) translateY(-2px) !important;
  }
}


/* =========================================================
   FEZATON v1.9.9 — HEADER + SLIDE READABILITY REFINEMENT
   ========================================================= */
@media (min-width:768px){
  nav.fixed .container-main{gap:24px !important;}
  nav.fixed .fezaton-header-contact{
    margin-left:0 !important;
    gap:16px !important;
    flex:0 0 auto;
    align-items:center;
  }
  nav.fixed .fezaton-header-contact a{white-space:nowrap;}
  nav.fixed .fezaton-header-nav{
    margin-left:auto !important;
    gap:42px !important;
    flex:0 0 auto;
    align-items:center;
  }
  nav.fixed .fezaton-header-nav .nav-link{white-space:nowrap;}
}
@media (min-width:768px) and (max-width:1180px){
  nav.fixed .container-main{gap:12px !important;}
  nav.fixed .fezaton-header-contact{gap:8px !important;}
  nav.fixed .fezaton-header-contact a{font-size:10px !important;}
  nav.fixed .fezaton-header-nav{gap:22px !important;}
}

/* No Services arrow/chevron. */
.services-caret,
.services-caret::before,
.services-caret::after{
  display:none !important;
  content:none !important;
}
.services-nav > .flex.items-center{gap:0 !important;}
.services-dropdown{
  top:100% !important;
  margin-top:0 !important;
}

/* Black typography on the blue hero/service slides shown in the site. */
#root > div > section:first-child h1,
#root > div > section:first-child p,
#root > div > section:first-child .text-primary-foreground\/80,
#root > div > section:first-child .text-primary-foreground\/70,
#root > div > section:first-child .text-primary-foreground\/60,
#root > div > section:first-child .text-accent,
#root .pt-20 > section:first-child h1,
#root .pt-20 > section:first-child p,
#root .pt-20 > section:first-child .text-primary-foreground\/80,
#root .pt-20 > section:first-child .text-primary-foreground\/70,
#root .pt-20 > section:first-child .text-primary-foreground\/60,
#root .pt-20 > section:first-child .text-accent{
  color:#000000 !important;
  text-shadow:none !important;
}

/* Keep the blue clean behind the black copy. */
#root > div > section:first-child .bg-black\/40,
#root .pt-20 > section:first-child .bg-black\/40{
  background:transparent !important;
}

#root > div > section:first-child h1,
#root .pt-20 > section:first-child h1{
  max-width:900px;
}
#root > div > section:first-child p,
#root .pt-20 > section:first-child p{
  max-width:760px;
  line-height:1.7;
}

/* Consistent Fezaton-blue header contact icons. */
.fezaton-header-contact a svg{
  color:#0092AC !important;
  stroke:#0092AC !important;
  width:19px !important;
  height:19px !important;
}

/* =========================================================
   FEZATON FOOTER REFINEMENT — v1.9.10
   Upper footer: clean white surface for maximum legibility.
   Lower footer: exact logo blue, replacing the previous navy.
   Typography follows the site's existing DM Sans / Playfair Display system.
   ========================================================= */
#root footer.fezaton-footer{
  background:#FFFFFF !important;
  color:#15171A !important;
  font-family:'DM Sans',Montserrat,sans-serif !important;
}

#root footer.fezaton-footer:before{
  background:linear-gradient(90deg,var(--fezaton-red) 0%,var(--fezaton-red) 34%,var(--fezaton-blue) 67%,var(--fezaton-blue) 100%) !important;
  height:3px;
}

#root footer.fezaton-footer .fezaton-footer-main{
  background:#FFFFFF !important;
  padding:54px 0 44px;
}

#root footer.fezaton-footer .fezaton-footer-tagline{
  color:#15171A !important;
  font-family:'Playfair Display',Georgia,serif !important;
  font-weight:600;
}

#root footer.fezaton-footer .fezaton-footer-description{
  color:#374151 !important;
  font-family:'DM Sans',Montserrat,sans-serif !important;
}

#root footer.fezaton-footer .fezaton-footer-kicker{
  color:#15171A !important;
  font-family:'DM Sans',Montserrat,sans-serif !important;
}

#root footer.fezaton-footer .fezaton-footer-links a,
#root footer.fezaton-footer .fezaton-footer-contact-list a,
#root footer.fezaton-footer .fezaton-social-link{
  color:#374151 !important;
  font-family:'DM Sans',Montserrat,sans-serif !important;
}

#root footer.fezaton-footer .fezaton-footer-links a:hover,
#root footer.fezaton-footer .fezaton-footer-links a:focus-visible,
#root footer.fezaton-footer .fezaton-footer-contact-list a:hover,
#root footer.fezaton-footer .fezaton-footer-contact-list a:focus-visible,
#root footer.fezaton-footer .fezaton-social-link:hover,
#root footer.fezaton-footer .fezaton-social-link:focus-visible{
  color:var(--fezaton-blue) !important;
}

#root footer.fezaton-footer .fezaton-footer-contact-list svg,
#root footer.fezaton-footer .fezaton-social-link svg{
  color:var(--fezaton-blue) !important;
}

#root footer.fezaton-footer .fezaton-social-kicker{
  color:#15171A !important;
  font-family:'DM Sans',Montserrat,sans-serif !important;
}

/* Keep the call-to-action red as a restrained brand accent. */
#root footer.fezaton-footer .fezaton-footer-cta{
  background:var(--fezaton-red) !important;
  color:#FFFFFF !important;
}

/* The lower copyright strip uses the same blue as the logo — no navy. */
#root footer.fezaton-footer .fezaton-footer-bottom{
  background:var(--fezaton-blue) !important;
  color:#FFFFFF !important;
  border-top:1px solid rgba(255,255,255,.24) !important;
  padding:17px 0 18px;
  font-family:'DM Sans',Montserrat,sans-serif !important;
}

#root footer.fezaton-footer .fezaton-footer-bottom-links a,
#root footer.fezaton-footer .fezaton-footer-bottom-links span{
  color:#FFFFFF !important;
  font-family:'DM Sans',Montserrat,sans-serif !important;
}

#root footer.fezaton-footer .fezaton-footer-dot{
  color:#FFFFFF !important;
}

@media (max-width:767px){
  #root footer.fezaton-footer .fezaton-footer-main{
    padding:48px 0 38px;
  }
  #root footer.fezaton-footer .fezaton-footer-bottom{
    padding:17px 0 18px;
  }
}

/* Extend the blue copyright band to the full browser width while keeping
   the existing centred content container unchanged. */
#root footer.fezaton-footer .fezaton-footer-bottom{
  position:relative;
  isolation:isolate;
  background:transparent !important;
  border-top-color:transparent !important;
}
#root footer.fezaton-footer .fezaton-footer-bottom::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:var(--fezaton-blue);
  border-top:1px solid rgba(255,255,255,.24);
}


/* =========================================================
   FEZATON v1.9.11 — SLIDER CONTRAST + HEADER CONTACT
   Keep the existing typography. Improve readability by fixing
   foreground/background contrast rather than changing fonts.
   ========================================================= */

/* Hero/slider: use white typography over a controlled dark gradient.
   This keeps the photography visible while ensuring readable copy
   across both dark and bright source images. */
#root > div > section:first-child h1,
#root > div > section:first-child p,
#root > div > section:first-child .text-primary-foreground\/80,
#root > div > section:first-child .text-primary-foreground\/70,
#root > div > section:first-child .text-primary-foreground\/60,
#root > div > section:first-child .text-accent,
#root .pt-20 > section:first-child h1,
#root .pt-20 > section:first-child p,
#root .pt-20 > section:first-child .text-primary-foreground\/80,
#root .pt-20 > section:first-child .text-primary-foreground\/70,
#root .pt-20 > section:first-child .text-primary-foreground\/60,
#root .pt-20 > section:first-child .text-accent{
  color:#FFFFFF !important;
  text-shadow:0 2px 10px rgba(0,0,0,.72), 0 1px 2px rgba(0,0,0,.9) !important;
}

#root > div > section:first-child .bg-black\/40,
#root .pt-20 > section:first-child .bg-black\/40{
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.62) 38%,
    rgba(0,0,0,.34) 68%,
    rgba(0,0,0,.12) 100%
  ) !important;
}

/* Header email and phone: larger and bolder without changing the
   site's established font family. */
.fezaton-header-contact a{
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
}

@media (min-width:768px) and (max-width:1180px){
  nav.fixed .fezaton-header-contact a{
    font-size:13px !important;
    font-weight:700 !important;
  }
}

@media (max-width:767px){
  .fezaton-header-contact a{
    font-size:13px !important;
    font-weight:700 !important;
  }
}