@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#0A2540;
  --ink-2:#16324F;
  --ink-3:#204060;
  --teal:#0E7C7B;
  --teal-dark:#095B5A;
  --teal-soft:#E4F1F0;
  --mint:#5EEAD4;
  --lime:#CDF06B;
  --lime-2:#DCF68B;
  --gold:#F4B942;
  --surface:#F4F7FA;
  --surface-2:#E6EEF5;
  --line:#DBE5EE;
  --white:#FFFFFF;
  --text:#0F172A;
  --text-2:#495B6B;
  --radius-xl:32px;
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:10px;
  --radius-pill:999px;
  --shadow-soft:0 6px 26px rgba(10,37,64,.08);
  --shadow-mid:0 16px 44px rgba(10,37,64,.14);
  --shadow-hard:0 30px 70px rgba(10,37,64,.22);
  --ring:0 0 0 3px rgba(94,234,212,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --header-h:84px;
}

*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--white);
  line-height:1.68;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--teal-dark);text-decoration:none;transition:color .25s var(--ease)}
a:hover{color:var(--teal)}

h1,h2,h3,h4,h5,
.display-title{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--ink);
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0 0 1rem;
}

h1{font-size:clamp(2.2rem,5vw,3.6rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
h4{font-size:1.05rem}

p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

::selection{background:var(--lime);color:var(--ink)}

:target{scroll-margin-top:calc(var(--header-h) + 20px)}
section[id],div[id]{scroll-margin-top:calc(var(--header-h) + 20px)}

.container{width:min(1220px,92vw);margin-inline:auto}

.section{padding:clamp(64px,8vw,120px) 0;position:relative}
.section--tight{padding:clamp(44px,5.5vw,78px) 0}
.section--surface{background:var(--surface)}
.section--dark{background:var(--ink);color:#DCE7F1}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4,.section--dark .display-title{color:#fff}
.section--dark p{color:#C9D7E4}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--teal-dark);
  margin-bottom:1rem;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--lime)}
.section--dark .eyebrow{color:var(--mint)}

.section-head{max-width:760px;margin-bottom:clamp(32px,4vw,56px)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.section-lead{font-size:1.08rem;color:var(--text-2)}
.section--dark .section-lead{color:#B9CADB}

.btn{
  --btn-bg:var(--teal);
  --btn-fg:#fff;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  line-height:1;
  padding:.85rem 1.6rem;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  background:var(--btn-bg);
  color:var(--btn-fg);
  cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn:hover{transform:translateY(-2px);color:var(--btn-fg)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn i{font-size:.9em}

.btn-brand{--btn-bg:var(--teal);--btn-fg:#fff}
.btn-brand:hover{--btn-bg:var(--teal-dark);box-shadow:var(--shadow-mid)}

.btn-ink{--btn-bg:var(--ink);--btn-fg:#fff}
.btn-ink:hover{--btn-bg:var(--ink-2);box-shadow:var(--shadow-mid)}

.btn-lime{--btn-bg:var(--lime);--btn-fg:var(--ink)}
.btn-lime:hover{--btn-bg:var(--lime-2);box-shadow:var(--shadow-mid)}

.btn-ghost{--btn-bg:transparent;--btn-fg:var(--ink);border-color:var(--line)}
.btn-ghost:hover{--btn-bg:var(--ink);--btn-fg:#fff;border-color:var(--ink)}

.btn-ghost-light{--btn-bg:transparent;--btn-fg:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost-light:hover{--btn-bg:#fff;--btn-fg:var(--ink);border-color:#fff}

.btn-lg{padding:1.05rem 2rem;font-size:1.02rem}

.link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--teal-dark)}
.link-arrow i{transition:transform .25s var(--ease)}
.link-arrow:hover i{transform:translateX(4px)}

.icon-badge{
  width:58px;height:58px;
  border-radius:18px;
  display:grid;place-items:center;
  background:var(--teal-soft);
  color:var(--teal-dark);
  font-size:1.35rem;
  flex:none;
}
.icon-badge--lime{background:var(--lime);color:var(--ink)}
.icon-badge--dark{background:var(--ink);color:var(--mint)}

.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1035;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.97);
  border-bottom-color:var(--line);
  box-shadow:var(--shadow-soft);
}

.topbar{background:var(--ink);color:#D6E1EC;font-size:.82rem}
.topbar__row{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:center;justify-content:space-between;padding:.5rem 0}
.topbar__group{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center}
.topbar__item{display:inline-flex;align-items:center;gap:.5rem;color:#D6E1EC}
.topbar__item i{color:var(--mint)}

.header__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}

.brand-mark{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--ink)}
.brand-mark img{width:72px;height:auto}
.brand-mark span{line-height:1}

.main-nav{display:flex;align-items:center;gap:.15rem}
.main-nav .nav-link{
  color:var(--ink);
  font-weight:500;
  font-size:.95rem;
  padding:.55rem .95rem;
  border-radius:var(--radius-pill);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.main-nav .nav-link:hover,
.main-nav .nav-link.active{color:var(--teal-dark);background:var(--teal-soft)}

.nav-toggle{
  width:48px;height:48px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  display:grid;place-items:center;
  font-size:1.15rem;
}

.hero{position:relative}
.hero-slider{position:relative;min-height:min(90vh,780px);overflow:hidden}
.hero-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  background-size:cover;
  background-position:center;
  opacity:0;
  visibility:hidden;
  transform:scale(1.04);
  transition:opacity .9s var(--ease),transform 1.4s var(--ease),visibility .9s;
  color:#fff;
}
.hero-slide.is-active{opacity:1;visibility:visible;transform:scale(1)}
.hero-slide__content{position:relative;z-index:2;width:100%;padding:clamp(120px,14vw,170px) 0 clamp(96px,12vw,140px)}

.hero-title{font-size:clamp(2.4rem,6vw,4.5rem);line-height:1.02;color:#fff;margin-bottom:1.2rem}
.hero-lead{font-size:clamp(1.02rem,1.6vw,1.22rem);max-width:58ch;color:#E6EFF6}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.8rem}

.hero-points{display:flex;flex-wrap:wrap;gap:1rem 1.8rem;margin-top:2.2rem;padding:0;list-style:none}
.hero-points li{display:inline-flex;align-items:center;gap:.55rem;color:#EAF2F8;font-weight:500}
.hero-points i{color:var(--lime)}

.slider-arrows{position:absolute;right:clamp(14px,4vw,56px);bottom:clamp(22px,4vw,46px);display:flex;gap:.6rem;z-index:6}
.slider-arrow{
  width:52px;height:52px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(10,37,64,.35);
  color:#fff;
  display:grid;place-items:center;
  backdrop-filter:blur(8px);
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.slider-arrow:hover{background:#fff;color:var(--ink);transform:translateY(-2px)}

.slider-dots{position:absolute;left:clamp(14px,4vw,56px);bottom:clamp(22px,4vw,46px);display:flex;gap:.5rem;z-index:6}
.slider-dot{
  width:32px;height:6px;
  border:0;padding:0;
  border-radius:99px;
  background:rgba(255,255,255,.4);
  cursor:pointer;
  transition:background .3s var(--ease),width .3s var(--ease);
}
.slider-dot.is-active{background:var(--lime);width:52px}

.page-hero{
  position:relative;
  padding:calc(var(--header-h) + 96px) 0 84px;
  background-size:cover;
  background-position:center;
  color:#fff;
}
.page-hero h1,.page-hero p{color:#fff}
.page-hero__lead{max-width:64ch;color:#E5EEF6}

.trust-bar{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem;
}

.stat-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:1.6rem;
  height:100%;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.stat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-mid)}
.stat-value{font-family:var(--font-display);font-size:clamp(2rem,4vw,2.9rem);font-weight:600;color:var(--ink);line-height:1}
.stat-value span{color:var(--teal)}
.stat-label{margin-top:.5rem;font-size:.92rem;color:var(--text-2);font-weight:500}

.service-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-mid);border-color:transparent}
.service-card__media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--surface-2)}
.service-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.service-card:hover .service-card__media img{transform:scale(1.07)}
.service-card__tag{
  position:absolute;top:14px;left:14px;
  background:var(--lime);
  color:var(--ink);
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.38rem .75rem;border-radius:99px;
}
.service-card__body{display:flex;flex-direction:column;gap:.75rem;padding:1.6rem;flex:1}
.service-card__title{font-size:1.32rem;margin:0}
.service-card__meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:.6rem}
.service-card__price{font-weight:700;color:var(--teal-dark)}

.feature-card{
  display:flex;gap:1rem;align-items:flex-start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  height:100%;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.feature-card h3{font-size:1.15rem;margin-bottom:.35rem}
.feature-card p{color:var(--text-2);font-size:.96rem;margin:0}

.step-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:1.8rem 1.5rem;
  height:100%;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.step-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-mid);border-color:var(--lime)}
.step-card__num{font-family:var(--font-display);font-size:2.3rem;font-weight:700;color:var(--teal);opacity:.35;line-height:1;margin-bottom:.6rem}
.step-card h3{font-size:1.12rem;margin-bottom:.4rem}
.step-card p{color:var(--text-2);font-size:.95rem;margin:0}

.logo-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.2rem;align-items:center}
.partner-logo{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:1.3rem 1rem;
  display:grid;place-items:center;
  min-height:92px;
  filter:grayscale(1);
  opacity:.82;
  transition:filter .3s var(--ease),opacity .3s var(--ease),transform .3s var(--ease);
}
.partner-logo:hover{filter:none;opacity:1;transform:translateY(-3px)}
.partner-logo img{max-height:44px;width:auto}

.testimonial-card{
  display:flex;flex-direction:column;gap:1rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:1.8rem;
  height:100%;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-mid)}
.testimonial-card__stars{color:var(--gold);letter-spacing:.15em}
.testimonial-card__quote{font-size:1.02rem;color:var(--ink-2);margin:0}
.testimonial-card__person{display:flex;align-items:center;gap:.9rem;margin-top:auto;padding-top:.4rem}
.testimonial-card__person img{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--surface-2);flex:none}
.testimonial-card__name{font-weight:600;color:var(--ink);font-size:.98rem;margin:0}
.testimonial-card__role{font-size:.85rem;color:var(--text-2);margin:0}

.team-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  height:100%;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.team-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-mid)}
.team-card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--surface-2)}
.team-card__body{padding:1.3rem}
.team-card__name{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--ink);margin:0 0 .2rem}
.team-card__role{font-size:.88rem;color:var(--teal-dark);font-weight:600;margin:0}

.cta-band{
  position:relative;
  border-radius:var(--radius-xl);
  overflow:hidden;
  padding:clamp(40px,6vw,84px);
  background-size:cover;
  background-position:center;
  color:#fff;
}
.cta-band h2,.cta-band p{color:#fff}
.cta-band__body{position:relative;z-index:2;max-width:640px}

.split-figure{position:relative;border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-2);min-height:280px}
.split-figure img{width:100%;height:100%;object-fit:cover}
.split-badge{
  position:absolute;
  right:clamp(12px,3vw,28px);
  bottom:clamp(12px,3vw,28px);
  background:rgba(255,255,255,.95);
  border-radius:var(--radius-lg);
  padding:1rem 1.2rem;
  box-shadow:var(--shadow-mid);
  max-width:230px;
}
.split-badge strong{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--ink);line-height:1}

.check-list{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.check-list li{display:flex;gap:.7rem;align-items:flex-start;color:var(--text-2)}
.check-list i{color:var(--teal);margin-top:.28rem}

.gallery-item{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--surface-2);
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-item__caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:2rem 1.2rem 1rem;
  color:#fff;
  background:linear-gradient(transparent,rgba(10,37,64,.88));
  font-weight:600;
  font-size:.96rem;
}

.faq-accordion .accordion-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  margin-bottom:1rem;
  overflow:hidden;
}
.faq-accordion .accordion-button{
  font-weight:600;
  font-size:1.03rem;
  color:var(--ink);
  background:#fff;
  padding:1.2rem 1.4rem;
  box-shadow:none;
}
.faq-accordion .accordion-button:not(.collapsed){color:var(--teal-dark);background:var(--teal-soft)}
.faq-accordion .accordion-button:focus{box-shadow:none}
.faq-accordion .accordion-body{padding:0 1.4rem 1.4rem;color:var(--text-2)}

.form-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:clamp(24px,4vw,46px);
  box-shadow:var(--shadow-soft);
}
.form-label{font-weight:600;color:var(--ink);font-size:.9rem;margin-bottom:.4rem}
.form-control,.form-select{
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--surface);
  padding:.85rem 1rem;
  color:var(--text);
  font-size:.97rem;
}
.form-control::placeholder{color:#7C8B99}
.form-control:focus,.form-select:focus{
  border-color:var(--teal);
  background:#fff;
  box-shadow:var(--ring);
}
.form-check-input:checked{background-color:var(--teal);border-color:var(--teal)}
.form-check-label{color:var(--text-2);font-size:.92rem}

.map-frame{
  border-radius:var(--radius-xl);
  overflow:hidden;
  border:1px solid var(--line);
  min-height:380px;
  box-shadow:var(--shadow-soft);
}
.map-frame iframe{display:block;width:100%;height:440px;border:0}

.reveal-up{opacity:0;transform:translateY(24px)}
.reveal-up.is-visible{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

.site-footer{background:var(--ink);color:#C9D7E4;padding-top:clamp(56px,7vw,96px)}
.site-footer h4{color:#fff;font-size:1rem;letter-spacing:.02em;margin-bottom:1.1rem}
.site-footer p{color:#C9D7E4;font-size:.95rem}
.site-footer a{color:#C9D7E4}
.site-footer a:hover{color:var(--lime)}
.footer-brand .brand-mark{color:#fff}
.footer-nav{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.footer-contact{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.footer-contact li{display:flex;gap:.7rem;align-items:flex-start}
.footer-contact i{color:var(--mint);margin-top:.28rem}
.footer-legal{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;font-size:.9rem}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.13);
  margin-top:clamp(32px,5vw,60px);
  padding:1.5rem 0;
  font-size:.85rem;
  color:#93A7B9;
}
.footer-bottom a{color:#93A7B9}
.footer-bottom a:hover{color:var(--lime)}

.back-to-top{
  position:fixed;
  right:22px;bottom:22px;
  width:50px;height:50px;
  border-radius:50%;
  border:0;
  background:var(--ink);
  color:#fff;
  display:grid;place-items:center;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  z-index:1045;
  box-shadow:var(--shadow-mid);
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.back-to-top:hover{background:var(--teal-dark)}

.consent-panel{
  position:fixed;
  left:clamp(12px,3vw,32px);
  right:clamp(12px,3vw,32px);
  bottom:clamp(12px,3vw,28px);
  z-index:1080;
  max-width:1080px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-hard);
  padding:clamp(18px,2.6vw,28px);
}
.consent-panel__inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:1.25rem;
  align-items:center;
}
.consent-panel__icon{
  width:54px;height:54px;
  border-radius:16px;
  background:var(--teal-soft);
  color:var(--teal-dark);
  display:grid;place-items:center;
  font-size:1.35rem;
  flex:none;
}
.consent-panel__title{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:1.1rem;margin:0 0 .25rem}
.consent-panel__text{color:var(--text-2);font-size:.92rem;margin:0}
.consent-panel__link{color:var(--teal-dark);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.consent-panel__link:hover{color:var(--teal)}
.consent-panel__actions{display:flex;gap:.6rem;flex-wrap:wrap}
.consent-btn{
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  font-weight:600;
  font-size:.9rem;
  padding:.75rem 1.4rem;
  cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.consent-btn:hover{transform:translateY(-2px)}
.consent-btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.consent-btn--ghost:hover{background:var(--surface)}
.consent-btn--accept{background:var(--ink);color:#fff}
.consent-btn--accept:hover{background:var(--teal-dark);color:#fff}

.ratio-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-2)}
.ratio-frame img{width:100%;height:100%;object-fit:cover}

.price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 0;
  border-bottom:1px dashed var(--line);
}
.price-row:last-child{border-bottom:0}
.price-row__name{font-weight:600;color:var(--ink)}
.price-row__value{font-weight:700;color:var(--teal-dark);white-space:nowrap}

.pill{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.4rem .85rem;
  border-radius:99px;
  background:var(--teal-soft);
  color:var(--teal-dark);
  font-size:.82rem;
  font-weight:600;
}
.pill--lime{background:var(--lime);color:var(--ink)}
.pill--dark{background:var(--ink);color:var(--mint)}

.divider-wave{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
  margin:0;
  border:0;
}

@media (max-width:991.98px){
  .main-nav{
    flex-direction:column;
    align-items:stretch;
    gap:.2rem;
    padding:1rem 0 1.4rem;
  }
  .main-nav .nav-link{padding:.75rem 1rem;border-radius:var(--radius-md)}
  .header-cta{display:none}
  .consent-panel__inner{grid-template-columns:auto 1fr}
  .consent-panel__actions{grid-column:1 / -1;justify-content:flex-end}
}

@media (max-width:575.98px){
  .hero-slide__content{padding:120px 0 110px}
  .slider-arrows{display:none}
  .slider-dots{left:50%;transform:translateX(-50%);bottom:28px}
  .topbar__row{gap:.3rem 1rem;font-size:.78rem}
  .consent-panel__inner{grid-template-columns:1fr}
  .consent-panel__icon{display:none}
  .consent-panel__actions{justify-content:stretch}
  .consent-btn{flex:1}
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
/* ---------- Fix pass: mobile header offset + contrast ---------- */

/* Push page content below the fixed header (height measured by JS into --header-real-h) */
main.page-main{padding-top:var(--header-real-h,104px)}
@media (max-width:991.98px){
  main.page-main{padding-top:var(--header-real-h,164px)}
}

/* Pages/sections that use a background photo need an explicit dark background-color
   so text sitting on them always resolves against a dark surface */
.page-hero{background-color:var(--ink)}
.cta-band{background-color:var(--ink)}

/* Cards inside dark bands keep their own white surface: force dark card text
   so it is not overridden by ".section--dark p" */
.section--dark .stat-card .stat-value{color:var(--ink)}
.section--dark .stat-card .stat-label{color:var(--text-2)}
.section--dark .testimonial-card .testimonial-card__quote{color:var(--ink-2)}
.section--dark .testimonial-card .testimonial-card__name{color:var(--ink)}
.section--dark .testimonial-card .testimonial-card__role{color:var(--text-2)}

/* Gallery captions sit on a photo: give the caption band a real dark background */
.gallery-item__caption{
  background-color:rgba(10,37,64,.9);
  background-image:linear-gradient(transparent,rgba(10,37,64,.95));
}

/* ===== QA fixes: contrast + mobile header clearance ===== */

/* Image-backed heroes/bands need a solid dark base so text contrast holds
   even if the background image is not painted (e.g. blocked/failed load). */
.page-hero{background-color:var(--ink)}
.cta-band{background-color:var(--ink)}

/* Feature cards keep a white surface inside dark sections, so their text
   must use dark colours instead of the section's light text colour. */
.section--dark .feature-card h2,
.section--dark .feature-card h3,
.section--dark .feature-card h4,
.section--dark .feature-card .h5{color:var(--ink)}
.section--dark .feature-card p{color:var(--text-2)}

/* The fixed header is taller on small screens than the hero's default
   top offset, so push the page content clear of the fixed header and let
   the hero sit below it. */
@media (max-width:991.98px){
  main{padding-top:172px}
  .page-hero{padding-top:56px;padding-bottom:64px}
}

/* ===== QA overrides (appended) ===== */

/* Hero: provide an opaque background colour so white hero text is legible.
   The inline background-image continues to render on top of this colour. */
.page-hero{background-color:var(--ink)}

/* Dark sections contain white feature cards: keep card text dark so it
   is readable against the white card surface. */
.section--dark .feature-card h3{color:var(--ink)}
.section--dark .feature-card p{color:var(--text-2)}

/* Gallery captions sit over a gradient; give them a solid base colour so
   the white caption text always has contrast. */
.gallery-item__caption{background-color:#0A2540}

/* Mobile: offset the inner page hero so the fixed header no longer
   overlaps it. Only pages using .page-hero are affected. */
@media (max-width:991.98px){
  .page-hero{margin-top:164px}
}

/* ===== QA fixes round 2 ===== */

/* Eyebrows sit on the dark image heroes/bands; use the light accent. */
.page-hero .eyebrow,
.cta-band .eyebrow{color:var(--mint)}

/* Move the hero box itself clear of the fixed header on small screens
   (margin shifts the element box, unlike its own padding). */
@media (max-width:991.98px){
  main{padding-top:0}
  .page-hero{margin-top:172px}
}

/* ===== QA fixes round 3 (contacts page) ===== */

/* Testimonial cards sit on a WHITE surface inside a dark section.
   Their plain answer paragraphs were inheriting ".section--dark p"
   (light #C9D7E4) which fails contrast on white. Force dark text. */
.section--dark .testimonial-card p:not(.testimonial-card__quote){color:var(--text-2)}

/* Feature cards likewise keep a white surface inside dark sections. */
.section--dark .feature-card p{color:var(--text-2)}
.section--dark .feature-card h2,
.section--dark .feature-card h3,
.section--dark .feature-card h4,
.section--dark .feature-card .h5{color:var(--ink)}

/* Reliable mobile clearance from the fixed header.
   Padding on <main> cannot collapse (unlike a child's margin-top),
   and we use the JS-measured header height with a safe fallback. */
@media (max-width:991.98px){
  main{padding-top:calc(var(--header-real-h,164px) + 8px)}
  .page-hero{margin-top:0;padding-top:64px;padding-bottom:64px}
}

/* ===== QA fixes round 3: reliably clear the fixed header on mobile =====
   The header is position:fixed, so its out-of-flow height cannot push the
   page. Previous attempts relied on `main` padding / `.page-hero` margin,
   which can collapse or be overridden. Push the whole document flow down
   with body padding so every inner page hero sits below the fixed header. */
@media (max-width:991.98px){
  html{scroll-padding-top:172px}
  body{padding-top:164px !important}
  main{padding-top:0 !important}
  .page-hero{margin-top:0 !important}
}

/* ===== QA fixes round 3: hero contrast + mobile header clearance ===== */

/* The image-backed .hero band needs a solid dark base colour so the white
   hero title, lead paragraph and ghost button keep their contrast even when
   the background photo is not painted. The inline background-image still
   renders on top of this colour. */
.hero{background-color:#0A2540}

/* On small screens the fixed header is taller than the hero's natural top
   offset, so shift the hero box below the fixed header. This only targets
   the .hero band used by blog/article pages, leaving .page-hero pages
   untouched. */
@media (max-width:991.98px){
  .hero{margin-top:164px}
}

/* ===== QA round 4: mobile header clearance for inner page heroes ===== */
@media (max-width:991.98px){
  body{padding-top:180px !important}
}

/* ===== QA fixes round 4: article hero contrast + mobile header clearance ===== */

/* The image-backed .hero band in blog/article pages needs a solid dark base
   so the white title and lead keep contrast even if the photo is not painted. */
.hero{background-color:#0A2540}

/* The eyebrow inside .hero was using the dark teal on a dark navy surface.
   Use the light mint accent so it is legible. */
.hero .eyebrow{color:var(--mint)}
.hero .eyebrow::before{background:var(--lime)}

/* .hero has no top padding of its own, so its content sits behind the
   fixed header. Give it clearance equal to the header height everywhere. */
.hero{padding-top:calc(var(--header-h, 84px) + 72px);padding-bottom:clamp(56px,8vw,96px)}

/* On small screens the fixed header is taller (~164px), so reserve
   enough room above the hero content to fully clear it. */
@media (max-width:991.98px){
  .hero{padding-top:184px}
}

/* ===== QA round 4: homepage hero contrast + step card contrast ===== */

/* Eyebrow sits on the dark image hero, so use the light accent colour. */
.hero .eyebrow{color:var(--mint)}

/* Step cards render on a white surface inside the dark "How it works" band,
   so their headings must be dark rather than the section's white. */
.section--dark .step-card h3,
.section--dark .step-card .h5{color:var(--ink)}
.section--dark .step-card p{color:var(--text-2)}

/* ===== QA round 4: mobile fixed-header clearance (diagnostic) ===== */
@media (max-width:991.98px){
  body{padding-top:164px !important}
  main{padding-top:0 !important}
  .hero{margin-top:0 !important}
}

/* ===== QA round 5: mobile fixed-header clearance (authoritative fix) ===== */
/* The header is position:fixed, so it is out of flow. Padding on <body> does
   not change the hero's own document offset (offsetTop stays 0 relative to the
   body padding edge), so we put the clearance on <main> instead: that moves the
   in-flow hero box itself below the fixed header. max() guarantees a minimum
   clearance even if the JS-measured --header-real-h is smaller than the
   rendered header, while still tracking the real height when it is larger. */
@media (max-width:991.98px){
  body{padding-top:0 !important}
  main{
    padding-top:max(172px, calc(var(--header-real-h,164px) + 8px)) !important;
  }
  .page-hero{margin-top:0 !important}
  html{scroll-padding-top:max(172px, calc(var(--header-real-h,164px) + 8px))}
}

/* ===== QA fix (privacy-policy): clear the fixed header on mobile =====
   The header is position:fixed and ~164px tall on phones. Padding on
   <body> does not change the hero element's own offset, so the hero box
   must be pushed down with margin-top instead. Use the JS-measured
   header height when available, with a safe 164px fallback. */
@media (max-width:991.98px){
  body{padding-top:0 !important}
  main{padding-top:0 !important}
  .page-hero{
    margin-top:var(--header-real-h,164px) !important;
    padding-top:56px;
    padding-bottom:64px;
  }
}

/* ===== QA diagnostic (temporary) ===== */
@media (max-width:991.98px){
  body{padding-top:300px !important}
}

/* ===== QA authoritative fix: mobile fixed-header clearance =====
   Previous attempts used body/main padding and hero margins, which proved
   unreliable (the fixed header is out of flow and the hero box still sat at
   the top of the viewport). The most robust fix is to take the header out of
   the fixed positioning on small screens so it becomes part of normal flow:
   the document then naturally starts below the header, so no element can be
   covered. The header remains fixed on desktop. */
@media (max-width:991.98px){
  .site-header{
    position:static !important;
    top:auto !important;
  }
  body{padding-top:0 !important;}
  main{padding-top:0 !important;}
  .page-hero{
    margin-top:0 !important;
    padding-top:56px;
    padding-bottom:64px;
  }
  html{scroll-padding-top:0 !important;}
}

/* ===== QA fix (terms-and-conditions): clear the fixed header on mobile =====
   The fixed header is ~164px tall on phones and sits on top of the page
   hero. Earlier attempts put the clearance on <body> (padding) or on
   .page-hero (margin). Body padding does not change the hero element's own
   offset and the hero's margin collapsed through the static <main> parent,
   so neither moved the hero box. Turn <main> into a block formatting
   context (flow-root) so the hero's top margin stays inside it, then push
   the hero down by the measured header height. */
@media (max-width:991.98px){
  body{padding-top:0 !important}
  main{display:flow-root;padding-top:0 !important;margin-top:0 !important}
  .page-hero{
    margin-top:max(172px, var(--header-real-h, 164px)) !important;
    padding-top:48px !important;
    padding-bottom:64px !important;
  }
  html{scroll-padding-top:max(172px, var(--header-real-h, 164px))}
}

/* ===== QA fix (final): mobile header clearance + light-surface button ===== */

/* On phones the header is ~164px tall, which made every previous attempt to
   offset the hero fragile (a fixed header is out of flow, so only the hero's
   own box could ever clear it). Instead, stop the header from floating on
   small screens: it becomes a normal in-flow block at the very top of the
   document, so the hero below it can never be overlapped, whatever method is
   used to measure it. The header still sticks on tablet/desktop (>=992px). */
@media (max-width:991.98px){
  .site-header{
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    box-shadow:none;
    border-bottom-color:var(--line);
  }
  /* Remove the accumulated padding/margin work-arounds that were only needed
     by the fixed header. */
  body{padding-top:0 !important}
  main,
  main.page-main{padding-top:0 !important}
  .page-hero{margin-top:0 !important}
  .hero{margin-top:0 !important}
  html{scroll-padding-top:24px}
  section[id],div[id]{scroll-margin-top:24px}
}

/* "Back to home" sits on the light .section--surface band. The white ghost
   button was invisible there (1.08:1); a dark ghost button keeps the same
   understated look with proper contrast. */
.hero-actions .btn-ghost,
.btn-ghost.on-light{--btn-fg:var(--ink)}