/* ===========================================================
   ConvoSuite — AI Bootcamp (Arabic / RTL) landing page
   Paid-traffic landing page: mobile-first, conversion-oriented.
   Prefix: bc-
   =========================================================== */

.bc-page {
  --bc-bg:        #07070d;
  --bc-bg-2:      #0d0d17;
  --bc-surface:   #131320;
  --bc-surface-2: #1a1a2b;
  --bc-line:      rgba(255,255,255,.09);
  --bc-line-str:  rgba(255,255,255,.16);

  --bc-brand:     #33B89F;
  --bc-brand-lt:  #4fe3c4;
  --bc-brand-dk:  #1d8a76;
  --bc-hot:       #ffb020;
  --bc-hot-dk:    #d98a00;

  --bc-text:      #f4f5f7;
  --bc-muted:     #a2a6b5;
  --bc-dim:       #71768a;

  --bc-radius:    18px;
  --bc-radius-sm: 12px;
  --bc-maxw:      1180px;

  background: var(--bc-bg);
  color: var(--bc-text);
  font-family: 'Tajawal', 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
}

.bc-page *,
.bc-page *::before,
.bc-page *::after { box-sizing: border-box; }

/* Overflow safety net: Arabic doesn't hyphenate and the page mixes in long
   Latin tokens (GitHub Copilot, Prompt Engineering). Without this a single
   long word can push the whole layout wider than a 320px viewport. */
.bc-page p,
.bc-page li,
.bc-page h1, .bc-page h2, .bc-page h3, .bc-page h4,
.bc-page span, .bc-page a, .bc-page label {
  overflow-wrap: break-word;
  word-break: break-word;
}
.bc-page img,
.bc-page svg,
.bc-page video { max-width: 100%; height: auto; }

.bc-wrap {
  width: 100%;
  max-width: var(--bc-maxw);
  margin-inline: auto;
  padding-inline: 20px;
}

.bc-section { padding: 88px 0; position: relative; }
.bc-section--tight { padding: 60px 0; }
.bc-section--alt { background: var(--bc-bg-2); }

/* ---------- shared type ---------- */
.bc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--bc-brand-lt);
  background: rgba(51,184,159,.1);
  border: 1px solid rgba(51,184,159,.28);
  padding: .4rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.bc-h1 {
  font-size: clamp(2.1rem, 6.2vw, 4rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 1.1rem;
}
.bc-h2 {
  font-size: clamp(1.65rem, 4.2vw, 2.7rem);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 .9rem;
}
.bc-h3 {
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 .5rem;
}
.bc-lead {
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  line-height: 1.85;
  color: var(--bc-muted);
  margin: 0 0 1.5rem;
  max-width: 62ch;
}
/* style-s3.css sets `h1..h6 { color: #292962 }` for the light-theme site. That
   direct element rule beats the light colour .bc-page inherits down, so every
   non-gradient heading rendered dark navy on the near-black background. */
.bc-page h1, .bc-page h2, .bc-page h3,
.bc-page h4, .bc-page h5, .bc-page h6 { color: var(--bc-text); }

.bc-grad {
  background: linear-gradient(100deg, var(--bc-brand-lt), var(--bc-brand) 55%, var(--bc-hot));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* must out-specify the heading rule above, or the gradient loses its clip */
.bc-page .bc-grad { color: transparent; }
.bc-head { text-align: center; margin-bottom: 3rem; }
.bc-head .bc-lead { margin-inline: auto; }

/* ---------- buttons ---------- */
.bc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  padding: 1.05rem 2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.bc-btn:hover { transform: translateY(-2px); text-decoration: none; }
.bc-btn:active { transform: translateY(0); }

.bc-btn--wa {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #04140c;
  box-shadow: 0 10px 30px rgba(37,211,102,.3);
}
.bc-btn--wa:hover { color: #04140c; box-shadow: 0 16px 40px rgba(37,211,102,.42); }

.bc-btn--primary {
  background: linear-gradient(135deg, var(--bc-brand-lt), var(--bc-brand-dk));
  color: #041712;
  box-shadow: 0 10px 30px rgba(51,184,159,.28);
}
.bc-btn--primary:hover { color: #041712; box-shadow: 0 16px 40px rgba(51,184,159,.4); }

.bc-btn--ghost {
  background: transparent;
  color: var(--bc-text);
  border-color: var(--bc-line-str);
}
.bc-btn--ghost:hover { color: var(--bc-text); background: rgba(255,255,255,.05); }

.bc-btn--lg { font-size: 1.15rem; padding: 1.2rem 2.4rem; }
.bc-btn__ico { width: 1.25em; height: 1.25em; flex: none; }

.bc-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  align-items: center;
}
.bc-cta-row--center { justify-content: center; }

/* ---------- hero ---------- */
.bc-hero {
  position: relative;
  padding: 68px 0 76px;
  background:
    radial-gradient(1100px 560px at 78% -8%, rgba(51,184,159,.2), transparent 62%),
    radial-gradient(760px 460px at 12% 10%, rgba(255,176,32,.12), transparent 60%),
    var(--bc-bg);
  overflow: hidden;
}
.bc-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bc-line-str), transparent);
}
.bc-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 3.5rem;
  align-items: center;
}
.bc-hero__kicker {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 700;
  color: var(--bc-brand-lt);
  margin: 0 0 .6rem;
}

/* stat strip under hero copy */
.bc-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
  margin-top: 2.2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--bc-line);
}
.bc-stat__num {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 900;
  color: var(--bc-brand-lt);
  line-height: 1;
  margin-bottom: .35rem;
}
.bc-stat__lbl { font-size: .9rem; color: var(--bc-muted); line-height: 1.5; }

/* hero side card — the offer box */
.bc-offer {
  background: linear-gradient(180deg, var(--bc-surface-2), var(--bc-surface));
  border: 1px solid var(--bc-line-str);
  border-radius: var(--bc-radius);
  padding: 2rem 1.75rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.bc-offer__tag {
  display: inline-block;
  background: var(--bc-hot);
  color: #241700;
  font-size: .8rem;
  font-weight: 900;
  padding: .35rem .9rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.bc-offer__title { font-size: 1.35rem; font-weight: 900; margin: 0 0 1.25rem; }
.bc-offer__list { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.bc-offer__list li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .55rem 0;
  font-size: 1rem;
  color: var(--bc-muted);
  border-bottom: 1px dashed var(--bc-line);
}
.bc-offer__list li:last-child { border-bottom: 0; }
.bc-offer__list b { color: var(--bc-text); font-weight: 800; }
.bc-tick {
  flex: none;
  width: 1.4rem; height: 1.4rem;
  margin-top: .1rem;
  border-radius: 50%;
  background: rgba(51,184,159,.16);
  color: var(--bc-brand-lt);
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 900;
}
.bc-offer .bc-btn { width: 100%; }
.bc-offer__note {
  font-size: .85rem;
  color: var(--bc-dim);
  text-align: center;
  margin: .9rem 0 0;
  line-height: 1.6;
}

/* ---------- trust bar ---------- */
.bc-trust {
  border-block: 1px solid var(--bc-line);
  background: var(--bc-bg-2);
  padding: 1.4rem 0;
}
.bc-trust__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.4rem;
}
.bc-trust__item {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .98rem;
  font-weight: 600;
  color: var(--bc-muted);
}
.bc-trust__item b { color: var(--bc-text); font-weight: 800; }

/* ---------- projects grid (the hero differentiator) ---------- */
.bc-proj {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
  counter-reset: proj;
}
.bc-proj__item {
  position: relative;
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius-sm);
  padding: 1.6rem 1.4rem 1.4rem;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.bc-proj__item:hover {
  border-color: rgba(51,184,159,.5);
  transform: translateY(-3px);
}
.bc-proj__item::before {
  counter-increment: proj;
  content: counter(proj, decimal-leading-zero);
  position: absolute;
  inset-block-start: .5rem;
  inset-inline-start: 1rem;
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,.045);
  letter-spacing: -.04em;
}
.bc-proj__ico { font-size: 1.7rem; line-height: 1; margin-bottom: .7rem; display: block; }
.bc-proj__t { font-size: 1.06rem; font-weight: 800; margin: 0 0 .3rem; position: relative; }
.bc-proj__d { font-size: .92rem; color: var(--bc-dim); margin: 0; line-height: 1.65; position: relative; }

/* ---------- audience chips ---------- */
.bc-chips { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; }
.bc-chip {
  background: var(--bc-surface);
  border: 1px solid var(--bc-line-str);
  border-radius: 999px;
  padding: .7rem 1.3rem;
  font-size: .98rem;
  font-weight: 600;
  color: var(--bc-muted);
  transition: all .18s ease;
}
.bc-chip:hover { border-color: var(--bc-brand); color: var(--bc-text); }
.bc-chip--hot { border-color: rgba(255,176,32,.45); color: var(--bc-hot); }

/* ---------- day curriculum ---------- */
.bc-days { display: grid; gap: 1.1rem; }
.bc-day {
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  overflow: hidden;
  transition: border-color .2s ease;
}
.bc-day[open] { border-color: rgba(51,184,159,.42); }
.bc-day__sum {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.5rem 1.6rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.bc-day__sum::-webkit-details-marker { display: none; }
.bc-day__n {
  flex: none;
  width: 3.2rem; height: 3.2rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(51,184,159,.22), rgba(51,184,159,.07));
  border: 1px solid rgba(51,184,159,.32);
  color: var(--bc-brand-lt);
  display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 900;
}
.bc-day__meta { flex: 1 1 auto; min-width: 0; }
.bc-day__label { font-size: .82rem; font-weight: 700; color: var(--bc-brand-lt); display: block; margin-bottom: .15rem; }
.bc-day__title { font-size: clamp(1.08rem, 2.4vw, 1.3rem); font-weight: 800; margin: 0; }
.bc-day__caret {
  flex: none; font-size: 1.5rem; color: var(--bc-dim);
  transition: transform .22s ease; line-height: 1;
}
.bc-day[open] .bc-day__caret { transform: rotate(180deg); color: var(--bc-brand-lt); }
.bc-day__body { padding: 0 1.6rem 1.7rem; border-top: 1px solid var(--bc-line); padding-top: 1.4rem; }
.bc-day__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 1.4rem; }
.bc-day__blk h4 {
  font-size: 1rem; font-weight: 800; margin: 0 0 .7rem;
  color: var(--bc-text);
  display: flex; align-items: center; gap: .5rem;
}
.bc-day__blk h4::before {
  content: ""; width: 4px; height: 1.05em; border-radius: 2px;
  background: var(--bc-brand); flex: none;
}
.bc-list { list-style: none; margin: 0; padding: 0; }
.bc-list li {
  position: relative;
  padding-inline-start: 1.35rem;
  padding-block: .3rem;
  font-size: .95rem;
  color: var(--bc-muted);
  line-height: 1.7;
}
.bc-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: .25rem;
  top: .95em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bc-brand);
}
.bc-tag {
  display: inline-block;
  font-family: 'Segoe UI', system-ui, sans-serif;
  direction: ltr;
  font-size: .8rem;
  font-weight: 700;
  padding: .18rem .55rem;
  border-radius: 6px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--bc-line);
  color: var(--bc-muted);
  margin-inline-end: .3rem;
}

/* ---------- tools ---------- */
.bc-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: .9rem; }
.bc-tool {
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius-sm);
  padding: 1.15rem 1rem;
  text-align: center;
  transition: border-color .2s ease, background .2s ease;
}
.bc-tool:hover { border-color: rgba(51,184,159,.45); background: var(--bc-surface-2); }
.bc-tool__n {
  font-family: 'Segoe UI', system-ui, sans-serif;
  direction: ltr;
  font-size: 1rem;
  font-weight: 700;
  display: block;
  margin-bottom: .2rem;
}
.bc-tool__c { font-size: .8rem; color: var(--bc-dim); }
.bc-tools__note {
  margin-top: 1.6rem;
  background: rgba(255,176,32,.07);
  border: 1px solid rgba(255,176,32,.26);
  border-radius: var(--bc-radius-sm);
  padding: 1.15rem 1.35rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--bc-muted);
}
.bc-tools__note b { color: var(--bc-hot); font-weight: 800; }

/* ---------- outcomes ---------- */
.bc-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: .8rem 2rem; }
.bc-out li {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .7rem 0;
  font-size: 1.02rem;
  line-height: 1.6;
  border-bottom: 1px solid var(--bc-line);
}
.bc-out li:last-child { border-bottom: 0; }

/* ---------- classroom ---------- */
.bc-room { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }

/* single classroom photo */
.bc-photo {
  margin: 0;
  border-radius: var(--bc-radius);
  overflow: hidden;
  border: 1px solid var(--bc-line-str);
  box-shadow: 0 26px 70px rgba(0,0,0,.5);
  position: relative;
}
.bc-photo img { display: block; width: 100%; height: auto; }
/* subtle tint so the photo sits in the dark theme instead of glaring out of it */
.bc-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,7,13,0) 55%, rgba(7,7,13,.35));
  pointer-events: none;
}

.bc-room__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}
.bc-shot {
  position: relative;
  border-radius: var(--bc-radius-sm);
  overflow: hidden;
  background: var(--bc-surface-2);
  border: 1px solid var(--bc-line);
  aspect-ratio: 4 / 3;
}
.bc-shot--tall { grid-row: span 2; aspect-ratio: 4 / 6.4; }
.bc-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* placeholder state until real photos are supplied */
.bc-shot--ph {
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--bc-dim);
  font-size: .85rem;
  line-height: 1.6;
  padding: 1rem;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px),
    var(--bc-surface-2);
}
.bc-feat { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.bc-feat li {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--bc-line);
  font-size: 1.02rem;
  color: var(--bc-muted);
}
.bc-feat li:last-child { border-bottom: 0; }
.bc-feat b { color: var(--bc-text); font-weight: 800; }

/* ---------- instructor ---------- */
.bc-inst {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 2.6rem;
  align-items: start;
}
.bc-inst__media { margin: 0; }
.bc-inst__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  background: #000;
  border-radius: var(--bc-radius);
  border: 1px solid var(--bc-line-str);
  box-shadow: 0 26px 70px rgba(0,0,0,.5);
}
.bc-inst__cap {
  margin-top: .7rem;
  font-size: .88rem;
  color: var(--bc-dim);
  text-align: center;
}
.bc-inst__p {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--bc-muted);
  margin-bottom: 1.1rem;
}
.bc-inst__p b { color: var(--bc-text); font-weight: 800; }
.bc-inst__pts { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.bc-inst__pts li {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .65rem 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--bc-muted);
  border-bottom: 1px solid var(--bc-line);
}
.bc-inst__pts li:last-child { border-bottom: 0; }

/* own namespace — .bc-stats is already taken by the hero strip */
.bc-istats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .8rem;
  margin-top: 1.7rem;
}
.bc-istat {
  text-align: center;
  padding: 1rem .5rem;
  background: var(--bc-surface);
  border: 1px solid var(--bc-line-str);
  border-radius: var(--bc-radius-sm);
}
.bc-istat__n {
  display: block;
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1.1;
  color: var(--bc-brand-lt);
}
.bc-istat__l { display: block; margin-top: .3rem; font-size: .85rem; color: var(--bc-dim); }

.bc-certs {
  margin-top: 2.8rem;
  padding-top: 2rem;
  border-top: 1px solid var(--bc-line);
}
.bc-certs__lbl {
  display: block;
  text-align: center;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--bc-dim);
  margin-bottom: 1.4rem;
}
.bc-certs__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.2rem;
}
.bc-cert { text-align: center; }
.bc-cert img {
  width: 100%;
  max-width: 96px;
  height: auto;
  margin-inline: auto;
  display: block;
}
.bc-cert span {
  display: block;
  margin-top: .55rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--bc-muted);
}

/* ---------- signup form ---------- */
.bc-signup {
  background:
    radial-gradient(720px 380px at 50% -20%, rgba(51,184,159,.2), transparent 65%),
    var(--bc-bg-2);
  border-block: 1px solid var(--bc-line);
}
.bc-form {
  max-width: 560px;
  margin: 0 auto;
  background: var(--bc-surface);
  border: 1px solid var(--bc-line-str);
  border-radius: var(--bc-radius);
  padding: 2.2rem 1.9rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.bc-field { margin-bottom: 1.1rem; }
.bc-field label {
  display: block;
  font-size: .93rem;
  font-weight: 700;
  margin-bottom: .45rem;
  color: var(--bc-text);
}
.bc-input {
  width: 100%;
  font-family: inherit;
  font-size: 1.05rem;
  padding: .95rem 1.1rem;
  border-radius: var(--bc-radius-sm);
  background: var(--bc-bg);
  border: 1px solid var(--bc-line-str);
  color: var(--bc-text);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.bc-input:focus {
  outline: none;
  border-color: var(--bc-brand);
  box-shadow: 0 0 0 3px rgba(51,184,159,.16);
}
.bc-input::placeholder { color: var(--bc-dim); }
/* phone always LTR even inside an RTL page */
.bc-input--tel { direction: ltr; text-align: right; }
.bc-form .bc-btn { width: 100%; margin-top: .4rem; }
.bc-form__note { font-size: .85rem; color: var(--bc-dim); text-align: center; margin: 1rem 0 0; line-height: 1.7; }
.bc-form__msg { margin-top: 1rem; font-size: .98rem; font-weight: 700; text-align: center; min-height: 1.4em; }
.bc-form__msg.is-ok  { color: var(--bc-brand-lt); }
.bc-form__msg.is-err { color: #ff6b6b; }
.bc-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- location ---------- */
.bc-loc { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.bc-addr {
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  padding: 1.8rem;
}
.bc-addr + .bc-addr { margin-top: 1rem; }
.bc-addr__lbl {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--bc-brand-lt);
  margin-bottom: .6rem;
}
.bc-addr__body { font-size: 1.08rem; line-height: 1.9; color: var(--bc-muted); margin: 0; }
.bc-addr--en { direction: ltr; text-align: left; }
.bc-addr--en .bc-addr__lbl { text-align: left; }

/* ---------- FAQ ---------- */
.bc-faq { max-width: 820px; margin-inline: auto; display: grid; gap: .8rem; }
.bc-q {
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius-sm);
  overflow: hidden;
}
.bc-q[open] { border-color: rgba(51,184,159,.4); }
.bc-q__s {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.bc-q__s::-webkit-details-marker { display: none; }
.bc-q__s::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--bc-brand-lt);
  transition: transform .2s ease;
}
.bc-q[open] .bc-q__s::after { transform: rotate(45deg); }
.bc-q__b {
  padding: 0 1.4rem 1.3rem;
  font-size: .99rem;
  line-height: 1.9;
  color: var(--bc-muted);
}

/* ---------- final CTA ---------- */
.bc-final {
  text-align: center;
  background:
    radial-gradient(820px 420px at 50% 0%, rgba(51,184,159,.24), transparent 65%),
    var(--bc-bg);
}

/* ---------- sticky mobile CTA ---------- */
.bc-sticky {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1040;
  display: none;
  gap: .6rem;
  padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(7,7,13,.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--bc-line-str);
}
.bc-sticky .bc-btn { flex: 1 1 0; font-size: 1rem; padding: .95rem 1rem; }

/* =========================================================
   Responsive
   ========================================================= */
/* --- large desktop: let the offer card breathe --- */
@media (min-width: 1400px) {
  .bc-page { --bc-maxw: 1260px; }
}

/* --- small desktop / large tablet --- */
@media (max-width: 1199px) {
  .bc-hero__grid { grid-template-columns: 1fr .9fr; gap: 2.5rem; }
  .bc-proj { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
}

/* --- tablet: stack the two-column blocks --- */
@media (max-width: 991px) {
  .bc-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .bc-room, .bc-loc { grid-template-columns: 1fr; gap: 2rem; }
  .bc-section { padding: 64px 0; }

  /* the offer card is the conversion element — cap it so it doesn't
     stretch edge-to-edge and look like a plain block once stacked */
  .bc-offer { max-width: 520px; margin-inline: auto; }
  .bc-room__media, .bc-photo { max-width: 620px; margin-inline: auto; }

  .bc-inst { grid-template-columns: 1fr; gap: 2rem; }
  .bc-inst__media { max-width: 440px; margin-inline: auto; }
  .bc-certs__grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem 1rem; }
}

/* --- phone --- */
@media (max-width: 767px) {
  .bc-section { padding: 52px 0; }
  .bc-section--tight { padding: 40px 0; }
  .bc-hero { padding: 40px 0 52px; }
  .bc-wrap { padding-inline: 16px; }
  .bc-head { margin-bottom: 2.2rem; }

  .bc-stats { gap: .5rem; margin-top: 1.8rem; padding-top: 1.6rem; }
  .bc-stat__lbl { font-size: .76rem; }

  .bc-cta-row { gap: .7rem; }
  .bc-cta-row .bc-btn { width: 100%; }
  .bc-btn--lg { font-size: 1.05rem; padding: 1.05rem 1.5rem; }

  .bc-offer { padding: 1.6rem 1.25rem; }
  .bc-form { padding: 1.7rem 1.2rem; }
  .bc-proj { grid-template-columns: 1fr; gap: .9rem; }
  .bc-proj__item { padding: 1.4rem 1.2rem 1.2rem; }
  .bc-out { grid-template-columns: 1fr; gap: 0; }
  .bc-tools { grid-template-columns: repeat(2, 1fr); }

  .bc-trust { padding: 1.1rem 0; }
  .bc-trust__row { gap: .6rem 1.3rem; }
  .bc-trust__item { font-size: .88rem; }

  .bc-day__sum { padding: 1.15rem 1rem; gap: .75rem; }
  .bc-day__n { width: 2.6rem; height: 2.6rem; font-size: 1.15rem; border-radius: 11px; }
  .bc-day__body { padding: 1.2rem 1rem 1.4rem; }
  .bc-day__grid { gap: 1.5rem; grid-template-columns: 1fr; }

  .bc-q__s { padding: 1rem 1.1rem; font-size: 1rem; }
  .bc-q__b { padding: 0 1.1rem 1.2rem; }

  .bc-room__media { grid-template-columns: 1fr 1fr; }
  .bc-shot--tall { grid-row: span 1; aspect-ratio: 4/3; }

  .bc-addr { padding: 1.4rem 1.25rem; }

  .bc-istats { gap: .5rem; }
  .bc-istat { padding: .8rem .35rem; }
  .bc-istat__n { font-size: 1.55rem; }
  .bc-istat__l { font-size: .76rem; line-height: 1.4; }
  .bc-certs { margin-top: 2.2rem; padding-top: 1.6rem; }
  .bc-cert img { max-width: 78px; }
  .bc-cert span { font-size: .74rem; }

  /* sticky bar on, and clear the page bottom so it never covers content */
  .bc-sticky { display: flex; }
  .bc-page { padding-bottom: 80px; }
  /* keep the site chat widget from sitting under the sticky bar */
  flowise-chatbot, .flowise-chatbot-button { bottom: 88px !important; }
}

/* --- small phones (iPhone SE / older Androids, 320–400px) --- */
@media (max-width: 400px) {
  .bc-wrap { padding-inline: 14px; }
  .bc-h1 { font-size: 1.95rem; }
  .bc-eyebrow { font-size: .76rem; padding: .35rem .8rem; }
  .bc-btn { font-size: .98rem; padding: .95rem 1.2rem; }
  .bc-btn--lg { font-size: 1rem; padding: 1rem 1.2rem; }
  .bc-stats { grid-template-columns: repeat(3, 1fr); gap: .35rem; }
  .bc-stat__num { font-size: 1.5rem; }
  .bc-stat__lbl { font-size: .7rem; line-height: 1.35; }
  .bc-tools { grid-template-columns: 1fr; }
  .bc-chip { font-size: .9rem; padding: .6rem 1rem; }
  .bc-sticky .bc-btn { font-size: .94rem; padding: .9rem .6rem; }
  .bc-istat__n { font-size: 1.35rem; }
  .bc-istat__l { font-size: .68rem; }
  .bc-certs__grid { grid-template-columns: repeat(2, 1fr); }
  .bc-cert img { max-width: 88px; }
}

/* --- phone landscape: reclaim vertical space --- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .bc-hero { padding: 28px 0 34px; }
  .bc-section { padding: 38px 0; }
  .bc-sticky { display: none; }
  .bc-page { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bc-page * { animation: none !important; transition: none !important; }
  .bc-btn:hover, .bc-proj__item:hover { transform: none; }
}