/* /portfolio/bubble-shooter-game-development-ios-android — AISHTMLNEWDESIGN-478
   Page-owned styles. EVERY selector is scoped to #page-portfolio-bubble-shooter-game-development-ios-android or a
   pbsg- prefixed class: this sheet must never style body, a bare
   element, #ais-header or #ais-footer. The document reset
   (html,body{margin:0}) is owned by the shared layout sheet.
   Font is Inter; no body/UI text below 16px. */

/* ===========================================================================
   VISUAL DIRECTION — "SPRITE SHEET"
   A Unity animation sheet: ink field, bone paper, one lime key colour, every
   feature a numbered frame in a strip. Nothing loops or self-starts (rule 26);
   motion is hover/focus only.
   =========================================================================== */

#page-portfolio-bubble-shooter-game-development-ios-android{
  --pb-ink:#0d1117;
  --pb-ink-2:#161d26;
  --pb-paper:#f4f2ec;
  --pb-frame:#ffffff;
  --pb-lime:#9ede3a;          /* key colour, used on ink only */
  --pb-lime-ink:#3f6410;      /* AA-safe lime-family text on paper */
  --pb-text:#12181f;
  --pb-text-2:#39434f;
  --pb-onink:#f5f7f9;
  --pb-onink-2:#c2cbd5;
  --pb-rule:#dcd7cc;
  font-family:"Inter",system-ui,sans-serif;
  font-size:16px;line-height:1.6;color:var(--pb-text);background:var(--pb-paper);
}
#page-portfolio-bubble-shooter-game-development-ios-android *,
#page-portfolio-bubble-shooter-game-development-ios-android *::before,
#page-portfolio-bubble-shooter-game-development-ios-android *::after{box-sizing:border-box;}

.pbsg-wrap{max-width:1200px;margin-inline:auto;padding-inline:24px;}
#page-portfolio-bubble-shooter-game-development-ios-android :focus-visible{
  outline:3px solid var(--pb-lime);outline-offset:3px;border-radius:2px;
}

/* ---------- Button ---------- */
.pbsg-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 34px;font:inherit;font-size:17px;font-weight:700;
  border:0;border-radius:3px;cursor:pointer;
  transition:transform .16s ease,background-color .16s ease;
}
.pbsg-btn--lime{background:var(--pb-lime);color:#0d1117;}
.pbsg-btn--lime:hover{background:#aeea55;transform:translateY(-2px);}
.pbsg-btn--lime:active{transform:translateY(0);}

/* ---------- Hero — rule 24: full-bleed, image-free, STATIC ---------- */
.pbsg-hero{
  width:100%;padding:clamp(72px,9vw,124px) 24px clamp(60px,7vw,96px);
  background:linear-gradient(180deg,var(--pb-ink) 0%,var(--pb-ink-2) 100%);
  color:var(--pb-onink);border-bottom:6px solid var(--pb-lime);
}
.pbsg-hero__inner{max-width:900px;margin-inline:auto;text-align:center;}
.pbsg-hero__eyebrow{
  margin:0 0 18px;font-size:16px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--pb-lime);
}
.pbsg-hero__h1{
  margin:0 0 22px;font-size:clamp(38px,5vw,66px);line-height:1.06;
  font-weight:800;letter-spacing:-.02em;color:#fff;text-wrap:balance;
}
.pbsg-hero__lede{margin:0 auto 34px;max-width:780px;font-size:clamp(17px,1.5vw,19px);line-height:1.75;color:var(--pb-onink);}

/* ---------- Breadcrumb ---------- */
.pbsg-crumb{background:var(--pb-frame);border-bottom:1px solid var(--pb-rule);}
.pbsg-crumb__list{display:flex;flex-wrap:wrap;gap:8px;align-items:center;list-style:none;margin:0;padding:16px 0;font-size:16px;color:var(--pb-text-2);}
.pbsg-crumb__list li+li::before{content:"/";margin-right:8px;color:var(--pb-rule);}
.pbsg-crumb__list a{color:var(--pb-lime-ink);font-weight:600;}
.pbsg-crumb__list a:hover{text-decoration:underline !important;}
.pbsg-crumb__list li[aria-current]{font-weight:600;color:var(--pb-text);}

/* ---------- Sections ---------- */
.pbsg-sec{padding:clamp(56px,7vw,96px) 0;}
.pbsg-sec--paper{background:var(--pb-paper);color:var(--pb-text);}
.pbsg-sec--ink{background:var(--pb-ink);color:var(--pb-onink);}
.pbsg-h2{margin:0 0 26px;font-size:clamp(30px,3.6vw,46px);line-height:1.12;font-weight:800;letter-spacing:-.015em;}
.pbsg-sec--ink .pbsg-h2{color:#fff;}
.pbsg-intro{margin:0 0 28px;max-width:900px;font-size:17px;line-height:1.75;}
.pbsg-sec--ink .pbsg-intro{color:var(--pb-onink);}
.pbsg-sec--paper p{color:var(--pb-text);}

/* ---------- About split ---------- */
.pbsg-split{display:grid;gap:40px;grid-template-columns:1.15fr .85fr;align-items:start;}
.pbsg-split__copy p{margin:0 0 18px;font-size:17px;line-height:1.78;}
/* Play-store link sitting beside the CTA. Outlined so the lime CTA stays the
   primary action and this reads as the secondary destination it is. Carries NO
   btn or cta class on purpose -- see the note in the HTML. */
.pbsg-store{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 28px;
  font-size:17px;font-weight:700;color:var(--pb-text);
  background:transparent;border:2px solid var(--pb-ink);border-radius:3px;
  transition:background-color .16s ease,color .16s ease,transform .16s ease;
}
.pbsg-store:hover{background:var(--pb-ink);color:#fff;transform:translateY(-2px);}
.pbsg-store:active{transform:translateY(0);}
.pbsg-split__shot{margin:0;}
.pbsg-split__shot img{display:block;width:100%;height:auto;border-radius:4px;border:1px solid var(--pb-rule);background:var(--pb-frame);}

/* ---------- Band art ---------- */
/* ---------- Media section: artwork BESIDE the copy ----------------------
   These four images are 1331x1238 -- essentially square. The previous treatment
   stretched them to full width and then capped the height at 340px with
   object-fit:cover, which discarded roughly 70% of each picture and sliced
   straight through the device mockups. A near-square image cannot be a
   full-bleed band without being destroyed.
   They now sit in their own column beside the copy, at natural aspect ratio,
   with NO object-fit and NO height cap -- nothing is cropped. */
.pbsg-media{display:grid;gap:40px;grid-template-columns:1.4fr .6fr;align-items:start;}
.pbsg-media__copy{min-width:0;}
.pbsg-media__shot{margin:0;position:sticky;top:96px;}
.pbsg-media__shot img{
  display:block;width:100%;height:auto;      /* natural aspect, never cropped */
  border-radius:4px;background:var(--pb-frame);
}
.pbsg-sec--ink .pbsg-media__shot img{background:rgba(255,255,255,.04);}

/* ---------- Frame strip (the sprite-sheet motif) ---------- */
.pbsg-frames{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));counter-reset:pbsgframe;}
.pbsg-frame{
  position:relative;display:flex;gap:14px;align-items:flex-start;
  padding:20px 20px 20px 18px;border-radius:3px;
  background:var(--pb-frame);border:1px solid var(--pb-rule);
  font-size:17px;line-height:1.7;color:var(--pb-text);
}
.pbsg-sec--ink .pbsg-frame{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.11);color:var(--pb-onink);}
.pbsg-frame__mark{counter-increment:pbsgframe;flex:0 0 auto;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:2px;background:var(--pb-lime);color:#0d1117;font-weight:800;font-size:15px;}
.pbsg-frame__mark::before{content:counter(pbsgframe,decimal-leading-zero);}
.pbsg-frame__t a{color:var(--pb-lime-ink);font-weight:700;text-decoration:underline !important;}
.pbsg-sec--ink .pbsg-frame__t a{color:var(--pb-lime);}

/* ---------- Projects ---------- */
.pbsg-projects{list-style:none;margin:0;padding:0;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.pbsg-proj__a{display:flex;flex-direction:column;height:100%;background:var(--pb-frame);border:1px solid var(--pb-rule);border-radius:4px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;}
.pbsg-proj__a:hover{transform:translateY(-4px);box-shadow:0 18px 36px -20px rgba(0,0,0,.6);}
.pbsg-proj__shot{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--pb-ink-2);}
.pbsg-proj__shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .28s ease;}
.pbsg-proj__a:hover .pbsg-proj__shot img{transform:scale(1.04);}
.pbsg-proj__t{display:block;padding:18px 20px 20px;font-size:19px;font-weight:700;color:var(--pb-text);}

/* ---------- Success stories ---------- */
.pbsg-stories{list-style:none;margin:0;padding:0;display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));}
.pbsg-story{display:flex;flex-direction:column;gap:16px;background:var(--pb-frame);border:1px solid var(--pb-rule);border-radius:4px;padding:18px;}
.pbsg-vid{position:relative;display:block;width:100%;padding:0;border:0;border-radius:3px;overflow:hidden;cursor:pointer;background:var(--pb-ink-2);aspect-ratio:16/9;}
.pbsg-vid img{display:block;width:100%;height:100%;object-fit:cover;}
.pbsg-vid__play{position:absolute;inset:0;margin:auto;width:60px;height:60px;border-radius:50%;background:rgba(13,17,23,.78);border:2px solid var(--pb-lime);transition:background-color .16s ease;}
.pbsg-vid__play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--pb-lime);}
.pbsg-vid:hover .pbsg-vid__play{background:var(--pb-ink);}
.pbsg-story__frame{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:3px;}
.pbsg-story__q{margin:0;}
.pbsg-story__q p{margin:0;font-size:16px;line-height:1.72;color:var(--pb-text);}
.pbsg-more{margin:30px 0 0;}
.pbsg-more a{font-size:17px;font-weight:700;color:var(--pb-lime-ink);text-decoration:underline !important;}

/* ---------- Area We Serve ---------- */
.pbsg-regions{list-style:none;margin:0;padding:0;display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.pbsg-region{padding:24px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);border-radius:3px;}
.pbsg-region h3{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:18px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;}
.pbsg-region__tel{display:inline-block;margin-bottom:10px;font-size:18px;font-weight:700;color:var(--pb-lime);}
.pbsg-region__tel:hover{text-decoration:underline !important;}
.pbsg-region p{margin:0;font-size:16px;line-height:1.7;color:var(--pb-onink-2);}

/* ---------- CTA modal ----------------------------------------------------
   Geometry from /about-us (.au-modal) and the AISHTMLNEWDESIGN-476 fix: the
   overlay scrolls, the panel has NO max-height, and the iframe uses min-height
   so it grows to whatever form_embed.js reports. A fixed vh height inside a
   capped, non-scrolling overlay clips the form and puts SUBMIT out of reach. */
.pbsg-modal{
  position:fixed;inset:0;z-index:9999;display:none;
  align-items:flex-start;justify-content:center;
  padding:20px;overflow-y:auto;background:rgba(8,11,14,.72);
}
.pbsg-modal.is-open{display:flex;}
.pbsg-modal__box{
  position:relative;width:100%;max-width:620px;margin:auto;
  background:#fff;border-radius:16px;
  box-shadow:0 30px 80px -30px rgba(8,11,14,.7);
  overflow:hidden;
}
.pbsg-modal__x{
  position:absolute;top:12px;right:12px;z-index:2;
  width:44px;height:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--pb-text);
  border:1px solid var(--pb-rule);border-radius:50%;cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}
.pbsg-modal__x:hover{background:var(--pb-ink);color:#fff;border-color:var(--pb-ink);}
.pbsg-modal__box iframe{display:block;width:100%;min-height:860px;border:0;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .pbsg-split{grid-template-columns:1fr;gap:28px;}
  .pbsg-media{grid-template-columns:1fr;gap:28px;}
  .pbsg-media__shot{position:static;max-width:460px;}
  .pbsg-frames{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .pbsg-hero{padding-top:56px;padding-bottom:50px;}
  .pbsg-region{padding:20px;}
}
@media (prefers-reduced-motion:reduce){
  #page-portfolio-bubble-shooter-game-development-ios-android *,
  #page-portfolio-bubble-shooter-game-development-ios-android *::before,
  #page-portfolio-bubble-shooter-game-development-ios-android *::after{
    animation:none !important;transition-duration:.01ms !important;
  }
}

/* ---------- Per-section CTA row (AISHTMLNEWDESIGN-478, user request) --------
   One CTA per section, every label unique page-wide -- rule 25. The row sits
   at the end of the section's own wrap so it inherits that section's ground. */
.pbsg-cta-row{margin-top:clamp(28px,3.5vw,44px);display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
.pbsg-sec--ink .pbsg-cta-row,
.pbsg-sec--paper .pbsg-cta-row{display:flex;}
.pbsg-cta-row .pbsg-btn{text-decoration:none;}
/* On the bone-paper sections the lime fill needs a darker edge to hold its
   shape against a light ground; on ink it already separates. */
.pbsg-sec--paper .pbsg-cta-row .pbsg-btn--lime{box-shadow:inset 0 0 0 1px rgba(13,17,23,.18);}
@media (max-width:640px){
  .pbsg-cta-row{margin-top:26px;}
  .pbsg-cta-row .pbsg-btn,
  .pbsg-cta-row .pbsg-store{width:100%;}
}