/* ============================================================================
   ADDED THIS ROUND. Loads last.

   The pieces added in this round, in the brand's navy, blue and Manrope: the
   file bonus, the reviewer cards in handwriting, and the last batch's feedback.
   ============================================================================ */
/* with the countries tile gone, the role takes the full row under the two counts */
.creds .cred-wide{grid-column:1 / -1}

:root{
  --hand:"Caveat",cursive;
  --mint:#F1F5FF; --mint-2:#DCE6FB; --emerald:#0145C8; --butter:#F4D27A; --forest:#0A2A6B;
  --ease:cubic-bezier(.22,.8,.3,1);
}
/* ======================================================================
   BONUS 01: the file you take home
   ====================================================================== */
.b-file .bvis{display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch;align-content:center;gap:8px;padding:26px 26px 26px 18px;
  background:linear-gradient(160deg,#DCE8FF,#F3F7FF)}
.fstack{position:relative;height:100%;min-height:340px}
.fsheet,.ftile{position:absolute;left:50%;top:50%;border-radius:14px;transition:transform .9s cubic-bezier(.18,1.2,.4,1)}
.fsheet{width:200px;height:172px;margin:-100px 0 0 -100px;padding:14px 14px 10px;background:#fff;
  border:1px solid rgb(10 42 107 / .08);box-shadow:0 18px 36px -20px rgb(10 42 107 / .45)}
.fsheet svg{display:block;width:100%;height:124px}
.fsheet span{display:block;margin-top:4px;font:600 10.5px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.fs-ln{fill:none;stroke:var(--forest);stroke-width:1.3;stroke-linejoin:round;opacity:.75}
.fs-roof{fill:rgb(1 69 200 / .16)}
.fs-wall{stroke-width:2.2}
.fs-core{fill:rgb(1 69 200 / .18);stroke:var(--emerald)}
.fs-col rect{fill:var(--forest)}
.ftile{width:196px;margin:-62px 0 0 -98px;padding:16px 16px 15px;background:var(--forest);color:#fff;
  box-shadow:0 26px 50px -20px rgb(10 42 107 / .7)}
.ftile .ext{display:inline-grid;place-items:center;width:44px;height:50px;margin:0 0 14px;border-radius:8px 16px 8px 8px;
  background:var(--emerald);font:700 11px var(--font);letter-spacing:.06em}
.ftile b{display:block;font:600 15px var(--font);letter-spacing:-.02em}
.ftile small{display:block;margin-top:3px;font-size:12px;color:rgb(255 255 255 / .66)}
/* the sheets fan out from behind the tile when the card comes into view */
.fs-3d{transform:translate(0,0) rotate(0)}
.fs-plan{transform:translate(0,0) rotate(0)}
.ftile{transform:translate(0,14px)}
.bv-file.go .fs-3d{transform:translate(-84px,-58px) rotate(-8deg)}
.bv-file.go .fs-plan{transform:translate(78px,-70px) rotate(7deg);transition-delay:.08s}
.bv-file.go .ftile{transform:translate(-4px,96px) rotate(-2deg);transition-delay:.16s}
.b-file:hover .bv-file.go .fs-3d{transform:translate(-96px,-64px) rotate(-11deg)}
.b-file:hover .bv-file.go .fs-plan{transform:translate(90px,-76px) rotate(10deg)}
@media (max-width:1180px) and (min-width:901px){
  .b-file .bvis{grid-template-columns:1fr}
  .fstack{min-height:380px}
}
.fspec{list-style:none;margin:0;padding:0;display:grid;gap:9px;align-self:center}
.fspec li{position:relative;padding:9px 12px 9px 36px;border-radius:12px;background:#fff;box-shadow:var(--soft);
  font:500 13.5px/1.3 var(--font);color:var(--forest);opacity:0;translate:14px 0;transition:opacity .5s ease,translate .5s var(--ease)}
.fspec li::before{content:"";position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;
  background:var(--emerald) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.bv-file.go .fspec li{opacity:1;translate:none}
.bv-file.go .fspec li:nth-child(2){transition-delay:.08s}.bv-file.go .fspec li:nth-child(3){transition-delay:.16s}
.bv-file.go .fspec li:nth-child(4){transition-delay:.24s}.bv-file.go .fspec li:nth-child(5){transition-delay:.32s}
.fpills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0}
.fpills li{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;font:600 12.5px var(--font);
  background:rgb(var(--base-ink-rgb) / .07);color:var(--base-ink)}
.fpills li:first-child{background:var(--emerald);color:#fff}
.fpills .live{width:7px;height:7px;border-radius:50%;background:#5BE38A}
@media (max-width:900px){
  .b-file .bvis{grid-template-columns:1fr;height:auto;padding:18px}
  .fstack{min-height:330px}
  .fsheet{width:164px;height:146px;margin:-84px 0 0 -82px;padding:11px 11px 8px}
  .fsheet svg{height:100px}
  .bv-file.go .fs-3d,.b-file:hover .bv-file.go .fs-3d{transform:translate(-62px,-52px) rotate(-7deg)}
  .bv-file.go .fs-plan,.b-file:hover .bv-file.go .fs-plan{transform:translate(62px,-60px) rotate(6deg)}
  .bv-file.go .ftile{transform:translate(0,84px) rotate(-2deg)}
}
@media (prefers-reduced-motion:reduce){
  .fsheet,.ftile,.fspec li{transition:none}
  .fspec li{opacity:1;translate:none}
}

/* ======================================================================
   PEOPLE WHO'VE WORKED WITH SHAMEER: name, role, company, then the words
   ====================================================================== */
.tslide{border-radius:30px}
.t-txt{display:flex;flex-direction:column}
.tslide .t-nm{margin:0 0 6px;font:700 46px/1 var(--hand);color:var(--emerald);letter-spacing:0}
.tslide .t-out{margin:0;font:600 16px/1.3 var(--font);letter-spacing:-.01em;color:var(--forest);background:none;-webkit-background-clip:border-box;background-clip:border-box}
.tslide .t-sub{margin:3px 0 0;font-size:14px;color:var(--mute)}
.tslide blockquote{margin:22px 0 4px;padding:24px 0 0 0;font-size:15.5px;line-height:1.65;color:var(--ink)}
.tslide blockquote::before{left:-2px;top:-6px;font:800 44px/1 var(--font);color:var(--cta)}
.tst.js .tslide.on .t-nm{animation:bc-in .8s cubic-bezier(.22,.8,.3,1) both}
.tst.js .tslide.on .t-out,.tst.js .tslide.on .t-sub{animation:bc-in .8s .06s cubic-bezier(.22,.8,.3,1) both}
@media (max-width:760px){
  .tslide .t-nm{font-size:38px}
  .tslide blockquote{margin-top:16px}
}
@media (prefers-reduced-motion:reduce){ .tst.js .tslide.on .t-nm,.tst.js .tslide.on .t-out,.tst.js .tslide.on .t-sub{animation:none} }

/* ======================================================================
   THE LAST BATCH: ten cards stood round a turning 3D ring
   ----------------------------------------------------------------------
   Without script the cards are a plain grid. engage.js adds .js, places each
   card at its angle on the ring and turns it: a step every few seconds, drag
   or swipe to spin, arrows to step. The cards facing away fade back.
   ====================================================================== */
#batch{overflow-x:clip;background:radial-gradient(620px 440px at 100% 0%,rgb(244 210 122 / .3),transparent 62%),
  radial-gradient(560px 420px at 0% 100%,rgb(220 232 255 / .8),transparent 62%),var(--ground-a)}
#batch .sec-ic{background:linear-gradient(135deg,#F4D27A,#C9A227);box-shadow:0 14px 30px -12px rgb(201 162 39 / .6)}
#batch .sec-ic svg{stroke:var(--forest)}
.batch{list-style:none;margin:0 auto;padding:0;max-width:1120px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;text-align:left}
.bq{position:relative;display:flex;flex-direction:column;padding:24px 24px 20px;border-radius:22px;background:#fff;
  border:1px solid rgb(10 42 107 / .07);box-shadow:var(--soft)}
.bq:nth-child(3n+2){background:var(--mint)}.bq:nth-child(5n){background:#FFF8E4}
.bq .stars{color:#F2A900;font-size:15px;letter-spacing:3px}
.bq .stars i{font-style:normal;color:rgb(10 42 107 / .16)}
.bq blockquote{flex:1;margin:12px 0 18px;font-size:16.5px;line-height:1.55;font-weight:500;color:var(--forest)}
.bq-by{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;margin:0;padding-top:14px;border-top:1px dashed rgb(10 42 107 / .16)}
.bq-by b{font:700 28px/1 var(--hand);color:var(--emerald);white-space:nowrap}
.bq-by span{padding:4px 10px;border-radius:999px;background:var(--mint-2);font:500 11.5px var(--font);color:#0A2A6B;white-space:nowrap}
@media (max-width:980px){ .batch{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .batch{grid-template-columns:minmax(0,1fr);gap:14px} .bq{padding:20px 20px 18px} }

/* the ring */
.ring.js{--cw:320px;--ch:300px;position:relative;height:calc(var(--ch) + 80px);perspective:1500px;perspective-origin:50% 40%;
  touch-action:pan-y;user-select:none}
.ring.js.drag{cursor:grabbing}
.ring.js .batch{display:block;position:absolute;left:50%;top:30px;width:var(--cw);height:var(--ch);margin:0 0 0 calc(var(--cw) / -2);
  max-width:none;transform-style:preserve-3d;will-change:transform}
.ring.js .bq{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity}
.ring.js .bq.front{box-shadow:0 2px 4px rgb(10 42 107 / .05),0 34px 60px -24px rgb(10 42 107 / .42)}
/* a soft floor under the ring */
.ring.js::after{content:"";position:absolute;left:50%;bottom:6px;width:min(900px,90%);height:46px;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgb(10 42 107 / .16),transparent);pointer-events:none}
@media (max-width:640px){ .ring.js{--cw:262px;--ch:290px;perspective:1100px} }

/* ======================================================================
   FOOTER: the logo, the line about the academy, and the contact column.
   Light, so the logo's dark mark reads.
   ====================================================================== */
.site-footer.ft{margin:0 16px 16px;padding:48px clamp(24px,5vw,64px) 30px;border-radius:32px;background:#E8EEF3;
  display:grid;grid-template-columns:1.4fr 1fr auto;gap:36px 48px;align-items:start}
.ft-logo{display:block;width:340px;max-width:100%;height:auto;margin:0 0 18px}
.ft .blurb{font-size:15px;line-height:1.6;color:#4A5568;max-width:36ch}
.ft-h{margin:0 0 16px;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.ft-contact ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:15px;color:#2B3445}
.ft-contact a{font-size:15px;color:#2B3445}
.ft-contact li:first-child a{color:var(--cta)}
.ft nav{flex-direction:column;gap:12px;padding-top:31px}
.ft .legal{grid-column:1 / -1;margin:6px 0 0;padding-top:20px;border-top:1px solid rgb(10 42 107 / .1)}
@media (max-width:900px){ .site-footer.ft{grid-template-columns:1fr 1fr} .ft-brand{grid-column:1 / -1} .ft nav{padding-top:31px} }
@media (max-width:560px){
  .site-footer.ft{margin:0 8px 8px;grid-template-columns:1fr;gap:28px;padding:34px 22px 24px;border-radius:24px}
  .ft nav{flex-direction:row;flex-wrap:wrap;gap:12px 22px;padding-top:0}
  .ft-logo{width:270px}
}

/* ======================================================================
   HERO: plain and centred on the light canvas, nothing beside it
   ====================================================================== */
.hero-wrap.hero-plain{margin:0;border-radius:0;background:none;isolation:auto}
.hero-wrap.hero-plain::before{display:none}
.hero-plain .hero{max-width:1120px;padding-top:96px;padding-bottom:110px}
.hero-plain h1{font-size:clamp(36px,4.1vw,78px);line-height:1.04}
@media (max-width:760px){ .hero-plain .hero{padding-top:40px;padding-bottom:64px} .hero-plain h1{font-size:33px} }
/* ======================================================================
   THE BUILD IN COLOUR. Each step has its own colour (engage.js sets
   data-step on .build); the frame's wash, the card's icon and ticks, and the
   giant G+5 all take it, and blend from one to the next as you scroll. The
   step tabs each keep their own colour.
   ====================================================================== */
@property --sc{syntax:'<color>';inherits:true;initial-value:#0EA5E9}
.build{--sc:#0EA5E9;transition:--sc .9s ease}
.build[data-step="1"]{--sc:#0EA5E9}
.build[data-step="2"]{--sc:#0145C8}
.build[data-step="3"]{--sc:#0D9488}
.build[data-step="4"]{--sc:#7C3AED}
.build[data-step="5"]{--sc:#16A34A}
.build-frame{background:
  radial-gradient(760px 520px at 70% 38%,color-mix(in srgb,var(--sc) 17%,transparent),transparent 70%),
  radial-gradient(520px 420px at 0% 100%,color-mix(in srgb,var(--sc) 10%,transparent),transparent 70%),
  #F4F5F7}
.bc-k{color:var(--sc)}
.bc-ic{background:var(--sc);box-shadow:0 12px 24px -10px color-mix(in srgb,var(--sc) 70%,transparent)}
.bcard li::before{background:var(--sc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.500l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.build-word span{-webkit-text-stroke-color:color-mix(in srgb,var(--sc) 18%,transparent);
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--sc) 22%,transparent),color-mix(in srgb,var(--sc) 7%,transparent))}

/* the tabs: each step its own colour once it's reached */
.bstep2:nth-child(1){--tc:#0EA5E9}.bstep2:nth-child(2){--tc:#0145C8}.bstep2:nth-child(3){--tc:#0D9488}
.bstep2:nth-child(4){--tc:#7C3AED}.bstep2:nth-child(5){--tc:#16A34A}
.bstep2 i::after,.bstep2.done i::after{background:var(--tc)}
.bstep2.done small,.bstep2.on small{color:var(--tc);opacity:1}
.bstep2.on{color:var(--tc);background:#fff;
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--tc) 50%,transparent) inset,0 18px 34px -16px color-mix(in srgb,var(--tc) 65%,transparent)}

/* the building: sky glass, teal slab edges, warm fittings */
.build-art .glass{fill:rgb(56 189 248 / .22);stroke:rgb(14 165 233 / .6)}
.build-art .glass-l{fill:rgb(56 189 248 / .3)}
.build-art .mul{stroke:rgb(14 165 233 / .6)}
.build-art .sl .r{fill:#8FD3CB}.build-art .sl .l{fill:#B9E6E0}
.build-art .chair .t{fill:#F59E7B}.build-art .chair .r{fill:#E26D45}.build-art .chair .l{fill:#C9572F}

/* the review badge, filled */
.rev-badge{background:#16A34A;border-color:#16A34A;color:#fff;box-shadow:0 14px 30px -12px rgb(22 163 74 / .6)}
.rev-badge svg{stroke:#fff}