/* ==========================================================================
   ANAS RADWAN — Consultation page (consultation.html)
   Loads AFTER style.css and reuses its tokens, buttons, .kicker, .shead,
   .hero__bars and .shine. Everything here is prefixed `cs` so it can never
   collide with course.css / store.css.
   ========================================================================== */

/* ---------- 1. BREADCRUMB (same pattern as store.css / course.css) ---------- */
.crumb{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--slate);flex-wrap:wrap;margin-bottom:20px}
.crumb a{transition:color .25s}
.crumb a:hover{color:var(--light)}
.crumb svg{width:11px;height:11px;flex:none;opacity:.55}
.crumb [aria-current]{color:var(--mid)}

/* ---------- 2. HERO ---------- */
.cshero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  padding:clamp(30px,4vw,46px) 0 clamp(70px,8vw,104px)}
.cshero__glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 52% 62% at 26% 34%,rgba(148,0,0,.40),transparent 63%),
    radial-gradient(ellipse 42% 55% at 82% 92%,rgba(148,0,0,.20),transparent 66%)}
.cshero .hero__bars{z-index:0;opacity:.45}
.cshero > .wrap{position:relative;z-index:2}
.cshero__inner{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(34px,5vw,64px);align-items:center}

.cshero h1{font-family:var(--font-display);font-size:clamp(27px,3.7vw,47px);font-weight:400;line-height:1.4}
.cshero h1 b{font-weight:400;display:block}
.cshero__lede{margin-top:24px;font-size:clamp(15px,1.35vw,16.5px);line-height:1.98;color:var(--mid);max-width:50ch}
.cshero__actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

/* small fact row under the copy */
.csmeta{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}
.csmeta span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--light);
  border:1px solid var(--line);background:rgba(215,216,213,.05);padding:7px 15px}
.csmeta svg{width:14px;height:14px;flex:none;color:var(--red-hi)}

/* ---------- 3. HERO SHOT — one skewed frame that fades out at the bottom ---------- */
/* no border or shadow here on purpose: the mask dissolves the lower edge, and
   an outline would draw a hard line straight through the fade */
.csmedia{position:relative}
.csshot{position:relative;overflow:hidden;aspect-ratio:3/2;
  transform:skewX(calc(var(--sk) * .4));
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 58%,transparent 99%)}
/* the source shot is already a dark B&W studio portrait — it only needs a small
   lift to hold up against the red glow behind it, not the usual grayscale pass */
.csshot img{width:100%;height:100%;object-fit:cover;
  transform:skewX(calc(var(--sk) * -.4)) scale(1.16);
  filter:grayscale(1) contrast(1.06) brightness(1.08);transition:filter .6s var(--ease)}
.csmedia:hover .csshot img{filter:grayscale(1) contrast(1.08) brightness(1.16)}

.csglass{position:absolute;z-index:3;top:-26px;inset-inline-end:-16px;
  width:112px;height:112px;display:grid;place-items:center;border-radius:30px;
  background:rgba(215,216,213,.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(215,216,213,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 20px 44px -18px rgba(0,0,0,.75);
  animation:cs-float 6s ease-in-out infinite}
/* soft red bloom sitting behind the glass, not on it */
.csglass::before{content:'';position:absolute;inset:12px;z-index:-1;border-radius:24px;
  background:radial-gradient(circle at 50% 55%,rgba(148,0,0,.55),transparent 70%);filter:blur(12px)}
.csglass svg{width:52px;height:52px;color:#fff;stroke-width:1.2}
@keyframes cs-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

/* ---------- 4. BENEFITS ---------- */
.csbenefits{padding:clamp(62px,7.5vw,96px) 0;background:var(--bg-2);border-bottom:1px solid var(--line)}
.csbenefits .shead{margin-inline:auto;text-align:center}
.csbenefits .shead > p{margin-inline:auto}

.csgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.csitem{background:var(--bg-2);padding:40px 26px;position:relative;overflow:hidden;transition:background .35s;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.csitem::after{content:'';position:absolute;bottom:0;right:0;width:0;height:3px;background:var(--red);transition:width .45s var(--ease)}
.csitem:hover{background:var(--bg-3)}
.csitem:hover::after{width:100%}
.csitem__glass{width:76px;height:76px;display:grid;place-items:center;margin-bottom:22px;position:relative;flex:none;
  background:rgba(215,216,213,.07);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(215,216,213,.16);border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px -12px rgba(0,0,0,.5);
  transition:border-color .35s,background .35s,transform .35s var(--ease)}
.csitem:hover .csitem__glass{border-color:rgba(148,0,0,.5);background:rgba(148,0,0,.1);transform:translateY(-3px)}
.csitem__glass svg{width:34px;height:34px;color:var(--light);stroke-width:1.35}
.csitem h3{font-size:17.5px;margin-bottom:10px}
.csitem p{font-size:14px;color:var(--mid);line-height:1.85;max-width:32ch}

/* ---------- 5. BOOKING EMBED ---------- */
.csbook{position:relative;overflow:hidden;padding:clamp(62px,7.5vw,96px) 0 clamp(70px,8vw,110px)}
.csbook__glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 90% at 50% 0%,rgba(148,0,0,.32),transparent 66%)}
.csbook > .wrap{position:relative;z-index:2}
.csbook .shead{margin-inline:auto;text-align:center}
.csbook .shead > p{margin-inline:auto}

.csbookcard{position:relative;max-width:880px;margin-inline:auto;
  background:var(--bg-2);border:1px solid var(--line);padding:clamp(14px,2.2vw,24px)}
/* skewed red tab on the card's leading corner — same motif as .btn/.badge */
.csbookcard::before{content:'';position:absolute;top:-1px;inset-inline-start:22px;
  width:74px;height:4px;background:var(--red);transform:skewX(var(--sk))}
/* form_embed.js writes the real height onto the iframe after it loads, so the
   only thing set here is a floor that stops the card collapsing before then */
/* bg matches the card so the reserved space doesn't flash a light block while
   the widget (which renders on its own dark theme) is still loading */
.csbookcard iframe{display:block;width:100%;border:0;min-height:560px;background:var(--bg-2)}

.csnote{margin:22px auto 0;max-width:880px;font-size:13px;color:var(--slate);text-align:center;line-height:1.9}
.csnote a{color:var(--red-hi);text-decoration:underline;text-underline-offset:3px}
.csnote a:hover{color:#fff}

/* ---------- 6. RESPONSIVE ---------- */
@media (max-width:1080px){
  .csgrid{grid-template-columns:1fr 1fr}
}

@media (max-width:980px){
  .cshero__inner{grid-template-columns:1fr;gap:0;text-align:center}
  .cshero__lede{margin-inline:auto}
  .cshero__actions,.csmeta{justify-content:center}
  /* the glass badge hangs above the box, so the stacked layout needs the
     matching headroom or it collides with the breadcrumb */
  .csmedia{order:-1;width:100%;max-width:440px;margin:34px auto 8px}
}

@media (max-width:620px){
  .csgrid{grid-template-columns:1fr}
  .csitem{padding:34px 24px}
  .csglass{width:78px;height:78px;border-radius:22px;top:-18px;inset-inline-end:-8px}
  .csglass svg{width:36px;height:36px}
  .cshero__actions .btn{flex:1 1 auto;justify-content:center}
  .csbookcard{padding:10px}
  .csbookcard iframe{min-height:640px}
}

@media (prefers-reduced-motion:reduce){
  .csglass{animation:none}
}

@media print{
  .cshero__glow,.cshero .hero__bars,.csbook__glow,.totop,.wa-fab{display:none}
}