/* Updated: 09:58 26-Aug-2026 — homepage services: 9 cards in 3 columns, chips and
   arrow-chips deleted, .svc-all-link at the foot pointing at the archive */
/* Created: 10:31 11-Aug-2026 */
/* Updated: 14:15 14-Aug-2026 — BL-019: circle palette on service card chips */
/* Updated: 15:30 21-Sep-2026 — .jci section (client meeting 21-Sep 14:52) */
/* Updated: 15:24 22-Sep-2026 — .jci becomes a one-line strip after the reviews */
/* BT2 sections B — services grid, how it works, about */

/* ---------- 4. Services showcase ---------- */
.services{padding-block:var(--sec-m)}
/* .svc-chips / .svc-chip removed 26-Aug (Sumit: "the service icons that we have on the
   top that are colorful, I think we can remove them"). Six coloured category pills that
   duplicated what the nine cards beneath them already say. Nothing else used them. */
/* THREE across since 26-Aug: the homepage now carries the same NINE services as the
   archive page, and 9 over 4 columns leaves a single orphan on the last row. Also the
   gap goes 16 -> 24: nine cards at 16px read as a contact sheet. */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-card{position:relative;display:flex;flex-direction:column;border-radius:12px;
  background:var(--surface-card);min-height:320px;overflow:hidden;
  text-decoration:none;color:inherit;border:1px solid var(--border-faint);
  transition:transform .35s var(--ease-circ),box-shadow .35s var(--ease-circ),
             border-color .35s var(--ease-circ)}
@media (hover:hover){.svc-card:hover{transform:translateY(-3px);border-color:var(--border-subtle);
  box-shadow:0 14px 34px -22px rgba(9,30,38,.45)}}
.svc-card .img-wrap{display:block}
/* Every card is a link now (before, one of eight was), so the whole tile is the target
   and the title carries the hover colour. */
.svc-card:hover .svc-body .h6{color:var(--accent)}
.svc-card .img-wrap{border-radius:12px 12px 0 0;aspect-ratio:4/3}
.svc-card .img-wrap>img{aspect-ratio:4/3}
.svc-body{display:flex;flex-direction:column;gap:8px;padding:24px;flex:1}
.svc-body .h6{display:block;letter-spacing:-.3px;transition:color .25s}
.svc-body .b3{display:block;color:var(--text-medium)}
.svc-caption{display:flex;flex-direction:column;gap:8px;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94)}
@media (hover:hover){
  .svc-card .svc-caption{transform:translateY(8px)}
  .svc-card:hover .svc-caption{transform:translateY(0)}
}
/* Sumit: "the view all services should come as a text with an arrow link at the bottom
   of these services so that then you can take them to the service archive page." It was a
   BUTTON above the grid pointing at "#services" - an anchor to the section it sat inside,
   so it did nothing at all. */
.svc-all{margin:36px 0 0;text-align:center}
.svc-all-link{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:600;
  color:var(--accent);text-decoration:none;padding-bottom:3px;
  border-bottom:1px solid var(--teal-32);transition:gap .25s var(--ease-circ),
  border-color .25s}
.svc-all-link span{transition:transform .3s var(--ease-circ)}
.svc-all-link:hover{border-bottom-color:var(--accent)}
.svc-all-link:hover span{transform:translateX(4px)}
.svc-all-link:focus-visible{outline:none;box-shadow:0 0 0 3px var(--teal-32);border-radius:4px}

@media (max-width:991px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:479px){.svc-grid{grid-template-columns:1fr}}

/* ---------- 5. How it works ---------- */
.how{padding:var(--sec-s) 0 var(--sec-m);background:var(--bg)}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:0}
.how-card{display:flex;flex-direction:column;gap:16px}
.how-card .img-wrap{aspect-ratio:4/3}
.how-num{font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:17px;
  letter-spacing:.75px;color:var(--teal-deep)}
.how-card .h5{margin-top:4px}
.how-card .b2{color:var(--text-medium);max-width:var(--measure)}
.how-cta{margin-top:64px;display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:767px){
  .how-grid{grid-template-columns:1fr;gap:40px}
  .how-cta{margin-top:40px}
}

/* ---------- 6. About Bayti ---------- */
.about{padding:var(--sec-s) 0 var(--sec-m);background:var(--bg-two)}
.about-grid{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:start}
.about-copy .h3{margin-bottom:24px}
.about-copy p{color:var(--text-medium);max-width:var(--measure-5);margin-bottom:16px}
.about-values{margin-top:40px;display:grid;gap:0}
.about-values li{display:flex;gap:16px;align-items:baseline;padding:16px 0;
  border-top:1px solid var(--ink-16)}
.about-values li::before{content:"→";color:var(--teal-deep);font-family:'IBM Plex Mono',monospace;
  font-size:13px}
.about-media{display:flex;flex-direction:column;gap:16px;position:sticky;top:120px}
.about-media .parallax{aspect-ratio:4/5}
.parallax{position:relative;overflow:hidden;border-radius:8px}
.parallax .parallax-inner{position:absolute;left:0;top:0;width:100%;height:115%;
  object-fit:cover;will-change:transform}
/* Recipe D — content-panel expansion card */
.reveal-card{position:relative;border-radius:8px;overflow:hidden;padding:12px;
  background:var(--surface-card)}
.reveal-card .img-wrap{aspect-ratio:16/10;border-radius:8px}
.reveal-panel{position:absolute;left:12px;right:12px;bottom:12px;height:64px;overflow:hidden;
  border-radius:8px;background:var(--paper-100);
  transition:height .8s cubic-bezier(.76,0,.24,1)}
.reveal-panel-inner{padding:16px;display:flex;flex-direction:column;gap:8px}
.reveal-panel .b3{color:var(--text-medium);opacity:0;transform:translateY(20px);
  transition:opacity .4s cubic-bezier(.25,.46,.45,.94),transform .4s cubic-bezier(.25,.46,.45,.94)}
.reveal-panel .b3:nth-of-type(2){transition-delay:.05s}
@media (hover:hover){
  .reveal-card:hover .reveal-panel{height:calc(100% - 24px)}
  .reveal-card:hover .reveal-panel .b3{opacity:1;transform:translateY(0);transition-delay:.45s}
  .reveal-card:hover .reveal-panel .b3:nth-of-type(2){transition-delay:.5s}
}
.about-accred{margin-top:64px;padding-top:32px;border-top:1px solid var(--ink-16)}
.about-accred .label-2{display:block;color:var(--text-medium);margin-bottom:24px}
.accred-row{display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.accred-row img{height:44px;width:auto;mix-blend-mode:multiply;opacity:.8;
  transition:opacity .3s ease,transform .3s ease}
@media (hover:hover){.accred-row img:hover{opacity:1;transform:scale(1.06)}}
/* char-scrub statement */
.scrub-chars span{opacity:.2;transition:opacity .3s linear}
.scrub-chars span.is-lit{opacity:1}
@media (max-width:991px){
  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-media{position:static}
  .accred-row{gap:24px}
  .accred-row img{height:34px}
}

/* BL-019's .arrow-chip circle colours removed 26-Aug (Sumit: "on each image we have
   arrow keys that are going like that; I want to get rid of those"). The glyph is gone
   from all nine cards, so the six colour rules that tinted it are deleted, not left
   orphaned. The whole card is the link now, which is what the arrow was hinting at. */

/* ---------- BL-018 · Circle expands into a playing video ---------- */
/* Only cards carrying [data-circle-video] AND a video that actually loaded get
   .has-video. Until the client's film lands, these cards stay exactly as they
   are — no empty frames, no placeholder footage. */
.svc-card.has-video .arrow-chip{cursor:pointer}
.svc-card.has-video .arrow-chip video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .35s ease}
.svc-card.has-video .arrow-chip{overflow:hidden;
  transition:width .55s var(--ease-circ),height .55s var(--ease-circ),
    border-radius .55s var(--ease-circ),transform .4s var(--ease-circ)}
.svc-card.has-video.is-expanded .arrow-chip{width:calc(100% - 24px);height:calc(100% - 24px);
  border-radius:8px;transform:none}
.svc-card.has-video.is-expanded .arrow-chip video{opacity:1}
.svc-card.has-video.is-expanded .arrow-chip::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#16262e00 45%,#16262e8f 100%)}
@media (prefers-reduced-motion:reduce){
  .svc-card.has-video .arrow-chip,.svc-card.has-video .arrow-chip video{transition:none}
}

/* Card-wide click target for services that have a page built. */
.svc-card{position:relative}
.svc-link{position:absolute;inset:0;z-index:4;border-radius:inherit}
.svc-card.is-linked{cursor:pointer}
.svc-card.is-linked .svc-caption h3::after{content:" \2197";color:var(--teal);font-size:.8em}
.svc-link:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* Updated: 15:24 22-Sep-2026 — JCI strip (Sumit): small coin, one line beside it, after the reviews */
.jci{padding-block:0 var(--sec-s)}
.jci-inner{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,24px);flex-wrap:wrap}
.jci-coin{flex:none;width:clamp(72px,8vw,96px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#fff6d8 0%,#f1d58a 38%,#c9a043 70%,#9c7424 100%);
  box-shadow:0 0 0 3px #e8c874,0 0 0 5px #b8923a,0 8px 20px rgba(120,90,20,.22)}
.jci-coin img{width:74%;height:auto;background:#fff;border-radius:6px;padding:3px}
.jci-line{margin:0}
.jci-since{color:var(--text-medium,#555);font-weight:400}