/* Fallback shown for a moment while Poppins downloads, resized to Poppins' measurements
   so text does not jump (layout shift) when the real font arrives. */
@font-face{font-family:"Poppins Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");ascent-override:105%;descent-override:35%;line-gap-override:10%}
/* Yogi Rock — page kit
   Page-level styles for inner pages (About, Services, ...) -- sections that
   exist on one page only. Sections shared across pages (backdrop, header,
   buttons, community, contact, footer) live in yr-components.css, which
   every page loads first. Values mirror the homepage's own styling. */

:root{
  --yr-magenta:#E5176B;
  --yr-pink:#FF579E;
  --yr-orange:#F7951E;
  --yr-bg:#0a0a0e;
  --yr-paper:#F4F3EF;
  --yr-white:#FFFFFF;
  --yr-muted:#b6b6c0;
  --yr-dim:#9a9aa7;
  --yr-grad:linear-gradient(96deg,#F7951E 0%,#FF579E 52%,#E5176B 100%);
  --yr-grad-btn:linear-gradient(96deg,#F7951E 0%,#E5176B 100%);
  --yr-glass-bg:rgba(255,255,255,.04);
  --yr-glass-line:1px solid rgba(255,255,255,.09);
  --yr-glass-shadow:0 18px 50px -28px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
  --yr-wrap:1240px;
  --yr-gutter:clamp(16px,4vw,40px);
  --yr-font:'Poppins','Poppins Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--yr-bg)}
body.yr-page{
  margin:0;font-family:var(--yr-font);color:var(--yr-paper);background:var(--yr-bg);
  line-height:1.3;font-size:19px;overflow-x:hidden;position:relative;
}
/* homepage scrollbar (wpkoi): 12px, black track, magenta thumb */
html:has(body.yr-page)::-webkit-scrollbar,body.yr-page::-webkit-scrollbar{width:12px}
html:has(body.yr-page)::-webkit-scrollbar-track,body.yr-page::-webkit-scrollbar-track{background:#000}
html:has(body.yr-page)::-webkit-scrollbar-thumb,body.yr-page::-webkit-scrollbar-thumb{background:var(--yr-magenta);border:2px solid transparent;background-clip:content-box}
html:has(body.yr-page)::-webkit-scrollbar-thumb:hover,body.yr-page::-webkit-scrollbar-thumb:hover{background:#fff;border:2px solid transparent;background-clip:content-box}

/* homepage cursor (kaala theme: body.wpkoi-image-cursor) */
body.yr-page{cursor:url(/wp-content/themes/kaala/img/image-cursor.png),auto}
body.yr-page a,body.yr-page button,body.yr-page summary,body.yr-page input[type="submit"]{cursor:url(/wp-content/themes/kaala/img/image-pointer.png),auto}

/* moving stars layer (homepage .wpkoi-tricks-particles-section__instance).
   Content sits above it but lets the mouse through, so the stars still react
   to hover/click like on the homepage; links and buttons stay clickable. */
[data-yr-particles]{position:relative}
.yr-particles{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden;border-radius:inherit}
[data-yr-particles] > :not(.yr-particles):not(.yr-cta__rock){position:relative;z-index:1;pointer-events:none}
[data-yr-particles] > .yr-cta__rock{z-index:1}
[data-yr-particles] a,[data-yr-particles] button{pointer-events:auto}

.yr-page img{max-width:100%;display:block}
.yr-page a{color:inherit}
.yr-wrap{padding:0 4vw}
.yr-section{padding:4vw 0}
.yr-skip{position:absolute;left:-9999px}
.yr-skip:focus{left:16px;top:16px;z-index:100;background:var(--yr-white);color:var(--yr-bg);padding:8px 14px}
:focus-visible{outline:3px solid var(--yr-orange);outline-offset:3px}

/* ---------- type ---------- */
.yr-display{font-weight:900;text-transform:uppercase;line-height:1;margin:0;font-size:clamp(46px,8vw,115px);color:var(--yr-paper)}
.yr-title{font-weight:900;text-transform:uppercase;line-height:1.05;margin:0 0 clamp(28px,4vw,48px);
  font-size:clamp(34px,5.4vw,72px);color:var(--yr-paper)}
.yr-eyebrow{display:inline-block;font-weight:700;font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--yr-orange);margin-bottom:16px}
.yr-lead{font-size:clamp(17px,1.6vw,20px);font-weight:400;line-height:1.7;max-width:860px;margin:26px 0 0;color:#c2c2cc}
.yr-lead b{color:var(--yr-paper);font-weight:600}
.yr-center{text-align:center}
.yr-center .yr-lead{margin-left:auto;margin-right:auto}

.yr-actions{display:flex;flex-wrap:wrap;gap:18px;margin-top:36px}
.yr-center .yr-actions{justify-content:center}

/* tilted label box ("GREAT SOLUTION") */
.yr-tag{display:inline-block;background:var(--yr-orange);border:2px solid #000;color:#0a0a0e;padding:6px 28.8px;
  font-weight:900;text-transform:uppercase;font-size:clamp(20px,2.4vw,34px);line-height:1.2;transform:rotate(-4deg)}

/* ---------- glass cards ---------- */
.yr-grid{display:grid;gap:26px}
.yr-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.yr-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.yr-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1000px){.yr-grid--3,.yr-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.yr-grid--3,.yr-grid--4,.yr-grid--2{grid-template-columns:1fr}}

/* homepage "GLASS CARDS" rule (index.html #yr-enhance) -- shared by every card type */
.yr-card,.yr-team__card,.yr-stat{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:20px;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  box-shadow:0 18px 50px -28px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.yr-card:hover,.yr-team__card:hover,.yr-stat:hover{
  transform:translateY(-6px);border-color:rgba(247,149,30,.45);
  box-shadow:0 28px 60px -26px rgba(229,23,107,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.yr-card{position:relative;overflow:hidden;padding:32px 28px}
.yr-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--yr-grad)}
.yr-card--pink::before{background:linear-gradient(90deg,#E5176B,#FF579E)}
.yr-card--orange::before{background:linear-gradient(90deg,#F7951E,#FFB13D)}
.yr-card--step::before{display:none}
.yr-card__icon{width:56px;height:56px;margin-bottom:18px;color:var(--yr-paper)}
.yr-card__icon svg{width:100%;height:100%;fill:currentColor}
.yr-card__step{display:block;font-size:clamp(19px,1.8vw,26px);font-weight:600;color:var(--yr-paper);margin-bottom:14px}
.yr-card h3{font-size:clamp(22px,2.2vw,32px);font-weight:900;text-transform:uppercase;line-height:1.05;margin:0 0 12px}
.yr-card p{margin:0;font-size:15.5px;line-height:1.55;color:var(--yr-muted)}

/* ---------- tilted image strip ---------- */
.yr-strip{overflow:hidden;padding:30px 0 50px;margin-top:clamp(40px,6vw,80px)}
.yr-strip__track{display:flex;gap:22px;width:max-content;transform:rotate(-3deg);animation:yr-strip 48s linear infinite}
.yr-strip__track img{width:clamp(220px,24vw,360px);aspect-ratio:4/3;object-fit:cover;border-radius:20px;border:var(--yr-glass-line)}
@keyframes yr-strip{from{transform:rotate(-3deg) translateX(0)}to{transform:rotate(-3deg) translateX(-50%)}}

/* ---------- split story ---------- */
.yr-split-row{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:900px){.yr-split-row{grid-template-columns:1fr}}
.yr-split__media{position:relative;margin-bottom:40px} /* room for the tag that hangs below the image */
.yr-split__media img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:20px;border:var(--yr-glass-line);box-shadow:0 30px 60px -28px rgba(229,23,107,.42)}
.yr-split__media .yr-tag{position:absolute;right:-10px;bottom:-22px}
@media(max-width:640px){.yr-split__media .yr-tag{right:8px}}
.yr-split-row p{margin:0 0 16px;font-size:17px;line-height:1.7;color:#c2c2cc}
.yr-split-row > *{min-width:0}
.yr-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
@media(max-width:420px){.yr-stats{gap:8px}.yr-stat span{font-size:10px;letter-spacing:.06em}}
.yr-stat{padding:16px 10px;text-align:center}
.yr-stat b{display:block;font-size:clamp(28px,3vw,40px);font-weight:900;line-height:1}
.yr-stat span{display:block;margin-top:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--yr-orange)}

/* ---------- team ---------- */
.yr-team__card{position:relative;overflow:hidden;display:flex;flex-direction:column}
.yr-team__photo{position:relative;aspect-ratio:1/1;overflow:hidden;background:#0d0b11}
.yr-team__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,14,0) 55%,rgba(12,10,16,.55) 82%,#0d0b11 100%)}
.yr-team__photo img{width:100%;height:100%;object-fit:cover}
.yr-team__name{padding:18px 24px 0}
.yr-team__name h3{margin:0;font-size:clamp(22px,2vw,28px);font-weight:900;text-transform:uppercase;line-height:1.1}
.yr-team__name span{display:inline-block;margin-top:10px;font-weight:700;letter-spacing:.1em;font-size:12px;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;color:#FF8FBE;background:rgba(229,23,107,.14);border:1px solid rgba(229,23,107,.35)}
.yr-team__card:nth-child(2) .yr-team__name span{color:#FFC06A;background:rgba(247,149,30,.14);border-color:rgba(247,149,30,.35)}
.yr-team__bio{padding:16px 24px 28px;margin:0;font-size:15.5px;line-height:1.6;color:var(--yr-muted);flex:1}

/* ---------- marquee band (homepage "Get ready for the revolution!") ---------- */
.yr-band{overflow:hidden;padding:clamp(18px,3vw,34px) 0}
.yr-band__track{display:flex;width:max-content;animation:yr-band 30s linear infinite}
.yr-band__item{flex:none;font-weight:900;text-transform:uppercase;white-space:nowrap;font-size:clamp(40px,6vw,86px);line-height:1;padding-right:.5em;color:var(--yr-magenta)}
@keyframes yr-band{to{transform:translateX(-50%)}}

/* ---------- CTA (homepage .yr-svc-synergy) ---------- */
.yr-cta{position:relative;overflow:hidden;text-align:center;border-radius:24px;border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(120deg,rgba(229,23,107,.13),rgba(247,149,30,.10));padding:clamp(42px,6vw,80px) 28px}
.yr-cta .yr-display{font-size:clamp(38px,6.5vw,96px)}
.yr-cta .yr-lead{margin-left:auto;margin-right:auto}
.yr-cta .yr-actions{justify-content:center}
.yr-cta__rock{position:absolute;right:-60px;bottom:-60px;width:clamp(140px,18vw,260px);transform:rotate(12deg);opacity:.35;pointer-events:none}

/* ---------- case studies ---------- */
.yr-stats--4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:860px;margin-top:clamp(36px,5vw,56px)}
@media(max-width:640px){.yr-stats--4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* filter chips: same pill as the team role badges */
.yr-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 clamp(28px,4vw,44px)}
.yr-filter button{font:700 12px/1 var(--yr-font);letter-spacing:.1em;text-transform:uppercase;padding:11px 18px;border-radius:999px;
  color:#FF8FBE;background:rgba(229,23,107,.14);border:1px solid rgba(229,23,107,.35);transition:background .3s,color .3s,border-color .3s}
.yr-filter button:hover{border-color:rgba(247,149,30,.6);color:#FFC06A}
.yr-filter button[aria-pressed="true"]{background:var(--yr-grad-btn);border-color:transparent;color:var(--yr-white)}
.yr-filter__empty{text-align:center;color:var(--yr-muted)}

.yr-case{padding:0;display:flex;flex-direction:column}
.yr-case[hidden]{display:none}
.yr-case__media{aspect-ratio:16/9;overflow:hidden;background:#0d0b11}
.yr-case__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.yr-case:hover .yr-case__media img{transform:scale(1.04)}
.yr-case__body{display:flex;flex-direction:column;flex:1;padding:24px 28px 28px}
.yr-case h3{font-size:clamp(22px,2vw,30px)}
.yr-case__body > p{flex:1}
.yr-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.yr-pill{font-weight:700;letter-spacing:.1em;font-size:11px;text-transform:uppercase;padding:6px 12px;border-radius:999px;
  color:#FF8FBE;background:rgba(229,23,107,.14);border:1px solid rgba(229,23,107,.35)}
.yr-pill--orange{color:#FFC06A;background:rgba(247,149,30,.14);border-color:rgba(247,149,30,.35)}
.yr-case__metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.09)}
.yr-case__metrics b{display:block;font-size:clamp(26px,2.6vw,36px);font-weight:900;line-height:1;background:var(--yr-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.yr-case__metrics span{display:block;margin-top:6px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--yr-orange)}

.yr-case__media{display:block}
.yr-case__link{align-self:flex-start;margin-top:20px;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--yr-paper);
  border-bottom:2px solid var(--yr-magenta);padding-bottom:4px;transition:color .3s,border-color .3s}
.yr-case__link:hover{color:#FFB13D;border-color:#FFB13D}

/* ---------- single case study pages (case-studies/case.template.html) ---------- */
.yr-back{display:inline-flex;gap:8px;align-items:center;margin-bottom:22px;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--yr-muted);transition:color .3s}
.yr-back:hover{color:#FFB13D}
.yr-page .yr-back{color:var(--yr-muted)}
.yr-page .yr-back:hover{color:#FFB13D}
.yr-back + .yr-eyebrow{display:block}
.yr-display--case{font-size:clamp(40px,6.4vw,96px)}
.yr-pills--hero{margin:24px 0 0}
.yr-glance h3{font-size:clamp(22px,2vw,28px)}
.yr-glance dl{margin:18px 0 0}
.yr-glance dl > div{padding:14px 0;border-top:1px solid rgba(255,255,255,.09)}
.yr-glance dt{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--yr-orange)}
.yr-glance dd{margin:6px 0 0;font-size:16px;line-height:1.5;color:var(--yr-paper)}
.yr-card .yr-card__step{color:var(--yr-orange)}
.yr-nextcase{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);padding:0;text-decoration:none;color:inherit}
.yr-nextcase img{width:100%;height:100%;min-height:220px;object-fit:cover}
.yr-nextcase__body{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,4vw,56px)}
.yr-nextcase__title{display:block;font-size:clamp(26px,3.4vw,48px);font-weight:900;text-transform:uppercase;line-height:1.05}
.yr-nextcase__go{align-self:flex-start;margin-top:22px;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--yr-paper);
  border-bottom:2px solid var(--yr-magenta);padding-bottom:4px;transition:color .3s,border-color .3s}
.yr-nextcase:hover .yr-nextcase__go{color:#FFB13D;border-color:#FFB13D}
@media(max-width:640px){.yr-nextcase{grid-template-columns:1fr}.yr-nextcase img{aspect-ratio:16/9;min-height:0}}

/* shared sections (local-css/yr-components.css) placed directly in an inner
   page get the inset the homepage Elementor wrapper gives them (4vw) */
body.yr-page .yr-community,body.yr-page .yr-contact{margin:0 4vw}


@media(prefers-reduced-motion:reduce){
  .yr-strip__track,.yr-band__track{animation:none}
  html{scroll-behavior:auto}
}


/* case study gallery: first image full width, then two side by side; empty images and an empty gallery are hidden */
.yr-gallery__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.yr-gallery__grid figure{margin:0}
.yr-gallery__grid figure:first-child{grid-column:1/-1}
.yr-gallery__grid img,.yr-gallery__grid video{display:block;width:100%;height:auto;aspect-ratio:1400/730;object-fit:cover;border-radius:20px;border:var(--yr-glass-line);box-shadow:0 30px 60px -28px rgba(229,23,107,.42)}
.yr-gallery__grid figcaption{margin-top:12px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--yr-orange)}
.yr-gallery__grid figure:has(img[src=""]),.yr-gallery__phones figure:has(img[src=""]){display:none}
.yr-gallery:not(:has(img:not([src=""]))){display:none}
@media(max-width:640px){.yr-gallery__grid{grid-template-columns:1fr;gap:18px}}

/* optional external link on a case study (hidden while its URL is empty) */
.yr-extlink:has(a[href="#"]){display:none}
.yr-page .yr-extlink .yr-case__link{display:inline-block}

/* phone screenshots (store on mobile, social profiles): a row of phone-shaped frames */
.yr-gallery__phones{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;margin-top:48px}
.yr-gallery__phones figure{margin:0;width:min(240px,calc(50% - 14px))}
.yr-gallery__phones img{display:block;width:100%;height:auto;aspect-ratio:600/1298;object-fit:cover;object-position:top;border-radius:28px;border:6px solid #16131c;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 60px -28px rgba(229,23,107,.5)}
.yr-gallery__phones figcaption{margin-top:12px;text-align:center;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--yr-orange)}
@media(max-width:640px){.yr-gallery__phones{gap:16px;margin-top:32px}.yr-gallery__phones figure{width:calc(50% - 8px)}}

/* gallery image 1 can be a looping video (…_gallery1_video): the video shows when it has a file,
   otherwise the image does */
.yr-gallery__grid video:not(:has(source)){display:none}
.yr-gallery__grid figure:has(video source) img{display:none}

/* Tap targets on phones: filter chips 44px; small text links get a larger invisible tap area */
@media(max-width:767px){
  .yr-filter button{min-height:44px}
  .yr-case__link,.yr-back{position:relative}
  .yr-case__link::after,.yr-back::after{content:"";position:absolute;inset:-12px -6px}
}

/* FAQ (About page): native <details>, styled like the site's cards */
.yr-faq{display:grid;gap:14px;max-width:880px;margin:40px auto 0}
.yr-faq__item{padding:0}
.yr-faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;
  min-height:44px;padding:20px 24px;font-weight:700;font-size:clamp(16px,1.5vw,19px);line-height:1.35;color:var(--yr-paper)}
.yr-faq__item summary::-webkit-details-marker{display:none}
.yr-faq__item summary::after{content:"+";flex:none;font-weight:900;font-size:26px;line-height:1;color:var(--yr-orange);transition:transform .3s ease}
.yr-faq__item[open] summary::after{transform:rotate(45deg)}
.yr-faq__item summary:focus-visible{outline:2px solid var(--yr-orange);outline-offset:-2px;border-radius:20px}
.yr-faq__item p{margin:0;padding:0 24px 22px}