/*
Theme Name: Aprendido website (WPConvert)
Theme URI: https://wpconvert.ai
Author: WPConvert.ai
Author URI: https://wpconvert.ai
Description: This theme was automatically generated from your original site design using WPConvert.ai. It preserves your layout, colors, typography, header, footer, and page content, and makes it editable in WordPress.
Version: 2.0.14
Requires at least: 6.0
Tested up to: 6.6
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpconvert
Tags: landing page, responsive, custom header, custom footer
*/

/* External Stylesheets - @import statements MUST come before any CSS rules */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Roboto+Condensed:wght@700;800&family=Montserrat:wght@600;700&family=Inter:wght@400;500;600&family=Caveat:wght@600;700&display=swap');

/* CSS Variables */
:root {
}

/* Inline Styles */

/* Extracted CSS from page */

body {
  background: var(--paper) !important;
}

:root {
  --navy: #003366;
  --navy-deep: #00284f;
  --coral: #ff9966;
  --coral-deep: #f57f45;
  --coral-tint: #fff1e8;
  --slate: #3a4961;
  --paper: #fbfaf7;
  --line: rgba(0, 51, 102, 0.12);
  --white: #ffffff;
  --shadow: 0 18px 50px -24px rgba(0, 40, 79, 0.45);
  --maxw: 1140px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--slate);
  background: #e9ebef;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--navy);
  line-height: 1.08;
}
p {
  margin: 0 0 1rem;
}

/* ---------- concept toolbar (not part of the site) ---------- */
.concept-bar {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--navy-deep);
  color: #cfe0f2;
  border-bottom: 2px solid var(--coral);
}
.concept-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.6rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}
.concept-inner strong {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
}
.concept-inner .tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--coral);
  font-family: 'Roboto', sans-serif;
}
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-left: auto;
}
.jump a {
  font-size: 0.74rem;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  color: #cfe0f2;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
}
.jump a:hover {
  background: var(--coral);
  color: var(--navy-deep);
  border-color: var(--coral);
}

/* ---------- page framing ---------- */
.stage {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem;
}
.frame-label {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 3.5rem 0 1rem;
  flex-wrap: wrap;
}
.frame-label .num {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--coral);
  letter-spacing: 0.04em;
}
.frame-label .name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 1.15rem;
}
.frame-label .note {
  font-size: 0.82rem;
  color: #7b8699;
}
.browser {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0, 40, 79, 0.5);
  border: 1px solid #dfe3ea;
  background: var(--paper);
}
.browser-top {
  background: #e7eaef;
  padding: 0.55rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border-bottom: 1px solid #dadfe6;
}
.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #c3c9d2;
}
.browser-url {
  margin-left: 0.6rem;
  background: #fff;
  border-radius: 7px;
  padding: 0.2rem 0.8rem;
  font-size: 0.72rem;
  color: #8c95a3;
  font-family: 'Roboto', sans-serif;
}
.site {
  background: var(--paper);
}

/* ---------- site nav ---------- */
.nav {
  position: sticky;
  top: 0;
  background: rgba(251, 250, 247, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  z-index: 5;
}
.nav-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.brand img {
  height: 34px;
  width: auto;
}
.brand .word {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: var(--navy);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.nav-links {
  display: flex;
  gap: 1.35rem;
  margin-left: auto;
  align-items: center;
}
.nav-links a {
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--slate);
}
.nav-links a:hover {
  color: var(--coral-deep);
}
.btn {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 0.7rem 1.3rem;
  border-radius: 100px;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.btn-coral {
  background: var(--coral);
  color: var(--navy-deep);
}
.btn-coral:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px var(--coral-deep);
}
.btn-ghost {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn-ghost:hover {
  background: var(--navy);
  color: #fff;
}
.btn-light {
  background: #fff;
  color: var(--navy);
}
.btn-outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.btn-outline-light:hover {
  background: #fff;
  color: var(--navy);
}

/* ---------- shared layout ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.section {
  padding: 5rem 0;
}
.eyebrow {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--coral-deep);
  margin-bottom: 1rem;
}
.display {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.98;
}
.script {
  font-family: 'Caveat', cursive;
  color: var(--coral-deep);
  text-transform: none;
  font-weight: 700;
  letter-spacing: 0;
}
.h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}
.lead {
  font-size: 1.12rem;
  max-width: 48ch;
}
.muted {
  color: #6f7a8c;
}
.center {
  text-align: center;
}
.center .lead {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      1200px 600px at 85% -10%,
      rgba(255, 153, 102, 0.18),
      transparent 60%
    ),
    var(--paper);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
  padding: 5rem 0 4.5rem;
}
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
}
.hero h1 .l1 {
  color: var(--navy);
}
.hero h1 .l2 {
  color: var(--navy);
}
.hero h1 .script {
  display: block;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  margin-top: 0.1em;
}
.hero .lead {
  margin-top: 1.5rem;
}
.hero-cta {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.bubble-art {
  position: relative;
  justify-self: center;
}
.bubble-art .disc {
  width: min(360px, 80%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--navy), var(--navy-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  margin: 0 auto;
}
.bubble-art .disc img {
  width: 62%;
}
.bubble-art .chip {
  position: absolute;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fff;
  color: var(--navy);
  padding: 0.5rem 0.9rem;
  border-radius: 14px;
  font-size: 0.85rem;
  box-shadow: var(--shadow);
}
.bubble-art .chip::after {
  content: '';
  position: absolute;
  left: 24px;
  bottom: -8px;
  border-width: 9px 9px 0;
  border-style: solid;
  border-color: #fff transparent transparent;
}
.bubble-art .chip.one {
  top: 6%;
  left: -4%;
}
.bubble-art .chip.two {
  bottom: 8%;
  right: -6%;
  background: var(--coral);
  color: var(--navy-deep);
}
.bubble-art .chip.two::after {
  border-color: var(--coral) transparent transparent;
  left: auto;
  right: 24px;
}

/* trust strip */
.trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.trust .wrap {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.4rem 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.trust span.lbl {
  font-family: 'Roboto', sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #9aa3b1;
}
.trust .name {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: var(--navy);
  opacity: 0.72;
  letter-spacing: 0.02em;
}

/* problem cards */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.8rem;
}
.card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.card .ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--coral-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-family: 'Roboto Condensed';
  font-weight: 800;
  color: var(--coral-deep);
}

/* journey */
.journey {
  background: var(--navy);
  color: #dce7f3;
}
.journey h2,
.journey h3 {
  color: #fff;
}
.journey .eyebrow {
  color: var(--coral);
}
.jcards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
.jcard {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 1.6rem;
  text-decoration: none;
  color: #dce7f3;
  display: flex;
  flex-direction: column;
  min-height: 230px;
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}
.jcard:hover {
  transform: translateY(-4px);
  background: rgba(255, 153, 102, 0.14);
  border-color: var(--coral);
}
.jcard .jn {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--coral);
}
.jcard h3 {
  font-family: 'Montserrat';
  font-size: 1.15rem;
  margin: 0.4rem 0 0.6rem;
}
.jcard p {
  font-size: 0.92rem;
  color: #b9c8db;
  margin: 0;
}
.jcard .more {
  margin-top: auto;
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--coral);
  padding-top: 1rem;
}

/* speech-bubble testimonials */
.tcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.tbubble {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.6rem;
  position: relative;
  box-shadow: 0 10px 30px -22px rgba(0, 40, 79, 0.4);
}
.tbubble::after {
  content: '';
  position: absolute;
  left: 34px;
  bottom: -12px;
  border-width: 13px 13px 0;
  border-style: solid;
  border-color: #fff transparent transparent;
  filter: drop-shadow(0 6px 4px rgba(0, 40, 79, 0.06));
}
.tbubble p {
  font-size: 0.96rem;
  color: var(--slate);
}
.tperson {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.6rem;
}
.tperson .av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--coral-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto Condensed';
  font-weight: 800;
  color: var(--coral-deep);
}
.tperson b {
  font-family: 'Montserrat';
  color: var(--navy);
  font-size: 0.9rem;
  display: block;
  line-height: 1.2;
}
.tperson small {
  color: #8a93a2;
  font-size: 0.78rem;
}

/* feature row */
.featrow {
  padding: 5rem 0;
}
.featrow .pic {
  background: linear-gradient(150deg, var(--coral-tint), #ffe3d2);
  border-radius: 20px;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.featrow .pic img {
  width: 55%;
}
.checklist {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
}
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.7rem;
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--coral-deep);
  border-bottom: 3px solid var(--coral-deep);
  transform: rotate(-45deg);
}

/* newsletter */
.news {
  background: var(--coral-tint);
}
.news .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
  padding: 3.5rem 1.5rem;
}
.news form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.news input {
  flex: 1;
  min-width: 220px;
  padding: 0.85rem 1.1rem;
  border-radius: 100px;
  border: 1px solid #e6c3ab;
  font-family: 'Inter';
  font-size: 0.95rem;
}

/* big CTA */
.cta-band {
  background: var(--navy);
  color: #fff;
  text-align: center;
  padding: 4.5rem 1.5rem;
}
.cta-band h2 {
  color: #fff;
  max-width: 18ch;
  margin: 0 auto 1.6rem;
}
.cta-band .script {
  color: var(--coral);
}

/* footer */
.foot {
  background: var(--navy-deep);
  color: #9fb3cb;
}
.foot-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2rem;
}
.foot h4 {
  color: #fff;
  font-family: 'Montserrat';
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}
.foot a {
  display: block;
  text-decoration: none;
  color: #9fb3cb;
  font-size: 0.9rem;
  margin-bottom: 0.55rem;
}
.foot a:hover {
  color: var(--coral);
}
.foot .brand img {
  height: 40px;
  margin-bottom: 1rem;
}
.foot p {
  font-size: 0.86rem;
  color: #7f93ab;
}
.foot-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 1rem;
}
.foot-bar div {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.2rem 1.5rem;
  font-size: 0.78rem;
  color: #6f84a0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.member {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.member span {
  font-size: 0.74rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  color: #bcceea;
}

/* service hero */
.shero {
  background:
    radial-gradient(
      900px 500px at 90% -20%,
      rgba(255, 153, 102, 0.2),
      transparent 60%
    ),
    var(--paper);
  padding: 4.5rem 0 3.5rem;
}
.shero .step {
  font-family: 'Roboto Condensed';
  font-weight: 800;
  color: var(--coral-deep);
  font-size: 1rem;
  letter-spacing: 0.06em;
}
.shero h1 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: var(--navy);
  margin: 0.4rem 0 1rem;
  line-height: 1;
}

/* blog */
.bgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.bcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.bcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.bcard .thumb {
  aspect-ratio: 16/10;
  background: linear-gradient(150deg, var(--navy), var(--navy-deep));
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}
.bcard .thumb span {
  font-family: 'Roboto';
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--coral);
  background: rgba(0, 0, 0, 0.25);
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
}
.bcard .b-body {
  padding: 1.3rem;
}
.bcard h3 {
  font-family: 'Montserrat';
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.bcard small {
  color: #9aa3b1;
  font-family: 'Roboto';
  font-size: 0.76rem;
}
.bcard.feat {
  grid-column: span 3;
  flex-direction: row;
}
.bcard.feat .thumb {
  flex: 1;
  aspect-ratio: auto;
}
.bcard.feat .b-body {
  flex: 1.1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.cfield {
  margin-bottom: 1.1rem;
}
.cfield label {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--navy);
  display: block;
  margin-bottom: 0.4rem;
}
.cfield input,
.cfield textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: 'Inter';
  font-size: 0.95rem;
}
.contact-side {
  background: var(--navy);
  color: #dce7f3;
  border-radius: 20px;
  padding: 2.2rem;
}
.contact-side h3 {
  color: #fff;
  font-family: 'Montserrat';
}
.contact-side a {
  color: var(--coral);
  text-decoration: none;
}
.contact-side .row {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin: 1.2rem 0;
}
.contact-side .row .k {
  font-family: 'Roboto';
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--coral);
  min-width: 74px;
  padding-top: 0.2rem;
}

/* style guide */
.sg {
  background: #fff;
  border: 1px solid #dfe3ea;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 18px 50px -34px rgba(0, 40, 79, 0.5);
}
.sg h2 {
  font-family: 'Montserrat';
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
}
.sg .sg-sub {
  color: #7b8699;
  font-size: 0.9rem;
  margin-bottom: 1.6rem;
}
.sw-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.sw {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  width: 150px;
}
.sw .chip2 {
  height: 70px;
}
.sw .meta {
  padding: 0.5rem 0.7rem;
  font-family: 'Roboto';
  font-size: 0.72rem;
}
.sw .meta b {
  display: block;
  color: var(--navy);
  font-size: 0.8rem;
}
.sg-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.sg-cols h4 {
  font-family: 'Roboto';
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--coral-deep);
  margin-bottom: 0.6rem;
}
.fchip {
  margin-bottom: 0.7rem;
}
.fchip .lbl {
  font-size: 0.72rem;
  color: #8a93a2;
  font-family: 'Roboto';
}
.ss-note {
  background: var(--coral-tint);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  font-size: 0.88rem;
  margin-top: 1.2rem;
}
.ss-note b {
  color: var(--navy);
}

@media (max-width: 860px) {
  .hero-grid,
  .grid2,
  .news .wrap,
  .contact-grid,
  .sg-cols {
    grid-template-columns: 1fr;
  }
  .grid3,
  .jcards,
  .tcards,
  .bgrid {
    grid-template-columns: 1fr;
  }
  .foot-in {
    grid-template-columns: 1fr 1fr;
  }
  .bcard.feat {
    flex-direction: column;
  }
  .nav-links a:not(.btn) {
    display: none;
  }
}
/* case studies as conversation */
.case {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.9rem;
  margin-bottom: 1.8rem;
  box-shadow: 0 12px 34px -26px rgba(0, 40, 79, 0.5);
}
.case-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.case-head .sector {
  font-family: 'Roboto';
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--coral-deep);
  margin-bottom: 0.2rem;
}
.case-head .who {
  font-family: 'Montserrat';
  font-weight: 700;
  color: var(--navy);
  font-size: 1.1rem;
}
.case-head .tagchip {
  font-family: 'Roboto';
  font-size: 0.74rem;
  font-weight: 700;
  background: var(--coral-tint);
  color: var(--coral-deep);
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
}
.chat {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 640px;
  margin: 0 auto;
}
.msg {
  max-width: 82%;
  padding: 0.8rem 1.05rem;
  border-radius: 16px;
  font-size: 0.96rem;
  line-height: 1.5;
}
.msg .sp {
  display: block;
  font-family: 'Roboto';
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.25rem;
  opacity: 0.55;
}
.msg.them {
  align-self: flex-start;
  background: #eef1f6;
  color: var(--slate);
  border-bottom-left-radius: 5px;
}
.msg.me {
  align-self: flex-end;
  background: var(--coral-tint);
  color: var(--navy);
  border-bottom-right-radius: 5px;
}
.case-result {
  margin-top: 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}
.case-result .big {
  font-family: 'Roboto Condensed';
  font-weight: 800;
  color: var(--coral-deep);
  font-size: 1.7rem;
  line-height: 1;
}
.case-result .lbl {
  font-size: 0.95rem;
  color: var(--slate);
}

/* testimonials wall */
.twall {
  columns: 3 270px;
  column-gap: 1.4rem;
  margin-top: 2.4rem;
}
.twall .tbubble {
  break-inside: avoid;
  margin-bottom: 1.4rem;
  display: inline-block;
  width: 100%;
}
.twall .tbubble::after {
  display: none;
}

/* leave a testimonial */
.tform-wrap {
  background: var(--coral-tint);
  border-radius: 22px;
  padding: 2.4rem;
  max-width: 760px;
  margin: 0 auto;
}
.stars {
  display: flex;
  gap: 0.3rem;
  font-size: 1.5rem;
  color: var(--coral);
  margin: 0.2rem 0 0.4rem;
}
.consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--slate);
  margin: 0.6rem 0 1.1rem;
}
.consent input {
  margin-top: 0.25rem;
}
.seeall {
  text-align: center;
  margin-top: 2.2rem;
}
@media (max-width: 860px) {
  .twall {
    columns: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto;
  }
}
.bubble-art .hero-photo {
  width: min(420px, 92%);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 24px 40px rgba(0, 40, 79, 0.22));
}
.foot p.foot-addr {
  font-size: 0.72rem;
  color: #7f93ab;
  margin-top: 1.7rem;
  line-height: 1.55;
}
.gloss-embed {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.7rem;
  box-shadow: var(--shadow);
}
.gloss-search {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.gloss-search input {
  flex: 1 1 320px;
  min-width: 220px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: var(--paper);
}
.gloss-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
}
.gloss-chip {
  background: var(--coral-tint);
  color: var(--navy);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.gloss-meta {
  margin-top: 1.4rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  font-size: 0.8rem;
  color: var(--slate);
}
.embed-note {
  font-size: 0.82rem;
  color: var(--slate);
  margin-top: 1rem;
  font-style: italic;
  opacity: 0.85;
}
/* services overview cards */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-top: 1.6rem;
}
.svc-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.6rem;
  box-shadow: var(--shadow);
  transition:
    transform 0.18s,
    border-color 0.18s;
}
.svc-card:hover {
  transform: translateY(-3px);
  border-color: var(--coral);
}
.svc-num {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--coral);
  line-height: 1;
}
.svc-card h3 {
  margin: 0.45rem 0 0.55rem;
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
}
.svc-card p {
  color: var(--slate);
  font-size: 0.94rem;
  margin-bottom: 1rem;
}
.svc-go {
  margin-top: auto;
  font-weight: 600;
  color: var(--coral-deep);
  font-size: 0.9rem;
}
/* services step-bar (switch between the four pages) */
.svc-steps {
  background: var(--coral-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.svc-steps .wrap {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
.svc-step {
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--white);
  transition: border-color 0.15s;
}
.svc-step .n {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  color: var(--coral);
  font-size: 0.95rem;
}
.svc-step .t {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
}
.svc-step:hover {
  border-color: var(--coral);
}
.svc-step.is-active {
  background: var(--navy);
  border-color: var(--navy);
}
.svc-step.is-active .t {
  color: #fff;
}
@media (max-width: 760px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
}
.bubble-art .about-photo {
  position: relative;
  width: min(330px, 82%);
  margin: 0 auto;
}
.bubble-art .about-photo::after {
  content: '';
  position: absolute;
  left: -16px;
  top: -16px;
  width: 70%;
  height: 56%;
  background: var(--coral-tint);
  border-radius: 22px;
  z-index: 0;
}
.bubble-art .about-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: var(--shadow);
  border: 6px solid #fff;
}
.tagchip {
  font-family: 'Roboto';
  font-size: 0.74rem;
  font-weight: 700;
  background: var(--coral-tint);
  color: var(--coral-deep);
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  display: inline-block;
}
.cs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: 1.6rem;
}
.cs-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.6rem;
  box-shadow: var(--shadow);
  transition:
    transform 0.18s,
    border-color 0.18s;
}
.cs-card:hover {
  transform: translateY(-3px);
  border-color: var(--coral);
}
.cs-card .sector {
  font-family: 'Roboto';
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--coral-deep);
  margin-bottom: 0.25rem;
}
.cs-card h3 {
  margin: 0 0 0.7rem;
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 1.15rem;
}
.cs-card .tagchip {
  align-self: flex-start;
  margin-bottom: 1rem;
}
.cs-result {
  font-size: 0.92rem;
  color: var(--slate);
  margin-bottom: 1.1rem;
}
.cs-result b {
  color: var(--coral-deep);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
}
.cs-go {
  margin-top: auto;
  font-weight: 600;
  color: var(--coral-deep);
  font-size: 0.9rem;
}
.back-link {
  color: var(--coral-deep);
  font-weight: 600;
  text-decoration: none;
}
@media (max-width: 760px) {
  .cs-grid {
    grid-template-columns: 1fr;
  }
}
.svc-steps-band {
  display: block;
  margin: 0;
  padding: 0;
}

body {
  background: var(--paper) !important;
}
:root {
  --navy: #003366;
  --navy-deep: #00284f;
  --coral: #ff9966;
  --coral-deep: #f57f45;
  --coral-tint: #fff1e8;
  --slate: #3a4961;
  --paper: #fbfaf7;
  --line: rgba(0, 51, 102, 0.12);
  --white: #ffffff;
  --shadow: 0 18px 50px -24px rgba(0, 40, 79, 0.45);
  --maxw: 1140px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0px;
  font-family: Inter, system-ui, sans-serif;
  color: var(--slate);
  background: rgb(233, 235, 239);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4 {
  margin: 0px;
  color: var(--navy);
  line-height: 1.08;
}
p {
  margin: 0px 0px 1rem;
}
.concept-bar {
  position: sticky;
  top: 0px;
  z-index: 999;
  background: var(--navy-deep);
  color: rgb(207, 224, 242);
  border-bottom: 2px solid var(--coral);
}
.concept-inner {
  max-width: var(--maxw);
  margin: 0px auto;
  padding: 0.6rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}
.concept-inner strong {
  color: rgb(255, 255, 255);
  font-family: Roboto, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
}
.concept-inner .tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--coral);
  font-family: Roboto, sans-serif;
}
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-left: auto;
}
.jump a {
  font-size: 0.74rem;
  font-family: Roboto, sans-serif;
  text-decoration: none;
  color: rgb(207, 224, 242);
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
}
.jump a:hover {
  background: var(--coral);
  color: var(--navy-deep);
  border-color: var(--coral);
}
.stage {
  max-width: 1280px;
  margin: 0px auto;
  padding: 2.5rem 1.25rem 5rem;
}
.frame-label {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 3.5rem 0px 1rem;
  flex-wrap: wrap;
}
.frame-label .num {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--coral);
  letter-spacing: 0.04em;
}
.frame-label .name {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 1.15rem;
}
.frame-label .note {
  font-size: 0.82rem;
  color: rgb(123, 134, 153);
}
.browser {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: rgba(0, 40, 79, 0.5) 0px 30px 70px -30px;
  border: 1px solid rgb(223, 227, 234);
  background: var(--paper);
}
.browser-top {
  background: rgb(231, 234, 239);
  padding: 0.55rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border-bottom: 1px solid rgb(218, 223, 230);
}
.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgb(195, 201, 210);
}
.browser-url {
  margin-left: 0.6rem;
  background: rgb(255, 255, 255);
  border-radius: 7px;
  padding: 0.2rem 0.8rem;
  font-size: 0.72rem;
  color: rgb(140, 149, 163);
  font-family: Roboto, sans-serif;
}
.site {
  background: var(--paper);
}
.nav {
  position: sticky;
  top: 0px;
  background: rgba(251, 250, 247, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  z-index: 5;
}
.nav-in {
  max-width: var(--maxw);
  margin: 0px auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.brand img {
  height: 34px;
  width: auto;
}
.brand .word {
  font-family: Roboto, sans-serif;
  font-weight: 900;
  color: var(--navy);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.nav-links {
  display: flex;
  gap: 1.35rem;
  margin-left: auto;
  align-items: center;
}
.nav-links a {
  text-decoration: none;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--slate);
}
.nav-links a:hover {
  color: var(--coral-deep);
}
.btn {
  display: inline-block;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 0.7rem 1.3rem;
  border-radius: 100px;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.btn-coral {
  background: var(--coral);
  color: var(--navy-deep);
}
.btn-coral:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px var(--coral-deep);
}
.btn-ghost {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn-ghost:hover {
  background: var(--navy);
  color: rgb(255, 255, 255);
}
.btn-light {
  background: rgb(255, 255, 255);
  color: var(--navy);
}
.btn-outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: rgb(255, 255, 255);
}
.btn-outline-light:hover {
  background: rgb(255, 255, 255);
  color: var(--navy);
}
.wrap {
  max-width: var(--maxw);
  margin: 0px auto;
  padding: 0px 1.5rem;
}
.section {
  padding: 5rem 0px;
}
.eyebrow {
  font-family: Roboto, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--coral-deep);
  margin-bottom: 1rem;
}
.display {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.98;
}
.script {
  font-family: Caveat, cursive;
  color: var(--coral-deep);
  text-transform: none;
  font-weight: 700;
  letter-spacing: 0px;
}
.h2 {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}
.lead {
  font-size: 1.12rem;
  max-width: 48ch;
}
.muted {
  color: rgb(111, 122, 140);
}
.center {
  text-align: center;
}
.center .lead {
  margin-left: auto;
  margin-right: auto;
}
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      1200px 600px at 85% -10%,
      rgba(255, 153, 102, 0.18),
      transparent 60%
    ),
    var(--paper);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
  padding: 5rem 0px 4.5rem;
}
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
}
.hero h1 .l1 {
  color: var(--navy);
}
.hero h1 .l2 {
  color: var(--navy);
}
.hero h1 .script {
  display: block;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  margin-top: 0.1em;
}
.hero .lead {
  margin-top: 1.5rem;
}
.hero-cta {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.bubble-art {
  position: relative;
  justify-self: center;
}
.bubble-art .disc {
  width: min(360px, 80%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--navy), var(--navy-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  margin: 0px auto;
}
.bubble-art .disc img {
  width: 62%;
}
.bubble-art .chip {
  position: absolute;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgb(255, 255, 255);
  color: var(--navy);
  padding: 0.5rem 0.9rem;
  border-radius: 14px;
  font-size: 0.85rem;
  box-shadow: var(--shadow);
}
.bubble-art .chip::after {
  content: '';
  position: absolute;
  left: 24px;
  bottom: -8px;
  border-width: 9px 9px 0px;
  border-style: solid;
  border-color: rgb(255, 255, 255) transparent transparent;
}
.bubble-art .chip.one {
  top: 6%;
  left: -4%;
}
.bubble-art .chip.two {
  bottom: 8%;
  right: -6%;
  background: var(--coral);
  color: var(--navy-deep);
}
.bubble-art .chip.two::after {
  border-color: var(--coral) transparent transparent;
  left: auto;
  right: 24px;
}
.trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgb(255, 255, 255);
}
.trust .wrap {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.4rem 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.trust span.lbl {
  font-family: Roboto, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgb(154, 163, 177);
}
.trust .name {
  font-family: Roboto, sans-serif;
  font-weight: 700;
  color: var(--navy);
  opacity: 0.72;
  letter-spacing: 0.02em;
}
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
.card {
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.8rem;
}
.card h3 {
  font-family: Montserrat, sans-serif;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.card .ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--coral-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-family: 'Roboto Condensed';
  font-weight: 800;
  color: var(--coral-deep);
}
.journey {
  background: var(--navy);
  color: rgb(220, 231, 243);
}
.journey h2,
.journey h3 {
  color: rgb(255, 255, 255);
}
.journey .eyebrow {
  color: var(--coral);
}
.jcards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
.jcard {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 1.6rem;
  text-decoration: none;
  color: rgb(220, 231, 243);
  display: flex;
  flex-direction: column;
  min-height: 230px;
  transition:
    transform 0.15s,
    background 0.15s;
}
.jcard:hover {
  transform: translateY(-4px);
  background: rgba(255, 153, 102, 0.14);
  border-color: var(--coral);
}
.jcard .jn {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--coral);
}
.jcard h3 {
  font-family: Montserrat;
  font-size: 1.15rem;
  margin: 0.4rem 0px 0.6rem;
}
.jcard p {
  font-size: 0.92rem;
  color: rgb(185, 200, 219);
  margin: 0px;
}
.jcard .more {
  margin-top: auto;
  font-family: Roboto;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--coral);
  padding-top: 1rem;
}
.tcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.tbubble {
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.6rem;
  position: relative;
  box-shadow: rgba(0, 40, 79, 0.4) 0px 10px 30px -22px;
}
.tbubble::after {
  content: '';
  position: absolute;
  left: 34px;
  bottom: -12px;
  border-width: 13px 13px 0px;
  border-style: solid;
  border-color: rgb(255, 255, 255) transparent transparent;
  filter: drop-shadow(rgba(0, 40, 79, 0.06) 0px 6px 4px);
}
.tbubble p {
  font-size: 0.96rem;
  color: var(--slate);
}
.tperson {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.6rem;
}
.tperson .av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--coral-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto Condensed';
  font-weight: 800;
  color: var(--coral-deep);
}
.tperson b {
  font-family: Montserrat;
  color: var(--navy);
  font-size: 0.9rem;
  display: block;
  line-height: 1.2;
}
.tperson small {
  color: rgb(138, 147, 162);
  font-size: 0.78rem;
}
.featrow {
  padding: 5rem 0px;
}
.featrow .pic {
  background: linear-gradient(150deg, var(--coral-tint), #ffe3d2);
  border-radius: 20px;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.featrow .pic img {
  width: 55%;
}
.checklist {
  list-style: none;
  padding: 0px;
  margin: 1.2rem 0px 0px;
}
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.7rem;
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0.45rem;
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--coral-deep);
  border-bottom: 3px solid var(--coral-deep);
  transform: rotate(-45deg);
}
.news {
  background: var(--coral-tint);
}
.news .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
  padding: 3.5rem 1.5rem;
}
.news form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.news input {
  flex: 1 1 0%;
  min-width: 220px;
  padding: 0.85rem 1.1rem;
  border-radius: 100px;
  border: 1px solid rgb(230, 195, 171);
  font-family: Inter;
  font-size: 0.95rem;
}
.cta-band {
  background: var(--navy);
  color: rgb(255, 255, 255);
  text-align: center;
  padding: 4.5rem 1.5rem;
}
.cta-band h2 {
  color: rgb(255, 255, 255);
  max-width: 18ch;
  margin: 0px auto 1.6rem;
}
.cta-band .script {
  color: var(--coral);
}
.foot {
  background: var(--navy-deep);
  color: rgb(159, 179, 203);
}
.foot-in {
  max-width: var(--maxw);
  margin: 0px auto;
  padding: 3.5rem 1.5rem 2rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2rem;
}
.foot h4 {
  color: rgb(255, 255, 255);
  font-family: Montserrat;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}
.foot a {
  display: block;
  text-decoration: none;
  color: rgb(159, 179, 203);
  font-size: 0.9rem;
  margin-bottom: 0.55rem;
}
.foot a:hover {
  color: var(--coral);
}
.foot .brand img {
  height: 40px;
  margin-bottom: 1rem;
}
.foot p {
  font-size: 0.86rem;
  color: rgb(127, 147, 171);
}
.foot-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 1rem;
}
.foot-bar div {
  max-width: var(--maxw);
  margin: 0px auto;
  padding: 1.2rem 1.5rem;
  font-size: 0.78rem;
  color: rgb(111, 132, 160);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.member {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.member span {
  font-size: 0.74rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  color: rgb(188, 206, 234);
}
.shero {
  background:
    radial-gradient(
      900px 500px at 90% -20%,
      rgba(255, 153, 102, 0.2),
      transparent 60%
    ),
    var(--paper);
  padding: 4.5rem 0px 3.5rem;
}
.shero .step {
  font-family: 'Roboto Condensed';
  font-weight: 800;
  color: var(--coral-deep);
  font-size: 1rem;
  letter-spacing: 0.06em;
}
.shero h1 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: var(--navy);
  margin: 0.4rem 0px 1rem;
  line-height: 1;
}
.bgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.bcard {
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.bcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.bcard .thumb {
  aspect-ratio: 16 / 10;
  background: linear-gradient(150deg, var(--navy), var(--navy-deep));
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}
.bcard .thumb span {
  font-family: Roboto;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--coral);
  background: rgba(0, 0, 0, 0.25);
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
}
.bcard .b-body {
  padding: 1.3rem;
}
.bcard h3 {
  font-family: Montserrat;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.bcard small {
  color: rgb(154, 163, 177);
  font-family: Roboto;
  font-size: 0.76rem;
}
.bcard.feat {
  grid-column: span 3;
  flex-direction: row;
}
.bcard.feat .thumb {
  flex: 1 1 0%;
  aspect-ratio: auto;
}
.bcard.feat .b-body {
  flex: 1.1 1 0%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.cfield {
  margin-bottom: 1.1rem;
}
.cfield label {
  font-family: Roboto;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--navy);
  display: block;
  margin-bottom: 0.4rem;
}
.cfield input,
.cfield textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: Inter;
  font-size: 0.95rem;
}
.contact-side {
  background: var(--navy);
  color: rgb(220, 231, 243);
  border-radius: 20px;
  padding: 2.2rem;
}
.contact-side h3 {
  color: rgb(255, 255, 255);
  font-family: Montserrat;
}
.contact-side a {
  color: var(--coral);
  text-decoration: none;
}
.contact-side .row {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin: 1.2rem 0px;
}
.contact-side .row .k {
  font-family: Roboto;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--coral);
  min-width: 74px;
  padding-top: 0.2rem;
}
.sg {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(223, 227, 234);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: rgba(0, 40, 79, 0.5) 0px 18px 50px -34px;
}
.sg h2 {
  font-family: Montserrat;
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
}
.sg .sg-sub {
  color: rgb(123, 134, 153);
  font-size: 0.9rem;
  margin-bottom: 1.6rem;
}
.sw-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.sw {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  width: 150px;
}
.sw .chip2 {
  height: 70px;
}
.sw .meta {
  padding: 0.5rem 0.7rem;
  font-family: Roboto;
  font-size: 0.72rem;
}
.sw .meta b {
  display: block;
  color: var(--navy);
  font-size: 0.8rem;
}
.sg-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.sg-cols h4 {
  font-family: Roboto;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--coral-deep);
  margin-bottom: 0.6rem;
}
.fchip {
  margin-bottom: 0.7rem;
}
.fchip .lbl {
  font-size: 0.72rem;
  color: rgb(138, 147, 162);
  font-family: Roboto;
}
.ss-note {
  background: var(--coral-tint);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  font-size: 0.88rem;
  margin-top: 1.2rem;
}
.ss-note b {
  color: var(--navy);
}
@media (max-width: 860px) {
  .hero-grid,
  .grid2,
  .news .wrap,
  .contact-grid,
  .sg-cols {
    grid-template-columns: 1fr;
  }
  .grid3,
  .jcards,
  .tcards,
  .bgrid {
    grid-template-columns: 1fr;
  }
  .foot-in {
    grid-template-columns: 1fr 1fr;
  }
  .bcard.feat {
    flex-direction: column;
  }
  .nav-links a:not(.btn) {
    display: none;
  }
}
.case {
  background: rgb(255, 255, 255);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.9rem;
  margin-bottom: 1.8rem;
  box-shadow: rgba(0, 40, 79, 0.5) 0px 12px 34px -26px;
}
.case-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.case-head .sector {
  font-family: Roboto;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--coral-deep);
  margin-bottom: 0.2rem;
}
.case-head .who {
  font-family: Montserrat;
  font-weight: 700;
  color: var(--navy);
  font-size: 1.1rem;
}
.case-head .tagchip {
  font-family: Roboto;
  font-size: 0.74rem;
  font-weight: 700;
  background: var(--coral-tint);
  color: var(--coral-deep);
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
}
.chat {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 640px;
  margin: 0px auto;
}
.msg {
  max-width: 82%;
  padding: 0.8rem 1.05rem;
  border-radius: 16px;
  font-size: 0.96rem;
  line-height: 1.5;
}
.msg .sp {
  display: block;
  font-family: Roboto;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.25rem;
  opacity: 0.55;
}
.msg.them {
  align-self: flex-start;
  background: rgb(238, 241, 246);
  color: var(--slate);
  border-bottom-left-radius: 5px;
}
.msg.me {
  align-self: flex-end;
  background: var(--coral-tint);
  color: var(--navy);
  border-bottom-right-radius: 5px;
}
.case-result {
  margin-top: 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}
.case-result .big {
  font-family: 'Roboto Condensed';
  font-weight: 800;
  color: var(--coral-deep);
  font-size: 1.7rem;
  line-height: 1;
}
.case-result .lbl {
  font-size: 0.95rem;
  color: var(--slate);
}
.twall {
  columns: 270px 3;
  column-gap: 1.4rem;
  margin-top: 2.4rem;
}
.twall .tbubble {
  break-inside: avoid;
  margin-bottom: 1.4rem;
  display: inline-block;
  width: 100%;
}
.twall .tbubble::after {
  display: none;
}
.tform-wrap {
  background: var(--coral-tint);
  border-radius: 22px;
  padding: 2.4rem;
  max-width: 760px;
  margin: 0px auto;
}
.stars {
  display: flex;
  gap: 0.3rem;
  font-size: 1.5rem;
  color: var(--coral);
  margin: 0.2rem 0px 0.4rem;
}
.consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--slate);
  margin: 0.6rem 0px 1.1rem;
}
.consent input {
  margin-top: 0.25rem;
}
.seeall {
  text-align: center;
  margin-top: 2.2rem;
}
@media (max-width: 860px) {
  .twall {
    columns: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
    transition: none !important;
  }
}
.bubble-art .hero-photo {
  width: min(420px, 92%);
  height: auto;
  display: block;
  margin: 0px auto;
  filter: drop-shadow(rgba(0, 40, 79, 0.22) 0px 24px 40px);
}
.foot p.foot-addr {
  font-size: 0.72rem;
  color: rgb(127, 147, 171);
  margin-top: 1.7rem;
  line-height: 1.55;
}
.gloss-embed {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.7rem;
  box-shadow: var(--shadow);
}
.gloss-search {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.gloss-search input {
  flex: 1 1 320px;
  min-width: 220px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  background: var(--paper);
}
.gloss-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
}
.gloss-chip {
  background: var(--coral-tint);
  color: var(--navy);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.gloss-meta {
  margin-top: 1.4rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  font-size: 0.8rem;
  color: var(--slate);
}
.embed-note {
  font-size: 0.82rem;
  color: var(--slate);
  margin-top: 1rem;
  font-style: italic;
  opacity: 0.85;
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-top: 1.6rem;
}
.svc-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.6rem;
  box-shadow: var(--shadow);
  transition:
    transform 0.18s,
    border-color 0.18s;
}
.svc-card:hover {
  transform: translateY(-3px);
  border-color: var(--coral);
}
.svc-num {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--coral);
  line-height: 1;
}
.svc-card h3 {
  margin: 0.45rem 0px 0.55rem;
  color: var(--navy);
  font-family: Montserrat, sans-serif;
}
.svc-card p {
  color: var(--slate);
  font-size: 0.94rem;
  margin-bottom: 1rem;
}
.svc-go {
  margin-top: auto;
  font-weight: 600;
  color: var(--coral-deep);
  font-size: 0.9rem;
}
.svc-steps {
  background: var(--coral-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.svc-steps .wrap {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
.svc-step {
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--white);
  transition: border-color 0.15s;
}
.svc-step .n {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  color: var(--coral);
  font-size: 0.95rem;
}
.svc-step .t {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
}
.svc-step:hover {
  border-color: var(--coral);
}
.svc-step.is-active {
  background: var(--navy);
  border-color: var(--navy);
}
.svc-step.is-active .t {
  color: rgb(255, 255, 255);
}
@media (max-width: 760px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
}
.bubble-art .about-photo {
  position: relative;
  width: min(330px, 82%);
  margin: 0px auto;
}
.bubble-art .about-photo::after {
  content: '';
  position: absolute;
  left: -16px;
  top: -16px;
  width: 70%;
  height: 56%;
  background: var(--coral-tint);
  border-radius: 22px;
  z-index: 0;
}
.bubble-art .about-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 22px;
  box-shadow: var(--shadow);
  border: 6px solid rgb(255, 255, 255);
}
.tagchip {
  font-family: Roboto;
  font-size: 0.74rem;
  font-weight: 700;
  background: var(--coral-tint);
  color: var(--coral-deep);
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  display: inline-block;
}
.cs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: 1.6rem;
}
.cs-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.6rem;
  box-shadow: var(--shadow);
  transition:
    transform 0.18s,
    border-color 0.18s;
}
.cs-card:hover {
  transform: translateY(-3px);
  border-color: var(--coral);
}
.cs-card .sector {
  font-family: Roboto;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--coral-deep);
  margin-bottom: 0.25rem;
}
.cs-card h3 {
  margin: 0px 0px 0.7rem;
  color: var(--navy);
  font-family: Montserrat, sans-serif;
  font-size: 1.15rem;
}
.cs-card .tagchip {
  align-self: flex-start;
  margin-bottom: 1rem;
}
.cs-result {
  font-size: 0.92rem;
  color: var(--slate);
  margin-bottom: 1.1rem;
}
.cs-result b {
  color: var(--coral-deep);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
}
.cs-go {
  margin-top: auto;
  font-weight: 600;
  color: var(--coral-deep);
  font-size: 0.9rem;
}
.back-link {
  color: var(--coral-deep);
  font-weight: 600;
  text-decoration: none;
}
@media (max-width: 760px) {
  .cs-grid {
    grid-template-columns: 1fr;
  }
}
.svc-steps-band {
  display: block;
  margin: 0px;
  padding: 0px;
}

/* WordPress-specific styles */
.wp-block-group {
  margin-bottom: 1rem;
}

.wp-block-image {
  margin-bottom: 1rem;
}

.wp-block-button {
  margin-bottom: 1rem;
}

/* CRITICAL: Reset WordPress default constraints that break layouts */
/* WordPress adds default max-width to containers which breaks original layouts */
.entry-content,
.site-content,
.content-area {
  max-width: none !important;
  width: 100% !important;
}

/* EC-CONTAIN-001: Only override .container / section max-width when the site's
   own CSS does NOT define them. Tailwind and Bootstrap sites intentionally set
   .container { max-width: … } — blasting it with !important breaks every section. */
.container {
  max-width: none !important;
}

/* EC-ANIM-008 / EC-ANIM-009: Scroll-reveal utilities (.scroll-fade-up etc.) start at opacity:0
   and transition to visible when an IntersectionObserver adds .visible (injected in functions.php).
   Carousels inside scroll-reveal wrappers must be forced visible immediately so Embla can measure. */
.scroll-fade-up:has([aria-roledescription='carousel']),
.scroll-fade-up:has([data-wpconvert-blog-filter-bar]),
.scroll-fade-left:has([aria-roledescription='carousel']),
.scroll-fade-right:has([aria-roledescription='carousel']),
.scroll-scale-in:has([aria-roledescription='carousel']) {
  opacity: 1 !important;
  transform: none !important;
}

/* EC-SCROLL-001: Auto-scroll marquee CSS (always included - lightweight, no-op if no marquee elements) */

/* EC-SCROLL-001: Auto-scroll gallery marquee animation */
/* Replaces React requestAnimationFrame/scrollLeft with pure CSS animation */
.wpconvert-marquee-container {
  overflow: hidden !important;
}
.wpconvert-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: wpconvert-marquee 30s linear infinite;
}
@keyframes wpconvert-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* Pause on hover for accessibility */
.wpconvert-marquee-container:hover .wpconvert-marquee-track {
  animation-play-state: paused;
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .wpconvert-marquee-track {
    animation: none;
    overflow-x: auto;
  }
}

/* EC-ANIM-011: Frozen Framer Motion infinite float/pulse animations replaced with CSS keyframes.
   4 float variants with staggered durations and amplitudes, plus a pulse variant. */
@keyframes wpconvert-float-1 {
  0%,
  100% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(8px);
  }
}
@keyframes wpconvert-float-2 {
  0%,
  100% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes wpconvert-float-3 {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(12px);
  }
}
@keyframes wpconvert-float-4 {
  0%,
  100% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes wpconvert-pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.05;
  }
}
@keyframes wpconvert-float-tilt {
  0%,
  100% {
    transform: translateY(0%) rotate(0deg);
  }
  50% {
    transform: translateY(4%) rotate(-2deg);
  }
}
.wpconvert-float-1 {
  animation: wpconvert-float-1 5s ease-in-out infinite;
}
.wpconvert-float-2 {
  animation: wpconvert-float-2 6s ease-in-out infinite 0.5s;
}
.wpconvert-float-3 {
  animation: wpconvert-float-3 5.5s ease-in-out infinite 1s;
}
.wpconvert-float-4 {
  animation: wpconvert-float-4 6.5s ease-in-out infinite 1.5s;
}
.wpconvert-pulse {
  animation: wpconvert-pulse 4s ease-in-out infinite;
}
.wpconvert-float-tilt {
  animation: wpconvert-float-tilt 6s ease-in-out infinite;
}
/* EC-ANIM-011c: z-0 override for centered pulse cards whose z-10 was demoted */
.wpconvert-pulse.z-0 {
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wpconvert-float-1,
  .wpconvert-float-2,
  .wpconvert-float-3,
  .wpconvert-float-4,
  .wpconvert-pulse,
  .wpconvert-float-tilt {
    animation: none;
  }
}

/* WPConvert Tabs Component CSS */

/* WPConvert Tabs Component */
.wpconvert-tabs {
  max-width: 64rem;
  margin: 0 auto;
}

.wpconvert-tab-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(6, 1fr);
  }
}

.wpconvert-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-btn:hover {
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--foreground));
}

.wpconvert-tab-btn.active {
  background: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.wpconvert-tab-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
}

.wpconvert-tab-icon svg {
  width: 100%;
  height: 100%;
}

.wpconvert-tab-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

.wpconvert-tab-viewport {
  position: relative;
  display: flex;
  align-items: center;
}

.wpconvert-tab-content {
  flex: 1;
  position: relative;
}

.wpconvert-tab-panel {
  display: none;
  padding: 2rem;
  border-radius: 0.75rem;
  background: linear-gradient(
    135deg,
    hsl(var(--card)) 0%,
    hsl(var(--muted) / 0.3) 100%
  );
  border: 1px solid hsl(var(--border));
  text-align: center;
  animation: wpconvert-tab-fade-in 0.3s ease;
}

.wpconvert-tab-panel.active {
  display: block;
}

@keyframes wpconvert-tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wpconvert-tab-icon-large {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 2rem;
  padding: 1rem;
  border-radius: 1rem;
  background: hsl(var(--primary) / 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpconvert-tab-icon-large svg {
  width: 100%;
  height: 100%;
  color: hsl(var(--primary));
}

.wpconvert-tab-title {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-title {
    font-size: 1.875rem;
  }
}

.wpconvert-tab-description {
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}

.wpconvert-tab-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.wpconvert-tab-arrow:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.wpconvert-tab-prev {
  left: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-prev {
    left: -1.5rem;
  }
}

.wpconvert-tab-next {
  right: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-next {
    right: -1.5rem;
  }
}

.wpconvert-tab-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.wpconvert-tab-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: hsl(var(--muted-foreground) / 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-dot:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

.wpconvert-tab-dot.active {
  background: hsl(var(--primary));
  width: 2rem;
  border-radius: 0.375rem;
}

/* EC-MSTEP-001: Multi-step form wizard CSS */

/* EC-MSTEP-001: Multi-step form wizard */
.wpconvert-multistep-form {
  width: 100%;
}
.wpconvert-step-panel {
  display: none;
}
.wpconvert-step-panel.active {
  display: block;
  animation: wpconvert-step-fade-in 0.25s ease;
}
@keyframes wpconvert-step-fade-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.wpconvert-step-progress-fill {
  transition: width 0.4s ease-out;
}
/* Signature canvas */
canvas[data-wpc-sig-init] {
  width: 100%;
  min-height: 150px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 1rem;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}

/* EC-CALC-001: Interactive calculator CSS */

/* EC-CALC-001: Interactive calculator */
[data-wpc-calc] input[type='range'] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-wpc-calc] input[type='range']:focus {
  outline: none;
}
[data-wpc-calc] [data-wpc-calc-toggle].wpc-calc-toggle-active {
  opacity: 1;
}
[data-wpc-calc] [data-wpc-calc-toggle]:not(.wpc-calc-toggle-active) {
  opacity: 0.6;
}

/* CRITICAL FIX: Ensure gradient overlays respect their default hidden state */
/* NOTE: The main fix is in cleanHtmlContent() which corrects captured hover states */
/* These CSS rules are a FALLBACK to ensure overlays stay hidden if any slip through */

/* Keep gradient overlays hidden - they're decorative hover effects */
.group [class*='absolute'][class*='inset-0'][class*='bg-gradient'].opacity-0 {
  opacity: 0 !important;
}

/* Keep bottom accent bars hidden by default */
.group [class*='absolute'][class*='bottom-0'][class*='bg-gradient'].scale-x-0 {
  transform: scaleX(0) !important;
}

/* Reset WordPress default margins that break spacing */
.entry-content > *:first-child,
.site-content > *:first-child {
  margin-top: 0 !important;
}

/* EC-DARK-001: In dark-themed sites (html.dark), containers with explicit bg-white
   backgrounds need dark text. The .dark scope sets --foreground to a light color,
   making text invisible on white cards. Reset to :root-scope (light) variable values. */
.dark .bg-white,
.dark [class*='bg-white'] {
  --foreground: 222.2 84% 4.9%;
  --muted-foreground: 215.4 16.3% 46.9%;
  color: hsl(222.2 84% 4.9%);
}
.dark .bg-white .text-foreground,
.dark [class*='bg-white'] .text-foreground,
.dark .bg-white [class*='text-foreground'],
.dark [class*='bg-white'] [class*='text-foreground'] {
  color: hsl(222.2 84% 4.9%);
}

/* Navigation Menu Styling - Universal for all dropdown patterns */
/* Reset ALL menu items */
.menu-item,
li.menu-item,
li.menu-item-type-post_type,
li.menu-item-type-custom,
li.menu-item-object-page,
li.menu-item-has-children {
  position: relative;
  list-style: none !important;
  margin: 0;
}

/* EC-NAV-MOBILE-010: The force-horizontal / force-inline-block rules below are DESKTOP-ONLY.
   They exist to coerce WordPress-generated <ul class="menu"><li> markup into a horizontal bar.
   Previously they were unconditional with id-specificity + !important, which overrode the source
   theme's mobile-first hide (e.g. a .nav-primary .menu display:none revealed via a hamburger).
   On classic mobile-first themes that leaked the desktop nav onto every mobile page (often as a
   full-screen overlay, since the source .menu base is position:fixed;inset:0). Scoping to a
   min-width media query keeps desktop horizontal while letting the source's mobile nav / our
   injected #wpconvert-mobile-nav drawer own small screens. */
@media (min-width: 768px) {
  /* CRITICAL: Top-level menu MUST be horizontal - Maximum specificity */
  /* NOTE: nav ul#wpconvert-primary-ul is NOT included here to avoid conflicting with .main-nav styling */
  /* EC-NAV-095: Do NOT set gap here. A fixed gap with !important (previously 0.25rem, briefly 2rem) overrides
   menus.json ulClasses / Tailwind (e.g. gap-8) and breaks diverse nav densities. Spacing comes from ulClasses. */
  header ul#wpconvert-primary-ul,
  #wpconvert-primary-ul,
  #wpconvert-primary-ul.menu,
  ul#wpconvert-primary-ul.menu,
  ul.menu:not(.submenu):not(.sub-menu) {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* CRITICAL: Preserve original .main-nav styling for static sites - MUST come AFTER generic rules */
  /* MAXIMUM specificity with header prefix ensures this overrides ALL other rules */
  header nav.main-nav ul#wpconvert-primary-ul,
  header .main-nav ul#wpconvert-primary-ul,
  nav.main-nav ul#wpconvert-primary-ul,
  .main-nav #wpconvert-primary-ul,
  .main-nav ul#wpconvert-primary-ul {
    /* Inherit the original .main-nav ul styles */
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  /* CRITICAL: Top-level items MUST be inline - Maximum specificity for ALL WordPress classes */
  /* NOTE: nav ul#wpconvert-primary-ul > li is NOT included to avoid conflicting with .main-nav */
  header ul#wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li.menu-item,
  #wpconvert-primary-ul > li.menu-item-type-post_type,
  #wpconvert-primary-ul > li.menu-item-type-custom,
  #wpconvert-primary-ul > li.menu-item-object-page,
  #wpconvert-primary-ul > li.menu-item-object-custom,
  #wpconvert-primary-ul > li.menu-item-has-children,
  #wpconvert-primary-ul > li.current-menu-item,
  #wpconvert-primary-ul > li.current_page_item,
  #wpconvert-primary-ul > li.current-menu-ancestor,
  #wpconvert-primary-ul.menu > li,
  ul.menu:not(.submenu):not(.sub-menu) > li,
  body #wpconvert-primary-ul > li {
    display: inline-block !important;
    position: relative !important;
    flex-shrink: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    vertical-align: middle !important;
    float: none !important;
    width: auto !important;
    clear: none !important;
  }
}
/* End EC-NAV-MOBILE-010 desktop-only nav layout */

/* Preserve original .main-nav link styling (color/weight is width-independent) */
header nav.main-nav ul#wpconvert-primary-ul a,
header .main-nav ul#wpconvert-primary-ul a,
nav.main-nav ul#wpconvert-primary-ul a,
.main-nav #wpconvert-primary-ul a,
.main-nav ul#wpconvert-primary-ul a {
  text-decoration: none;
  font-weight: 500;
}

/* Top-level links maintain their button appearance */
#wpconvert-primary-ul > .menu-item > a {
  /* Keep original classes for styling */
}

/* Hide submenus by default with high z-index - CRITICAL for all sites */
/* EC-NAV-220: Layout & visibility properties stay !important so the
   hover-to-show behaviour overrides Tailwind's display:none / opacity:0
   defaults on sites without their own dropdown CSS. */
.menu-item.menu-item-has-children > .submenu,
.menu-item.menu-item-has-children > .sub-menu,
.menu-item-has-children > ul,
li.menu-item-has-children > ul {
  display: none !important; /* Important to override inline-flex and other display classes */
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 9999 !important; /* Higher than content */
  list-style: none !important;
  margin: 0 !important;
}
/* EC-NAV-220: Visual surface properties (background / border / shadow /
   padding / sizing) are emitted via :where(...) so the selector collapses
   to specificity (0,0,0). Any captured custom-submenu CSS rule with
   non-zero specificity (e.g. aura-lace .dropdown-menu with background
   var(--emerald)) automatically wins via the cascade so the author's
   luxury / dark-themed dropdown panel renders correctly.
   For sites WITHOUT captured dropdown CSS, these white-card defaults
   still apply because nothing else competes. */
:where(.menu-item.menu-item-has-children) > :where(.submenu),
:where(.menu-item.menu-item-has-children) > :where(.sub-menu),
:where(.menu-item-has-children) > :where(ul),
:where(li.menu-item-has-children) > :where(ul) {
  background: white;
  min-width: 200px;
  max-width: 500px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}

/* Show on hover/focus - Maximum specificity to override everything */
.menu-item.menu-item-has-children:hover > .submenu,
.menu-item.menu-item-has-children:hover > .sub-menu,
.menu-item.menu-item-has-children:hover > ul,
.menu-item.menu-item-has-children:focus-within > .submenu,
.menu-item.menu-item-has-children:focus-within > .sub-menu,
.menu-item.menu-item-has-children:focus-within > ul,
li.menu-item-has-children:hover > ul,
li.menu-item-has-children:focus-within > ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force submenu items to display as block - Override ALL WordPress and utility classes */
.submenu li,
.submenu .menu-item,
.submenu .menu-item-type-post_type,
.submenu .menu-item-type-custom,
.submenu .menu-item-object-page,
.submenu .menu-item-object-custom,
.submenu .current-menu-item,
.submenu .current_page_item,
ul.sub-menu li,
ul.sub-menu .menu-item,
body .submenu li {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  flex-direction: column !important;
  list-style: none !important;
  float: none !important;
  clear: both !important;
}

.submenu .menu-item a,
.submenu a,
ul.sub-menu a {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* Override ANY utility classes that could break submenu layout */
.submenu .menu-item.inline-flex,
.submenu .menu-item.flex,
.submenu .menu-item.grid,
.submenu li.inline-flex,
.submenu li.flex,
.submenu li.grid,
.submenu .inline-flex,
.submenu .flex,
.submenu .grid {
  display: block !important;
  flex-direction: column !important;
}

.submenu .menu-item a.inline-flex,
.submenu .menu-item a.flex,
.submenu .menu-item a.grid,
.submenu a.inline-flex,
.submenu a.flex,
.submenu a.grid {
  display: block !important;
}

/* Ensure submenu container is vertical */
.submenu,
ul.sub-menu {
  flex-direction: column !important;
  display: block !important;
}

/* FLAT NAV ACTIVE STATE - For React/Vite sites converted to wp_nav_menu() */
/* EC-NAV-010: Dynamic current page highlighting */
/* The .wpconvert-active-link class is added by WPConvert_Flat_Menu_Walker to current page links */
.wpconvert-active-link {
  /* Default active styling - will be enhanced by extracted classes if available */
  font-weight: 600;
}

/* EC-NAV-010: When active link has text-primary class, override any text-foreground from base */
/* This ensures the active item shows the highlighted color (text-primary = green/brand color) */
a.wpconvert-active-link.text-primary,
.current-menu-item > a.text-primary,
.current_page_item > a.text-primary {
  color: hsl(var(--primary)) !important;
}

/* EC-NAV-010: Ensure inactive items don't get active color */
/* Links WITHOUT wpconvert-active-link should use text-foreground */
nav a.text-foreground:not(.wpconvert-active-link):not(.text-primary) {
  color: hsl(var(--foreground)) !important;
}

/* Also style current-menu-item for flat navs */
.current-menu-item > a,
.current_page_item > a,
a.current-menu-item,
a.wpconvert-active-link {
  /* The actual active styling comes from extracted activeLinkClasses */
  /* These are fallback styles if extraction doesn't provide specific classes */
}

/* Flat nav submenu styling */
.wpconvert-flat-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 200px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  padding: 0.5rem 0;
  display: none;
  z-index: 9999;
}

.wpconvert-flat-submenu a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* EC-NAV-140: Large flat dropdowns flow into two columns (mega-style) without extra walker markup */
.wpconvert-flat-submenu--mega-cols-2 {
  min-width: min(640px, 92vw);
  column-count: 2;
  column-gap: 2.5rem;
  padding: 0.75rem 1.25rem !important;
}
.wpconvert-flat-submenu--mega-cols-2 > a {
  white-space: normal !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
/* Show flat submenu when parent <li> hovers (wp_nav_menu wraps items in li.menu-item-has-children) */
li.menu-item-has-children:hover > .wpconvert-flat-submenu,
li.menu-item-has-children:focus-within > .wpconvert-flat-submenu {
  display: block !important;
}

/* Hide Radix UI viewport containers and similar dropdown containers - Universal */
[data-radix-navigation-menu-viewport],
[class*='viewport'][data-state='open'],
[class*='popover'][data-state='open'],
.radix-navigation-menu-viewport,
nav > div[class*='absolute'][class*='top-full'] {
  display: none !important;
  visibility: hidden !important;
}

/* EC-DIALOG-001: Hide Radix Sheet/Dialog overlays and panels that survive into converted themes */
/* These are interactive React components captured in open state during snapshot */
[role='dialog'][class*='fixed'],
[data-radix-dialog-content][class*='fixed'],
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='bg-black'],
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='backdrop'] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }

  .menu-item.menu-item-has-children > .submenu {
    position: static;
    box-shadow: none;
  }
}

/* CRITICAL: Ensure header and navigation are above hero/content sections */
/* Only apply relative positioning if nav is NOT sticky/fixed/absolute */
/* Exclude #wpconvert-mobile-nav — it must stay position:fixed as an overlay */
/* EC-NAV-190: Also exclude position:absolute overlay headers (Tailwind
   "absolute" utility class) — common in hero-overlay navbars (e.g.
   svg-to-site-magic-main: <header class="absolute inset-x-0 top-6 z-30 ...">).
   Without this exclusion, the !important rule below forces the absolute
   overlay header into normal flow, taking up its full height and pushing
   the hero section down by ~80px (visible as a white band above the navbar). */
header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
[role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
[role='navigation']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ):not(#wpconvert-mobile-nav) {
  position: relative !important;
  z-index: 1000 !important;
}

/* Preserve sticky/fixed positioning for navs that have it */
/* CRITICAL: Ensure sticky/fixed actually works - add explicit CSS for common patterns */
nav[class*='sticky'],
nav[class*='fixed'],
header nav[class*='sticky'],
header nav[class*='fixed'],
header[class*='sticky'],
header[class*='fixed'],
.site-header[class*='sticky'],
.site-header[class*='fixed'] {
  z-index: 1000 !important; /* Keep z-index for visibility */
}

/* Explicit sticky positioning support - ensures it works even without Tailwind CSS loaded */
/* Only apply if sticky class is present and no explicit position override */
nav.sticky,
nav[class*='sticky']:not([style*='position']),
header nav.sticky,
header nav[class*='sticky']:not([style*='position']),
header.sticky,
header[class*='sticky']:not([style*='position']) {
  position: sticky !important;
}

/* Explicit fixed positioning support - ensures it works even without Tailwind CSS loaded */
nav.fixed,
nav[class*='fixed']:not([style*='position']),
header nav.fixed,
header nav[class*='fixed']:not([style*='position']),
header.fixed,
header[class*='fixed']:not([style*='position']) {
  position: fixed !important;
}

/* Common Tailwind patterns: sticky top-0, fixed top-0 */
nav[class*='sticky'][class*='top-0'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='sticky'][class*='top-0'],
header nav[class*='fixed'][class*='top-0'],
header[class*='sticky'][class*='top-0'],
header[class*='fixed'][class*='top-0'] {
  top: 0 !important;
}

/* Fixed navs typically need full width */
nav[class*='fixed'][class*='w-full'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='fixed'][class*='w-full'],
header nav[class*='fixed'][class*='top-0'],
header[class*='fixed'][class*='w-full'],
header[class*='fixed'][class*='top-0'] {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* Ensure hero and main content respect header z-index */
section[class*='hero'],
.hero,
main,
.site-main {
  position: relative;
  z-index: 1;
}

/* Theme-specific overrides */
/* Only apply relative if not sticky/fixed */
.site-header:not([class*='sticky']):not([class*='fixed']) {
  position: relative;
}

.site-main {
  margin-top: 0;
  padding-top: 0;
  min-height: 60vh;
}

/* Remove gap between fixed navbar and first content (white band under header).
 * Use :first-of-type (not :first-child): WP templates often have a whitespace text node
 * between <div id="primary"> and <section>, so section is never :first-child and rules
 * would silently fail (EC-NAV-086 follow-up).
 *
 * EC-NAV-276: INNER-page templates wrap content one level deeper —
 *   .site-main > div.page-SLUG > div.page-content > HERO
 * and the hero is frequently authored as a div (e.g. div.hero), not a section.
 * Static sites (e.g. WECConnect) set the original nav position:fixed and give
 * each subpage hero margin-top:NAVHEIGHT to clear it; once the universal reset
 * forces the class-only nav in-flow (sticky/relative), that top margin becomes a
 * visible white band under the bar. Zero the first child inside .page-content
 * (section OR div) so inner pages match the front page (whose hero is already
 * covered by the rules above). Scoped to .page-content, which only WPConvert
 * page templates emit — SPA inner pages never carry it. */
.site-main > section:first-of-type,
.site-main > div:first-of-type > section:first-of-type,
.site-main .page-content > section:first-of-type,
.site-main .page-content > div:first-of-type,
.site-main .page-content > :first-child > :first-child {
  margin-top: 0;
}

/* EC-NAV-086: Fixed nav + full-viewport hero (Tailwind min-h-screen) — React/Vite SPAs
 * stack the hero at document top with fixed nav overlaid; body/main background shows through
 * any empty band under the bar. Pull the first min-h-screen hero up by the header bar height
 * (--wpconvert-header-bar-height from header.php EC-NAV-100; fallback 4rem) so background layers
 * align with the original SPA.
 * Only on front-page template (body.front-page); skip sections with explicit pt-* / mt-* utilities.
 * :first-of-type required: newline/whitespace between #primary and hero <section> breaks :first-child. */
body.front-page
  .site-main
  #primary
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']),
body.front-page
  .site-main
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']),
body.front-page
  .site-main
  > div:first-of-type
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']) {
  /* Logged out: --wp-admin--admin-bar--height is unset → 0px. Logged in: WP sets 32px / 46px (782px). */
  margin-top: calc(
    -1 * var(--wpconvert-header-bar-height, 4rem) -
      var(--wp-admin--admin-bar--height, 0px)
  );
}

/* EC-NAV-089: Admin bar is fixed at top:0; in-flow content gets html { margin-top } but fixed nav does not,
 * so the site navbar sits under #wpadminbar. Offset primary fixed nav; exclude full-screen mobile drawer. */
body.admin-bar nav.fixed.top-0:not(#wpconvert-mobile-nav),
body.admin-bar nav.fixed[class*='top-0']:not(#wpconvert-mobile-nav) {
  top: var(--wp-admin--admin-bar--height, 32px) !important;
}

/* EC-NAV-087: Merged / blog / legacy CSS often sets body { padding-top: 5rem+ } as “clearance”
 * for fixed headers. With a fixed overlay nav, that padding does NOT move the bar — it only
 * pushes <main> down while body background shows through → white/cream band (~nav height) under
 * the bar. Stay Boost ships this in bundled style.css; EC-NAV-086 margin alone cannot cancel it. */
body.front-page {
  padding-top: 0 !important;
}

/* EC-HERO-014: Full-viewport hero fidelity — SPA wrapper path + min-height guard */
body.front-page #primary section#top.min-h-screen,
body.front-page
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}
body.front-page #primary section#top.min-h-screen > .absolute.bottom-10 {
  z-index: 10;
}

.site-footer {
  margin-top: auto;
}

/* EC-TW4-001: WordPress default style overrides */

body {
  line-height: 1.6;
}
body.wp-admin {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
}
/* EC-BTN-104: :where() = 0 specificity so Tailwind text-* utilities always win over these resets.
   Plain "a:hover { color: inherit }" can outrank .text-white on links (0,2,0 vs 0,1,0) and wash out hero CTAs. */
:where(a) {
  color: inherit;
  text-decoration: none;
}
:where(a:hover) {
  color: inherit;
}
/* EC-CSS-001: Long-hand padding-left/right (NOT shorthand 'padding: 0 20px') so
 * compound selectors like .container.hero-grid (which sets padding-top: 74px)
 * keep their vertical padding. The shorthand resets ALL four sides at the same
 * specificity, which on Dabster Labs caused the hero badge to slide under the
 * fixed 74px nav. Horizontal gutter (20px each side) unchanged; vertical
 * defaults to the browser's 0 — same effective behavior for sites that do not
 * set padding-top via another selector. */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
:where(button, .btn) {
  cursor: pointer;
  border: none;
  transition: all 0.3s;
}
/* EC-BTN-107: Disclosure/accordion toggle buttons (aria-expanded) must not be
   text-selectable. Otherwise a double-click or click-drag on a FAQ question
   label paints the browser's default blue text-selection highlight, which the
   user sees as a stray "bluish background" that appears on one click and clears
   on the next. Native <button>s are non-selectable and the source React FAQ is
   too. Scoped to button[aria-expanded] so ordinary buttons and selectable
   content elsewhere are untouched. */
button[aria-expanded] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input,
textarea,
select {
  font-family: inherit;
}
ul,
ol {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}

/* Grid Layout & Sidebar Preservation - Ensures Bootstrap and other grid systems work properly */
.grid-layout-container {
  width: 100%;
  max-width: 100%;
}

/* Preserve Bootstrap row structure */
.grid-layout-container .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Ensure Bootstrap columns work */
.grid-layout-container [class*='col-'] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* Bootstrap column widths - responsive */
@media (min-width: 768px) {
  .grid-layout-container .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid-layout-container .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .grid-layout-container .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid-layout-container .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .grid-layout-container .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .grid-layout-container .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Mobile stacking for sidebars */
@media (max-width: 767px) {
  .grid-layout-container [class*='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Sidebar styling */
.grid-layout-container aside,
.grid-layout-container [class*='sidebar'] {
  padding: 20px;
}

/* CRITICAL: Disable popups marked by WPConvert - Universal for ALL popup libraries */
/* This targets ONLY popups we've marked, regardless of the library used */
/* Users can re-enable by overriding this CSS in Customizer → Additional CSS */
[data-wpconvert-popup-disabled='true'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
  position: absolute !important;
  left: -99999px !important;
  transform: scale(0) !important;
}

/* Also hide child elements of disabled popups (for nested structures) */
[data-wpconvert-popup-disabled='true'] * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Disable popup overlay backgrounds (universal) */
[data-wpconvert-popup-disabled='true'].overlay,
[data-wpconvert-popup-disabled='true'][class*='overlay'],
[data-wpconvert-popup-disabled='true'][class*='backdrop'],
[data-wpconvert-popup-disabled='true'][class*='bg'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* EC-FORM-004: Native <select> option list styling.
 *
 * Why: EC-FORMS-004 / EC-MSTEP-001C converts Radix shadcn comboboxes to
 * native <select> elements so the form submits as a real HTML form. Native
 * select-popups inherit the trigger element background, so on shadcn forms
 * with translucent inputs (e.g. bg-white slash 10), the option list paints
 * as a translucent panel that bleeds the parent form background and makes
 * options nearly unreadable.
 *
 * The rule below paints each option on a solid surface using the same
 * shadcn --card design tokens the rest of the theme already uses, so
 * dropdowns visually match the original SelectContent / bg-popover render.
 *
 * Safety:
 *   - Scoped strictly to select option / select optgroup — never leaks
 *     to custom popover divs.
 *   - hsl(var(--card, ...)) with fallbacks degrades cleanly on themes
 *     that do not define the variable.
 *   - Safari ignores option styling entirely (no DOM hook into the native
 *     popup) so this is a no-op there. Chrome/Edge/Firefox/Brave honour it.
 */
/* EC-FORM-004 / EC-FORM-004b: solid option surfaces — card tokens by default,
   popover tokens on dark booking sections (bg-secondary / needs-wiring forms). */
select option,
select optgroup,
.bg-secondary select option,
.bg-secondary select optgroup,
form[data-wpconvert-form] select option,
form[data-wpconvert-form] select optgroup {
  background-color: hsl(var(--popover, var(--card, 0 0% 100%)));
  color: hsl(var(--popover-foreground, var(--card-foreground, 222.2 84% 4.9%)));
}

/* CRITICAL: Tailwind Font Override - ensure custom fonts take precedence over Tailwind CDN */
/* Tailwind CDN generates CSS dynamically that can override static CSS, so we use !important */
/* No custom font classes detected */

/* ── Blog Templates ─────────────────────────────────────── */

/* Prose typography for single post content */
/* EC-BLOG-184: Inherit the page's own body text colour instead of forcing the
   shadcn light-mode --foreground token. On dark-themed sites --foreground is the
   light-mode value (near-black), which rendered the entire article body
   invisible (dark text on a dark page). 'inherit' matches whatever the source
   theme authored for readable body copy (e.g. cream on dark, or dark on light),
   so blog content is legible on light AND dark themes. */
.prose {
  line-height: 1.8;
  color: inherit;
}
.prose p {
  margin-bottom: 1.25em;
}
.prose h2 {
  font-size: 1.5em;
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 0.75em;
}
.prose h3 {
  font-size: 1.25em;
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.prose a {
  color: hsl(var(--primary, 221 83% 53%));
  text-decoration: underline;
}
.prose a:hover {
  opacity: 0.8;
}
.prose blockquote {
  border-left: 3px solid hsl(var(--accent, 221 83% 53%));
  padding-left: 1em;
  margin: 1.5em 0;
  font-style: italic;
  opacity: 0.9;
}
.prose ul,
.prose ol {
  padding-left: 1.5em;
  margin-bottom: 1.25em;
}
.prose li {
  margin-bottom: 0.5em;
}
.prose img {
  border-radius: 0.5rem;
  margin: 1.5em 0;
}
.prose code {
  background: hsl(var(--muted, 0 0% 15%));
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.875em;
}
.prose pre {
  background: hsl(var(--muted, 0 0% 15%));
  padding: 1em;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1.5em 0;
}
.prose pre code {
  background: none;
  padding: 0;
}

/* Pagination */
.wpconvert-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--border, 0 0% 20%));
}
.wpconvert-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: all 0.2s;
  border: 1px solid hsl(var(--border, 0 0% 20%));
}
.wpconvert-pagination .page-numbers.current {
  background: hsl(var(--primary, 221 83% 53%));
  color: white;
  border-color: transparent;
}
.wpconvert-pagination .page-numbers:hover:not(.current) {
  background: hsl(var(--muted, 0 0% 15%));
}

/* Card hover image zoom (matches Tailwind group-hover:scale-105) */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

/* Post navigation links on single.php */
article .flex.items-center.justify-between a {
  color: hsl(var(--primary, 221 83% 53%));
  text-decoration: none;
  font-weight: 500;
}
article .flex.items-center.justify-between a:hover {
  text-decoration: underline;
}

/* Responsive: stack grid on mobile */
@media (max-width: 768px) {
  [class*='md\:grid-cols-'] {
    grid-template-columns: 1fr !important;
  }
}

/* ── EC-BLOG-186 semantic layout fallback ───────────────────
   This site's stylesheet has no Tailwind utility classes, but the generated
   blog templates use a small set of them for layout. Define them here so the
   single-post article is a centered, readable column (not full-width / left-
   aligned) and card images crop correctly. */
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-none {
  max-width: none;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-4 {
  gap: 1rem;
}
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.object-cover {
  object-fit: cover;
}
.overflow-hidden {
  overflow: hidden;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16 / 9;
}
.prose-lg {
  font-size: 1.125rem;
  line-height: 1.8;
}

/* EC-BLOG-188: the injected category-filter buttons use Tailwind utility
   classes (bg-primary / bg-card / text-muted-foreground …) that do not exist
   on a semantic site, so they render as default white boxes with dark text.
   Style the real .wpconvert-blog-filter / .wpconvert-category-filters classes
   with theme-neutral outlined pills (currentColor-based, so they adapt to dark
   or light themes) and a clear active state. */
.wpconvert-category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.wpconvert-blog-filter {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: currentColor;
  opacity: 0.6;
  border: 1px solid rgba(128, 128, 128, 0.4);
  border-radius: 999px;
  cursor: pointer;
  transition:
    opacity 0.2s,
    border-color 0.2s,
    background 0.2s;
}
.wpconvert-blog-filter:hover {
  opacity: 1;
}
.wpconvert-blog-filter.active {
  opacity: 1;
  border-color: currentColor;
  background: rgba(128, 128, 128, 0.14);
}

/* ============================================================
   Contact Form 7 — styled to match the Aprendido design.
   Applied to the four forms wired into the templates (home,
   blog, contact, testimonials). Targets CF7's stable control
   classes so it works regardless of each form's field layout.
   ============================================================ */
.wpcf7-form { font-family: 'Inter', system-ui, sans-serif; }
.wpcf7-form p { margin: 0 0 1.1rem; }
.wpcf7-form label {
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--navy);
  display: block;
  margin-bottom: 0.4rem;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: 'Inter';
  font-size: 0.95rem;
  box-sizing: border-box;
  background: #fff;
}
.wpcf7-form textarea { min-height: 7rem; resize: vertical; }
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px var(--coral-tint);
}
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.7rem 1.6rem;
  border-radius: 100px;
  border: 2px solid transparent;
  background: var(--coral);
  color: var(--navy-deep);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px var(--coral-deep);
}
/* Acceptance / consent checkbox (testimonials) */
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-acceptance label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--slate);
}
.wpcf7-form .wpcf7-acceptance input { margin-top: 0.25rem; }
/* CF7 status / validation messages */
.wpcf7 .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  font-family: 'Inter';
  font-size: 0.9rem;
}
.wpcf7-form .wpcf7-not-valid-tip { font-family: 'Inter'; font-size: 0.8rem; }

/* Newsletter (home + blog): horizontal pill layout like .news form.
   The newsletter fields use placeholders, so their labels are hidden. */
.news .wpcf7-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.news .wpcf7-form p { margin: 0; flex: 1 1 180px; }
/* CF7 nests the <input> INSIDE the <label>, so display:none on the label
   would hide the field too. Collapse the label text and its line break
   instead, and keep the control wrapper and input at normal size. */
.news .wpcf7-form label { display: block; margin: 0 0 0.3rem; }
.news .wpcf7-form .wpcf7-form-control-wrap { display: block; }
.news .wpcf7-form input[type="text"],
.news .wpcf7-form input[type="email"] {
  border-radius: 100px;
  border: 1px solid #e6c3ab;
  padding: 0.85rem 1.1rem;
}
.news .wpcf7-form p:has(input[type="submit"]),
.news .wpcf7-form p:has(.wpcf7-submit) { flex: 0 0 auto; }

/* ============================================================
   Editable link-buttons (footer / contact / about).
   Keeps the converted text-links visually tidy at their new
   button sizing within tighter layouts.
   ============================================================ */
.foot .btn { font-size: 0.8rem; padding: 0.42rem 1rem; margin: 0 0.4rem 0.5rem 0; }
.foot .member { gap: 0.5rem; }
.foot .member .btn { margin: 0 0.4rem 0.4rem 0; }
.contact-side .btn { margin: 0.1rem 0 0.3rem; }

/* ============================================================
   Sticky header.
   The header already declared position:sticky, but its low
   z-index let page sections scroll over and hide it. This pins
   it reliably above content, offsets it below the WordPress
   admin bar for logged-in users, and stops it covering the top
   of in-page anchor targets when a menu/hero link jumps to a
   section.
   ============================================================ */
header.nav {
  position: sticky !important;
  top: 0;
  z-index: 100;
}
body.admin-bar header.nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar header.nav { top: 46px; }
}
[id] { scroll-margin-top: 5.5rem; }

/* ============================================================
   Mobile menu hamburger.
   The theme shipped the slide-out drawer, backdrop and close
   button, but no button to OPEN it, so mobile had no reachable
   menu. This shows a hamburger at the breakpoint where the
   inline nav links are hidden; tapping it opens the existing
   drawer (wired in header.php).
   ============================================================ */
.mobile-nav-toggle { display: none; }
@media (max-width: 1023px) {
  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0.4rem;
    background: none;
    border: 0;
    color: var(--navy);
    cursor: pointer;
    line-height: 0;
  }
}

/* ============================================================
   Mobile: hide the header "Book a call" CTA.
   On a phone the header keeps to logo + hamburger. The booking
   action stays in the hero ("Book a 30-minute call") and inside
   the slide-out menu (it is a menu item). This also removes a
   cross-browser overlap where the CTA sat on top of the logo
   in Firefox.
   ============================================================ */
@media (max-width: 1023px) {
  .nav-links a.btn,
  .nav-links .btn { display: none !important; }
}

/* ============================================================
   Article previous/next navigation.
   Replaces the old three-card "Related Articles" block at the
   foot of a single post with simple Previous / Next title links.
   WordPress omits the "next" link on the latest post and the
   "previous" link on the oldest, so single-sided cases are
   handled automatically.
   ============================================================ */
.post-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.post-nav-link { display: block; text-decoration: none; flex: 1 1 240px; }
.post-nav-prev { text-align: left; }
.post-nav-next { text-align: right; }
.post-nav-dir {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--coral-deep);
  margin-bottom: 0.3rem;
}
.post-nav-title {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--navy);
}
.post-nav-link:hover .post-nav-title { color: var(--coral-deep); }
@media (max-width: 600px) {
  .post-nav-link { flex: 1 1 100%; text-align: left; }
  .post-nav-next { text-align: left; }
}

/* ============================================================
   Legal pages (Privacy Policy, Terms & Conditions).
   Readable prose styling for the page-privacy.php and
   page-terms.php templates.
   ============================================================ */
.legal-content { color: var(--slate); font-size: 1rem; }
.legal-content h2 { font-family: 'Montserrat', sans-serif; color: var(--navy); font-size: 1.35rem; margin: 2.1rem 0 .6rem; }
.legal-content h3 { font-family: 'Montserrat', sans-serif; color: var(--navy); font-size: 1.08rem; margin: 1.5rem 0 .4rem; }
.legal-content h4 { color: var(--navy); font-size: .98rem; margin: 1.1rem 0 .3rem; }
.legal-content p, .legal-content li { line-height: 1.65; margin: .6rem 0; }
.legal-content ul { padding-left: 1.3rem; }
.legal-content a { color: var(--coral-deep); }
.legal-content a:hover { text-decoration: underline; }
.legal-content .updated { font-size: .9rem; opacity: .85; margin-bottom: 1.4rem; }

/* ============================================================
   Footer bottom-bar links (Privacy / Terms).
   The base ".foot a" rule sets display:block so the footer
   column links stack. That also stacked Privacy, the separator
   and Terms onto separate lines. Keep the bottom-bar links
   inline and in the same muted tone as the copyright text.
   ============================================================ */
.foot-bar a {
  display: inline !important;
  margin: 0 !important;
  color: inherit;
  text-decoration: none;
}
.foot-bar a:hover { color: var(--coral); text-decoration: underline; }