/* ===================================================================
   /portfolio/roulette-game — AISHTMLNEWDESIGN-488
   Visual direction: LA PARTAGE
     Named for the roulette rule that returns HALF an even-money stake when
     the ball lands on zero. Chalk and claret over near-black, with a
     green-zero accent. Every section opener is marked by a HALVED rule:
     one solid half beside one hollow half — the stake and the half given
     back. Blocks are split the same way, a filled edge against an open
     one. Nothing animates; the rule is painted once (rule 26).

   Deliberately unlike the three siblings already shipped:
     /portfolio/csgo-crash       ASCENT CURVE graphite + orange, stepped
                                              notches, clip-path corner cuts
     /portfolio/csgo-marketplace FLOAT VALUE  steel-teal + 3-stop wear
                                              gradient, radius-10 tiles
     /portfolio/play-poker       POT ODDS     bone + brass, split ratio rule,
                                              square left-gutter blocks
     this page                   LA PARTAGE   chalk + claret + green zero,
                                              halved solid/hollow rule
   Different palette, different rule motif, different block construction.

   EVERY selector below is scoped to #page-portfolio-roulette-game. This
   sheet never styles body, never styles a bare element, and never reaches
   into #ais-header / #ais-footer. The document reset (html,body{margin:0})
   is owned by /assets/css/ais-layout.css — not restated, not re-scoped.
   =================================================================== */

#page-portfolio-roulette-game{
  --prg-ink:      #140a0d;
  --prg-ink-2:    #201216;
  --prg-ink-3:    #331d23;
  --prg-paper:    #ffffff;
  --prg-chalk:    #f4eff0;
  --prg-text:     #1b1013;
  --prg-text-2:   #374151;
  --prg-rev:      #ece3e5;
  --prg-rev-2:    #b8a6ab;
  --prg-claret:   #7a1220;   /* 10.85:1 on white, 9.54:1 on chalk */
  --prg-claret-d: #5c0d18;
  --prg-claret-r: #e8909c;   /* reversed: 8.25:1 on --prg-ink */
  --prg-zero:     #0b6b3a;   /* 6.61:1 on white, 5.81:1 on chalk */
  --prg-zero-r:   #4ade80;   /* reversed: 11.17:1 on --prg-ink */
  --prg-line:     #e0d4d7;
  --prg-line-rev: rgba(255,255,255,.13);

  font-family:"Inter",system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--prg-text);
  background:var(--prg-paper);
  overflow-x:hidden;
}

#page-portfolio-roulette-game *,
#page-portfolio-roulette-game *::before,
#page-portfolio-roulette-game *::after{box-sizing:border-box;}

#page-portfolio-roulette-game .prg-wrap{
  max-width:1200px;margin-inline:auto;padding-inline:24px;
}

/* ---- section shells -------------------------------------------------- */
#page-portfolio-roulette-game .prg-sec{width:100%;padding-block:clamp(56px,7vw,104px);}
#page-portfolio-roulette-game .prg-sec--paper{background:var(--prg-paper);}
#page-portfolio-roulette-game .prg-sec--chalk{background:var(--prg-chalk);}
#page-portfolio-roulette-game .prg-sec--ink{background:var(--prg-ink);color:var(--prg-rev);}

/* ---- type ------------------------------------------------------------ */
#page-portfolio-roulette-game .prg-h2{
  margin:0 0 18px;
  font-size:clamp(30px,3.5vw,44px);
  line-height:1.14;font-weight:800;letter-spacing:-.02em;
  color:var(--prg-text);
}
#page-portfolio-roulette-game .prg-h2--rev{color:var(--prg-rev);}

#page-portfolio-roulette-game .prg-body{
  margin:0 0 20px;font-size:17px;line-height:1.76;color:var(--prg-text-2);
}

/* The halved rule — one solid half, one hollow half. Static. */
#page-portfolio-roulette-game .prg-eyebrow{
  position:relative;margin:0 0 16px;padding-top:20px;
  font-size:16px;font-weight:700;line-height:1.4;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--prg-claret);
}
#page-portfolio-roulette-game .prg-eyebrow::before{
  content:"";position:absolute;left:0;top:0;width:72px;height:8px;
  background:linear-gradient(var(--prg-claret),var(--prg-claret)) 0 0/34px 8px no-repeat;
  border-right:2px solid var(--prg-claret);
  border-top:2px solid transparent;border-bottom:2px solid transparent;
  box-shadow:inset -36px 0 0 -34px var(--prg-claret);
}
#page-portfolio-roulette-game .prg-eyebrow::after{
  content:"";position:absolute;left:38px;top:0;width:34px;height:8px;
  border:2px solid var(--prg-zero);
}
#page-portfolio-roulette-game .prg-eyebrow--rev{color:var(--prg-claret-r);}
#page-portfolio-roulette-game .prg-eyebrow--rev::before{
  background:linear-gradient(var(--prg-claret-r),var(--prg-claret-r)) 0 0/34px 8px no-repeat;
  border-right-color:var(--prg-claret-r);box-shadow:none;
}
#page-portfolio-roulette-game .prg-eyebrow--rev::after{border-color:var(--prg-zero-r);}

#page-portfolio-roulette-game .prg-head{max-width:80ch;margin-bottom:clamp(28px,3.4vw,48px);}
#page-portfolio-roulette-game .prg-head--centre{margin-inline:auto;text-align:center;}
#page-portfolio-roulette-game .prg-head--centre .prg-eyebrow::before{left:calc(50% - 36px);}
#page-portfolio-roulette-game .prg-head--centre .prg-eyebrow::after{left:calc(50% + 2px);}

/* ---- links ----------------------------------------------------------- */
#page-portfolio-roulette-game .prg-inline{
  color:var(--prg-claret);font-weight:700;
  border-bottom:2px solid rgba(122,18,32,.35);
  transition:color .16s ease,border-color .16s ease;
}
#page-portfolio-roulette-game .prg-inline:hover,
#page-portfolio-roulette-game .prg-inline:focus-visible{
  color:var(--prg-claret-d);border-bottom-color:var(--prg-claret);
}
#page-portfolio-roulette-game .prg-inline--rev{
  color:var(--prg-claret-r);border-bottom-color:rgba(232,144,156,.45);
}
#page-portfolio-roulette-game .prg-inline--rev:hover,
#page-portfolio-roulette-game .prg-inline--rev:focus-visible{
  color:#f0a9b3;border-bottom-color:#f0a9b3;
}
#page-portfolio-roulette-game a:focus-visible,
#page-portfolio-roulette-game button:focus-visible{
  outline:3px solid var(--prg-zero);outline-offset:3px;
}
#page-portfolio-roulette-game .prg-sec--ink a:focus-visible,
#page-portfolio-roulette-game .prg-sec--ink button:focus-visible,
#page-portfolio-roulette-game .prg-hero button:focus-visible{outline-color:var(--prg-zero-r);}

/* ---- buttons --------------------------------------------------------- */
#page-portfolio-roulette-game .prg-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 32px;
  font-family:inherit;font-size:17px;font-weight:700;line-height:1.2;
  border:0;border-radius:26px;cursor:pointer;text-align:center;
  transition:transform .16s ease,background-color .16s ease;
}
#page-portfolio-roulette-game .prg-btn--claret{background:var(--prg-claret);color:#ffffff;}
#page-portfolio-roulette-game .prg-btn--claret:hover{background:#96182b;transform:translateY(-2px);}
#page-portfolio-roulette-game .prg-btn--claret:active{transform:translateY(0);}
#page-portfolio-roulette-game .prg-btn--ink{background:var(--prg-ink);color:#ffffff;}
#page-portfolio-roulette-game .prg-btn--ink:hover{background:var(--prg-ink-3);transform:translateY(-2px);}
#page-portfolio-roulette-game .prg-btn--ink:active{transform:translateY(0);}
#page-portfolio-roulette-game .prg-cta-row{margin-top:clamp(26px,3vw,40px);}
#page-portfolio-roulette-game .prg-cta-row--centre{text-align:center;}

/* ---- hero — rule 24: full-bleed, STATIC gradient, no image, one CTA --- */
#page-portfolio-roulette-game .prg-hero{
  position:relative;width:100%;
  padding:clamp(72px,9vw,132px) 24px clamp(64px,7vw,104px);
  color:var(--prg-rev);
  background:
    linear-gradient(106deg,rgba(232,144,156,.13) 0%,rgba(232,144,156,0) 48%),
    linear-gradient(188deg,var(--prg-ink-2) 0%,var(--prg-ink) 64%,#0a0508 100%);
}
/* the halved edge, at page scale: claret run then a green-zero run */
#page-portfolio-roulette-game .prg-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:
    linear-gradient(var(--prg-claret),var(--prg-claret)) 0 0/50% 6px no-repeat,
    linear-gradient(var(--prg-zero),var(--prg-zero)) 100% 0/50% 6px no-repeat;
}
#page-portfolio-roulette-game .prg-hero__inner{max-width:900px;margin-inline:auto;text-align:center;}
#page-portfolio-roulette-game .prg-hero .prg-eyebrow{display:inline-block;}
#page-portfolio-roulette-game .prg-hero .prg-eyebrow::before{left:calc(50% - 36px);}
#page-portfolio-roulette-game .prg-hero .prg-eyebrow::after{left:calc(50% + 2px);}
#page-portfolio-roulette-game .prg-hero__h1{
  margin:0 0 22px;
  font-size:clamp(44px,6.2vw,74px);
  line-height:1.04;font-weight:900;letter-spacing:-.035em;color:#ffffff;
}
#page-portfolio-roulette-game .prg-hero__lede{
  margin:0 auto;max-width:72ch;
  font-size:clamp(17px,1.3vw,20px);line-height:1.7;color:var(--prg-rev);
}
#page-portfolio-roulette-game .prg-hero__act{margin-top:clamp(28px,3.2vw,40px);}
#page-portfolio-roulette-game .prg-trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
  margin:clamp(30px,3.4vw,44px) 0 0;padding:0;list-style:none;
}
#page-portfolio-roulette-game .prg-trust li{
  position:relative;padding-left:22px;
  font-size:16px;font-weight:600;color:var(--prg-rev-2);
}
#page-portfolio-roulette-game .prg-trust li::before{
  content:"";position:absolute;left:0;top:.44em;
  width:11px;height:11px;border-radius:50%;
  background:var(--prg-zero-r);
}

/* ---- breadcrumb ------------------------------------------------------ */
#page-portfolio-roulette-game .prg-crumb{
  width:100%;background:var(--prg-chalk);border-bottom:1px solid var(--prg-line);
}
#page-portfolio-roulette-game .prg-crumb ol{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0;padding:15px 0;list-style:none;font-size:16px;color:var(--prg-text-2);
}
#page-portfolio-roulette-game .prg-crumb li{display:flex;align-items:center;gap:8px;}
#page-portfolio-roulette-game .prg-crumb img{width:16px;height:16px;opacity:.5;}
#page-portfolio-roulette-game .prg-crumb a{color:var(--prg-text-2);transition:color .16s ease;}
#page-portfolio-roulette-game .prg-crumb a:hover,
#page-portfolio-roulette-game .prg-crumb a:focus-visible{color:var(--prg-claret);}
#page-portfolio-roulette-game .prg-crumb span{color:var(--prg-text);font-weight:600;}

/* ---- what we offer --------------------------------------------------- */
#page-portfolio-roulette-game .prg-banner{margin:0 0 clamp(32px,4vw,56px);}
#page-portfolio-roulette-game .prg-banner img{
  display:block;width:100%;height:auto;
  border-bottom:6px solid var(--prg-claret);
}
#page-portfolio-roulette-game .prg-prose{max-width:82ch;}
#page-portfolio-roulette-game .prg-prose .prg-body:last-of-type{margin-bottom:0;}

/* ---- features -------------------------------------------------------- */
#page-portfolio-roulette-game .prg-feat__grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(32px,4.5vw,64px);align-items:center;
}
#page-portfolio-roulette-game .prg-ticks{
  display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;
}
#page-portfolio-roulette-game .prg-ticks li{
  display:flex;align-items:flex-start;gap:12px;
  padding:16px 18px;background:var(--prg-ink-2);
  border-left:4px solid var(--prg-claret-r);
  font-size:16px;line-height:1.6;font-weight:600;color:var(--prg-rev);
}
#page-portfolio-roulette-game .prg-ticks img{flex:0 0 auto;width:22px;height:22px;margin-top:2px;}
#page-portfolio-roulette-game .prg-feat__fig{margin:0;}
#page-portfolio-roulette-game .prg-feat__fig img{
  display:block;width:100%;height:auto;border-bottom:6px solid var(--prg-zero-r);
}

/* ---- why choose us ---------------------------------------------------
   Rule 39A. The tag paints a background, so it must own its foreground at a
   specificity the section's own prose rule cannot beat:
     .prg-why p                        -> (0,1,1)
     .prg-why p strong.prg-why__tag    -> (0,2,2)   wins on class+element count
   ---------------------------------------------------------------------- */
#page-portfolio-roulette-game .prg-whylist{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 28px;margin:0;padding:0;list-style:none;
}
#page-portfolio-roulette-game .prg-whylist > li{
  padding:24px 26px;background:var(--prg-paper);
  border:1px solid var(--prg-line);border-top:5px solid var(--prg-claret);
}
#page-portfolio-roulette-game .prg-whylist .prg-body{margin:0;}
#page-portfolio-roulette-game .prg-why p{color:var(--prg-text-2);}
#page-portfolio-roulette-game .prg-why p strong.prg-why__tag{
  display:block;width:fit-content;margin:0 0 10px;padding:7px 16px;
  background:var(--prg-ink);
  color:#ffffff;
  font-size:16px;font-weight:700;letter-spacing:.02em;border-radius:16px;
}

/* ---- build screenshots ----------------------------------------------- */
#page-portfolio-roulette-game .prg-shots{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
  margin:clamp(32px,4vw,52px) 0 0;padding:0;list-style:none;
}
#page-portfolio-roulette-game .prg-shots img{
  display:block;width:100%;height:auto;border-bottom:5px solid var(--prg-zero);
}

/* ---- project cards --------------------------------------------------- */
#page-portfolio-roulette-game .prg-worklist{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,32px);margin:0;padding:0;list-style:none;
}
#page-portfolio-roulette-game .prg-card{
  background:var(--prg-paper);border:1px solid var(--prg-line);
  overflow:hidden;transition:transform .18s ease,border-color .18s ease;
}
#page-portfolio-roulette-game .prg-card:hover{transform:translateY(-4px);border-color:var(--prg-claret);}
#page-portfolio-roulette-game .prg-card a{display:block;}
#page-portfolio-roulette-game .prg-card img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
}
#page-portfolio-roulette-game .prg-card__t{
  margin:0;padding:18px 20px;
  font-size:18px;font-weight:700;line-height:1.35;color:var(--prg-text);
}

/* ---- testimonials ---------------------------------------------------- */
#page-portfolio-roulette-game .prg-storylist{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,2.6vw,36px);margin:0;padding:0;list-style:none;
}
#page-portfolio-roulette-game .prg-storylist > li{
  display:flex;flex-direction:column;gap:18px;
  padding:22px;background:var(--prg-ink-2);
  border-bottom:5px solid var(--prg-claret-r);
}
#page-portfolio-roulette-game .prg-vid{
  position:relative;display:block;width:100%;padding:0;
  border:0;background:none;cursor:pointer;line-height:0;
}
#page-portfolio-roulette-game .prg-vid img{display:block;width:100%;height:auto;}
#page-portfolio-roulette-game .prg-vid__play{
  position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;
  background:var(--prg-claret-r);color:#3a0710;
  transition:background-color .16s ease,transform .16s ease;
}
#page-portfolio-roulette-game .prg-vid:hover .prg-vid__play{
  background:#f0a9b3;transform:translate(-50%,-50%) scale(1.06);
}
#page-portfolio-roulette-game .prg-story__frame{display:block;width:100%;aspect-ratio:4/3;border:0;}
#page-portfolio-roulette-game .prg-storylist blockquote{margin:0;}
#page-portfolio-roulette-game .prg-storylist blockquote p{
  margin:0;font-size:16px;line-height:1.68;color:var(--prg-rev);
}
#page-portfolio-roulette-game .prg-more{margin:clamp(28px,3vw,40px) 0 0;text-align:center;font-size:17px;}

/* ---- area we serve --------------------------------------------------- */
#page-portfolio-roulette-game .prg-servelist{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.4vw,30px);margin:0;padding:0;list-style:none;
}
#page-portfolio-roulette-game .prg-servelist > li{
  padding:26px 24px;background:var(--prg-paper);
  border:1px solid var(--prg-line);border-bottom:5px solid var(--prg-zero);
}
#page-portfolio-roulette-game .prg-servelist h3{
  display:flex;align-items:center;gap:9px;margin:0 0 14px;
  font-size:18px;font-weight:800;letter-spacing:.05em;color:var(--prg-text);
}
#page-portfolio-roulette-game .prg-servelist h3 img{flex:0 0 auto;width:14px;height:20px;}
#page-portfolio-roulette-game .prg-tel{
  display:inline-block;margin-bottom:10px;
  font-size:17px;font-weight:700;color:var(--prg-claret);transition:color .16s ease;
}
#page-portfolio-roulette-game .prg-tel:hover,
#page-portfolio-roulette-game .prg-tel:focus-visible{color:var(--prg-claret-d);}
#page-portfolio-roulette-game .prg-servelist .prg-body{margin:0;font-size:16px;}

/* ---- CTA modal ------------------------------------------------------- */
#page-portfolio-roulette-game .prg-modal{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:flex-start;justify-content:center;
  padding: 100px 16px 24px 16px;overflow-y:auto;background:rgba(10,5,8,.8);
}
#page-portfolio-roulette-game .prg-modal.is-open{display:flex;}
#page-portfolio-roulette-game .prg-modal__box{
  position:relative;width:100%;max-width:640px;
  background:var(--prg-paper);overflow:hidden;
}
#page-portfolio-roulette-game .prg-modal__box::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:
    linear-gradient(var(--prg-claret),var(--prg-claret)) 0 0/50% 6px no-repeat,
    linear-gradient(var(--prg-zero),var(--prg-zero)) 100% 0/50% 6px no-repeat;
}
#page-portfolio-roulette-game .prg-modal__x{
  position:absolute;top:16px;right:12px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:0;cursor:pointer;border-radius:50%;
  background:var(--prg-ink);color:#ffffff;transition:background-color .16s ease;
}
#page-portfolio-roulette-game .prg-modal__x:hover{background:var(--prg-claret);}
#page-portfolio-roulette-game .prg-modal iframe{display:block;width:100%;min-height:860px;border:0;}

/* ---- responsive ------------------------------------------------------ */
@media (max-width:1024px){
  #page-portfolio-roulette-game .prg-feat__grid{grid-template-columns:minmax(0,1fr);}
  #page-portfolio-roulette-game .prg-feat__fig{max-width:560px;margin-inline:auto;}
  #page-portfolio-roulette-game .prg-shots{grid-template-columns:repeat(2,minmax(0,1fr));}
  #page-portfolio-roulette-game .prg-worklist,
  #page-portfolio-roulette-game .prg-storylist,
  #page-portfolio-roulette-game .prg-servelist{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:768px){
  #page-portfolio-roulette-game .prg-whylist{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:640px){
  #page-portfolio-roulette-game .prg-shots,
  #page-portfolio-roulette-game .prg-worklist,
  #page-portfolio-roulette-game .prg-storylist,
  #page-portfolio-roulette-game .prg-servelist{grid-template-columns:minmax(0,1fr);}
  #page-portfolio-roulette-game .prg-btn{width:100%;}
  #page-portfolio-roulette-game .prg-modal iframe{min-height:900px;}
}

/* ---- reduced motion — the only motion here is hover/press feedback ---- */
@media (prefers-reduced-motion:reduce){
  #page-portfolio-roulette-game *,
  #page-portfolio-roulette-game *::before,
  #page-portfolio-roulette-game *::after{
    animation:none !important;transition-duration:.01ms !important;
  }
}