/* =========================================================
   Sharp Trademarks — styles.css
   ========================================================= */

:root {
  --st-navy: #101f3d;
  --st-navy-light: #1a3266;
  --st-navy-soft: #eef1f8;
  --st-teal: #0d9488;
  --st-teal-dark: #0b7a70;
  --st-amber: #f2a900;
  --st-gray-50: #f7f8fa;
  --st-gray-100: #eef1f5;
  --st-gray-200: #e2e6ec;
  --st-gray-600: #5b6472;
  --st-gray-900: #1b2230;
  --st-radius: 12px;
  --st-shadow: 0 10px 30px rgba(16, 31, 61, 0.08);
  --st-shadow-lg: 0 20px 45px rgba(16, 31, 61, 0.14);
  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--st-gray-900);
  background: #fff;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .brand-text {
  font-family: var(--font-head);
  color: var(--st-navy);
  font-weight: 700;
}

a { text-decoration: none; }

.section-lead {
  color: var(--st-gray-600);
  max-width: 640px;
}
.text-center .section-lead { margin-left: auto; margin-right: auto; }

.ph {
  color: #b3541e;
  font-style: italic;
  font-size: 0.85em;
  opacity: 0.85;
}

section { padding: 5rem 0; }
section h2 { font-size: clamp(1.6rem, 2.2vw, 2.1rem); margin-bottom: 0.6rem; }

.text-teal { color: var(--st-teal); }

/* ---------- Buttons ---------- */
.btn-navy {
  background: var(--st-navy);
  border-color: var(--st-navy);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.7rem 1.4rem;
  transition: all 0.2s ease;
}
.btn-navy:hover { background: var(--st-navy-light); border-color: var(--st-navy-light); color: #fff; transform: translateY(-1px); }

.btn-teal {
  background: var(--st-teal);
  border-color: var(--st-teal);
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  padding: 0.7rem 1.4rem;
  transition: all 0.2s ease;
}
.btn-teal:hover { background: var(--st-teal-dark); border-color: var(--st-teal-dark); color: #fff; transform: translateY(-1px); }

.btn-outline-navy {
  border: 1.5px solid var(--st-navy);
  color: var(--st-navy);
  font-weight: 600;
  border-radius: 8px;
  background: transparent;
  transition: all 0.2s ease;
}
.btn-outline-navy:hover { background: var(--st-navy); color: #fff; }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--st-navy);
  color: #fff;
  font-size: 0.85rem;
  padding: 0.55rem 0;
}
.topbar a { color: var(--st-amber); font-weight: 600; }
.topbar-close {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
.topbar-close:hover { opacity: 1; }
.topbar.hidden { display: none; }

/* ---------- Header ---------- */
.site-header {
  background: #fff;
  z-index: 1030;
  transition: box-shadow 0.2s ease;
}
.site-header.scrolled { box-shadow: 0 6px 20px rgba(16, 31, 61, 0.08); }

.brand-icon {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--st-navy), var(--st-teal));
  color: #fff;
  border-radius: 10px;
  font-size: 1.2rem;
}
.brand-text { line-height: 1.05; display: flex; flex-direction: column; }
.brand-top { font-size: 1.05rem; letter-spacing: 1px; }
.brand-bottom { font-size: 0.62rem; letter-spacing: 2px; color: var(--st-teal); font-weight: 700; }

.navbar-nav .nav-link {
  color: var(--st-gray-900);
  font-weight: 600;
  padding: 0.5rem 1rem !important;
}
.navbar-nav .nav-link:hover { color: var(--st-teal); }

.header-cta { white-space: nowrap; }

/* ---------- Hero ---------- */
.hero { padding-top: 3.5rem; padding-bottom: 3.5rem; background: linear-gradient(180deg, #fff 0%, var(--st-navy-soft) 100%); }
.hero-title { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.15; margin-bottom: 1.1rem; }
.hero-sub { color: var(--st-gray-600); font-size: 1.05rem; max-width: 540px; }
.hero-centered .hero-sub { max-width: 620px; }

.hero-checklist li {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.55rem; font-weight: 500; color: var(--st-gray-900);
}
.hero-checklist i { color: var(--st-teal); font-size: 1.1rem; }

.hero-rating { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.hero-rating .stars i, .footer-rating .stars i { color: var(--st-amber); font-size: 0.95rem; }
.rating-text { color: var(--st-gray-600); font-size: 0.9rem; }

.hero-visual {
  position: relative;
  min-height: 420px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.hero-visual-block {
  border-radius: var(--st-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  color: #fff;
}
.hero-block-illustration { width: 56%; max-width: 74px; height: auto; }
.block-1 { background: var(--st-navy); grid-column: 1; grid-row: 1; }
.block-2 { background: var(--st-teal); grid-column: 2; grid-row: 1; }
.block-3 { background: var(--st-amber); grid-column: 1; grid-row: 2; }
.block-4 { background: var(--st-navy-light); grid-column: 2; grid-row: 2; }
.hero-visual-main {
  grid-column: 1 / span 2;
  grid-row: 3;
  background: #fff;
  border: 1px solid var(--st-gray-200);
  border-radius: var(--st-radius);
  box-shadow: var(--st-shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem;
}
.hero-visual-main i { font-size: 2.4rem; color: var(--st-navy); margin-bottom: 0.5rem; }
.hero-visual-main p { margin: 0; color: var(--st-gray-600); font-weight: 500; }

/* ---------- About / leading panel ---------- */
.about-panel { background: #fff; }
.about-card {
  background: var(--st-gray-100);
  border-radius: var(--st-radius);
  padding: 2.8rem;
}
.about-card h2 { margin-bottom: 0.8rem; }
.illustration-icon { font-size: 6rem; color: var(--st-teal); opacity: 0.85; }

.feature-box {
  border: 1.5px solid var(--st-gray-200);
  border-top: 3px solid var(--st-teal);
  border-radius: var(--st-radius);
  padding: 1.8rem;
  height: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.feature-box:hover { box-shadow: var(--st-shadow); transform: translateY(-3px); }
.feature-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--st-teal); color: #fff; margin-bottom: 0.9rem;
}
.feature-box h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.feature-box p { color: var(--st-gray-600); font-size: 0.92rem; margin: 0; }

/* ---------- Pricing ---------- */
.pricing-section { background: var(--st-navy-soft); }
.pricing-card {
  background: #fff;
  border-radius: var(--st-radius);
  overflow: hidden;
  box-shadow: var(--st-shadow);
  height: 100%;
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--st-shadow-lg); }

/* Icon "cover" banner standing in for a cover photo — keeps the icon-illustration
   language already used elsewhere on the site instead of an external stock image. */
.pricing-cover {
  height: 96px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  color: #fff;
}
.pricing-cover.cover-navy { background: linear-gradient(135deg, var(--st-navy), var(--st-navy-light)); }
.pricing-cover.cover-teal { background: linear-gradient(135deg, var(--st-teal), var(--st-teal-dark)); }
.pricing-cover.cover-amber { background: linear-gradient(135deg, var(--st-amber), #c2870a); }

.pricing-card-head {
  background: var(--st-navy);
  color: #fff;
  padding: 1.6rem 1.6rem 1.4rem;
}
.pricing-card-head h3 { color: #fff; font-size: 1.2rem; margin-bottom: 0.4rem; }
.pricing-card-head p { color: rgba(255,255,255,0.75); font-size: 0.9rem; margin: 0; }
.pricing-card-body { padding: 1.6rem; display: flex; flex-direction: column; flex: 1; }
.price-label { color: var(--st-gray-600); font-size: 0.85rem; }
.price { font-family: var(--font-head); font-size: 2.3rem; font-weight: 800; color: var(--st-navy); margin-bottom: 1rem; }
.price small { font-size: 0.85rem; font-weight: 500; color: var(--st-gray-600); }

/* Full option list stays in the DOM as the single source of truth the modal reads from,
   but is no longer shown on the card face itself. */
.pricing-features { display: none; }

/* Compact preview of just the 3 option titles, shown on the card face instead. */
.pricing-teaser { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.3rem; flex: 1; align-content: flex-start; }
.teaser-chip {
  background: var(--st-navy-soft);
  color: var(--st-navy);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
}
.pricing-view-btn { margin-top: auto; }

/* ---------- Plan details modal ---------- */
.plan-modal .modal-content { border-radius: var(--st-radius); border: none; }
.plan-modal .modal-header { border-bottom: 1px solid var(--st-gray-200); align-items: flex-start; }
.plan-modal .modal-title { font-size: 1.25rem; margin-bottom: 0.3rem; }
.plan-modal .price { font-size: 1.6rem; margin-bottom: 0; }
.plan-modal .accordion-button { font-size: 0.95rem; padding: 1rem 0.9rem; }
.plan-modal .accordion-body { font-size: 0.9rem; color: var(--st-gray-600); }
.plan-modal .modal-footer { border-top: 1px solid var(--st-gray-200); }

/* ---------- Process ---------- */
.process-images { display: flex; gap: 1rem; }
.process-img {
  flex: 1; aspect-ratio: 3/4; border-radius: var(--st-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: #fff;
}
.img-1 { background: var(--st-navy); margin-top: 2rem; }
.img-2 { background: var(--st-teal); }
.scene-illustration { width: 62%; max-width: 130px; height: auto; }

.process-step {
  background: var(--st-gray-100);
  border-radius: var(--st-radius);
  padding: 1.6rem;
  position: relative;
  height: 100%;
}
.process-step i { font-size: 1.6rem; color: var(--st-navy); }
.step-num {
  position: absolute; top: 1.2rem; right: 1.4rem;
  font-family: var(--font-head); font-weight: 800; font-size: 1.6rem;
  color: var(--st-gray-200);
}
.process-step h3 { font-size: 1.05rem; margin: 0.7rem 0 0.4rem; }
.process-step p { color: var(--st-gray-600); font-size: 0.9rem; margin: 0; }
.process-step-wide { display: flex; flex-direction: column; }

/* ---------- Renewal schedule ---------- */
.renewal-schedule-section { background: #fdf8ee; }
.schedule-card {
  background: #fff;
  border: 1.5px solid var(--st-gray-200);
  border-radius: var(--st-radius);
  padding: 1.8rem;
  height: 100%;
}
.schedule-badge {
  display: inline-block;
  background: var(--st-amber);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}
.schedule-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.schedule-card p { color: var(--st-gray-600); font-size: 0.9rem; margin: 0; }
.schedule-icon { font-size: 1.8rem; color: var(--st-teal); margin-bottom: 0.8rem; display: block; }

.info-callout {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border: 1.5px solid var(--st-amber);
  border-radius: var(--st-radius);
  padding: 1.4rem 1.6rem;
}
.info-callout i { color: var(--st-amber); font-size: 1.4rem; margin-top: 0.15rem; flex-shrink: 0; }
.info-callout strong { display: block; margin-bottom: 0.3rem; color: var(--st-navy); }
.info-callout p { color: var(--st-gray-600); font-size: 0.92rem; }

/* ---------- Comparison table ---------- */
.comparison-table {
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  box-shadow: var(--st-shadow);
  border-radius: var(--st-radius);
  overflow: hidden;
}
.comparison-table thead th {
  background: var(--st-navy);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  padding: 1rem 1.4rem;
  border: none;
}
.comparison-table thead th:first-child { color: rgba(255,255,255,0.6); }
.comparison-table tbody td { padding: 1rem 1.4rem; vertical-align: middle; border-color: var(--st-gray-200); }
.comparison-table tbody tr:nth-child(even) { background: var(--st-gray-50); }
.table-footnote { font-size: 0.8rem; color: var(--st-gray-600); margin-top: 0.8rem; }

/* ---------- Education / IP cards ---------- */
.education-section { background: var(--st-gray-50); }
.ip-card {
  background: #fff;
  border: 1.5px solid var(--st-gray-200);
  border-radius: var(--st-radius);
  padding: 2rem;
  height: 100%;
}
.ip-card h3 { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.2rem; }
.ip-card-alt { border-top: 3px solid var(--st-teal); }
.ip-point { margin-bottom: 1.1rem; }
.ip-point strong { display: block; margin-bottom: 0.2rem; }
.ip-point p { color: var(--st-gray-600); font-size: 0.92rem; margin: 0; }

/* ---------- Why section ---------- */
.why-item { padding: 0.5rem 0; }
.why-item i { font-size: 1.6rem; color: var(--st-teal); background: var(--st-navy-soft); padding: 0.7rem; border-radius: 10px; display: inline-flex; }
.why-item h4 { font-size: 1rem; margin: 0.7rem 0 0.35rem; }
.why-item p { color: var(--st-gray-600); font-size: 0.88rem; margin: 0; }

.why-cta {
  background: var(--st-navy);
  border-radius: var(--st-radius);
  padding: 2rem;
  color: #fff;
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.why-cta i { font-size: 2.4rem; margin-bottom: 0.8rem; color: var(--st-amber); }
.why-cta h4 { color: #fff; font-size: 1.1rem; }

.why-cta-wide { display: block; padding: 2rem 2.5rem; text-align: left; }
.why-cta-wide h4 { font-size: 1.3rem; }
.why-cta-wide .btn { width: auto; }
@media (max-width: 767.98px) { .why-cta-wide .btn { width: 100%; } }

/* ---------- Rejection reasons ---------- */
.candot-section { background: #fff; }

.rejection-list { list-style: none; padding: 0; margin: 1.2rem 0; }
.rejection-list li { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 1rem; color: var(--st-gray-600); }
.rejection-list i { color: var(--st-amber); margin-top: 0.2rem; font-size: 1.1rem; }

/* ---------- Testimonial ---------- */
.testimonial-section { padding: 0; }
.testimonial-wrap { min-height: 380px; }
.testimonial-visual {
  background: linear-gradient(135deg, var(--st-navy), var(--st-navy-light));
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.2); font-size: 6rem;
  overflow: hidden;
  padding: 1.5rem;
}
.testimonial-content {
  background: var(--st-teal-dark);
  color: #fff;
  padding: 3.5rem;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
.quote-mark { font-size: 2.5rem; opacity: 0.5; margin-bottom: 0.5rem; }

/* ============================================================
   IMAGE SYSTEM v2 — every current image on this site is a
   graphic/illustration (bucket A), never real photography, so
   every image is CONTAINED (full subject visible) — object-fit:
   cover is not used anywhere in this system.
   ============================================================ */

img { max-width: 100%; height: auto; display: block; }

/* .img-wrap: the padded frame every graphic sits inside. The
   subject never touches the wrapper's edge and is never cropped. */
.img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 24px;
  border-radius: var(--st-radius);
  overflow: hidden;
  max-height: 340px; /* hard ceiling — nothing on the site exceeds this */
}
.img-wrap img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* contain only — cover is forbidden on graphics */
}

/* Size ceilings by context (these are ceilings, chosen conservatively
   so the image reads smaller than the text beside it, not as targets). */
.img-wrap--feature { max-height: 220px; } /* two-column text | image sections */
.img-wrap--panel   { max-height: 200px; } /* graphic framed inside a dark panel */
.img-wrap--card    { max-height: 200px; } /* card/grid contexts */

/* Two-column layout: image column stays visibly smaller than the
   text column beside it (col-lg-4 = 33% width, under the 40% cap;
   paired with col-lg-8 text columns in the markup). */
.img-col { display: flex; align-items: center; }

/* ---------- Background handling — branches by the section ---------- */

/* 1) White-bg graphic on a LIGHT section (white / gray-100 card):
   the only place multiply is used — it drops the white out cleanly
   and keeps the dark linework legible. */
.img-blend-light { background: transparent; }
.img-blend-light img { mix-blend-mode: multiply; }

/* 2) White-bg graphic on a DARK section (navy gradient, teal):
   never blend — multiply would sink a dark subject into a dark
   backdrop (this is exactly what broke the testimonial block).
   Frame it in a light panel instead so it reads against the dark
   background. */
.img-panel-on-dark {
  background: #fff;
  box-shadow: var(--st-shadow-lg);
}

/* 3) Non-white baked-in background (bright yellow, mismatched
   teal/blue): never blend, always frame with the site's own
   neutral + border tokens. */
.img-framed {
  background: var(--st-gray-50);
  border: 1px solid var(--st-gray-200);
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .img-wrap, .img-wrap--feature, .img-wrap--panel, .img-wrap--card { max-height: 260px; }
}
@media (max-width: 575.98px) {
  .img-wrap, .img-wrap--feature, .img-wrap--panel, .img-wrap--card { max-height: 200px; padding: 16px; }
}
.testimonial-text { font-size: 1.3rem; line-height: 1.5; font-weight: 500; }
.testimonial-author { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.5rem; }
.avatar-placeholder {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.testimonial-author strong { display: block; }
.testimonial-author span { font-size: 0.85rem; opacity: 0.8; }

/* ---------- Testimonial grid (services pages) ---------- */
.testimonial-grid-section { background: var(--st-gray-50); }
.testimonial-card {
  background: #fff;
  border: 1.5px solid var(--st-gray-200);
  border-top: 3px solid var(--st-amber);
  border-radius: var(--st-radius);
  padding: 1.8rem;
  height: 100%;
}
.testimonial-card h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.testimonial-card p { color: var(--st-gray-600); font-size: 0.92rem; margin-bottom: 1.2rem; }
.testimonial-card-author strong { display: block; font-size: 0.92rem; }
.testimonial-card-author span { color: var(--st-gray-600); font-size: 0.82rem; }

/* ---------- FAQ ---------- */
.faq-section { background: var(--st-gray-50); }
.faq-tab {
  border: 1.5px solid var(--st-gray-200);
  background: #fff;
  color: var(--st-gray-900);
  font-weight: 600;
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.faq-tab.active, .faq-tab:hover { background: var(--st-navy); border-color: var(--st-navy); color: #fff; }

.faq-item { border: none; border-bottom: 1px solid var(--st-gray-200); background: transparent; }
.faq-item:first-of-type { border-top: 1px solid var(--st-gray-200); }
.faq-item .accordion-button {
  background: transparent;
  font-weight: 600;
  color: var(--st-navy);
  box-shadow: none;
  padding: 1.2rem 0.5rem;
}
.faq-item .accordion-button:not(.collapsed) { color: var(--st-teal-dark); background: transparent; }
.faq-item .accordion-button::after { flex-shrink: 0; }
.faq-item .accordion-body { color: var(--st-gray-600); padding: 0 0.5rem 1.3rem; }
.faq-item.faq-hidden { display: none; }

/* ---------- Contact ---------- */
.contact-info-card {
  background: var(--st-gray-100);
  border-radius: var(--st-radius);
  padding: 2.4rem;
  height: 100%;
}
.contact-info-card h2 { margin-bottom: 0.8rem; }
.contact-info-card p { color: var(--st-gray-600); margin-bottom: 1.4rem; }
.contact-link {
  display: flex; align-items: center; gap: 0.8rem;
  color: var(--st-navy); font-weight: 600; margin-bottom: 0.9rem;
}
.contact-link span {
  width: 38px; height: 38px; border-radius: 8px;
  background: var(--st-teal); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-link:hover { color: var(--st-teal-dark); }

.contact-form {
  border: 1.5px solid var(--st-gray-200);
  border-radius: var(--st-radius);
  padding: 2.2rem;
  height: 100%;
}
.contact-form .form-label { font-weight: 600; font-size: 0.88rem; }
.contact-form .form-control {
  border: none; border-bottom: 1.5px solid var(--st-gray-200);
  border-radius: 0; padding-left: 0; padding-right: 0;
}
.contact-form .form-control:focus { box-shadow: none; border-color: var(--st-teal); }
.form-success { color: var(--st-teal-dark); font-weight: 600; font-size: 0.92rem; }
.form-error { color: #b3541e; font-weight: 600; font-size: 0.92rem; }
#formSubmitBtn[disabled] { opacity: 0.7; cursor: not-allowed; }

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(180deg, var(--st-navy) 0%, #0b1730 100%);
  color: rgba(255,255,255,0.75);
  padding: 4.5rem 0 1.5rem;
  font-size: 0.9rem;
}
.site-footer h5 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.65rem; }
.footer-links a { color: rgba(255,255,255,0.7); }
.footer-links a:hover { color: var(--st-amber); }
.footer-rating { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; flex-wrap: wrap; }
.footer-address { margin-top: 1.2rem; }
.footer-disclaimer { font-size: 0.78rem; opacity: 0.65; margin-top: 1rem; }
.site-footer hr { border-color: rgba(255,255,255,0.15); margin: 2.5rem 0 1.2rem; }
.footer-bottom { font-size: 0.78rem; opacity: 0.7; text-align: center; }

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--st-navy);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--st-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 1040;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--st-teal); }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .header-cta { margin-top: 1rem; }
  .hero { text-align: left; }
  .hero-visual { min-height: 340px; }
  .about-card { padding: 1.8rem; }
  section { padding: 3.5rem 0; }
}

@media (max-width: 575.98px) {
  .testimonial-content { padding: 2.2rem 1.6rem; }
  .contact-form, .contact-info-card { padding: 1.6rem; }
}