/**
 * Makarim — theme stylesheet.
 *
 * The design system below is the approved homepage design (design/
 * homepage_new.html). Everything after the "WordPress" divider is what a
 * live site needs and a static mockup does not: menu markup, article
 * content, archives, the programme page and the shop.
 */

/* ==========================================================================
   Makarim — homepage design
   Same palette and architecture throughout, sequenced so a pilgrim meets
   the offer first: who this is for, the Hajj season, the Umrah groups, then
   the reasons to trust, then the library of teaching.
   ========================================================================== */

:root{
  /* Neutrals — cool, clean, faintly green so white never looks clinical. */
  --white:#ffffff;
  --mist:#f4f7f5;
  --mist-deep:#eaf0ec;
  --ink:#0c1512;
  --ink-70:#454f4b;
  --ink-45:#68716d;
  --line:rgba(12,21,18,.09);
  --line-mid:rgba(12,21,18,.14);

  /* Primary — deep forest green, at jewel saturation. */
  --emerald:#0b7a56;
  --emerald-deep:#06452f;
  --emerald-ink:#03241a;
  --emerald-wash:#e7f4ef;

  /* Accent — muted gold, brought up to a luminous weight. */
  --gold:#c99a1e;
  --gold-deep:#8b6910;
  --gold-wash:#fbf2da;

  /* Section accents, from Islamic tilework: turquoise, terracotta, lapis. */
  --jade:#12a37a;
  --teal:#0d8f92;
  --teal-wash:#e6f4f4;
  --clay:#b5532c;
  --clay-wash:#fdefe9;
  --lapis:#2c4f9e;
  --lapis-wash:#ecf0fb;

  --wa:#1faa54;

  --display:"Manrope","Noto Sans Bengali",system-ui,-apple-system,sans-serif;
  --bangla:"Noto Sans Bengali","Inter",sans-serif;
  --body:"Inter","Noto Sans Bengali",system-ui,-apple-system,sans-serif;

  --wrap:1240px;
  --gut:clamp(20px,4.5vw,48px);
  --band:clamp(72px,8.5vw,116px);

  --r:16px;
  --r-lg:22px;
  --r-sm:10px;
  --shadow:0 1px 2px rgba(12,21,18,.04),0 10px 26px rgba(12,21,18,.06);
  --shadow-lift:0 2px 4px rgba(12,21,18,.05),0 18px 44px rgba(12,21,18,.10);
  --ease:cubic-bezier(.2,.7,.3,1);
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.12;
  margin:0;
  color:var(--ink);
  text-wrap:balance;
}

.wrap{width:min(100% - (var(--gut) * 2),var(--wrap));margin-inline:auto}
.band{padding-block:var(--band)}
.band--mist{background:var(--mist)}

/* ------------------------------------------------------- section headings */

.shead{max-width:64ch}
.shead--c{margin-inline:auto;text-align:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;
  font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent,var(--emerald));
}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:currentColor}
.shead--c .eyebrow::after{content:"";width:26px;height:2px;border-radius:2px;background:currentColor}

h2.sec{font-size:clamp(30px,4.1vw,48px);line-height:1.08}

.lede{
  max-width:60ch;margin:20px 0 0;
  font-size:clamp(16.5px,1.35vw,19px);color:var(--ink-70);
  text-wrap:pretty;
}
.shead--c .lede{margin-inline:auto}

/* Archive and page heads keep a marker in a left rail, so a section start is
   found by position rather than by another line of type. */
.rail{display:grid;gap:clamp(26px,4vw,64px);grid-template-columns:1fr}
@media(min-width:920px){.rail{grid-template-columns:180px 1fr}}

.rail__meta{
  align-self:start;max-width:152px;
  padding-top:12px;border-top:2px solid var(--accent,var(--emerald));
}
.rail__meta b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:36px;line-height:.95;letter-spacing:-.045em;
  color:var(--accent,var(--emerald));font-variant-numeric:tabular-nums;
}
.rail__meta span{
  display:block;margin-top:9px;
  font-size:13px;font-weight:500;line-height:1.35;color:var(--ink-45);
}

@media(max-width:919px){
  .rail__meta{
    display:flex;align-items:baseline;gap:11px;max-width:none;
    padding:0 0 0 13px;border-top:0;
    border-left:2px solid var(--accent,var(--emerald));
  }
  .rail__meta b{font-size:27px}
  .rail__meta span{margin-top:0}
}

/* ------------------------------------------------------------------ links */

.act{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:700;font-size:15px;
  color:var(--accent,var(--emerald));
  transition:gap .2s var(--ease),color .2s var(--ease);
}
.act::after{
  content:"";width:16px;height:1.5px;background:currentColor;
  transition:width .2s var(--ease);
}
.act:hover::after{width:26px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:700;font-size:15px;line-height:1.2;
  padding:15px 30px;border-radius:99px;border:1.5px solid transparent;
  transition:background-color .22s var(--ease),color .22s var(--ease),
             border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn--solid{background:var(--emerald);color:#fff;border-color:var(--emerald)}
.btn--solid:hover{background:var(--emerald-deep);border-color:var(--emerald-deep);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn--gold{background:var(--gold);color:#241a02;border-color:var(--gold)}
.btn--gold:hover{background:#dbab2a;border-color:#dbab2a;color:#241a02;transform:translateY(-1px);box-shadow:0 12px 30px rgba(201,154,30,.32)}
.btn--line{border-color:var(--line-mid);color:var(--ink)}
.btn--line:hover{border-color:var(--emerald);color:var(--emerald)}
.btn--wa{background:var(--wa);color:#fff;border-color:var(--wa)}
.btn--wa:hover{background:#188d45;border-color:#188d45;color:#fff;transform:translateY(-1px);box-shadow:0 12px 30px rgba(31,170,84,.3)}

/* ----------------------------------------------------------------- header */

.hdr{
  position:fixed;inset-inline:0;top:0;z-index:30;
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease);
}
.hdr.stuck,.hdr--light{background:rgba(255,255,255,.92);backdrop-filter:saturate(160%) blur(14px);box-shadow:0 1px 0 var(--line)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:15px}

.brand{display:flex;align-items:center;gap:12px}
.brand img{width:38px;height:38px;filter:brightness(0) invert(1);transition:filter .3s var(--ease)}
.brand b{
  font-family:var(--display);font-weight:800;font-size:15.5px;color:#fff;
  letter-spacing:-.022em;line-height:1.25;display:block;white-space:nowrap;
  transition:color .3s var(--ease);
}
.brand i{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.62);font-weight:500;transition:color .3s var(--ease)}

.hdr.stuck .brand img,.hdr--light .brand img{filter:none}
.hdr.stuck .brand b,.hdr--light .brand b{color:var(--ink)}
.hdr.stuck .brand i,.hdr--light .brand i{color:var(--ink-45)}

.nav{display:none}
@media(min-width:1180px){.nav{display:block}}
.nav>ul{
  display:flex;align-items:center;flex-wrap:nowrap;
  gap:clamp(13px,1.4vw,22px);margin:0;padding:0;list-style:none;
}
.nav a{
  font-size:14.5px;white-space:nowrap;font-weight:450;color:rgba(255,255,255,.8);
  padding-block:6px;position:relative;transition:color .2s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a:hover,.nav a[aria-current]{color:#fff}
.hdr.stuck .nav a,.hdr--light .nav a{color:var(--ink-70)}
.hdr.stuck .nav a:hover,.hdr.stuck .nav a[aria-current],
.hdr--light .nav a:hover,.hdr--light .nav a[aria-current]{color:var(--ink)}

/* The WhatsApp button keeps its own green in both header states — it is the
   one element that must never read as chrome. */
.hdr__cta{display:none}
@media(min-width:1280px){.hdr__cta{display:block}}
.hdr__cta .btn{padding:11px 22px;font-size:14px}

/* A solid, labelled pill rather than a bare icon: many visitors don't read
   three lines as "menu", so the word sits beside them. */
.burger{
  position:relative;display:inline-flex;align-items:center;gap:9px;flex:none;
  box-sizing:border-box;height:44px;padding:0 16px 0 14px;margin:0;
  background:#fff;color:var(--emerald-deep);
  border:1px solid #fff;border-radius:999px;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:15px;line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  -webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;
  transition:border-color .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease);
}
@media(min-width:1180px){.burger{display:none}}
/* Every state names its own colours, or the generic button:hover rule
   (emerald-deep, white text) leaks in. Phones keep :hover after a tap, so the
   hover tint is only applied where there is a real pointer. */
.burger:hover{background:#fff;border-color:#fff;color:var(--emerald-deep)}
@media(hover:hover){.burger:hover{background:var(--mist);border-color:var(--mist)}}
.burger:focus{outline:none}
.burger:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Three bars drawn from one element, folding into a cross while open. */
.burger__bars,.burger__bars::before,.burger__bars::after{
  display:block;width:16px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .25s var(--ease),background-color .2s var(--ease);
}
.burger__bars{position:relative}
.burger__bars::before,.burger__bars::after{content:"";position:absolute;left:0}
.burger__bars::before{top:-5px}
.burger__bars::after{top:5px}
.burger[aria-expanded="true"] .burger__bars{background:transparent}
.burger[aria-expanded="true"] .burger__bars::before{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars::after{transform:translateY(-5px) rotate(-45deg)}
.burger__label--close,
.burger[aria-expanded="true"] .burger__label--open{display:none}
.burger[aria-expanded="true"] .burger__label--close{display:inline}

/* On the white header it turns emerald, so it still reads as a button. */
.hdr.stuck .burger,.hdr.stuck .burger:hover,
.hdr--light .burger,.hdr--light .burger:hover{background:var(--emerald);border-color:var(--emerald);color:#fff;box-shadow:none}
@media(hover:hover){
  .hdr.stuck .burger:hover,
  .hdr--light .burger:hover{background:var(--emerald-deep);border-color:var(--emerald-deep)}
}
.hdr .burger[aria-expanded="true"],.hdr .burger[aria-expanded="true"]:hover{background:var(--mist);border-color:var(--line-mid);color:var(--ink)}
.hdr.stuck .burger:focus-visible,.hdr--light .burger:focus-visible{outline-color:var(--emerald)}

/* Narrow phones: the tagline wraps to two short lines to make room for the
   labelled button, and drops out entirely on the smallest screens. */
@media(max-width:519px){
  .hdr__in{gap:14px}
  .brand{min-width:0}
  .brand i{display:block;line-height:1.35;max-width:150px}
}
@media(max-width:359px){.brand i{display:none}}

/* ------------------------------------------------------------------- hero */

.hero{
  position:relative;color:#fff;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(90% 80% at 86% 100%,rgba(18,163,122,.42),transparent 62%),
    radial-gradient(64% 64% at 6% 4%,rgba(13,143,146,.28),transparent 64%),
    linear-gradient(158deg,#03241a 0%,#064a34 54%,#046152 100%);
}

/* An eight-fold star lattice — two squares superimposed at 45°, the khatam
   that runs through Islamic tilework. */
.hero__lattice{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  opacity:.15;
  mask-image:linear-gradient(96deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.3) 40%,#000 74%);
}
@media(max-width:899px){
  .hero__lattice{opacity:.08;mask-image:linear-gradient(to bottom,transparent 6%,#000 62%)}
}

.hero__glow{
  position:absolute;z-index:-2;right:-4%;bottom:-24%;width:min(62%,700px);aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(201,154,30,.34),transparent 70%);
}

/* A colonnade of pointed arches along the floor of the section — the arcade
   that rings the Haram, used as the horizon line rather than a photograph. */
.hero__arcade{
  position:absolute;z-index:-1;inset:auto 0 0 0;width:100%;height:120px;
  opacity:.5;
}
@media(max-width:899px){.hero__arcade{height:74px;opacity:.36}}

.hero__in{display:grid;grid-template-columns:1fr;align-items:end;padding-top:118px}
@media(min-width:900px){.hero__in{grid-template-columns:1.12fr .88fr;padding-top:150px}}

.hero__copy{padding-bottom:clamp(56px,7vw,104px)}

.hero h1{
  color:#fff;font-size:clamp(33px,4.3vw,54px);line-height:1.06;
  letter-spacing:-.038em;max-width:15ch;
}
.hero h1 em{font-style:normal;color:var(--gold);white-space:nowrap}

.hero__line{
  margin:26px 0 0;max-width:50ch;
  font-size:clamp(16.5px,1.5vw,19px);line-height:1.7;
  color:rgba(255,255,255,.8);
}

/* Signature block — the name is the credential, so it is set apart from the
   sentence rather than buried inside it. */
.hero__sig{margin:30px 0 0;padding-left:16px;border-left:2px solid var(--gold)}
.hero__sig b{display:block;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.025em;color:#fff}
.hero__sig span{display:block;font-size:14px;color:rgba(255,255,255,.76);font-weight:450}

.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
@media(max-width:520px){.hero__cta{flex-direction:column;align-items:stretch}}
.hero__cta .btn--line{border-color:rgba(255,255,255,.36);color:#fff}
.hero__cta .btn--line:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}

.hero__figure{position:relative;align-self:end;justify-self:center;width:min(100%,540px)}

/* The pointed arch of a mihrab, framing the portrait the way the niche
   frames the imam. */
.hero__arch{
  position:absolute;z-index:0;left:50%;bottom:0;translate:-50% 0;
  width:100%;height:auto;
  mask-image:linear-gradient(to top,transparent 0,#000 10%);
}
.hero__figure img{
  position:relative;z-index:1;
  width:min(100%,470px);margin-inline:auto;
  filter:drop-shadow(0 36px 70px rgba(0,0,0,.42));
}

/* ------------------------------------------------------------ trust strip */

/* Sits on the seam between the hero and the page, so the first thing after
   the promise is the evidence for it. */
.trust{background:var(--emerald-ink);border-top:1px solid rgba(255,255,255,.1)}
.trust__in{
  display:grid;gap:1px;grid-template-columns:repeat(2,1fr);
  background:rgba(255,255,255,.1);
  list-style:none;margin:0;padding:0;
}
@media(min-width:840px){.trust__in{grid-template-columns:repeat(4,1fr)}}
.trust__it{
  display:flex;align-items:center;gap:13px;
  padding:22px clamp(16px,2vw,28px);background:var(--emerald-ink);
}
.trust__it svg{width:22px;height:22px;fill:var(--gold);flex:none}
.trust__it b{display:block;font-size:15px;font-weight:600;color:#fff;line-height:1.35}
.trust__it span span{display:block;font-size:13px;color:rgba(255,255,255,.62);line-height:1.4}

/* ------------------------------------------------------------- Hajj 2027 */

.hajj27{
  --accent:var(--gold);
  color:#fff;position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(70% 90% at 92% 8%,rgba(201,154,30,.26),transparent 60%),
    linear-gradient(162deg,#06452f 0%,#03241a 100%);
}
.hajj27 h2,.hajj27 h3{color:#fff}
.hajj27 .lede{color:rgba(255,255,255,.7)}

.hajj27__in{display:grid;gap:clamp(34px,4.5vw,64px);grid-template-columns:1fr;align-items:center}
@media(min-width:940px){.hajj27__in{grid-template-columns:1.05fr .95fr}}

.hajj27 h2{font-size:clamp(30px,4.2vw,50px)}

.hajj27__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
@media(max-width:520px){.hajj27__cta{flex-direction:column;align-items:stretch}}
.hajj27__cta .btn--line{border-color:rgba(255,255,255,.34);color:#fff}
.hajj27__cta .btn--line:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}

/* The checklist is the substance of the offer, so it is a panel of its own
   rather than bullets trailing the paragraph. */
.checks{
  margin:0;padding:clamp(26px,3vw,38px);border-radius:var(--r-lg);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(2px);
  list-style:none;display:grid;gap:4px;
}
.checks li{display:flex;gap:14px;align-items:flex-start;padding-block:14px;border-top:1px solid rgba(255,255,255,.1)}
.checks li:first-child{border-top:0;padding-top:0}
.checks li:last-child{padding-bottom:0}
.checks svg{width:22px;height:22px;flex:none;margin-top:3px;fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.checks b{display:block;font-size:16px;font-weight:600;color:#fff;line-height:1.45}
.checks span span{display:block;margin-top:3px;font-size:14.5px;color:rgba(255,255,255,.7);line-height:1.6}

.hajj27__note{
  margin:22px 0 0;font-size:13.5px;color:rgba(255,255,255,.64);
  display:flex;gap:9px;align-items:flex-start;
}
.hajj27__note svg{width:16px;height:16px;fill:rgba(255,255,255,.55);flex:none;margin-top:4px}

/* ------------------------------------------------------- Umrah departures */

.umrah{--accent:var(--emerald);background:var(--mist)}

.groups{display:grid;gap:16px;margin-top:clamp(34px,4vw,50px);grid-template-columns:1fr}
@media(min-width:720px){.groups{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.groups{grid-template-columns:repeat(3,1fr)}}

.grp{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.grp:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}

/* The crown is a strip of the same arcade used in the hero — it makes each
   card read as a doorway rather than a price box. */
.grp__crown{
  position:relative;height:104px;
  background:linear-gradient(150deg,var(--c1),var(--c2));
  display:flex;align-items:flex-end;padding:0 26px 16px;
}
.grp__crown svg{position:absolute;inset:auto 0 0 0;width:100%;height:56px;opacity:.5}
.grp__crown b{
  position:relative;font-family:var(--display);font-weight:800;
  font-size:27px;letter-spacing:-.035em;color:#fff;line-height:1;
}
.grp__crown b i{font-style:normal;font-weight:600;font-size:16px;opacity:.72;margin-left:7px}

.grp:nth-child(3n+1){--c1:#0b7a56;--c2:#03241a}
.grp:nth-child(3n+2){--c1:#0d8f92;--c2:#06452f}
.grp:nth-child(3n+3){--c1:#2c4f9e;--c2:#0a2450}

.grp__body{padding:26px;display:flex;flex-direction:column;gap:16px;flex:1}
.grp__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.grp__top .pill{flex:none;margin-top:2px}
.grp h3{font-size:20px;letter-spacing:-.028em}
.grp h3 a:hover{color:var(--emerald)}
.grp__spec{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.grp__spec li{display:flex;gap:11px;align-items:center;font-size:15px;color:var(--ink-70);line-height:1.45}
.grp__spec svg{width:17px;height:17px;flex:none;fill:var(--emerald)}
.grp__foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.grp__foot .act{font-size:14.5px}
.grp__foot .btn{padding:10px 18px;font-size:14px}

/* The price is the question the card exists to answer, so it gets its own
   line above the actions instead of hiding inside the specification list. */
.grp__price{
  margin:0;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  padding-top:17px;border-top:1px dashed var(--line-mid);
}
.grp__price span{font-size:13px;font-weight:500;color:var(--ink-45)}
.grp__price b{
  font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:-.042em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.grp__price i{font-style:normal;font-size:13px;color:var(--ink-45)}

.grp--pick{box-shadow:0 0 0 2px var(--gold),var(--shadow-lift)}
.grp__ribbon{
  position:absolute;z-index:2;top:15px;right:15px;
  padding:6px 13px;border-radius:99px;background:var(--gold);color:#241a02;
  font-family:var(--display);font-weight:800;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;
}

.pill{display:inline-block;padding:5px 13px;border-radius:99px;font-size:12.5px;font-weight:600;line-height:1.4}
.pill--open{background:var(--emerald-wash);color:var(--emerald)}
.pill--few{background:var(--clay-wash);color:var(--clay)}
.pill--soon{background:var(--mist-deep);color:var(--ink-45)}

.umrah__after{margin-top:clamp(30px,3.5vw,40px);display:flex;flex-wrap:wrap;gap:18px;align-items:center}

.umrah__note{
  margin:0 0 0 auto;font-size:13.5px;color:var(--ink-45);
  display:flex;gap:9px;align-items:flex-start;text-align:right;
}
@media(max-width:680px){.umrah__note{margin-left:0;text-align:left}}
.umrah__note svg{width:16px;height:16px;fill:var(--emerald);opacity:.55;flex:none;margin-top:3px}
.umrah__note b{font-weight:600;color:var(--ink-70)}

/* ------------------------------------------------------- micro assurance */

/* One quiet line under a call to action, answering the question every pilgrim
   asks before tapping: what happens to me if I do? */
.micro{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px 18px;
  margin:18px 0 0;font-size:13.5px;color:var(--ink-45);
}
.micro span{display:inline-flex;align-items:center;gap:7px}
.micro svg{width:15px;height:15px;fill:var(--emerald);opacity:.7;flex:none}
.hero .micro,.hajj27 .micro,.connect .micro{color:rgba(255,255,255,.74)}
.hero .micro svg,.hajj27 .micro svg,.connect .micro svg{fill:var(--gold);opacity:.9}
.connect .micro{margin-top:24px}

/* ------------------------------------------------------ how booking works */

/* A warm band, once. Everything above it is either the offer or the evidence
   for it; this is the only place that explains the mechanics of committing. */
.steps{
  --accent:var(--gold-deep);
  background:linear-gradient(180deg,var(--gold-wash) 0%,var(--white) 76%);
}

.flow{
  display:grid;gap:14px;margin:clamp(34px,4vw,50px) 0 0;
  grid-template-columns:1fr;list-style:none;padding:0;counter-reset:step;
}
@media(min-width:680px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.flow{grid-template-columns:repeat(4,1fr)}}

.step{
  position:relative;padding:30px 26px;border-radius:var(--r);
  background:var(--white);border:1px solid var(--line);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}

/* The hairline joining one step to the next, drawn only where there is a
   next step to join to. */
@media(min-width:1040px){
  .step::after{
    content:"";position:absolute;top:52px;right:-14px;
    width:14px;height:1px;background:var(--line-mid);
  }
  .step:last-child::after{display:none}
}

.step b{
  counter-increment:step;
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  margin-bottom:17px;background:var(--emerald-ink);color:var(--gold);
  font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.02em;
}
.step b::before{content:counter(step,decimal-leading-zero)}
.step h3{font-size:18.5px;letter-spacing:-.026em}
.step p{margin:9px 0 0;font-size:15px;color:var(--ink-70)}

.steps__after{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:clamp(30px,3.5vw,42px)}
.steps__after .micro{margin:0}

/* ------------------------------------------------------------ why makarim */

.why{--accent:var(--teal)}

.reasons{display:grid;gap:14px;margin-top:clamp(34px,4vw,50px);grid-template-columns:1fr}
@media(min-width:660px){.reasons{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.reasons{grid-template-columns:repeat(3,1fr)}}

.reason{
  padding:30px 28px;border-radius:var(--r);
  background:var(--white);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.reason:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:transparent}
.reason__mark{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--c-wash);margin-bottom:6px;
}
.reason__mark svg{width:22px;height:22px;fill:none;stroke:var(--c);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.reason h3{font-size:19.5px;letter-spacing:-.026em}
.reason p{margin:0;font-size:15.5px;color:var(--ink-70)}

.reason:nth-child(5n+1){--c:var(--emerald);--c-wash:var(--emerald-wash)}
.reason:nth-child(5n+2){--c:var(--teal);--c-wash:var(--teal-wash)}
.reason:nth-child(5n+3){--c:var(--gold-deep);--c-wash:var(--gold-wash)}
.reason:nth-child(5n+4){--c:var(--clay);--c-wash:var(--clay-wash)}
.reason:nth-child(5n+5){--c:var(--lapis);--c-wash:var(--lapis-wash)}

/* The last card turns hesitation into a question. */
.reason.reason--ask{--c:var(--emerald);--c-wash:#fff;background:var(--emerald-wash);border-color:transparent}

/* --------------------------------------------------------------- training */

.train{--accent:var(--lapis);background:var(--mist)}

.courses{display:grid;gap:14px;margin-top:clamp(34px,4vw,50px);grid-template-columns:1fr}
@media(min-width:640px){.courses{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.courses{grid-template-columns:repeat(4,1fr)}}

.course{
  position:relative;background:var(--white);border-radius:var(--r);
  padding:30px 26px;display:flex;flex-direction:column;gap:9px;
  box-shadow:var(--shadow);overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.course::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--c);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.course:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.course:hover::before{transform:scaleX(1)}
.course__mark{
  width:44px;height:44px;border-radius:13px;margin-bottom:6px;
  background:var(--c-wash);display:grid;place-items:center;
}
/* Pages that list sections without an icon get a small swatch instead. */
.course__mark:empty::after{content:"";width:13px;height:13px;border-radius:4px;background:var(--c)}
.course__mark svg{width:21px;height:21px;fill:none;stroke:var(--c);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.course h3{font-size:19px;letter-spacing:-.026em}
.course p{margin:0;flex:1;font-size:15px;color:var(--ink-70)}
.course em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--c);letter-spacing:.04em;text-transform:uppercase}

.course:nth-child(4n+1){--c:var(--emerald);--c-wash:var(--emerald-wash)}
.course:nth-child(4n+2){--c:var(--teal);--c-wash:var(--teal-wash)}
.course:nth-child(4n+3){--c:var(--gold-deep);--c-wash:var(--gold-wash)}
.course:nth-child(4n+4){--c:var(--clay);--c-wash:var(--clay-wash)}

.train__after{margin:clamp(30px,3.5vw,42px) 0 0}

/* ---------------------------------------------------------------- videos */

.videos{
  color:#fff;
  background:
    radial-gradient(90% 70% at 100% 0%,rgba(13,143,146,.34),transparent 58%),
    linear-gradient(180deg,#03241a 0%,#06422f 100%);
}
.videos h2,.videos h3{color:#fff}
.videos .lede{color:rgba(255,255,255,.66)}
.videos .eyebrow{--accent:var(--gold)}
.videos .act{color:#fff}

.topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;list-style:none;padding:0}
.topics a{
  display:block;font-size:13.5px;font-weight:500;padding:8px 18px;border-radius:99px;
  border:1px solid var(--line-mid);color:var(--ink-70);
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.topics a:hover,.topics a.on{background:var(--emerald);border-color:var(--emerald);color:#fff}

/* On the dark videos band the same component inverts. */
.videos .topics a{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.78)}
.videos .topics a:hover,
.videos .topics a.on{background:#fff;border-color:#fff;color:var(--emerald-ink)}

.play{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);background:#000}
.play img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .3s var(--ease),transform .55s var(--ease)}
.play:hover img{opacity:1;transform:scale(1.04)}
.play::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:60px;height:60px;border-radius:50%;background:#fff;
  box-shadow:0 10px 32px rgba(0,0,0,.32);transition:transform .25s var(--ease),background-color .25s var(--ease);
}
.play::before{
  content:"";position:absolute;z-index:2;left:50%;top:50%;translate:-40% -50%;
  border-style:solid;border-width:9px 0 9px 16px;
  border-color:transparent transparent transparent var(--emerald-ink);
  transition:border-color .25s var(--ease);
}
.play:hover::after{transform:scale(1.08);background:var(--gold)}
.play:hover::before{border-left-color:#fff}
.play--lg::after{width:86px;height:86px}
.play--lg::before{border-width:12px 0 12px 21px}
.play.is-playing{cursor:default}
.play.is-playing::before,
.play.is-playing::after{content:none}

.vgrid{display:grid;gap:24px;margin-top:clamp(32px,4vw,44px);grid-template-columns:1fr}
@media(min-width:620px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.vgrid{grid-template-columns:repeat(3,1fr)}}
.vgrid[hidden]{display:none}
.vgrid h3{font-size:17px;font-weight:700;line-height:1.42;margin-top:15px;letter-spacing:-.02em}
.vgrid .meta{
  margin:7px 0 0;font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold);
}

.videos__after{margin:clamp(32px,4vw,44px) 0 0}

/* The closing summary of the library: one line of context, then the count
   of everything that sits behind it. */
.figs__cap{
  margin:clamp(42px,5vw,62px) 0 0;text-align:center;
  font-size:clamp(19px,2.2vw,24px);letter-spacing:-.028em;
}
.figs{
  display:grid;gap:1px;margin:22px 0 0;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);overflow:hidden;
  grid-template-columns:repeat(2,1fr);
  list-style:none;padding:0;
}
@media(min-width:760px){.figs{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.figs{grid-template-columns:repeat(6,1fr)}}

.figs .fig{
  background:#04301f;padding:30px 20px;text-align:center;
  transition:background-color .25s var(--ease);
}
.figs .fig:hover{background:#054a31}
.figs .fig b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(34px,4.4vw,46px);line-height:1;letter-spacing:-.05em;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
.figs .fig span{display:block;margin-top:11px;font-size:13.5px;color:rgba(255,255,255,.7);line-height:1.45}

/* The same figures on the About page, on a light ground. */
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.figures .fig{padding:30px 26px 28px;border-radius:var(--r);background:var(--emerald-wash)}
.figures .fig:nth-child(3n+2){background:var(--teal-wash)}
.figures .fig:nth-child(3n+3){background:var(--gold-wash)}
.figures .fig b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(40px,6vw,72px);line-height:.9;letter-spacing:-.055em;
  color:var(--emerald);font-variant-numeric:tabular-nums;
}
.figures .fig:nth-child(3n+2) b{color:var(--teal)}
.figures .fig:nth-child(3n+3) b{color:var(--gold-deep)}
.figures .fig span{display:block;margin-top:14px;font-size:13.5px;font-weight:500;color:var(--ink-70)}
@media(max-width:639px){.figures{grid-template-columns:1fr 1fr}}

/* --------------------------------------------------------------- reviews */

.reviews{--accent:var(--clay)}

.vsays{display:grid;gap:22px;margin-top:clamp(34px,4vw,48px);grid-template-columns:1fr}
@media(min-width:680px){.vsays{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.vsays{grid-template-columns:repeat(3,1fr)}}
.vsays h3{font-size:17px;font-weight:700;line-height:1.42;margin-top:15px;letter-spacing:-.02em}
.vsays h3 a:hover{color:var(--clay)}
.vsays .meta{
  margin:7px 0 0;font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--clay);
}

/* --------------------------------------------------------------- articles */

.articles{--accent:var(--lapis);background:var(--mist)}

.cats{display:grid;gap:clamp(24px,3vw,34px);margin-top:clamp(34px,4vw,50px);grid-template-columns:1fr}
@media(min-width:760px){.cats{grid-template-columns:repeat(3,1fr)}}

.cat h3{
  font-size:16px;padding-bottom:14px;margin-bottom:6px;
  border-bottom:2px solid var(--c);
  letter-spacing:.04em;text-transform:uppercase;color:var(--c);
}
.cat h3:lang(bn){text-transform:none;letter-spacing:0;font-size:17px}
.cat:nth-child(3n+1){--c:var(--emerald)}
.cat:nth-child(3n+2){--c:var(--clay)}
.cat:nth-child(3n+3){--c:var(--lapis)}

.post-row{display:block;padding-block:17px;border-bottom:1px solid var(--line)}
.post-row h4{font-size:17px;line-height:1.45;letter-spacing:-.022em;transition:color .2s var(--ease)}
.post-row:hover h4{color:var(--c)}
.post-row time{display:block;margin-top:7px;font-size:12.5px;color:var(--ink-45)}

.cat .act{margin-top:18px;--accent:var(--c)}

/* -------------------------------------------------------------------- FAQ */

.faq{--accent:var(--emerald)}
.qs{max-width:860px;margin:clamp(34px,4vw,50px) auto 0}

.q{border-bottom:1px solid var(--line)}
.q:first-child{border-top:1px solid var(--line)}
.q summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding-block:22px;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:700;font-size:clamp(17px,1.7vw,20px);
  letter-spacing:-.024em;line-height:1.35;
  transition:color .2s var(--ease);
}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--emerald)}
.q summary::after{
  content:"";flex:none;width:13px;height:13px;margin-top:6px;
  border-right:2px solid var(--emerald);border-bottom:2px solid var(--emerald);
  rotate:45deg;transition:rotate .25s var(--ease);
}
.q[open] summary::after{rotate:-135deg}
.q p{margin:0;padding:0 44px 24px 0;font-size:16px;color:var(--ink-70);max-width:72ch}

/* ---------------------------------------------------------------- connect */

/* The form and the close are one thing: the page's single ask. The dark
   girih carries the weight of an ending, and the form stays a white card
   on top of it so nobody fills in a field on a dark ground. */
.connect{
  --accent:var(--gold);
  color:#fff;position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(80% 110% at 50% 0%,rgba(18,163,122,.36),transparent 60%),
    linear-gradient(160deg,#06452f 0%,#03241a 100%);
}
.connect__lattice{
  position:absolute;inset:0;z-index:-1;width:100%;height:100%;opacity:.16;
  mask-image:radial-gradient(90% 100% at 50% 40%,#000,transparent);
}
.connect h2{color:#fff}
.connect .lede{color:rgba(255,255,255,.72)}

.connect__in{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:1fr;align-items:start}
@media(min-width:940px){.connect__in{grid-template-columns:.92fr 1.08fr}}

/* Four ways to reach a person, set as a list ruled in gold rather than four
   cards: on a dark ground a translucent panel reads as a smudge, and the
   hairline lets the numbers themselves carry the weight. */
.lines{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid rgba(201,154,30,.32)}
.lines li{border-bottom:1px solid rgba(201,154,30,.32)}

.line{
  display:grid;grid-template-columns:22px 84px 1fr;grid-template-areas:"i k v";
  align-items:center;gap:16px;padding:17px 2px;color:#fff;
  transition:padding-left .22s var(--ease);
}
a.line:hover{padding-left:12px}
.line svg{grid-area:i;width:20px;height:20px;fill:rgba(255,255,255,.58);transition:fill .22s var(--ease)}
a.line:hover svg{fill:var(--gold)}
.line--wa svg,a.line--wa:hover svg{fill:var(--wa)}
.line__k{
  grid-area:k;font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(255,255,255,.66);
}
.line__v{
  grid-area:v;font-family:var(--display);font-weight:700;
  font-size:clamp(15.5px,1.5vw,19px);letter-spacing:-.025em;
  overflow-wrap:anywhere;transition:color .22s var(--ease);
}
a.line:hover .line__v{color:var(--gold)}

@media(max-width:560px){
  .line{grid-template-columns:22px 1fr;grid-template-areas:"i k" "i v";gap:1px 13px}
  .line__k{align-self:end}
  .line__v{align-self:start}
}

/* The form is the one thing on the page that asks something of the visitor,
   so it is raised off the band and capped in gold rather than set flat. */
.form{
  padding:clamp(26px,3vw,38px);border-radius:var(--r-lg);
  background:var(--white);box-shadow:var(--shadow-lift);color:var(--ink);
  border-top:3px solid var(--gold);
}
.form h3{font-size:clamp(21px,2.3vw,25px);letter-spacing:-.03em}
.form > p{margin:11px 0 0;font-size:15px;color:var(--ink-70)}

.fields{display:grid;gap:15px;margin-top:26px}
@media(min-width:560px){.fields{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:7px;margin:0}
.field--wide{grid-column:1/-1}
.field label{font-size:13px;font-weight:600;color:var(--ink-70)}
.field input,.field select,.field textarea{
  font:inherit;font-size:15px;color:var(--ink);width:100%;
  padding:13px 15px;border-radius:var(--r-sm);
  border:1px solid var(--line-mid);background:var(--white);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{resize:vertical;min-height:106px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-45)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px var(--emerald-wash);
}
.field select{
  appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%2368716d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px;
}

.form__go{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px}
.form__go .btn{flex:none}
.form__note{margin:0;font-size:13px;color:var(--ink-45);max-width:36ch}

/* The Stay connected band that closes pages other than the homepage. */
.connect--band{text-align:center}
.connect--band h2{font-size:clamp(30px,4.1vw,48px)}
.connect--band p{max-width:50ch;margin:20px auto 0;color:rgba(255,255,255,.72)}
.ways{display:grid;gap:11px;grid-template-columns:repeat(2,1fr);max-width:840px;margin:clamp(36px,4.5vw,52px) auto 0}
@media(min-width:720px){.ways{grid-template-columns:repeat(3,1fr)}}
.way{
  display:flex;align-items:center;justify-content:center;gap:11px;
  padding:17px 18px;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  font-weight:600;font-size:15px;color:rgba(255,255,255,.92);
  transition:background-color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.way:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff;transform:translateY(-2px)}
.way svg{width:19px;height:19px;fill:var(--gold);flex:none}

/* ------------------------------------------------------------------ about */

.about__in{display:grid;gap:clamp(34px,4.5vw,64px);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.about__in{grid-template-columns:.8fr 1.2fr}}

.about__fig{position:relative;justify-self:center;width:min(100%,400px)}
.about__fig .frame{position:absolute;inset:0;z-index:0;width:100%;height:100%}
.about__fig img{
  position:relative;z-index:1;width:min(100%,360px);margin-inline:auto;
  filter:drop-shadow(0 26px 50px rgba(12,21,18,.22));
}
.about__roles{
  margin:14px 0 0;font-size:13.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep);
}
.about__in h2{font-size:clamp(28px,3.5vw,42px)}
.about__text{margin:18px 0 0;font-size:16.5px;color:var(--ink-70);max-width:58ch}
.about__in .act{margin-top:22px}

/* ------------------------------------------------------------------ books */

.books{--accent:var(--gold-deep)}

.shelf{display:grid;gap:clamp(20px,2.6vw,28px);margin-top:clamp(34px,4vw,50px);grid-template-columns:1fr}
@media(min-width:620px){.shelf{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.shelf{grid-template-columns:repeat(3,1fr)}}

.book{
  display:flex;flex-direction:column;padding:28px;border-radius:var(--r);
  background:var(--white);border:1px solid var(--line);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.book:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:transparent}

/* A drawn spine and a shadow that falls away from it, so a flat scan of a
   cover reads as a physical object standing on a shelf. */
.book__cover{
  position:relative;display:block;width:min(100%,150px);aspect-ratio:3/4;margin-bottom:22px;
  border-radius:3px 8px 8px 3px;overflow:hidden;background:var(--mist-deep);
  box-shadow:0 14px 28px rgba(12,21,18,.2);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.book:hover .book__cover{transform:translateY(-3px) rotate(-1.2deg);box-shadow:0 20px 38px rgba(12,21,18,.26)}
.book__cover img{width:100%;height:100%;object-fit:cover}
.book__cover::after{
  content:"";position:absolute;inset:0 auto 0 0;width:9px;
  background:linear-gradient(90deg,rgba(0,0,0,.36),rgba(0,0,0,.05) 64%,rgba(255,255,255,.2));
}

.book h3{font-size:18px;line-height:1.36;letter-spacing:-.026em}
.book h3 a:hover{color:var(--gold-deep)}
.book__meta{
  margin:10px 0 0;font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep);
}
.book > p{margin:12px 0 0;flex:1;font-size:14.5px;color:var(--ink-70)}
.book__foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:auto;padding-top:17px;border-top:1px solid var(--line);
}
.book > p + .book__foot{margin-top:20px}
.book__price{
  font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.032em;
  font-variant-numeric:tabular-nums;
}
.book__price del{font-weight:500;font-size:14px;color:var(--ink-45);margin-right:6px}
.book__price ins{text-decoration:none}
.books__after{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:clamp(30px,3.5vw,42px)}
.books__after .micro{margin:0}

/* ---------------------------------------------- programme page: departures */

.departures{list-style:none;margin:0;padding:0}
.departures li{border-top:1px solid var(--line-mid)}
.departures li:last-child{border-bottom:1px solid var(--line-mid)}

.dep{
  display:grid;grid-template-columns:1fr;gap:9px 24px;align-items:center;
  padding:19px 6px;border-radius:var(--r-sm);
  transition:background-color .2s var(--ease),padding .2s var(--ease);
}
@media(min-width:780px){
  .dep{grid-template-columns:136px 1fr 132px 96px;padding-inline:10px}
  /* A Hajj season has no departure month, so the date column collapses. */
  .dep--nodate{grid-template-columns:1fr 132px 96px}
}
.dep:hover{background:var(--mist)}
@media(min-width:780px){.dep:hover{padding-left:20px}}
.dep__when b{display:block;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.028em}
.dep__when i{font-style:normal;font-size:13px;color:var(--ink-45)}
.dep__what b{display:block;font-size:16px;font-weight:600}
.dep__what span{font-size:13.5px;color:var(--ink-70)}
.dep__go{font-size:13.5px;font-weight:600;color:var(--emerald)}
@media(min-width:780px){.dep__go{text-align:right}}

@media(max-width:779px){
  .dep{
    grid-template-columns:1fr auto;
    grid-template-areas:"when go" "what what" "status status";
    gap:5px 14px;padding:18px 6px;
  }
  .dep__when{grid-area:when;display:flex;align-items:baseline;gap:7px}
  .dep__when b{font-size:16.5px}
  .dep__what{grid-area:what}
  .dep__status{grid-area:status;margin-top:6px}
  .dep__go{grid-area:go;text-align:right}
}

/* ---------------------------------------------------------------- footer */

.foot{background:var(--emerald-ink);color:rgba(255,255,255,.6);font-size:14.5px}
.foot__grid{display:grid;gap:38px;padding-block:clamp(52px,6vw,78px);grid-template-columns:1fr}
@media(min-width:640px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.foot__grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:52px}}
.foot h2{color:#fff;font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:17px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{transition:color .2s var(--ease)}
.foot a:hover{color:#fff}
.foot__brand b{font-family:var(--display);font-weight:800;color:#fff;font-size:17px;display:block;margin-bottom:11px;letter-spacing:-.025em}
.foot__brand p{margin:0;max-width:40ch}
.foot__social{display:flex;gap:9px;margin-top:20px}
.foot__social a{
  width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.foot__social a:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.12)}
.foot__social svg{width:17px;height:17px;fill:rgba(255,255,255,.75)}
.foot__base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding-block:22px;border-top:1px solid rgba(255,255,255,.1);
  font-size:13.5px;color:rgba(255,255,255,.58);
}

/* ------------------------------------------------- mobile booking bar */

/* On a phone the two actions that matter are never more than a thumb away. */
.mbar{
  position:fixed;z-index:29;inset:auto 0 0 0;display:flex;gap:9px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(14px);
  border-top:1px solid var(--line);
}
.mbar .btn{flex:1;padding:13px 12px;font-size:14px}
body:has(.mbar){padding-bottom:78px}
body.nav-open .mbar{display:none}
@media(min-width:1180px){
  .mbar{display:none}
  body:has(.mbar){padding-bottom:0}
}

/* ---------------------------------------------------------------- motion */

@keyframes rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.hero h1,.hero__line,.hero__sig,.hero__cta,.hero__figure{
  animation:rise .85s var(--ease) backwards;
}
.hero h1{animation-delay:.06s}
.hero__line{animation-delay:.14s}
.hero__sig{animation-delay:.2s}
.hero__cta{animation-delay:.27s}
.hero__figure{animation-delay:.1s}

:focus-visible{outline:2px solid var(--emerald);outline-offset:3px;border-radius:4px}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   WordPress
   ========================================================================== */

/* Bengali content — video and article titles are Bengali even though the
   interface is English. */
:lang(bn),
.is-bangla{font-family:var(--bangla);line-height:1.85}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.screen-reader-text:focus{position:static!important;width:auto;height:auto;clip-path:none}

.skip-link{
  position:absolute;left:-9999px;z-index:999;
  padding:12px 20px;background:var(--emerald-ink);color:#fff;border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0;top:0}

/* --------------------------------------------------------- menu markup */

.nav ul,.foot ul,.mobile-nav ul{list-style:none;margin:0;padding:0}
.nav li{position:relative}

.nav .sub-menu{
  position:absolute;top:100%;left:0;min-width:14rem;
  padding:8px 0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--shadow-lift);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.nav .sub-menu a{display:block;padding:8px 16px;color:var(--ink)!important;font-size:14.5px}
.nav .sub-menu a::after{display:none}
.nav .sub-menu a:hover{background:var(--mist)}

/* Off-canvas menu, opened by the burger. */
.mobile-nav{
  position:fixed;inset:var(--hdr-h,72px) 0 0;z-index:29;
  padding:24px 0 64px;background:var(--white);overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.mobile-nav.is-open{opacity:1;visibility:visible;transform:none}
.mobile-nav>.wrap>ul>li+li{border-top:1px solid var(--line)}
.mobile-nav li a{display:block;padding:15px 0;font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink)}
.mobile-nav li a:hover,.mobile-nav li a[aria-current]{color:var(--emerald)}
.mobile-nav .sub-menu a{padding-left:18px;font-family:var(--body);font-weight:450;font-size:15.5px;color:var(--ink-70)}
.mobile-nav__cta{margin-top:26px}
.mobile-nav__cta .btn{display:flex;width:100%;padding:16px 24px;font-size:16px}
body.nav-open{overflow:hidden}
body.nav-open .hdr{background:var(--white);backdrop-filter:none}
@media(min-width:1180px){.mobile-nav{display:none}}

/* ------------------------------------------------------------ page head */

.page-head{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  padding:clamp(112px,8.5vw,118px) 0 calc(40px + clamp(30px,3.2vw,44px));
  background:
    radial-gradient(70% 90% at 92% 110%,rgba(18,163,122,.32),transparent 64%),
    linear-gradient(162deg,#03241a 0%,#064a34 62%,#05584a 100%);
}

/* The lattice sits to the right, fading out before it reaches the title. */
.page-head__lattice{
  position:absolute;inset:0;z-index:-1;width:100%;height:100%;
  opacity:.12;
  mask-image:linear-gradient(100deg,transparent 30%,#000 82%);
}
@media(max-width:899px){.page-head__lattice{opacity:.07}}

.page-head__arcade{
  position:absolute;inset:auto 0 0 0;z-index:-1;width:100%;height:40px;
  color:var(--arch);opacity:.42;
}

/* Each archive carries the accent its homepage section uses, so arriving on
   /videos/ feels like the videos band you clicked from. --accent is the
   colour on white; --arch is the same hue lifted to read on the emerald. */
.page-head.is-emerald{--accent:var(--emerald);--arch:#4fd1a2}
.page-head.is-lapis{--accent:var(--lapis);--arch:#9db4f0}
.page-head.is-clay{--accent:var(--clay);--arch:#ee9a74}
.page-head.is-teal{--accent:var(--teal);--arch:#5fd3d4}
.page-head.is-gold{--accent:#a17a13;--arch:#e2b84a}

.page-head h1{
  color:#fff;max-width:20ch;
  font-size:clamp(34px,4.6vw,56px);line-height:1.04;letter-spacing:-.04em;
}
.page-head--entry h1{max-width:28ch;font-size:clamp(28px,3.6vw,46px);line-height:1.14;letter-spacing:-.032em}
.page-head h1:lang(bn){letter-spacing:0;line-height:1.3}

.page-head__intro{
  max-width:60ch;margin:14px 0 0;
  font-size:clamp(16px,1.25vw,18px);line-height:1.6;
  color:rgba(255,255,255,.78);text-wrap:pretty;
}
.page-head__intro>*{margin:0}

.page-head__count{
  display:flex;align-items:baseline;gap:9px;margin:26px 0 0;
  font-size:14.5px;color:rgba(255,255,255,.7);
}
.page-head__count b{
  font-family:var(--display);font-weight:800;font-size:clamp(24px,2.2vw,30px);
  letter-spacing:-.03em;line-height:1;color:var(--arch);
}

/* On wide screens the count moves beside the title instead of taking a row
   of its own, so the head stays short and the figure still reads first. */
@media(min-width:900px){
  .page-head__in{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:end}
  .page-head__in>*{grid-column:1}
  .page-head__in>.page-head__count{
    grid-column:2;grid-row:2 / span 3;align-self:end;
    flex-direction:column;align-items:flex-end;gap:6px;margin:0;text-align:right;
  }
  .page-head__in>.page-head__count b{font-size:clamp(40px,3.6vw,52px)}
}

.page-head__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:20px;font-size:14px;color:rgba(255,255,255,.68)}
.page-head__meta time{color:inherit}
.page-head__meta>span+span::before,.page-head__meta>time+span::before{
  content:"";display:inline-block;width:4px;height:4px;margin-right:18px;border-radius:50%;
  background:var(--arch);vertical-align:middle;
}

/* The one entrance on an inner page: the title settles as the page opens. */
.page-head h1,.page-head__intro,.page-head__count,.page-head__meta{animation:rise .7s var(--ease) backwards}
.page-head__intro{animation-delay:.08s}
.page-head__count,.page-head__meta{animation-delay:.14s}

/* The first band after a page head sits closer, so the content follows the
   title rather than floating away from it. */
.page-head+.band,.page-head+.entry,.page-head+.woocommerce-page__inner{padding-top:clamp(40px,5vw,68px)}

/* Breadcrumbs: a quiet trail above the title, with a chevron rather than a
   slash so it reads as a path and not as a fraction. */
.crumbs-nav{margin-bottom:clamp(22px,2.6vw,34px)}
.page-head .crumbs-nav{margin-bottom:clamp(14px,1.6vw,22px)}
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
  margin:0;padding:0;list-style:none;
  font-size:13.5px;color:var(--ink-45);
}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"\203A";color:var(--line-mid);font-size:15px;line-height:1}
.crumbs a{color:var(--ink-70);transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--accent,var(--emerald))}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

.page-head .crumbs,.about-hero .crumbs{color:rgba(255,255,255,.55)}
.page-head .crumbs li+li::before,.about-hero .crumbs li+li::before{color:rgba(255,255,255,.35)}
.page-head .crumbs a,.about-hero .crumbs a{color:rgba(255,255,255,.72)}
.page-head .crumbs a:hover,.about-hero .crumbs a:hover{color:#fff}
.page-head .crumbs [aria-current],.about-hero .crumbs [aria-current]{color:#fff}
.page-head :focus-visible,.about-hero :focus-visible{outline-color:#fff}

/* ------------------------------------------------------- entry content */

.entry{padding-block:clamp(40px,5vw,72px)}
.entry__thumb{margin:0 0 clamp(28px,3.5vw,44px);border-radius:var(--r);overflow:hidden}
.entry__content{max-width:44rem;margin-inline:auto;font-size:17.5px;line-height:1.78}
.entry__content>*{margin-block:0 1.2em}
.entry__content h2{margin-top:1.7em;font-size:clamp(23px,2.4vw,30px)}
.entry__content h3{margin-top:1.4em;font-size:clamp(19px,2vw,23px)}
.entry__content a{color:var(--emerald);text-decoration:underline;text-underline-offset:.18em}
.entry__content img,.entry__content figure{border-radius:var(--r)}
.entry__content figcaption{margin-top:9px;font-size:13.5px;color:var(--ink-45);text-align:center}
.entry__content ul,.entry__content ol{padding-left:1.35em}
.entry__content li{margin-bottom:.45em}
.entry__content blockquote{
  margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--gold);
  font-size:1.1em;color:var(--emerald-deep);
}
.entry__content pre{overflow-x:auto;padding:18px;background:var(--emerald-ink);color:#fff;border-radius:var(--r-sm)}
.entry__content table{width:100%;border-collapse:collapse}
.entry__content th,.entry__content td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.alignwide{max-width:min(100%,68rem)}
.alignfull{max-width:none}
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{margin-inline:auto}

.entry-foot{max-width:44rem;margin:clamp(30px,4vw,48px) auto 0;padding-top:20px;border-top:1px solid var(--line);font-size:14px}
.entry-foot a{color:var(--emerald)}

.post-nav{display:grid;gap:12px;max-width:44rem;margin:clamp(30px,4vw,48px) auto 0}
@media(min-width:640px){.post-nav{grid-template-columns:1fr 1fr}}
.post-nav a{
  display:block;padding:18px 20px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--display);font-weight:700;font-size:16px;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.post-nav a:hover{border-color:var(--emerald);transform:translateY(-2px)}
.post-nav span{display:block;margin-bottom:4px;font-family:var(--body);font-weight:450;font-size:13px;color:var(--ink-45)}

/* -------------------------------------------------------------- archive */

.card-grid{display:grid;gap:clamp(18px,2.4vw,28px);grid-template-columns:1fr}
@media(min-width:600px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.card-grid{grid-template-columns:repeat(3,1fr)}}

.card{
  display:flex;flex-direction:column;height:100%;
  background:var(--white);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card__media{aspect-ratio:3/2;overflow:hidden;background:var(--mist-deep)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.card:hover .card__media img{transform:scale(1.04)}
.card__media--logo{display:grid;place-items:center;background:var(--emerald-wash)}
.card__media--logo img{width:44%;height:auto;object-fit:contain}
.card__body{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:8px;padding:22px 22px 24px}
.card__title{font-size:18.5px;line-height:1.34;letter-spacing:-.026em}
.card__title a:hover{color:var(--emerald)}
.card__excerpt{margin:0;font-size:14.5px;color:var(--ink-70)}
.card__meta{display:flex;flex-wrap:wrap;gap:8px 14px;width:100%;margin-top:auto;padding-top:14px;font-size:13px;color:var(--ink-45)}

/* ---------------------------------------------------------- pagination */

.pagination{margin-top:clamp(34px,4vw,52px)}
.pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pagination .page-numbers{
  display:grid;place-items:center;min-width:44px;height:44px;padding-inline:12px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:14.5px;font-weight:500;
  transition:border-color .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease);
}
.pagination .page-numbers:hover{border-color:var(--emerald);color:var(--emerald)}
.pagination .current{background:var(--emerald);border-color:var(--emerald);color:#fff}

/* --------------------------------------------------------------- forms */

input[type=text],input[type=email],input[type=url],input[type=search],
input[type=tel],input[type=password],input[type=number],textarea,select{
  width:100%;padding:12px 15px;background:var(--white);
  border:1px solid var(--line-mid);border-radius:var(--r-sm);
  font-size:15.5px;transition:border-color .2s var(--ease);
}
input:focus,textarea:focus,select:focus{border-color:var(--emerald);outline:none}
button,input[type=submit],.button{
  font-family:var(--display);font-weight:700;font-size:15px;
  padding:13px 26px;border:0;border-radius:99px;
  background:var(--emerald);color:#fff;cursor:pointer;
  transition:background-color .2s var(--ease)
}
button:hover,input[type=submit]:hover,.button:hover{background:var(--emerald-deep);color:#fff}

.search-form{display:flex;gap:8px;max-width:34rem}
.search-form label{flex:1}

/* ------------------------------------------------------------ comments */

.comments{max-width:44rem;margin:clamp(34px,4vw,56px) auto 0;padding-top:26px;border-top:1px solid var(--line)}
.comments h2{font-size:22px;margin-bottom:18px}
.comment-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.comment-list ul.children{list-style:none;margin:16px 0 0 26px;padding:0;display:grid;gap:16px}
.comment-body{padding:18px 20px;background:var(--mist);border-radius:var(--r)}
.comment-meta{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13.5px;color:var(--ink-45)}
.comment-author img{border-radius:50%}

/* ----------------------------------------------------------------- 404 */

.notfound{padding-block:clamp(110px,14vw,180px) clamp(60px,8vw,110px);text-align:center}
.notfound__code{
  font-family:var(--display);font-weight:800;line-height:1;
  font-size:clamp(84px,18vw,180px);letter-spacing:-.06em;color:var(--emerald-wash);
}
.notfound h1{margin-top:-.15em}
.notfound p{max-width:34rem;margin:16px auto 0;color:var(--ink-70)}
.notfound .search-form{margin:30px auto 0}

/* ----------------------------------------------------- empty and notes */

.empty{padding-block:clamp(50px,7vw,90px);text-align:center}
.empty h2{font-size:clamp(23px,2.6vw,30px)}
.empty p{margin:14px auto 0;max-width:38ch;color:var(--ink-70)}

/* ------------------------------------------------------ image fallbacks */

/* A post with no featured image falls back to the logo, centred on a tint
   rather than stretched to fill. */
.card__media--logo{display:grid;place-items:center;background:var(--emerald-wash)}
.card__media--logo img{width:44%;max-width:120px;height:auto}

/* The video facade is a button, so it opts out of the generic button rules. */
button.play{width:100%;padding:0;border:0;border-radius:var(--r);background:#000;cursor:pointer}
button.play:hover{background:#000}

/* Category pill tones, derived from the term so a category keeps one colour. */
.pill--emerald{background:var(--emerald-wash);color:var(--emerald)}
.pill--clay{background:var(--clay-wash);color:var(--clay)}
.pill--lapis{background:var(--lapis-wash);color:var(--lapis)}
.pill--teal{background:var(--teal-wash);color:var(--teal)}
.pill--gold{background:var(--gold-wash);color:#a17a13}

/* ----------------------------------------------------------------- about */

/* The About page opens like the homepage hero, but the heading is the name:
   on a biography the person is the subject, not the offer. */
.about-hero{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  --arch:#e2b84a;
  background:
    radial-gradient(70% 80% at 84% 100%,rgba(18,163,122,.36),transparent 62%),
    linear-gradient(160deg,#03241a 0%,#064a34 58%,#05584a 100%);
}
.about-hero__lattice{
  position:absolute;inset:0;z-index:-1;width:100%;height:100%;
  opacity:.12;mask-image:linear-gradient(100deg,transparent 18%,#000 70%);
}
.about-hero__arcade{
  position:absolute;inset:auto 0 0 0;z-index:-1;width:100%;height:40px;
  color:var(--arch);opacity:.42;
}

.about-hero__in{display:grid;grid-template-columns:1fr;align-items:end;padding-top:clamp(112px,11vw,150px)}
@media(min-width:900px){.about-hero__in{grid-template-columns:1.15fr .85fr;gap:40px}}

.about-hero__copy{padding-bottom:clamp(40px,5vw,64px)}
@media(min-width:900px){.about-hero__copy{padding-bottom:calc(40px + clamp(40px,5vw,64px))}}

.about-hero h1{
  color:#fff;max-width:12ch;
  font-size:clamp(40px,5.6vw,72px);line-height:1.02;letter-spacing:-.045em;
}
.about-hero__roles{
  margin:24px 0 0;padding-left:16px;border-left:2px solid var(--gold);
  font-family:var(--display);font-weight:700;font-size:clamp(16px,1.4vw,18.5px);
  letter-spacing:-.015em;color:rgba(255,255,255,.92);
}
.about-hero__lede{
  max-width:46ch;margin:22px 0 0;
  font-size:clamp(16.5px,1.35vw,19px);line-height:1.65;color:rgba(255,255,255,.76);
  text-wrap:pretty;
}

.about-hero__figure{position:relative;justify-self:center;width:min(100%,460px)}
.about-hero__arch{
  position:absolute;z-index:0;left:50%;bottom:0;translate:-50% 0;width:100%;height:auto;
  mask-image:linear-gradient(to top,transparent 0,#000 12%);
}
.about-hero__figure img{
  position:relative;z-index:1;width:min(100%,420px);margin-inline:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.4));
}
@media(max-width:899px){.about-hero__figure{width:min(82%,360px)}}

.about-hero h1,.about-hero__roles,.about-hero__lede,.about-hero__figure{animation:rise .8s var(--ease) backwards}
.about-hero__roles{animation-delay:.08s}
.about-hero__lede{animation-delay:.14s}
.about-hero__figure{animation-delay:.06s}

/* The opening text beside the map of the ground it describes. */
.about-story__in{display:grid;gap:clamp(40px,5vw,80px);grid-template-columns:1fr;align-items:center}
@media(min-width:960px){.about-story__in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}

.about-story__text{max-width:62ch;margin:0}
.about-story__text>*:last-child{margin-bottom:0}
.about-story__text>p:first-child{
  font-family:var(--display);font-weight:500;
  font-size:clamp(20px,1.9vw,25px);line-height:1.5;letter-spacing:-.02em;color:var(--ink);
}

.reach{margin:0;max-width:400px;justify-self:center;text-align:center}
.bd-map{display:block;width:min(100%,300px);height:auto;margin-inline:auto;color:var(--emerald)}
.bd-map__land{fill:var(--emerald-wash)}
.bd-map__edge{fill:none;stroke:var(--emerald);stroke-width:1.6;stroke-linejoin:round}
.reach__title{
  margin:28px 0 0;
  font-family:var(--display);font-weight:800;font-size:clamp(24px,2.4vw,32px);
  line-height:1.15;letter-spacing:-.035em;color:var(--emerald-ink);text-wrap:balance;
}
.reach__text{margin:12px auto 0;max-width:34ch;font-size:15.5px;color:var(--ink-70)}

/* Chapters: one area of work each, text beside a photograph. The photograph
   is cut to an arch, the shape that frames the portrait above. */
.chapter{display:grid;gap:clamp(28px,4vw,72px);grid-template-columns:1fr;align-items:center}
.chapter+.chapter{margin-top:clamp(64px,8vw,112px)}
@media(min-width:900px){
  .chapter{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .chapter:nth-child(even) .chapter__figure{order:-1}
  .chapter--text{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:start}
  .chapter--text+.chapter--text{margin-top:clamp(44px,5vw,64px);padding-top:clamp(44px,5vw,64px);border-top:1px solid var(--line-mid)}
}
.chapter--text .chapter__text{display:contents}

.chapter h2{font-size:clamp(26px,2.8vw,36px);line-height:1.12}
.chapter h2:lang(bn){letter-spacing:0;line-height:1.35}
.chapter__body{max-width:58ch;font-size:17px;line-height:1.75;color:var(--ink-70)}
.chapter__text h2+.chapter__body{margin-top:18px}
.chapter--text .chapter__body{margin-top:0}
.chapter__body p{margin:0 0 1em}
.chapter__body>:last-child{margin-bottom:0}

.chapter__figure{margin:0;width:min(100%,440px);justify-self:center}
.chapter__figure img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:50% 50% var(--r) var(--r)/30% 30% var(--r) var(--r);
  background:var(--mist-deep);
}
.chapter__figure figcaption{margin-top:14px;font-size:13.5px;color:var(--ink-45);text-align:center}

/* The quote: his own words, set large with the gold rule of the signature. */
.pullquote{margin:0;max-width:30em}
.pullquote blockquote{margin:0;padding-left:clamp(20px,2.4vw,32px);border-left:3px solid var(--gold)}
.pullquote p{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(24px,3vw,38px);line-height:1.3;letter-spacing:-.03em;color:var(--emerald-ink);
  text-wrap:balance;
}
.pullquote blockquote:lang(bn) p{letter-spacing:0;line-height:1.5}
.pullquote figcaption{margin-top:20px;padding-left:clamp(20px,2.4vw,32px);font-size:15px;font-weight:600;color:var(--ink-70)}

.band--tight{padding-top:0}

/* Milestones are a real sequence, so they read as one: year, then event. */
.milestones{list-style:none;margin:clamp(28px,3.5vw,44px) 0 0;padding:0;max-width:52rem}
.milestones li{
  display:grid;grid-template-columns:5.5rem 1fr;gap:20px;
  padding-block:18px;border-top:1px solid var(--line-mid);
}
.milestones li:last-child{border-bottom:1px solid var(--line-mid)}
.milestones b{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--emerald)}
.milestones span{font-size:16.5px;color:var(--ink-70)}

/* Where to start: four rows rather than four cards, so no row is orphaned
   and the counts line up in one column. */
.paths{list-style:none;margin:clamp(28px,3.5vw,44px) 0 0;padding:0;border-top:1px solid var(--line-mid)}
.paths li{border-bottom:1px solid var(--line-mid)}
.path{
  display:grid;gap:6px 32px;grid-template-columns:1fr;align-items:baseline;
  padding:24px 0 24px 22px;position:relative;
}
@media(min-width:800px){.path{grid-template-columns:13rem minmax(0,1fr) 9rem;padding-block:28px}}
.path::before{
  content:"";position:absolute;left:0;top:28px;
  width:6px;height:24px;border-radius:3px;background:var(--c);
  transition:height .25s var(--ease);
}
@media(min-width:800px){.path::before{top:50%;translate:0 -50%;height:28px}}
.path:hover::before,.path:focus-visible::before{height:56%}
.path__title{font-family:var(--display);font-weight:800;font-size:clamp(20px,1.9vw,24px);letter-spacing:-.03em;color:var(--ink)}
.path:hover .path__title{color:var(--c)}
.path__text{font-size:15.5px;color:var(--ink-70);max-width:52ch}
.path__count{font-size:14px;color:var(--ink-45)}
@media(min-width:800px){.path__count{text-align:right}}
.path__count b{font-family:var(--display);font-weight:800;font-size:18px;color:var(--c);margin-right:4px}
.paths li:nth-child(4n+1) .path{--c:var(--emerald)}
.paths li:nth-child(4n+2) .path{--c:var(--teal)}
.paths li:nth-child(4n+3) .path{--c:var(--lapis)}
.paths li:nth-child(4n+4) .path{--c:var(--clay)}

/* ------------------------------------------------------------- programme */

.programme{display:grid;gap:clamp(28px,3.5vw,56px);grid-template-columns:1fr;align-items:start}
@media(min-width:960px){.programme{grid-template-columns:minmax(0,1fr) 340px}}

.programme__block{margin-top:clamp(34px,4vw,56px)}
.programme__block:first-child{margin-top:0}
.programme__block h2{font-size:clamp(22px,2.3vw,28px);letter-spacing:-.028em;margin-bottom:16px}
.programme__block>p{color:var(--ink-70)}

/* Included items read as a checklist, which is what they are. */
.ticklist{list-style:none;margin:0;padding:0;display:grid;gap:11px}
@media(min-width:640px){.ticklist{grid-template-columns:1fr 1fr;gap:11px 28px}}
.ticklist li{position:relative;padding-left:28px;font-size:15.5px;color:var(--ink-70)}
.ticklist li::before{
  content:"";position:absolute;left:0;top:.42em;
  width:14px;height:8px;border-left:2px solid var(--emerald);border-bottom:2px solid var(--emerald);
  transform:rotate(-45deg);
}

.aside-card{padding:28px;background:var(--mist);border-radius:var(--r);align-self:start}
@media(min-width:960px){.aside-card{position:sticky;top:110px}}
.aside-card h2{font-size:18px;letter-spacing:-.024em;margin-bottom:14px}
.aside-card__actions{display:grid;gap:10px;margin-top:22px}
.aside-card__actions .btn{text-align:center}

.spec{display:grid;gap:0;margin:0;padding:0}
.spec div{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--line)}
.spec div:last-child{border-bottom:0}
.spec dt{font-size:14px;color:var(--ink-45);flex:none}
.spec dd{margin:0;font-size:14.5px;font-weight:600;text-align:right}

.packages{display:grid;gap:14px;margin-top:clamp(24px,3vw,34px);grid-template-columns:1fr}
@media(min-width:700px){.packages{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}
.package{
  padding:26px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.package:hover{border-color:transparent;transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.package h3{font-size:19px;letter-spacing:-.026em}
.package__price{
  margin:8px 0 16px;font-family:var(--display);font-weight:800;
  font-size:25px;letter-spacing:-.035em;color:var(--emerald);
}
.package ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px;color:var(--ink-70)}
.package li{position:relative;padding-left:18px}
.package li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:2px;background:var(--gold)}

/* ------------------------------------------------------- related videos */

.related-videos{max-width:var(--wrap);margin:clamp(40px,5vw,72px) auto 0}
.related-videos h2{font-size:clamp(21px,2.2vw,27px);letter-spacing:-.028em;margin-bottom:22px}
/* The grid is shared with the dark videos band, so titles are re-coloured. */
.related-videos .vgrid{margin-top:0}
.related-videos .card__title a{color:var(--ink)}
.related-videos .card__title a:hover{color:var(--emerald)}

/* ------------------------------------------------------- video lightbox */

/* Built and destroyed by video.js. The iframe only exists while the dialog
   is open, which is also what stops playback on close. */
.vmodal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(16px,4vw,44px)}
.vmodal[hidden]{display:none}

.vmodal__backdrop{
  position:absolute;inset:0;
  background:rgba(3,36,26,.86);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s var(--ease);
}
.vmodal.is-open .vmodal__backdrop{opacity:1}

.vmodal__box{
  position:relative;width:min(100%,1080px);
  opacity:0;transform:scale(.97);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.vmodal.is-open .vmodal__box{opacity:1;transform:none}

.vmodal__frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:#000;border-radius:var(--r);box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.vmodal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.vmodal__title{
  margin:16px 2px 0;color:#fff;
  font-family:var(--display);font-weight:700;
  font-size:clamp(15px,1.5vw,18px);line-height:1.4;letter-spacing:-.02em;
}
.vmodal__title:empty,.vmodal__title[hidden]{display:none}

.vmodal__close{
  position:absolute;top:-14px;right:-8px;z-index:2;
  display:grid;place-items:center;width:44px;height:44px;padding:0;
  background:#fff;color:var(--emerald-ink);border:0;border-radius:50%;
  box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.vmodal__close:hover{background:var(--gold);color:#fff;transform:scale(1.06)}
@media(min-width:700px){.vmodal__close{top:-18px;right:-18px}}

body.vmodal-open{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .vmodal__backdrop,.vmodal__box{transition:none}
  .vmodal__box{transform:none}
}

/* --------------------------------------------------------- WooCommerce */

.woocommerce-page__inner .woocommerce-message,
.woocommerce-page__inner .woocommerce-info,
.woocommerce-page__inner .woocommerce-error{
  border-top-color:var(--emerald);border-radius:var(--r-sm);
}
.woocommerce ul.products li.product .price{color:var(--emerald);font-weight:700}
.woocommerce span.onsale{background:var(--gold)}
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background:var(--emerald);color:#fff;border-radius:99px;
  font-family:var(--display);font-weight:700;padding:13px 26px;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{background:var(--emerald-deep);color:#fff}
.woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--emerald)}