/* ==========================================================================
   Semioticom visual refresh layer
   Design only. No content changes.
   Load AFTER main.min.css and hero-background.css
   ========================================================================== */

:root{
  --sem-bg: #eef4f7;
  --sem-surface: #f4f7fb;
  --sem-surface-strong: #ffffff;
  --sem-surface-soft: #eaf5f1;
  --sem-border: rgba(30,47,74,0.10);
  --sem-border-strong: rgba(30,47,74,0.16);

  --sem-text: #1e2f4a;
  --sem-text-soft: rgba(30,47,74,0.78);

  --sem-navy: #1e2f4a;
  --sem-steel: #2c415e;
  --sem-teal: #0d7a75;
  --sem-sky: #7ec8f4;
  --sem-mint: #a6e6c5;

  --sem-cta: #ff6a00;
  --sem-cta-hover: #e55f00;

  --sem-shadow-sm: 0 8px 22px rgba(30,47,74,0.06);
  --sem-shadow-md: 0 16px 40px rgba(30,47,74,0.10);
  --sem-shadow-lg: 0 24px 64px rgba(30,47,74,0.14);

  --sem-radius-section: 32px;
  --sem-radius-card: 24px;
  --sem-radius-card-sm: 20px;
  --sem-radius-control: 18px;
  --sem-radius-pill: 999px;

  --sem-section-gap-y: clamp(72px, 9vw, 128px);
  --sem-shell-pad: clamp(28px, 4vw, 56px);
}

html, body{
  background:
    radial-gradient(circle at top left, rgba(126,200,244,0.18), transparent 28%),
    radial-gradient(circle at top right, rgba(166,230,197,0.12), transparent 24%),
    linear-gradient(180deg, #f4f8fb 0%, #edf3f6 100%);
  color: var(--sem-text);
}

body{
  overflow-x: clip;
}

img,
.img-fluid{
  border-radius: inherit;
}

a{
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* --------------------------------------------------------------------------
   Shared shell rhythm
   -------------------------------------------------------------------------- */

.wide{
  position: relative;
  margin-top: var(--sem-section-gap-y);
  margin-bottom: 0;
}

.wide > .container,
.wide > .container-fluid > .row > .col > .container,
.wide > .container-fluid > .row > .col > .wrapper,
#hero .wrapper{
  position: relative;
}

.simple.wide .container,
.simple-with-columns.wide .container,
.team.wide .container-fluid > .row > .col > .container,
.keys.wide .container,
#get-in-touch .container,
body > footer .container,
.main > .container{
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(10px);
  border: 1px solid var(--sem-border);
  border-radius: var(--sem-radius-section);
  box-shadow: var(--sem-shadow-md);
  padding: var(--sem-shell-pad);
}

@media (max-width: 767.98px){
  .simple.wide .container,
  .simple-with-columns.wide .container,
  .team.wide .container-fluid > .row > .col > .container,
  .keys.wide .container,
  #get-in-touch .container,
  body > footer .container,
  .main > .container{
    padding: 24px;
    border-radius: 24px;
  }
}

/* Remove legacy decorative after-elements */
.simple.simple--clean:after,
.simple-with-columns.simple-with-columns--clean:after,
.team.team--clean:after,
body > footer:after{
  content: none !important;
  display: none !important;
}

/* --------------------------------------------------------------------------
   Buttons / controls
   -------------------------------------------------------------------------- */

.btn,
.codedropz-upload-wrapper .codedropz-upload-container .cd-upload-btn,
input[type=submit],
input::file-selector-button,
.mgbutton,
button:not(.navbar-toggler){
  border-radius: var(--sem-radius-pill) !important;
  padding: 16px 26px;
  line-height: 1.1;
  border-width: 1px;
  box-shadow: none;
}

.btn:hover,
.codedropz-upload-wrapper .codedropz-upload-container .cd-upload-btn:hover,
input[type=submit]:hover,
input::file-selector-button:hover{
  transform: translateY(-1px);
}

.btn--primary,
.codedropz-upload-wrapper .codedropz-upload-container .cd-upload-btn,
input[type=submit]{
  background: var(--sem-surface-strong);
  color: var(--sem-navy);
  border-color: rgba(30,47,74,0.18);
  box-shadow: var(--sem-shadow-sm);
}

.btn--primary:hover,
.codedropz-upload-wrapper .codedropz-upload-container .cd-upload-btn:hover,
input[type=submit]:hover{
  background: #ffffff;
  border-color: rgba(30,47,74,0.28);
  box-shadow: 0 12px 26px rgba(30,47,74,0.12);
}

.btn--primary-inverted{
  background: linear-gradient(135deg, var(--sem-cta) 0%, #ff8e2b 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(255,106,0,0.28);
}

.btn--primary-inverted:hover{
  background: linear-gradient(135deg, var(--sem-cta-hover) 0%, #ff7e15 100%);
  color: #fff;
  box-shadow: 0 16px 34px rgba(255,106,0,0.34);
}

.btn--secondary{
  color: var(--sem-navy);
  background-color: rgba(255,255,255,0.72);
  border-color: rgba(30,47,74,0.16);
  box-shadow: var(--sem-shadow-sm);
}

.btn--secondary:hover{
  color: var(--sem-navy);
  background-color: #fff;
  border-color: rgba(30,47,74,0.26);
}

/* --------------------------------------------------------------------------
   Generic text spacing
   -------------------------------------------------------------------------- */

.section-heading{
  margin-bottom: 18px;
}

.section-description,
.description{
  color: var(--sem-text-soft);
}

.section-description > *:last-child,
.description > *:last-child{
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

#masthead{
  background: linear-gradient(180deg, #0e2747 0%, #163559 100%);
  box-shadow: 0 10px 30px rgba(14,39,71,0.18);
}

#masthead .container-fluid,
#masthead .container-lg,
#masthead .container-md,
#masthead .container-sm,
#masthead .container-xl,
#masthead .container-xxl{
  max-width: min(96%, 1500px);
}

#masthead .navbar{
  min-height: 76px;
}

#masthead .logo{
  padding: 14px 0;
}

#masthead .logo svg path{
  fill: #b7e7ff;
}

#masthead .navbar-nav .nav-link{
  color: rgba(255,255,255,0.9);
  border-radius: var(--sem-radius-pill);
  padding: 10px 14px;
}

#masthead .navbar-nav .nav-link:hover,
#masthead .navbar-nav .current-menu-item > .nav-link,
#masthead .navbar-nav .current_page_item > .nav-link{
  color: #fff;
  background: rgba(255,255,255,0.10);
}

#masthead .language-switcher a,
#masthead .wpml-ls-item a,
#masthead .lang-item a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--sem-radius-pill);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

#hero{
  margin-bottom: 0;
}

#hero .container-fluid{
  max-width: min(96%, 1550px);
}

#hero .wrapper{
  margin-top: 22px;
  border-radius: 36px;
  background:
    linear-gradient(135deg, rgba(14,39,71,0.98) 0%, rgba(22,53,89,0.95) 58%, rgba(18,76,104,0.92) 100%);
  box-shadow: var(--sem-shadow-lg);
  border: 1px solid rgba(126,200,244,0.12);
  padding: clamp(28px, 5vw, 64px);
  min-height: clamp(420px, 72vh, 760px);
}

#hero .wrapper .content{
  position: relative;
  z-index: 2;
  max-width: 760px;
}

#hero .wrapper .content .heading,
#hero .wrapper .content .tagline,
#hero .wrapper .content .description{
  color: #fff;
  text-shadow: 0 2px 10px rgba(8,20,39,0.18);
}

#hero .wrapper .content .description{
  color: rgba(255,255,255,0.82);
}

#hero .wrapper .hero-background{
  padding: clamp(16px, 4vw, 42px);
}

#hero .wrapper .hero-background img{
  object-fit: cover;
  border-radius: 28px;
  filter: saturate(0.95) contrast(1.02);
}

#hero .wrapper .deco,
#hero .wrapper .overlay{
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Simple section
   -------------------------------------------------------------------------- */

.simple .section-heading,
.simple .section-tagline,
.simple .section-description{
  max-width: 980px;
}

.simple .btn{
  margin-top: 28px;
}

/* --------------------------------------------------------------------------
   Approach / simple-with-columns
   -------------------------------------------------------------------------- */

.simple-with-columns .row:last-child{
  margin-top: 28px;
}

.simple-with-columns .row:last-child > [class*="col"]{
  display: flex;
  margin-top: 20px;
}

.simple-with-columns .row:last-child > [class*="col"] > *{
  width: 100%;
}

.simple-with-columns .row:last-child > [class*="col"] .h4,
.simple-with-columns .row:last-child > [class*="col"] .p1{
  background: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(244,247,251,0.96) 100%);
}

.simple-with-columns .row:last-child > [class*="col"]{
  flex-direction: column;
  gap: 0;
}

.simple-with-columns .row:last-child > [class*="col"] .h4{
  margin: 0;
  padding: 24px 24px 0 24px;
  border: 1px solid var(--sem-border);
  border-bottom: 0;
  border-radius: var(--sem-radius-card) var(--sem-radius-card) 0 0;
  box-shadow: var(--sem-shadow-sm);
}

.simple-with-columns .row:last-child > [class*="col"] .p1{
  height: 100%;
  padding: 12px 24px 24px 24px;
  border: 1px solid var(--sem-border);
  border-top: 0;
  border-radius: 0 0 var(--sem-radius-card) var(--sem-radius-card);
  box-shadow: var(--sem-shadow-sm);
}

/* --------------------------------------------------------------------------
   Team cards
   -------------------------------------------------------------------------- */

.team-members{
  gap: 24px;
}

.team-members .team-member{
  width: 100%;
}

.team-members .card{
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(244,247,251,0.98) 100%);
  border: 1px solid var(--sem-border);
  border-radius: var(--sem-radius-card);
  box-shadow: var(--sem-shadow-md);
  padding: 24px;
}

.team-members .image{
  background-image: none !important;
  background: linear-gradient(135deg, rgba(126,200,244,0.18), rgba(166,230,197,0.22));
  border-radius: 22px;
  padding: 18px;
  overflow: hidden;
}

.team-members .image img{
  max-width: 180px;
  border-radius: 22px;
  object-fit: cover;
}

.team-members .text{
  margin-top: 18px;
  padding: 0 8px;
  color: var(--sem-text-soft);
}

/* --------------------------------------------------------------------------
   Keys / card grids / contact-like modules
   -------------------------------------------------------------------------- */

.keys .items > [class*="col"],
.row.cards > [class*="col"],
.main [class*="card"],
.contact-form,
form.wpcf7-form{
  margin-top: 20px;
}

.keys .items > [class*="col"] > *{
  height: 100%;
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--sem-border);
  border-radius: var(--sem-radius-card-sm);
  box-shadow: var(--sem-shadow-sm);
  padding: 24px;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

input,
textarea,
select{
  border: 1px solid rgba(30,47,74,0.14);
  border-radius: var(--sem-radius-control);
  background: rgba(255,255,255,0.92);
  min-height: 52px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}

textarea{
  min-height: 140px;
}

input:focus,
textarea:focus,
select:focus{
  outline: none;
  border-color: rgba(126,200,244,0.9);
  box-shadow: 0 0 0 4px rgba(126,200,244,0.18);
}

/* --------------------------------------------------------------------------
   Get in touch band
   -------------------------------------------------------------------------- */

#get-in-touch{
  padding: 0;
  background: transparent;
}

#get-in-touch .container{
  background: linear-gradient(135deg, #0f4960 0%, #0d6770 52%, #0d7a75 100%);
  color: #fff;
  overflow: hidden;
}

#get-in-touch .container :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4,p,a,div){
  color: inherit;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

body > footer{
  margin-top: var(--sem-section-gap-y);
  padding: 0 0 48px;
  background: transparent;
  color: #fff;
}

body > footer .container{
  background: linear-gradient(180deg, #132f52 0%, #1b385f 100%);
  color: #fff;
  overflow: hidden;
}

body > footer a{
  color: #c4f0dc;
}

body > footer a:hover{
  color: #fff;
}

body > footer .logo svg path{
  fill: #b7e7ff;
}

/* --------------------------------------------------------------------------
   Images in common content areas
   -------------------------------------------------------------------------- */

figure,
.wp-block-image,
.image,
.card,
.swiper,
.ratio,
[class*="image-wrap"]{
  border-radius: inherit;
}

.image,
.ratio,
.swiper,
figure,
.wp-block-image{
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Responsive refinements
   -------------------------------------------------------------------------- */

@media (max-width: 993px){
  body{
    padding-top: 78px;
  }

  #hero .wrapper{
    min-height: auto;
    padding: 28px 22px;
    border-radius: 28px;
  }

  #hero .wrapper .content{
    max-width: 100%;
  }

  .team-members .card{
    padding: 20px;
  }

  .simple-with-columns .row:last-child > [class*="col"] .h4,
  .simple-with-columns .row:last-child > [class*="col"] .p1{
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* --------------------------------------------------------------------------
   Legacy section background cleanup
   -------------------------------------------------------------------------- */

section.wide,
.simple.wide,
.simple-with-columns.wide,
.team.wide,
.keys.wide,
.slider.wide{
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   Preserve simple element color selector on inner shell
   -------------------------------------------------------------------------- */

.simple.wide.dark-blue > .container{
  background: linear-gradient(180deg, #1e2f4a 0%, #2c415e 100%);
  border-color: rgba(126,200,244,0.18);
  color: #f4f7fb;
}

.simple.wide.dark-blue > .container .section-heading,
.simple.wide.dark-blue > .container .section-tagline,
.simple.wide.dark-blue > .container .section-description,
.simple.wide.dark-blue > .container .section-description p,
.simple.wide.dark-blue > .container .section-description li,
.simple.wide.dark-blue > .container .section-description strong{
  color: #f4f7fb;
}

.simple.wide.dark-blue > .container .section-description a{
  color: #a6e6c5;
}

.simple.wide.dark-blue > .container .btn--primary{
  background: rgba(255,255,255,0.96);
  color: var(--sem-navy);
  border-color: transparent;
}

.simple.wide.light-blue > .container{
  background: linear-gradient(180deg, #f3f8fb 0%, #e7f1f7 100%);
  border-color: rgba(126,200,244,0.22);
}

.simple.wide.light-blue > .container .section-heading,
.simple.wide.light-blue > .container .section-tagline{
  color: var(--sem-navy);
}

.simple.wide.light-blue > .container .section-description,
.simple.wide.light-blue > .container .section-description p,
.simple.wide.light-blue > .container .section-description li{
  color: var(--sem-text-soft);
}

/* --------------------------------------------------------------------------
   Preserve color selectors across section types on inner shells
   -------------------------------------------------------------------------- */

section.dark-blue > .container,
section.dark-blue > .container-fluid > .row > .col > .container,
section.dark-blue > .container-fluid > .row > .col > .wrapper{
  background: linear-gradient(180deg, #1e2f4a 0%, #2c415e 100%);
  border-color: rgba(126,200,244,0.18);
  color: #f4f7fb;
}

section.dark-blue > .container :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.section-heading,.section-tagline,.title,strong,p,li,dt,dd,span,div),
section.dark-blue > .container-fluid > .row > .col > .container :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.section-heading,.section-tagline,.title,strong,p,li,dt,dd,span,div),
section.dark-blue > .container-fluid > .row > .col > .wrapper :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.section-heading,.section-tagline,.title,strong,p,li,dt,dd,span,div){
  color: inherit;
}

section.dark-blue > .container a,
section.dark-blue > .container-fluid > .row > .col > .container a,
section.dark-blue > .container-fluid > .row > .col > .wrapper a{
  color: #a6e6c5;
}

section.dark-blue > .container hr,
section.dark-blue > .container-fluid > .row > .col > .container hr,
section.dark-blue > .container-fluid > .row > .col > .wrapper hr{
  border-color: rgba(244,247,251,0.18);
  opacity: 1;
}

section.dark-blue > .container .btn--primary,
section.dark-blue > .container-fluid > .row > .col > .container .btn--primary,
section.dark-blue > .container-fluid > .row > .col > .wrapper .btn--primary{
  background: rgba(255,255,255,0.96);
  color: var(--sem-navy);
  border-color: transparent;
}

section.light-blue > .container,
section.light-blue > .container-fluid > .row > .col > .container,
section.light-blue > .container-fluid > .row > .col > .wrapper{
  background: linear-gradient(180deg, #f3f8fb 0%, #e7f1f7 100%);
  border-color: rgba(126,200,244,0.22);
  color: var(--sem-text);
}

section.light-blue > .container :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.section-heading,.section-tagline,.title,strong,p,li,dt,dd,span,div),
section.light-blue > .container-fluid > .row > .col > .container :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.section-heading,.section-tagline,.title,strong,p,li,dt,dd,span,div),
section.light-blue > .container-fluid > .row > .col > .wrapper :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.section-heading,.section-tagline,.title,strong,p,li,dt,dd,span,div){
  color: inherit;
}

section.light-blue > .container hr,
section.light-blue > .container-fluid > .row > .col > .container hr,
section.light-blue > .container-fluid > .row > .col > .wrapper hr{
  border-color: rgba(30,47,74,0.10);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Color selector support for refreshed inner shells
   -------------------------------------------------------------------------- */

section.light-green > .container,
section.light-green > .container-fluid > .row > .col > .container,
section.light-green > .container-fluid > .row > .col > .wrapper{
  background: linear-gradient(180deg, #f0faf4 0%, #dff4e8 100%);
  border-color: rgba(166,230,197,0.36);
  color: var(--sem-text);
}

section.light-green > .container :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.section-heading,.section-tagline,.title,strong,p,li,dt,dd,span,div),
section.light-green > .container-fluid > .row > .col > .container :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.section-heading,.section-tagline,.title,strong,p,li,dt,dd,span,div),
section.light-green > .container-fluid > .row > .col > .wrapper :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.section-heading,.section-tagline,.title,strong,p,li,dt,dd,span,div){
  color: inherit;
}

section.orange > .container,
section.orange > .container-fluid > .row > .col > .container,
section.orange > .container-fluid > .row > .col > .wrapper{
  background: linear-gradient(180deg, #fff3e8 0%, #ffe1c4 100%);
  border-color: rgba(255,106,0,0.28);
  color: var(--sem-text);
}

section.orange > .container :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.section-heading,.section-tagline,.title,strong,p,li,dt,dd,span,div),
section.orange > .container-fluid > .row > .col > .container :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.section-heading,.section-tagline,.title,strong,p,li,dt,dd,span,div),
section.orange > .container-fluid > .row > .col > .wrapper :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.section-heading,.section-tagline,.title,strong,p,li,dt,dd,span,div){
  color: inherit;
}