/* /portfolio/3d-running-game — AISHTMLNEWDESIGN-477
   Direction: FAIRWAY LANES.
   Page-owned styles. EVERY selector is scoped to #page-portfolio-3d-running-game or a
   p3rg- 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. */

#page-portfolio-3d-running-game{
  --p3rg-ink:#0d1f16;
  --p3rg-ink-2:#14301f;
  --p3rg-turf:#1b6b41;
  --p3rg-spray:#3ad2bf;
  --p3rg-flag:#f2b134;
  --p3rg-bone:#f5f8f3;
  --p3rg-line:#d8e3d6;
  --p3rg-body:#2c3b32;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--p3rg-body);
}

.p3rg-wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ── hero — rule 24: flat static gradient, no image, centred column ───── */
.p3rg-hero{
  background:linear-gradient(160deg,var(--p3rg-ink) 0%,var(--p3rg-ink-2) 48%,var(--p3rg-turf) 100%);
  padding:88px 24px 96px;
}
.p3rg-hero__inner{max-width:900px;margin:0 auto;text-align:center;}
.p3rg-hero__eyebrow{
  margin:0 0 20px;font-size:16px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--p3rg-spray);
}
.p3rg-hero__h1{
  margin:0 0 24px;font-size:clamp(38px,5.4vw,62px);line-height:1.08;
  font-weight:800;letter-spacing:-.02em;color:#fff;
}
.p3rg-hero__lede{
  margin:0 auto 34px;max-width:820px;font-size:18px;line-height:1.72;
  color:rgba(255,255,255,.86);
}

/* ── CTA — rule 25: one per section, unique label ─────────────────────── */
.p3rg-cta{
  display:inline-block;padding:15px 38px;border-radius:2px;
  font-size:17px;font-weight:700;letter-spacing:.01em;
  background:var(--p3rg-flag);color:var(--p3rg-ink)!important;
  border:2px solid var(--p3rg-flag);
  transition:background .18s ease,color .18s ease;
}
.p3rg-cta:hover,.p3rg-cta:focus-visible{background:transparent;color:var(--p3rg-flag)!important;}
.p3rg-cta--ghost{
  background:transparent;border-color:var(--p3rg-turf);
  color:var(--p3rg-turf)!important;
}
.p3rg-cta--ghost:hover,.p3rg-cta--ghost:focus-visible{
  background:var(--p3rg-turf);color:#fff!important;
}
/* One CTA closes every section. The row is the section's own full width so the
   button sits on the band's left rule, not tucked inside a copy column. */
.p3rg-ctarow{margin:40px 0 0;}

/* ── breadcrumb ───────────────────────────────────────────────────────── */
.p3rg-crumb{background:var(--p3rg-bone);border-bottom:1px solid var(--p3rg-line);padding:16px 0;}
.p3rg-crumb__list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;font-size:16px;}
.p3rg-crumb__list li+li::before{content:"/";margin-right:8px;color:#9bab9f;}
.p3rg-crumb__list a{color:var(--p3rg-turf)!important;}
.p3rg-crumb__list a:hover{text-decoration:underline!important;}
.p3rg-crumb__list li[aria-current]{color:#6d7d72;}

/* ── bands ────────────────────────────────────────────────────────────── */
.p3rg-band{padding:76px 0;}
.p3rg-band--bone{background:var(--p3rg-bone);}
.p3rg-band--ink{background:var(--p3rg-ink);}
.p3rg-band--turf{background:linear-gradient(180deg,var(--p3rg-turf) 0%,var(--p3rg-ink-2) 100%);}

.p3rg-lane{
  margin:0 0 12px;font-size:16px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--p3rg-spray);
}
.p3rg-band--bone .p3rg-lane{color:var(--p3rg-turf);}

.p3rg-h2{
  margin:0 0 26px;font-size:clamp(28px,3.4vw,40px);line-height:1.18;
  font-weight:800;letter-spacing:-.01em;color:var(--p3rg-ink);
  padding-left:18px;border-left:5px solid var(--p3rg-flag);
}
.p3rg-band--ink .p3rg-h2,.p3rg-band--turf .p3rg-h2{color:#fff;}

.p3rg-p{margin:0 0 20px;font-size:18px;line-height:1.78;}
.p3rg-band--ink .p3rg-p{color:rgba(255,255,255,.84);}
.p3rg-p--close{margin-top:34px;max-width:900px;}
.p3rg-link{color:var(--p3rg-turf)!important;font-weight:600;border-bottom:1px solid currentColor;}
.p3rg-band--ink .p3rg-link{color:var(--p3rg-spray)!important;}

/* ── split rows ───────────────────────────────────────────────────────── */
.p3rg-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.p3rg-split--flip .p3rg-split__copy{order:2;}
.p3rg-split__copy>*:last-child{margin-bottom:0;}
.p3rg-shot{margin:0;}
.p3rg-shot img{display:block;width:100%;height:auto;border-radius:4px;}

/* ── feature list ─────────────────────────────────────────────────────── */
.p3rg-list{margin:0;padding:0;list-style:none;}
.p3rg-list li{
  position:relative;padding:0 0 18px 34px;margin-bottom:18px;
  font-size:18px;line-height:1.66;color:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.p3rg-list li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}
.p3rg-list li::before{
  content:"";position:absolute;left:0;top:9px;width:16px;height:3px;
  background:var(--p3rg-spray);
}

/* ── numbered benefit grid ────────────────────────────────────────────── */
.p3rg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:0;padding:0;list-style:none;}
.p3rg-card{
  background:#fff;border:1px solid var(--p3rg-line);border-top:4px solid var(--p3rg-turf);
  border-radius:3px;padding:26px 24px;font-size:17px;line-height:1.6;font-weight:500;
  color:var(--p3rg-ink);
}
.p3rg-card__n{
  display:block;margin-bottom:12px;font-size:16px;font-weight:800;
  letter-spacing:.12em;color:var(--p3rg-flag);
}

/* ── project cards (not CTAs — no btn/cta class) ──────────────────────── */
.p3rg-projs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:0;padding:0;list-style:none;}
.p3rg-proj{display:block;position:relative;border-radius:4px;overflow:hidden;background:var(--p3rg-ink-2);}
.p3rg-proj img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;opacity:.88;transition:opacity .2s ease;}
.p3rg-proj:hover img,.p3rg-proj:focus-visible img{opacity:1;}
.p3rg-proj__name{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding:22px 18px;text-align:center;font-size:20px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,rgba(13,31,22,0) 45%,rgba(13,31,22,.9) 100%);
}

/* ── testimonials ─────────────────────────────────────────────────────── */
.p3rg-stories{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px;margin:0;padding:0;list-style:none;}
.p3rg-story{background:#fff;border:1px solid var(--p3rg-line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;}
.p3rg-vid{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:var(--p3rg-ink);line-height:0;
}
.p3rg-vid img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}
.p3rg-vid__play{
  position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;
  border-radius:50%;background:var(--p3rg-spray);
}
.p3rg-vid__play::after{
  content:"";position:absolute;left:25px;top:20px;
  border-style:solid;border-width:12px 0 12px 19px;
  border-color:transparent transparent transparent var(--p3rg-ink);
}
.p3rg-vid:hover .p3rg-vid__play,.p3rg-vid:focus-visible .p3rg-vid__play{background:var(--p3rg-flag);}
.p3rg-story__frame{display:block;width:100%;aspect-ratio:16/9;border:0;}
.p3rg-story__quote{margin:0;padding:24px;font-size:17px;line-height:1.7;}

/* ── area we serve ────────────────────────────────────────────────────── */
.p3rg-areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin:0;padding:0;list-style:none;}
.p3rg-area{border-top:3px solid var(--p3rg-spray);padding-top:20px;}
.p3rg-area__h{margin:0 0 12px;font-size:17px;font-weight:800;letter-spacing:.12em;color:#fff;}
.p3rg-area__tel{display:inline-block;margin-bottom:10px;font-size:18px;font-weight:700;color:var(--p3rg-flag)!important;}
.p3rg-area__tel:hover{text-decoration:underline!important;}
.p3rg-area__addr{margin:0;font-size:16px;line-height:1.66;color:rgba(255,255,255,.82);}

/* dark bands: the outline variant would vanish, so the amber fill always wins */
.p3rg-band--ink .p3rg-ctarow .p3rg-cta,
.p3rg-band--turf .p3rg-ctarow .p3rg-cta{
  background:var(--p3rg-flag);border-color:var(--p3rg-flag);color:var(--p3rg-ink)!important;
}
.p3rg-band--ink .p3rg-ctarow .p3rg-cta:hover,
.p3rg-band--ink .p3rg-ctarow .p3rg-cta:focus-visible,
.p3rg-band--turf .p3rg-ctarow .p3rg-cta:hover,
.p3rg-band--turf .p3rg-ctarow .p3rg-cta:focus-visible{
  background:transparent;color:var(--p3rg-flag)!important;
}

/* ── CTA modal — shared shell, identical on every CTA page ──────────────────
   Replicated from /about-us, which took it from
   /case-study/dicemasters-backgammon-platform-case-study via design-clone's
   extract_design.py. Values are PINNED, not re-tuned per page: the Get In
   Touch form must present the same on every URL, so this shell deliberately
   does NOT inherit FAIRWAY LANES' turf ink, type scale or 4px radius.
   The first cut of this page did re-tune it — that was the defect. */
#page-portfolio-3d-running-game .p3rg-modal{
  color:#2c2419;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.72;
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding: 100px 20px 20px 20px;
  overflow-y:auto;
  background:rgba(20,13,7,.72);
}

#page-portfolio-3d-running-game .p3rg-modal.is-open{display:flex;}

#page-portfolio-3d-running-game .p3rg-modal__box{
  /* Pinned so the panel does not inherit each page's own type scale or ink —
     the enquiry shell must present identically on every URL. */
  color:#2c2419;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.72;
  position:relative;
  width:100%;
  max-width:620px;
  margin:auto;
  border-radius:16px;
  background:#fff;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  /* hidden, not auto: this clips the embedded form's square-cornered white
     document to the panel radius, so all FOUR corners stay rounded. */
  overflow:hidden;
}

#page-portfolio-3d-running-game .p3rg-modal__x{
  position:absolute;
  top:12px;right:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border:1px solid #ddd2ba;
  border-radius:50%;
  background:#fff;
  color:#1d1509;
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}

#page-portfolio-3d-running-game .p3rg-modal__x:hover{background:#2b1c12;color:#fbf6ec;}
#page-portfolio-3d-running-game .p3rg-modal__x:focus-visible{outline:3px solid var(--p3rg-flag);outline-offset:2px;}

#page-portfolio-3d-running-game .p3rg-modal iframe{
  display:block;
  width:100%;
  min-height:860px;
  border:0;
}

/* the modal triggers are <button>, so they need the anchor's box reset.
   Scoped to the class, not to .p3rg-ctarow: the hero's trigger sits directly
   in .p3rg-hero__inner and would otherwise fall back to the UA button font. */
button.p3rg-cta{
  font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;
}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:991px){
  .p3rg-split{grid-template-columns:1fr;gap:36px;}
  .p3rg-split--flip .p3rg-split__copy{order:0;}
  .p3rg-band{padding:60px 0;}
}
@media (max-width:575px){
  /* Keep the radius on phones too — the panel is a card at every width. */
  #page-portfolio-3d-running-game .p3rg-modal{padding: 100px 12px 12px 12px;}
  #page-portfolio-3d-running-game .p3rg-modal__box{max-width:none;border-radius:14px;}
  .p3rg-hero{padding:60px 20px 64px;}
  .p3rg-wrap{padding:0 18px;}
  .p3rg-band{padding:48px 0;}
  .p3rg-h2{padding-left:14px;border-left-width:4px;}
  .p3rg-cta{display:block;text-align:center;}
}