/* ============================================================
   DISC Profile Scandinavia — "cloud" header/footer styles.
   Self-contained: component layer (from design-reference styles.css)
   + the exact subset of utility classes the header/footer markup
   uses, all scoped under .dps-cloud so nothing leaks into Elementor
   page bodies. No Tailwind runtime dependency.
   ============================================================ */

/* ---------- Scoped base reset ---------- */
.dps-cloud, .dps-cloud *, .dps-cloud *::before, .dps-cloud *::after { box-sizing: border-box; }
.dps-cloud {
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  color: #334155; line-height: 1.6; -webkit-font-smoothing: antialiased; width: 100%;
}
.dps-cloud :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote) { margin: 0; padding: 0; }
.dps-cloud :where(ul) { list-style: none; }
.dps-cloud :where(a) { color: inherit; text-decoration: none; }
.dps-cloud :where(img) { display: block; max-width: 100%; }
.dps-cloud :where(button) { font-family: inherit; }
.dps-cloud :where(h1,h2,h3,h4) { font-family: 'Fraunces', Georgia, serif; font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; }

/* Footer: break out of Elementor's boxed (1140px) container so the green
   band spans the full screen width. Inner .max-w-6xl keeps content centred.
   Header stays boxed on purpose (its floating pill is centred within it). */
#colophon .elementor-container { max-width: 100%; width: 100%; }

/* ---------- Utility layer (scoped) ---------- */
.dps-cloud .flex { display: flex; }
.dps-cloud .inline-flex { display: inline-flex; }
.dps-cloud .grid { display: grid; }
.dps-cloud .hidden { display: none; }
.dps-cloud .flex-col { flex-direction: column; }
.dps-cloud .items-center { align-items: center; }
.dps-cloud .justify-between { justify-content: space-between; }
.dps-cloud .shrink-0 { flex-shrink: 0; }

.dps-cloud .mx-auto { margin-left: auto; margin-right: auto; }
.dps-cloud .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.dps-cloud .px-4 { padding-left: 1rem; padding-right: 1rem; }
.dps-cloud .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.dps-cloud .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.dps-cloud .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.dps-cloud .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.dps-cloud .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.dps-cloud .p-2 { padding: 0.5rem; }
.dps-cloud .p-1\.5 { padding: 0.375rem; }
.dps-cloud .pt-16 { padding-top: 4rem; }
.dps-cloud .pb-8 { padding-bottom: 2rem; }
.dps-cloud .pb-12 { padding-bottom: 3rem; }

.dps-cloud .mt-0\.5 { margin-top: 0.125rem; }
.dps-cloud .mb-6 { margin-bottom: 1.5rem; }
.dps-cloud .mb-5 { margin-bottom: 1.25rem; }
.dps-cloud .mb-1 { margin-bottom: 0.25rem; }
.dps-cloud .mt-2 { margin-top: 0.5rem; }
.dps-cloud .mt-3 { margin-top: 0.75rem; }
.dps-cloud .mt-4 { margin-top: 1rem; }
.dps-cloud .mt-8 { margin-top: 2rem; }

.dps-cloud .gap-1 { gap: 0.25rem; }
.dps-cloud .gap-1\.5 { gap: 0.375rem; }
.dps-cloud .gap-2 { gap: 0.5rem; }
.dps-cloud .gap-2\.5 { gap: 0.625rem; }
.dps-cloud .gap-3 { gap: 0.75rem; }
.dps-cloud .gap-4 { gap: 1rem; }
.dps-cloud .gap-6 { gap: 1.5rem; }
.dps-cloud .gap-10 { gap: 2.5rem; }

.dps-cloud .h-8 { height: 2rem; }
.dps-cloud .h-10 { height: 2.5rem; }
.dps-cloud .h-14 { height: 3.5rem; }
.dps-cloud .w-auto { width: auto; }
.dps-cloud .max-w-7xl { max-width: 80rem; }
.dps-cloud .max-w-6xl { max-width: 72rem; }
.dps-cloud .max-w-xs { max-width: 20rem; }

.dps-cloud .sticky { position: -webkit-sticky; position: sticky; }
.dps-cloud .top-0 { top: 0; }
.dps-cloud .z-50 { z-index: 50; }

.dps-cloud .border { border-width: 1px; border-style: solid; }
.dps-cloud .border-white\/70 { border-color: rgba(255,255,255,0.7); }
.dps-cloud .border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.dps-cloud .border-emerald-800 { border-color: #065f46; }
.dps-cloud .rounded-2xl { border-radius: 1rem; }
.dps-cloud .rounded-full { border-radius: 9999px; }
.dps-cloud .rounded-md { border-radius: 0.375rem; }
.dps-cloud .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }

.dps-cloud .text-\[9px\] { font-size: 9px; }
.dps-cloud .text-\[10px\] { font-size: 10px; }
.dps-cloud .text-xs { font-size: 0.75rem; line-height: 1rem; }
.dps-cloud .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.dps-cloud .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.dps-cloud .text-2xl { font-size: 1.5rem; line-height: 2rem; }
.dps-cloud .font-bold { font-weight: 700; }
.dps-cloud .font-semibold { font-weight: 600; }
.dps-cloud .font-nunito { font-family: 'Nunito', sans-serif; }
.dps-cloud .uppercase { text-transform: uppercase; }
.dps-cloud .tracking-widest { letter-spacing: 0.1em; }
.dps-cloud .leading-relaxed { line-height: 1.625; }
.dps-cloud .break-all { word-break: break-all; }

.dps-cloud .text-white { color: #ffffff; }
.dps-cloud .text-slate-600 { color: #475569; }
.dps-cloud .text-slate-500 { color: #64748b; }
.dps-cloud .text-slate-800 { color: #1e293b; }
.dps-cloud .text-slate-400 { color: #94a3b8; }
.dps-cloud .text-emerald-600 { color: #059669; }
.dps-cloud .text-emerald-200 { color: #a7f3d0; }
.dps-cloud .text-emerald-300 { color: #6ee7b7; }
.dps-cloud .text-emerald-400 { color: #34d399; }
.dps-cloud .text-emerald-200\/60 { color: rgba(167,243,208,0.6); }
.dps-cloud .text-emerald-400\/70 { color: rgba(52,211,153,0.7); }

.dps-cloud .bg-emerald-900 { background-color: #064e3b; }
.dps-cloud .bg-white\/95 { background-color: rgba(255,255,255,0.95); }

.dps-cloud .brightness-0 { --tw-brightness: brightness(0); }
.dps-cloud .invert { --tw-invert: invert(100%); }
.dps-cloud .brightness-0.invert { filter: brightness(0) invert(1); }

.dps-cloud .cursor-default { cursor: default; }
.dps-cloud .transition-colors { transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
.dps-cloud .space-y-2\.5 > * + * { margin-top: 0.625rem; }
.dps-cloud .hover\:text-white:hover { color: #ffffff; }

.dps-cloud .grid { grid-template-columns: minmax(0, 1fr); }

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
  .dps-cloud .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .dps-cloud .md\:inline-flex { display: inline-flex; }
  .dps-cloud .md\:flex-row { flex-direction: row; }
  .dps-cloud .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .dps-cloud .lg\:flex { display: flex; }
  .dps-cloud .lg\:hidden { display: none; }
  .dps-cloud .lg\:grid-cols-\[1\.4fr_1fr_1fr_1fr_1fr\] { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }
}

/* ---------- Component layer (verbatim from design-reference) ---------- */
.float-nav { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

.nav-link {
  font-family: 'Nunito', sans-serif; color: #475569; font-size: 0.9rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0;
  transition: color 0.2s; background: none; border: none; cursor: pointer;
}
.nav-link:hover { color: #059669; }

.has-dropdown { position: relative; }
.has-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 0.75rem; }

.dropdown {
  position: absolute; top: calc(100% + 0.75rem); left: 50%;
  transform: translateX(-50%) translateY(4px); min-width: 260px;
  background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(14px);
  border: 1px solid rgba(167, 243, 208, 0.5); border-radius: 18px; padding: 0.6rem;
  box-shadow: 0 16px 32px -20px rgba(5, 150, 105, 0.18), 0 4px 10px -6px rgba(15, 23, 42, 0.05);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; transition-delay: 0.12s; z-index: 60;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown, .has-dropdown.open .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition-delay: 0s;
}
.dropdown a {
  display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.7rem 0.85rem; border-radius: 12px;
  color: #334155; font-size: 0.88rem; font-weight: 500; font-family: 'Nunito', sans-serif;
  transition: background 0.15s, color 0.15s; text-decoration: none;
}
.dropdown a:hover { background: #ecfdf5; color: #059669; }
.dropdown a .d-sub { display: block; font-size: 0.75rem; font-weight: 400; color: #94a3b8; margin-top: 2px; }
.dropdown a i.d-ico { color: #10b981; width: 1rem; margin-top: 3px; font-size: 0.75rem; flex-shrink: 0; }

.btn-green { background: linear-gradient(135deg, #059669, #34d399); color: white; transition: transform 0.2s, box-shadow 0.2s; }
.btn-green:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(5, 150, 105, 0.2); }

.pill-outline {
  border: 1.5px solid #cbd5e1; color: #334155; padding: 0.4rem 0.85rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.35rem;
  transition: border-color 0.2s, color 0.2s, background 0.2s; text-decoration: none;
}
.pill-outline:hover { border-color: #10b981; color: #059669; background: #ecfdf5; }

.mobile-sheet { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 90; opacity: 0; visibility: hidden; transition: opacity 0.25s; }
.mobile-sheet.open { opacity: 1; visibility: visible; }
.mobile-sheet > div {
  position: absolute; top: 0; right: 0; bottom: 0; width: 88%; max-width: 380px; background: white;
  padding: 1.5rem; overflow-y: auto; transform: translateX(100%); transition: transform 0.3s;
}
.mobile-sheet.open > div { transform: translateX(0); }

.footer-auth { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(167, 243, 208, .2); margin-top: 32px; }
.footer-auth-logo { height: 48px; width: auto; opacity: .7; }
.footer-auth-text { font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 600; color: #94a3b8; letter-spacing: .02em; }

.dps-cloud :focus-visible { outline: 2px solid #10b981; outline-offset: 2px; border-radius: 6px; }


/* ===== Header/footer shield: keep approved look despite global Elementor kit ===== */
.dps-cloud .float-nav .nav-link,
.dps-cloud .float-nav button.nav-link,
.dps-cloud .float-nav button,
.dps-cloud header .nav-link {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #475569 !important;
  font-family: 'Nunito', sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  padding: 0.35rem 0 !important;
}
.dps-cloud .float-nav .nav-link:hover { color: #059669 !important; }
.dps-cloud .btn-green,
.dps-cloud .btn-green:hover,
.dps-cloud .btn-green * { color: #ffffff !important; }

/* ===== Sticky header bar over the shared hero gradient (integrated look) =====
   The theme header wrapper is #masthead (OUTSIDE .dps-cloud). The reference bar is a
   <div class="sticky">, not a <header>, and its parent .dps-cloud is too short for
   sticky to travel — so sticky lives on #masthead. The gradient itself lives on #page
   (see below) and #masthead is transparent, so the nav shares the hero's gradient. */
/* Technique B: ONE shared gradient. The hero-mesh lives on #page (full-width
   wrapper that spans the whole page), painted only across the top band. Both
   #masthead (sticky nav) and the hero section are transparent, so the nav and
   hero render over the same continuous gradient — no seam. */
#page {
  background-color: #fafaf9;
  background-image:
    radial-gradient(ellipse at 15% 50%, rgba(167,243,208,.55) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(254,215,170,.35) 0%, transparent 55%),
    radial-gradient(ellipse at 55% 85%, rgba(199,210,254,.25) 0%, transparent 50%);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 720px;
}
#masthead { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; z-index: 99 !important; background: transparent !important; }
.hero-mesh {
  background: transparent !important;
  background-color: transparent !important;
}