html { height: 100%; }
body { height: 100%; margin: 0; }

.moroccan-pattern {
background-image: 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='%23C1272D' fill-opacity='0.08'%3E%3Cpath d='M30 30l15-15v30L30 30zm0 0L15 15v30l15-15z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.moroccan-border {
background: linear-gradient(90deg, #C1272D 25%, #006233 25%, #006233 50%, #C9A227 50%, #C9A227 75%, #C1272D 75%);
background-size: 40px 4px;
}

html {
scroll-behavior: smooth;
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

.animate-fade-in-up {
animation: fadeInUp 0.6s ease-out forwards;
}

.animate-float {
animation: float 3s ease-in-out infinite;
}

.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(193, 39, 45, 0.15);
}

.moroccan-arch {
border-radius: 50% 50% 0 0 / 30% 30% 0 0;
}

.newsletter-input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.3);
}

.reveal-section {
opacity: 1;
transform: translateY(0);
transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-section.is-visible {
opacity: 1;
transform: translateY(0);
}

.interactive-card {
transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.interactive-card:hover {
transform: translateY(-6px) scale(1.01);
box-shadow: 0 16px 28px rgba(0, 0, 0, 0.1);
border-color: rgba(193, 39, 45, 0.35);
}

.active-nav-link {
color: #ffffff !important;
font-weight: 700;
}

:root {
--amlo-red: #c1272d;
--amlo-green: #006233;
--amlo-gold: #c9a227;
--amlo-ink: #12202f;
--amlo-muted: #5f6b7a;
--amlo-surface: #f7f4ef;
--nav-height: 88px;
}

body {
background: radial-gradient(circle at 12% 2%, rgba(201, 162, 39, 0.12), transparent 28%),
linear-gradient(160deg, #fcfbf8 0%, #f5f1e8 48%, #f8f4ee 100%);
color: var(--amlo-ink);
}

section {
scroll-margin-top: calc(var(--nav-height) + 24px);
content-visibility: auto;
contain-intrinsic-size: 1px 900px;
}

/* Mobile rendering safety: avoid text disappearing issues on some browsers. */
@media (max-width: 1024px) {
  section {
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }
}

/* About section mobile text contrast */
@media (max-width: 768px) {
  #about .inline-flex.text-moroccan-red .lang-en,
  #about .inline-flex.text-moroccan-red .lang-fr {
    color: #8f1820 !important;
  }

  #about h2 .lang-en,
  #about h2 .lang-fr {
    color: #111827 !important;
  }
}

.section-shell {
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(3px);
border: 1px solid rgba(193, 39, 45, 0.08);
border-radius: 1.5rem;
}

.cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.85rem 1.6rem;
border-radius: 999px;
font-weight: 600;
transition: all 0.25s ease;
}

.cta-btn-primary {
background: linear-gradient(135deg, var(--amlo-red), #a41e24);
color: #fff;
box-shadow: 0 14px 28px rgba(193, 39, 45, 0.25);
}

.cta-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 18px 30px rgba(193, 39, 45, 0.3);
}

.cta-btn-outline {
border: 1px solid rgba(0, 98, 51, 0.35);
background: #fff;
color: var(--amlo-green);
}

.cta-btn-outline:hover {
background: rgba(0, 98, 51, 0.06);
transform: translateY(-2px);
}

.focus-ring:focus-visible {
outline: 3px solid rgba(193, 39, 45, 0.28);
outline-offset: 2px;
}

/* Hero banner redesign: larger, zellige-inspired, readable overlay */
.hero-zellige {
position: relative;
isolation: isolate;
min-height: clamp(560px, 92vh, 980px);
background-color: #0e4a33;
background-image:
radial-gradient(circle at 8% 10%, rgba(201, 162, 39, 0.42), transparent 30%),
radial-gradient(circle at 92% 16%, rgba(193, 39, 45, 0.34), transparent 28%),
linear-gradient(150deg, rgba(0, 98, 51, 0.95) 0%, rgba(7, 65, 49, 0.94) 48%, rgba(20, 42, 58, 0.92) 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23c9a227' stroke-opacity='.22' stroke-width='1.2'%3E%3Cpath d='M80 8l15 27 30 4-21 22 6 31-30-14-30 14 6-31-21-22 30-4z'/%3E%3Cpath d='M0 80h160M80 0v160M23 23l114 114M137 23L23 137' stroke-opacity='.15'/%3E%3Cpolygon points='80,25 96,52 128,52 102,72 112,104 80,85 48,104 58,72 32,52 64,52'/%3E%3C/g%3E%3C/svg%3E");
background-size: auto, auto, auto, 180px 180px;
background-repeat: no-repeat, no-repeat, no-repeat, repeat;
background-position: center, center, center, center;
}

.hero-zellige::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(8, 23, 30, 0.12) 0%, rgba(8, 23, 30, 0.62) 100%);
}

.hero-copy-panel {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(201, 162, 39, 0.35);
box-shadow: 0 24px 48px rgba(8, 23, 30, 0.2);
border-radius: 1.6rem;
padding: clamp(1.25rem, 3vw, 2.1rem);
}


.hero-orb {
position: absolute;
border-radius: 9999px;
filter: blur(1px);
pointer-events: none;
}

.hero-orb-gold {
top: 12%;
left: -90px;
width: 230px;
height: 230px;
background: radial-gradient(circle at 30% 30%, rgba(255, 233, 165, 0.72), rgba(201, 162, 39, 0.18) 68%, transparent 100%);
}

.hero-orb-red {
right: -80px;
bottom: 8%;
width: 210px;
height: 210px;
background: radial-gradient(circle at 30% 30%, rgba(255, 155, 162, 0.45), rgba(193, 39, 45, 0.2) 70%, transparent 100%);
}

/* Global layout polish */
.site-nav {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(17, 24, 39, 0.06);
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
z-index: 70;
transition: top 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
}

.site-nav.scrolled {
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
background: rgba(255, 255, 255, 0.96);
}

.nav-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.9rem;
border-radius: 9999px;
font-weight: 600;
font-size: 0.85rem;
line-height: 1;
color: #ffffff;
background: linear-gradient(135deg, #0b7a43, #006233);
border: 1px solid rgba(0, 98, 51, 0.95);
box-shadow: 0 8px 18px rgba(0, 98, 51, 0.22);
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.nav-link::after {
display: none;
}

.nav-link:hover {
color: #ffffff;
transform: translateY(-1px);
background: linear-gradient(135deg, #0f8b4e, #007640);
box-shadow: 0 12px 22px rgba(0, 98, 51, 0.3);
}

.active-nav-link {
background: linear-gradient(135deg, #14532d, #0a6b38) !important;
box-shadow: 0 12px 22px rgba(0, 98, 51, 0.32);
}

#mobile-menu a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.65rem 1rem;
border-radius: 9999px;
font-weight: 600;
font-size: 0.9rem;
color: #ffffff;
background: linear-gradient(135deg, #0b7a43, #006233);
border: 1px solid rgba(0, 98, 51, 0.95);
box-shadow: 0 8px 18px rgba(0, 98, 51, 0.22);
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

#mobile-menu a:hover {
color: #ffffff;
background: linear-gradient(135deg, #0f8b4e, #007640);
transform: translateY(-1px);
box-shadow: 0 12px 22px rgba(0, 98, 51, 0.3);
}

#mobile-menu {
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translateY(-6px);
transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.22s ease;
}

#mobile-menu.menu-open {
max-height: 680px;
opacity: 1;
transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.section-card {
background: rgba(255, 255, 255, 0.84);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 1.2rem;
box-shadow: 0 18px 30px rgba(15, 23, 42, 0.06);
}

.site-footer {
background: linear-gradient(145deg, #101828 0%, #111827 46%, #172033 100%);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}


body { box-sizing: border-box; }

/* Jobs nav button in red */
.jobs-nav-link {
  background: linear-gradient(135deg, #c1272d, #a41e24) !important;
  border-color: rgba(193, 39, 45, 0.95) !important;
  box-shadow: 0 8px 18px rgba(193, 39, 45, 0.24) !important;
  color: #ffffff !important;
}

.jobs-nav-link:hover {
  background: linear-gradient(135deg, #d4383e, #b01f26) !important;
  box-shadow: 0 12px 22px rgba(193, 39, 45, 0.32) !important;
}

.jobs-nav-link.active-nav-link {
  background: linear-gradient(135deg, #991b1f, #7f1d1d) !important;
  box-shadow: 0 12px 22px rgba(153, 27, 31, 0.34) !important;
}