/* ==========================================================================
   Burj Trades — Components
   ========================================================================== */

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t) var(--ease),
              background var(--t) var(--ease),
              border-color var(--t) var(--ease),
              color var(--t) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn--primary {
  background: var(--grad-btn);
  color: var(--on-accent);
  box-shadow: 0 10px 26px rgba(217, 154, 18, .32);
}
.btn--primary:hover {
  background: var(--grad-btn-hi);
  color: var(--on-accent);
  box-shadow: 0 14px 38px rgba(248, 193, 41, .42);
  transform: translateY(-2px);
}

.btn--ghost {
  background: rgba(201, 212, 222, .05);
  color: var(--text);
  border: 1px solid var(--border-hi);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: rgba(201, 212, 222, .1);
  border-color: rgba(201, 212, 222, .38);
  color: #fff;
  transform: translateY(-2px);
}

.btn--wa {
  background: rgba(37, 211, 102, .12);
  color: #5BE88C;
  border: 1px solid rgba(37, 211, 102, .3);
}
.btn--wa:hover {
  background: rgba(37, 211, 102, .2);
  border-color: rgba(37, 211, 102, .5);
  color: #7BF0A4;
  transform: translateY(-2px);
}

.btn--sm  { padding: 10px 18px; font-size: .875rem; }
.btn--lg  { padding: 17px 34px; font-size: 1.02rem; }
.btn--full { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  align-items: center;
}
.btn-row--center { justify-content: center; }

/* Text link with a travelling arrow. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .94rem;
  color: var(--c-gold);
}
.tlink svg { width: 15px; height: 15px; transition: transform var(--t) var(--ease); }
.tlink:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Metallic-edged surface — the signature detail, echoing the logo's chrome
   ========================================================================== */
.panel,
.wp-block-group.is-style-bt-panel {
  position: relative;
  background: var(--grad-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card,
.wp-block-group.is-style-bt-card {
  position: relative;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--grad-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform var(--t) var(--ease),
              border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .8;
  transition: opacity var(--t) var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--border-hi);
  box-shadow: var(--sh-2);
}
.card:hover::before { opacity: 1; }

.card h3 { margin-bottom: .5em; }
.card p  { color: var(--text-2); font-size: .97rem; margin-bottom: 0; }

.card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(248, 193, 41, .2), rgba(217, 154, 18, .08));
  border: 1px solid rgba(248, 193, 41, .24);
  color: var(--c-gold);
}
.card__icon svg { width: 25px; height: 25px; }

/* Numbered variant, used for process steps. */
.card__num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
  display: block;
}

/* ==========================================================================
   Image placeholders
   Every slot keeps its exact aspect ratio, so dropping the real file in
   later causes zero layout shift. Until then the gradient + label shows.
   ========================================================================== */
.ph {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 9);   /* every shipped image is 16:9 */
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(10, 37, 64, .9), rgba(26, 74, 114, .85) 48%, rgba(248, 193, 41, .34)),
    var(--bg-raise);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}
.ph::after {
  content: attr(data-ph);
  position: relative;
  z-index: 1;
  padding: 10px 16px;
  max-width: 86%;
  text-align: center;
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(201, 212, 222, .62);
  border: 1px dashed rgba(201, 212, 222, .26);
  border-radius: var(--r-pill);
  background: rgba(6, 26, 44, .4);
}
.ph--empty img { display: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--t) var(--ease),
              border-color var(--t) var(--ease),
              backdrop-filter var(--t) var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(6, 22, 38, .82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--border);
}

.header__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Brand lockup -----------------------------------------------------------
   The logo is a 1:1 circular badge, so it cannot carry the wordmark at
   header size - at 42px the lettering inside it would be ~4px tall. The
   badge is therefore decorative and the name is live HTML text in Sora,
   which stays sharp at any density and costs no extra bytes. BURJ is gold
   and TRADES is silver, mirroring the badge artwork. */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
  color: inherit;
}
.brand img,
.brand .wp-block-site-logo img { width: 42px; height: 42px; flex: none; border-radius: 50%; }
.brand .wp-block-site-logo { margin: 0; line-height: 0; }

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  line-height: 1;
}

/* BURJ (gold) and TRADES (silver) are two separate blocks so the client can
   edit either word in place. The group below keeps them on one line. */
.brand__name { display: flex; align-items: baseline; gap: .32em; }
.brand__name > p,
.brand__burj,
.brand__trades {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .015em;
  white-space: nowrap;
}
.brand__burj   { color: var(--c-gold); }
.brand__trades { color: var(--c-chrome); }
.brand:hover .brand__burj { color: var(--c-gold-hi); }

.brand__tag {
  font-style: normal;
  margin: 0;
  font-family: var(--font-display);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .brand { gap: 9px; }
  .brand img,
  .brand .wp-block-site-logo img { width: 34px; height: 34px; }
  .brand__name > p { font-size: .95rem; }
  .brand__tag { display: none; }
}

.nav { margin-left: auto; }
.nav__list,
.wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link,
.wp-block-navigation-item__content {
  display: block;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__link:hover,
.wp-block-navigation-item__content:hover { color: var(--text); background: rgba(201, 212, 222, .07); }
.nav__link.is-active { color: var(--text); }
.nav__link.is-active::after {
  content: '';
  display: block;
  height: 2px;
  width: 18px;
  margin: 5px auto -3px;
  border-radius: 2px;
  background: var(--grad-btn);
}

.header__cta { display: flex; align-items: center; gap: 10px; flex: none; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(201, 212, 222, .06);
  border: 1px solid var(--border-hi);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21.5px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav, .header__cta .btn { display: none; }
  .burger { display: block; margin-left: auto; }
}

/* ---- Mobile drawer --------------------------------------------------- */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 99;
  background: rgba(5, 19, 33, .97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  padding: 32px var(--gutter) 48px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer__list { list-style: none; margin: 0 0 28px; padding: 0; }
.drawer__list li { margin: 0; border-bottom: 1px solid var(--border); }
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 2px;
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 600;
  color: var(--text);
}
.drawer__link.is-active { color: var(--c-gold); }
.drawer__link svg { width: 16px; height: 16px; opacity: .4; }
.drawer .btn-row { flex-direction: column; align-items: stretch; }

body.is-locked { overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(40px, 7vw, 86px));
  padding-bottom: clamp(56px, 8vw, 110px);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
  z-index: 0;
}
/* Scrim: a dark panel behind the copy, fading to almost nothing across the
   skyline, so the text holds AA contrast without flattening the photograph.

   The stops are anchored to the copy, not to the viewport. Those scale in
   opposite directions - .hero__content is a fixed 680px at a fixed gutter, so
   it ends at 56% of a 1920px frame, 66% of an 1100px one and 95% of a phone -
   and no single set of percentages can track that. The previous percentage
   stops were calibrated for a narrower column than the page actually renders
   and left white text at 3.5:1 at 1600px and 1.6:1 on a phone.

   --copy-end rebuilds that edge from the same values the layout uses:
   .wrap's centring margin, .wrap's padding, .hero__content's width. It
   reproduces the measured right edge of the copy exactly at 1920, 1600, 1440,
   1366, 1280, 1100, 900, 768, 600, 430, 390 and 360.

   Verified by rendering the page at each of those widths, masking each hero
   element in turn to recover the pixels its glyphs actually ink, and reading
   the contrast between the colour the browser painted and the backdrop behind
   it. Every element clears AA at every width with alpha to spare, and because
   the falloff now completes just past the copy instead of two thirds of the
   way across the frame, the right side of the picture comes out about 12%
   brighter than it was before. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  --copy-end: calc(
      max(0px, (100% - 1200px) / 2)
    + var(--gutter)
    + min(680px, 100% - 2 * var(--gutter)));
  background:
    linear-gradient(90deg,
      rgba(4, 16, 28, .91) 0,
      rgba(4, 16, 28, .91) calc(var(--copy-end) - 120px),
      rgba(4, 16, 28, .14) calc(var(--copy-end) + 140px),
      rgba(4, 16, 28, .06) 100%),
    linear-gradient(180deg, rgba(4, 16, 28, .72) 0%, transparent 26%, transparent 58%, rgba(6, 26, 44, .96) 100%);
}
.hero > .wrap { position: relative; z-index: 2; }

.hero__content { max-width: 680px; }
.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -.035em;
  margin-bottom: .44em;
}
/* --text rather than the dimmer --text-2 the other section leads use.

   This paragraph is the one piece of hero copy that sits over the brightest
   part of the photograph, and at 19.8px regular it needs 4.5:1 rather than
   the 3:1 the headline gets. Measured on the published page it reaches
   6.3:1 here against 4.4:1 for --text-2, so the dimmer token is left for
   copy that sits on a flat background. */
.hero__lead {
  font-size: var(--fs-lead);
  color: var(--text);
  max-width: 56ch;
  margin-bottom: 2.1em;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3.4vw, 46px);
  margin-top: clamp(44px, 6vw, 72px);
  padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid rgba(201, 212, 222, .16);
}
.hero__trust div { min-width: 90px; }
.hero__trust dt {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1.1;
}
.hero__trust dd {
  margin: 5px 0 0;
  font-size: var(--fs-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* Animated chart line, drawn in SVG — ties the hero to the logo's arrows. */
.hero__chart {
  position: absolute;
  right: -2%;
  bottom: 8%;
  width: min(46%, 560px);
  z-index: 2;
  pointer-events: none;
  opacity: .9;
}
.hero__chart path.line {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: draw 2.6s var(--ease-out) .5s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero__chart path.line { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 900px) { .hero__chart { display: none; } }

/* ---- Compact page hero (inner pages) --------------------------------- */
.phero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(54px, 7vw, 96px));
  padding-bottom: clamp(48px, 6vw, 82px);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(760px 420px at 76% 8%, rgba(217, 154, 18, .24), transparent 64%),
    linear-gradient(180deg, #072034, var(--bg));
}
.phero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .34;
  z-index: 0;
}
.phero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(5, 20, 34, .92) 10%, rgba(5, 20, 34, .55) 70%, rgba(5, 20, 34, .3));
}
.phero > .wrap { position: relative; z-index: 2; }
.phero h1 { margin-bottom: .36em; max-width: 18ch; }
.phero p  { color: var(--text-2); font-size: var(--fs-lead); max-width: 58ch; margin-bottom: 0; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: 9px; }
.crumbs li:not(:last-child)::after { content: '/'; color: rgba(201, 212, 222, .26); }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--c-gold); }
.crumbs [aria-current] { color: var(--text); }

/* ==========================================================================
   Trust bar
   ========================================================================== */
.trustbar {
  border-block: 1px solid var(--border);
  background: rgba(8, 32, 54, .52);
  padding-block: 22px;
}
.trustbar ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px clamp(22px, 4vw, 54px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.trustbar li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text-2);
}
.trustbar svg { width: 17px; height: 17px; color: var(--c-gold); flex: none; }

/* ==========================================================================
   Stats band
   ========================================================================== */
.stats {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(34px, 4.4vw, 58px) clamp(26px, 3.4vw, 50px);
  background:
    radial-gradient(620px 300px at 14% 0%, rgba(248, 193, 41, .22), transparent 68%),
    linear-gradient(135deg, #0B2A47, #11395E 58%, #16507F);
  border: 1px solid rgba(201, 212, 222, .14);
  overflow: hidden;
}
.stats::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 42%);
}
.stats__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 22px;
}
@media (max-width: 820px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }

.stat { text-align: center; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 2.5vw, 3.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: #fff;
}
.stat__label {
  margin-top: 11px;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9FBAD2;
}

/* ==========================================================================
   Process steps
   ========================================================================== */
.steps { position: relative; display: grid; gap: clamp(18px, 2.4vw, 26px); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.step { position: relative; padding-top: 34px; }
.step::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--c-gold), rgba(248, 193, 41, .14));
}
.step:last-child::before { background: linear-gradient(90deg, var(--c-gold), transparent); }
.step::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 4px rgba(248, 193, 41, .18);
}
.step__n {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 10px;
}
.step h3 { font-size: 1.14rem; margin-bottom: .45em; }
.step p { color: var(--text-2); font-size: .95rem; margin: 0; }

/* Large alternating step rows (How It Works page). */
.bigstep { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 74px); align-items: center; }
.bigstep + .bigstep { margin-top: clamp(56px, 7vw, 104px); }
.bigstep:nth-child(even) > :first-child { order: 2; }
@media (max-width: 880px) {
  .bigstep { grid-template-columns: 1fr; }
  .bigstep:nth-child(even) > :first-child { order: 0; }
}
.bigstep__badge {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 17px;
  margin-bottom: 22px;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--on-accent);
  background: var(--grad-btn);
  box-shadow: 0 10px 28px rgba(217, 154, 18, .36);
}

/* ==========================================================================
   Feature / benefit rows
   ========================================================================== */
.frow {
  display: flex;
  gap: 17px;
  padding: 19px 0;
  border-bottom: 1px solid var(--border);
}
.frow:last-child { border-bottom: 0; }
.frow__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--accent-soft);
  border: 1px solid rgba(248, 193, 41, .22);
  color: var(--c-gold);
}
.frow__ic svg { width: 18px; height: 18px; }
.frow h3 { font-size: 1.02rem; margin-bottom: .3em; }
.frow p { font-size: .94rem; color: var(--text-2); margin: 0; }

/* ==========================================================================
   Pricing tiers - REMOVED
   The .tier / .tiers component existed only to sell managed-account
   investment plans. Burj Trades does not offer those, so the component is
   gone rather than left lying around for someone to reach for. The
   comparison table below is kept - it is generic, and a broker comparison
   is a plausible future use for it.
   ========================================================================== */

/* ==========================================================================
   Comparison table
   ========================================================================== */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgba(10, 36, 60, .4);
  -webkit-overflow-scrolling: touch;
}
table.cmp {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: .94rem;
}
table.cmp th, table.cmp td { padding: 15px 20px; text-align: left; }
table.cmp thead th {
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-2);
  background: rgba(13, 45, 74, .72);
  border-bottom: 1px solid var(--border-hi);
  white-space: nowrap;
}
table.cmp tbody tr + tr { border-top: 1px solid var(--border); }
table.cmp tbody tr:hover { background: rgba(248, 193, 41, .05); }
table.cmp th[scope="row"] { font-weight: 550; color: var(--text); }
table.cmp td { color: var(--text-2); }
table.cmp .yes { color: var(--c-gold); }
table.cmp .no  { color: var(--text-3); }
table.cmp .col-hi { background: rgba(248, 193, 41, .07); }

/* ==========================================================================
   Accordion - REPLACED BY core/details
   The hand-rolled .acc component is gone. FAQs now use the core Details
   block, which is keyboard-accessible and needs no JavaScript at all.
   Its styling lives in wordpress.css under "Details / FAQ".
   ========================================================================== */

/* ==========================================================================
   Testimonials
   ========================================================================== */
.quote {
  position: relative;
  padding: clamp(26px, 2.8vw, 34px);
  background: var(--grad-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
}
.quote__mark {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 800;
  line-height: .7;
  color: rgba(248, 193, 41, .26);
  margin-bottom: 12px;
}
.quote p { font-size: .99rem; color: var(--text-2); flex: 1; margin-bottom: 24px; }
.quote__by { display: flex; align-items: center; gap: 13px; padding-top: 20px; border-top: 1px solid var(--border); }
.quote__av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
  background: linear-gradient(140deg, var(--c-steel), var(--c-gold));
  border: 1px solid var(--border-hi);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
}
.quote__by b { display: block; font-family: var(--font-display); font-size: .96rem; font-weight: 650; }
.quote__by span { font-size: var(--fs-xs); color: var(--text-3); }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 550;
  color: var(--text-2);
}
.field .req { color: var(--c-gold); }

.input, .select, .textarea {
  width: 100%;
  padding: 13px 16px;
  background: rgba(6, 24, 42, .66);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .97rem;
  line-height: 1.5;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-gold);
  background: rgba(8, 30, 52, .82);
  box-shadow: 0 0 0 3px rgba(248, 193, 41, .16);
}
.textarea { resize: vertical; min-height: 128px; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9BED1' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px;
  padding-right: 42px;
  cursor: pointer;
}
.select option { background: #0B2742; color: var(--text); }

.field--err .input, .field--err .select, .field--err .textarea { border-color: #F0756A; }
.err {
  display: none;
  margin-top: 7px;
  font-size: var(--fs-xs);
  color: #F0756A;
}
.field--err .err { display: block; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .88rem;
  color: var(--text-2);
  cursor: pointer;
  line-height: 1.55;
}
.check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--c-gold);
  cursor: pointer;
}

.formnote {
  margin-top: 16px;
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.6;
}

.formstatus {
  display: none;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  font-size: .93rem;
}
.formstatus.is-ok   { display: block; background: rgba(22, 185, 129, .1); border: 1px solid rgba(22, 185, 129, .3); color: #5BE0AE; }
.formstatus.is-bad  { display: block; background: rgba(239, 68, 68, .1);  border: 1px solid rgba(239, 68, 68, .3);  color: #F0938C; }

/* ==========================================================================
   Contact cards
   ========================================================================== */
.ccard {
  display: flex;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: rgba(11, 39, 66, .42);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--ease);
}
.ccard:hover { border-color: rgba(248, 193, 41, .36); background: rgba(16, 50, 82, .55); transform: translateX(3px); }
.ccard__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(248, 193, 41, .22);
  color: var(--c-gold);
}
.ccard__ic svg { width: 19px; height: 19px; }
.ccard b { display: block; font-family: var(--font-display); font-size: .88rem; color: var(--text-2); font-weight: 550; margin-bottom: 3px; }
.ccard span, .ccard a { font-size: 1rem; color: var(--text); word-break: break-word; }
.ccard a:hover { color: var(--c-gold); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta,
.wp-block-group.is-style-bt-cta {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(40px, 5.6vw, 76px) clamp(26px, 4vw, 64px);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(640px 320px at 50% 0%, rgba(248, 193, 41, .26), transparent 70%),
    linear-gradient(135deg, #0A2540, #16436C 56%, #1E5C92);
  border: 1px solid rgba(201, 212, 222, .16);
}
.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 38%);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { margin-bottom: .44em; max-width: 20ch; margin-inline: auto; }
.cta p  { color: #BFD3E5; max-width: 54ch; margin-inline: auto; margin-bottom: 2em; font-size: var(--fs-lead); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: #041320;
  border-top: 1px solid var(--border);
  padding-top: clamp(52px, 6vw, 82px);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: clamp(28px, 4vw, 52px);
  padding-bottom: clamp(38px, 4.4vw, 58px);
}
@media (max-width: 940px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }

.footer__brand .brand { margin-bottom: 20px; }
.footer__brand .brand img { width: 52px; height: 52px; }
.footer__brand .brand__name { font-size: 1.15rem; }
.footer__brand p { font-size: .93rem; color: var(--text-2); max-width: 38ch; }

.footer h4 {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 18px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 11px; }
.footer li a { font-size: .95rem; color: var(--text-2); }
.footer li a:hover { color: var(--c-gold); }

.socials { display: flex; gap: 10px; margin-top: 22px; padding: 0; list-style: none; }
.socials .wp-social-link { margin: 0; padding: 0; background: none; border-radius: 0; }
.socials .wp-social-link a { padding: 0; }
.socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--border-hi);
  color: var(--text-2);
  transition: all var(--t-fast) var(--ease);
}
.socials a:hover { color: #fff; border-color: var(--c-gold); background: var(--accent-soft); transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }

.risk {
  padding: 24px 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  line-height: 1.75;
  color: var(--text-3);
}
.risk b { color: var(--text-2); font-weight: 600; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 26px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__bottom a { color: var(--text-3); }
.footer__bottom a:hover { color: var(--c-gold); }

/* ==========================================================================
   Floating WhatsApp button
   ========================================================================== */
.fab {
  position: fixed;
  right: clamp(16px, 2.6vw, 26px);
  bottom: clamp(16px, 2.6vw, 26px);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 20px 13px 15px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #1EBE57, #25D366);
  color: #04240F;
  font-family: var(--font-display);
  font-size: .91rem;
  font-weight: 650;
  box-shadow: 0 10px 30px rgba(37, 211, 102, .34), var(--sh-1);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.fab:hover { transform: translateY(-3px) scale(1.02); color: #04240F; box-shadow: 0 16px 42px rgba(37, 211, 102, .46); }
.fab svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 560px) {
  .fab { padding: 15px; }
  .fab span { display: none; }
}