/* ══════════════════════════════════════════════════════════════════════════
   /gaming-recruitment-agency — page-isolated stylesheet
   AISHTMLNEWDESIGN-468

   VISUAL DIRECTION — "THE HOLDFAST"

   The H1 is the brief: "Faster Hires That Actually Stay." Not the search, not
   the shortlist, not the clearance — the two things a studio operator wants at
   once and is usually told to choose between. Eighteen days to fill, and it
   still holds a year later. So the register is the WORKSHOP HOLDFAST: the peg
   you drive home in one blow and then cannot pull out. Struck fast, seated
   deep. The reader is a studio operator who has already paid for a hire that
   left, not a candidate looking for a job.

   Three materials, chosen to be the ones the five neighbouring recruitment
   pages did not take:

     · STOCK  — #eff2e8 oat-sage worked paper (G > R > B), with #e3e8d9 for
                the alternating band and plain white for the plate faces. Every
                neighbour's paper is warm bone, dead-neutral grey, lavender-
                white, petrol-washed white or cool blue-white; none of them is
                olive-cast.
     · LODEN  — #1c2317 / #26301f / #131a0f, a near-black with a GREEN cast
                (G > R > B). Not charcoal, not damson, not indigo, not petrol,
                not slate, not ink navy, not iron, not mahogany. Used five
                times only, as punctuation: the hero, the scale band, the
                senior case, the compliance clause and the references.
     · MADDER — #93202c, the one hue on the page and the only thing that
                carries an action: the struck head of the peg. 7.5:1 on the
                stock, and its light twin #ff9d92 reads 8.0:1 on the loden, so
                one accent family serves both grounds without a second.

   Composition mark — THE DRIVEN PEG. Every section opens on a short heavy
   HORIZONTAL head in madder with a thin VERTICAL shank dropping from its
   centre into the page: struck above, seated below. A T, not a corner. It is
   deliberately NOT a set of vertical tally strokes, NOT an interrupted
   horizontal rule, NOT a rule that breaks from solid into dots, NOT a dotted
   approach-leader, NOT a cut-corner file tab, NOT a ruled roster row, NOT a
   margin ordinal, NOT a spec row, NOT a corner registration bracket and NOT
   an index numeral — those belong to other pages in this repo and not one of
   them is reused here. There is no waterline plate, no roster, no
   availability column, no clearance register, no word eyebrow on any section,
   no counting bar, no glass, no aurora and no corner-bracket arm.

   The peg recurs at cell scale, differently in every grid so no two sections
   compose alike: a head-only stub over the role cells, the record's own
   circle icon on the difference rows, a capped shank in the gutter of the
   approach ladder, a small full peg on each senior entry, the record's check
   on the benefit list, a heavy head rule over the two elapsed-time columns, a
   seated head across the top of the staffing cards, a head rule under each
   region name and a stub before each news line.

   Sections: centred loden hero, crumb strip, split brief plate, two-column
   white reading spread, four-up role grid, two-up ruled difference rows,
   loden reversed split, two-up approach ladder, loden lede + two-up senior
   register, check-marked benefit list, two heavy-ruled elapsed-time columns,
   three-up staffing grid, loden reading column, offset remote article, inset
   fee clause, disclosure FAQ, news list, loden reference rail, four-up
   address grid — no two repeat a layout.

   Every rule is scoped to #page-gaming-recruitment-agency. The document reset
   (html,body{margin:0}) is owned by /assets/css/ais-layout.css and is NOT
   restated here (skill section 33). The element baselines below each repeat
   the wrapper id ON THEIR OWN LINE: writing "#page-x h1,h2,h3{margin:0}"
   applies the id to h1 only and collapses every h2/h3 margin in the document,
   which has shipped before. Anchor rules are qualified with the wrapper id
   AND a class, because the page's inline baseline
   "#page-gaming-recruitment-agency a" is (1,0,1) and beats any class-only
   rule. The MEASURE is capped on the prose, never on a section shell — a
   max-width on the shell inherits margin-inline:auto and re-centres the whole
   section, so its peg starts ~140px right of every other section's.

   Design contract (frontend-design SKILL.md):
     · rule  1 — Inter is the primary family
     · rule  2 — nothing below 16px, anywhere, including labels and captions
     · rule 23 — no slate-grey body copy on light surfaces (#33392c floor)
     · rule 24 — image-free full-bleed hero, static gradient, ~900px column,
                 exactly one CTA
     · rule 25 — one CTA per section, every label unique page-wide; a section's
                 second record label ships as a bare in-copy text link
     · rule 26 — no running animation: zero @keyframes, zero 'infinite';
                 transitions only, each a finite response to hover /
                 focus-visible / active / details-open, with a reduced-motion
                 override at the foot of this sheet
     · rule 29 — every <img> declares its real intrinsic shape
     · rule 30 — no hand-built enquiry control of any kind, so this sheet
                 styles no field, no dropdown, no upload target and no
                 role-level picker
     · rule 39A — anything that paints a background owns its foreground at a
                 specificity no prose rule in this sheet can outrank
   ══════════════════════════════════════════════════════════════════════════ */

#page-gaming-recruitment-agency{
  /* ── palette ─────────────────────────────────────────────────────────── */
  --stock:#eff2e8;            /* oat-sage worked paper — dominant ground    */
  --stock-2:#e3e8d9;          /* alternating band                           */
  --card:#ffffff;             /* plate faces                                */
  --line:#d5dcc6;             /* hairline on stock                          */
  --line-2:#b0ba98;           /* stronger hairline / the peg's shank        */

  --deep:#1c2317;             /* loden plate                                */
  --deep-2:#26301f;           /* raised loden surface                       */
  --deep-3:#131a0f;           /* loden in shadow                            */
  --line-dk:rgba(226,235,210,.20);
  --line-dk-2:rgba(226,235,210,.40);

  --mark:#93202c;             /* MADDER — the struck head. 7.5:1 on stock   */
  --mark-2:#7a1824;           /* hover                                      */
  --mark-3:#63131d;           /* :active / type on a light button           */
  --mark-lt:#ff9d92;          /* the same signal on loden — 8.0:1           */
  --mark-tint:#f8e8e6;

  --ink:#181d13;              /* headings on stock — 15.9:1                 */
  --body:#33392c;             /* body on stock — 10.5:1                     */
  --on-deep:#e6ebdc;          /* body on loden — 13.3:1                     */
  --on-deep-2:#c2caae;        /* secondary on loden — 9.5:1                 */

  --wrap:1180px;
  --measure:900px;
  --r:10px;

  display:block;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--body);
  background:var(--stock);
  -webkit-font-smoothing:antialiased;
}

#page-gaming-recruitment-agency *,
#page-gaming-recruitment-agency *::before,
#page-gaming-recruitment-agency *::after{box-sizing:border-box;}

/* Element baselines. Each selector repeats the wrapper id ON ITS OWN LINE. */
#page-gaming-recruitment-agency h1{margin:0;font-weight:800;line-height:1.08;letter-spacing:-.02em;text-align:left;}
#page-gaming-recruitment-agency h2{margin:0;font-weight:800;line-height:1.2;letter-spacing:-.015em;text-align:left;}
#page-gaming-recruitment-agency h3{margin:0;font-weight:700;line-height:1.32;letter-spacing:-.004em;text-align:left;}
#page-gaming-recruitment-agency p{margin:0;text-align:left;}
#page-gaming-recruitment-agency ul{margin:0;padding:0;list-style:none;}
#page-gaming-recruitment-agency ol{margin:0;padding:0;list-style:none;}
#page-gaming-recruitment-agency blockquote{margin:0;}
#page-gaming-recruitment-agency figure{margin:0;}
#page-gaming-recruitment-agency img{max-width:100%;height:auto;display:block;}
#page-gaming-recruitment-agency button{font:inherit;color:inherit;}

/* ── layout primitives ─────────────────────────────────────────────────── */
#page-gaming-recruitment-agency .gra-wrap{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px;
}
#page-gaming-recruitment-agency .gra-measure{max-width:var(--measure);}

#page-gaming-recruitment-agency .gra-band{padding:clamp(56px,7vw,96px) 0;}
#page-gaming-recruitment-agency .gra-band--stock{background:var(--stock);}
#page-gaming-recruitment-agency .gra-band--alt{background:var(--stock-2);}
#page-gaming-recruitment-agency .gra-band--card{background:var(--card);}
#page-gaming-recruitment-agency .gra-band--deep{background:var(--deep);color:var(--on-deep);}

/* ── THE DRIVEN PEG — the page's one composition mark ──────────────────── */
#page-gaming-recruitment-agency .gra-peg{
  display:block;width:24px;margin-bottom:22px;
}
#page-gaming-recruitment-agency .gra-peg i{display:block;width:24px;height:5px;background:var(--mark);}
#page-gaming-recruitment-agency .gra-peg b{display:block;width:2px;height:15px;margin-left:11px;background:var(--line-2);}
#page-gaming-recruitment-agency .gra-peg--dk i{background:var(--mark-lt);}
#page-gaming-recruitment-agency .gra-peg--dk b{background:var(--line-dk-2);}

/* cell-scale peg */
#page-gaming-recruitment-agency .gra-peg--sm{width:16px;margin-bottom:14px;}
#page-gaming-recruitment-agency .gra-peg--sm i{width:16px;height:4px;}
#page-gaming-recruitment-agency .gra-peg--sm b{width:2px;height:9px;margin-left:7px;}

/* head-only stub */
#page-gaming-recruitment-agency .gra-stub{display:block;width:20px;height:4px;background:var(--mark);}

/* ── headings, prose ───────────────────────────────────────────────────── */
#page-gaming-recruitment-agency .gra-h2{
  font-size:clamp(27px,3.1vw,41px);color:var(--ink);max-width:21ch;
}
#page-gaming-recruitment-agency .gra-h2--dk{color:#ffffff;}
#page-gaming-recruitment-agency .gra-lede{
  margin-top:22px;max-width:74ch;font-size:18px;line-height:1.76;color:var(--ink);font-weight:500;
}
#page-gaming-recruitment-agency .gra-lede--dk{color:var(--on-deep);}
#page-gaming-recruitment-agency .gra-close{
  margin-top:30px;max-width:80ch;font-size:17px;line-height:1.78;color:var(--body);
}

/* ── buttons ───────────────────────────────────────────────────────────── */
#page-gaming-recruitment-agency button.gra-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 30px;border:0;border-radius:4px;
  background:var(--mark);color:#ffffff;
  font-size:17px;font-weight:700;letter-spacing:.005em;cursor:pointer;
  transition:background-color .18s ease,transform .12s ease,box-shadow .18s ease;
}
#page-gaming-recruitment-agency button.gra-btn:hover{background:var(--mark-2);box-shadow:0 8px 20px rgba(28,35,23,.24);}
#page-gaming-recruitment-agency button.gra-btn:focus-visible{outline:3px solid var(--mark-3);outline-offset:3px;}
#page-gaming-recruitment-agency button.gra-btn:active{transform:translateY(1px);background:var(--mark-3);}
/* On the loden plates the action stays madder — the button inverts, the hue does not. */
#page-gaming-recruitment-agency button.gra-btn--lt{background:var(--stock);color:var(--mark-3);}
#page-gaming-recruitment-agency button.gra-btn--lt:hover{background:#ffffff;box-shadow:0 8px 20px rgba(0,0,0,.36);}
#page-gaming-recruitment-agency button.gra-btn--lt:focus-visible{outline:3px solid var(--mark-lt);outline-offset:3px;}
#page-gaming-recruitment-agency button.gra-btn--lt:active{transform:translateY(1px);background:var(--mark-tint);}

/* ── in-copy text links (rule 25's second destination) ─────────────────── */
#page-gaming-recruitment-agency a.gra-link{
  color:var(--mark);font-weight:700;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;
  transition:color .16s ease;
}
#page-gaming-recruitment-agency a.gra-link:hover{color:var(--mark-2);text-decoration:underline;}
#page-gaming-recruitment-agency a.gra-link:focus-visible{outline:2px solid var(--mark);outline-offset:3px;}
#page-gaming-recruitment-agency a.gra-link--dk{color:var(--mark-lt);}
#page-gaming-recruitment-agency a.gra-link--dk:hover{color:#ffffff;}
#page-gaming-recruitment-agency a.gra-link--dk:focus-visible{outline:2px solid var(--mark-lt);}

/* ══ HERO — rule 24 ═══════════════════════════════════════════════════════
   Full-bleed, image-free, a STATIC two-stop loden gradient (no animation, no
   moving position, no background-image), content in a centred 900px column,
   exactly ONE CTA. */
#page-gaming-recruitment-agency .gra-hero{
  width:100%;
  padding:clamp(72px,9vw,124px) 24px clamp(64px,8vw,108px);
  background:linear-gradient(158deg,var(--deep-3) 0%,var(--deep-2) 100%);
  color:var(--on-deep);
}
#page-gaming-recruitment-agency .gra-hero__in{max-width:var(--measure);margin-inline:auto;}
#page-gaming-recruitment-agency .gra-hero .gra-peg{margin-bottom:26px;}
#page-gaming-recruitment-agency .gra-hero__h{
  font-size:clamp(34px,4.8vw,58px);color:#ffffff;max-width:18ch;
}
#page-gaming-recruitment-agency .gra-hero__p{
  margin-top:24px;max-width:70ch;font-size:clamp(17px,1.35vw,19px);line-height:1.74;
  color:var(--on-deep);
}
#page-gaming-recruitment-agency .gra-hero .gra-btn{margin-top:34px;}

/* ══ CRUMB ══════════════════════════════════════════════════════════════ */
#page-gaming-recruitment-agency .gra-crumb{background:var(--stock);border-bottom:1px solid var(--line);}
#page-gaming-recruitment-agency .gra-crumb__in{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-block:16px;font-size:16px;
}
#page-gaming-recruitment-agency .gra-crumb__back{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--line-2);border-radius:4px;background:var(--card);
  transition:border-color .16s ease,background-color .16s ease;
}
#page-gaming-recruitment-agency .gra-crumb__back:hover{border-color:var(--mark);background:var(--mark-tint);}
#page-gaming-recruitment-agency .gra-crumb__back:focus-visible{outline:2px solid var(--mark);outline-offset:2px;}
#page-gaming-recruitment-agency .gra-crumb__back img{width:16px;height:16px;}
#page-gaming-recruitment-agency a.gra-crumb__l{color:var(--mark);font-weight:600;}
#page-gaming-recruitment-agency a.gra-crumb__l:hover{text-decoration:underline;text-underline-offset:4px;}
#page-gaming-recruitment-agency .gra-crumb__now{color:var(--body);font-weight:600;}

/* ══ THE BRIEF — split plate ════════════════════════════════════════════ */
#page-gaming-recruitment-agency .gra-open__in{
  display:grid;grid-template-columns:1fr;gap:36px;align-items:center;
}
#page-gaming-recruitment-agency .gra-open__p{
  margin-top:20px;max-width:52ch;font-size:18px;line-height:1.74;color:var(--body);
}
#page-gaming-recruitment-agency .gra-open .gra-btn{margin-top:28px;}
#page-gaming-recruitment-agency .gra-plate{
  border:1px solid var(--line);background:var(--card);padding:12px;
  border-top:5px solid var(--mark);
}
#page-gaming-recruitment-agency .gra-plate__img{width:100%;height:auto;}

/* ══ DEFINITION — two-column reading spread ════════════════════════════ */
#page-gaming-recruitment-agency .gra-defset{
  display:grid;grid-template-columns:1fr;gap:22px;margin-top:28px;
}
#page-gaming-recruitment-agency .gra-def__p{
  padding-block:8px;font-size:17px;line-height:1.8;color:var(--body);
}

/* ══ THE ROLES — four-up cell grid ═════════════════════════════════════ */
#page-gaming-recruitment-agency .gra-roleset{
  display:grid;grid-template-columns:1fr;gap:16px;margin-top:34px;
}
#page-gaming-recruitment-agency .gra-role{
  padding:24px 20px 22px;background:var(--card);border:1px solid var(--line);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
#page-gaming-recruitment-agency .gra-role:hover{
  border-color:var(--mark);transform:translateY(-3px);box-shadow:0 10px 22px rgba(28,35,23,.10);
}
#page-gaming-recruitment-agency .gra-role__i{width:70px;height:70px;margin-top:16px;}
#page-gaming-recruitment-agency .gra-role__h{margin-top:16px;font-size:19px;color:var(--ink);}

/* ══ THE DIFFERENCE — two-up ruled rows ════════════════════════════════ */
#page-gaming-recruitment-agency .gra-difset{
  display:grid;grid-template-columns:1fr;gap:0 46px;margin-top:30px;
  border-top:1px solid var(--line);
}
#page-gaming-recruitment-agency .gra-dif{
  display:flex;gap:16px;padding:24px 4px 24px 0;border-bottom:1px solid var(--line);
}
#page-gaming-recruitment-agency .gra-dif__i{flex:0 0 auto;width:22px;height:22px;margin-top:5px;}
#page-gaming-recruitment-agency .gra-dif__h{font-size:19px;color:var(--ink);}
#page-gaming-recruitment-agency .gra-dif__p{margin-top:9px;font-size:16.5px;line-height:1.74;color:var(--body);}

/* ══ SCALE — loden reversed split ══════════════════════════════════════ */
#page-gaming-recruitment-agency .gra-scale__in{
  display:grid;grid-template-columns:1fr;gap:38px;align-items:center;
  /* NOT the .gra-wrap: the band's peg opens the wrap above this grid, so the
     mark starts at the same x as every other section's even though the split
     is reversed (figure left, argument right). */
}
#page-gaming-recruitment-agency .gra-scale__fig{
  border:1px solid var(--line-dk);background:var(--deep-2);padding:12px;
  border-top:5px solid var(--mark-lt);
}
#page-gaming-recruitment-agency .gra-scale__img{width:100%;height:auto;}
#page-gaming-recruitment-agency .gra-scale__p{
  margin-top:20px;max-width:50ch;font-size:18px;line-height:1.74;color:var(--on-deep);
}
#page-gaming-recruitment-agency .gra-scale .gra-btn{margin-top:28px;}
#page-gaming-recruitment-agency .gra-scale__alt{margin-top:18px;font-size:17px;}

/* ══ THE APPROACH — two-up ladder, capped shank in the gutter ══════════ */
#page-gaming-recruitment-agency .gra-huntset{
  display:grid;grid-template-columns:1fr;gap:0 46px;margin-top:30px;
}
#page-gaming-recruitment-agency .gra-hunt{
  position:relative;padding:22px 0 22px 28px;border-top:1px solid var(--line);
}
#page-gaming-recruitment-agency .gra-hunt__stem{
  position:absolute;left:0;top:26px;display:block;width:14px;height:4px;background:var(--mark);
}
#page-gaming-recruitment-agency .gra-hunt__stem::after{
  content:"";position:absolute;left:6px;top:4px;width:2px;height:20px;background:var(--line-2);
}
#page-gaming-recruitment-agency .gra-hunt__h{font-size:19px;color:var(--ink);}
#page-gaming-recruitment-agency .gra-hunt__p{margin-top:9px;font-size:16.5px;line-height:1.74;color:var(--body);}

/* ══ THE SENIOR CASE — loden register ══════════════════════════════════ */
#page-gaming-recruitment-agency .gra-execset{
  display:grid;grid-template-columns:1fr;gap:0 48px;margin-top:34px;
}
#page-gaming-recruitment-agency .gra-exec{padding:22px 0;border-top:1px solid var(--line-dk);}
#page-gaming-recruitment-agency .gra-exec__h{font-size:19px;color:#ffffff;}
#page-gaming-recruitment-agency .gra-exec__p{margin-top:9px;font-size:16.5px;line-height:1.74;color:var(--on-deep-2);}

/* ══ THE RETURN — check-marked list ════════════════════════════════════ */
#page-gaming-recruitment-agency .gra-benset{margin-top:30px;max-width:950px;}
#page-gaming-recruitment-agency .gra-ben{
  display:flex;gap:16px;align-items:flex-start;
  padding:18px 20px;background:var(--stock);
  border:1px solid var(--line);border-left:4px solid var(--mark);
  margin-bottom:12px;
}
#page-gaming-recruitment-agency .gra-ben:last-child{margin-bottom:0;}
#page-gaming-recruitment-agency .gra-ben__tick{flex:0 0 auto;width:24px;height:24px;margin-top:3px;}
#page-gaming-recruitment-agency .gra-ben__p{font-size:17px;line-height:1.72;color:var(--body);}

/* ══ ELAPSED TIME — two heavy-ruled columns ════════════════════════════ */
#page-gaming-recruitment-agency .gra-clockset{
  display:grid;grid-template-columns:1fr;gap:0 48px;margin-top:30px;
}
#page-gaming-recruitment-agency .gra-clock__p{
  position:relative;padding:26px 0 0;border-top:5px solid var(--mark);
  font-size:17px;line-height:1.8;color:var(--body);
}
#page-gaming-recruitment-agency .gra-clock__p::before{
  content:"";position:absolute;left:11px;top:0;width:2px;height:15px;background:var(--line-2);
}

/* ══ STAFFING — three-up seated-head cards ═════════════════════════════ */
#page-gaming-recruitment-agency .gra-staffset{
  display:grid;grid-template-columns:1fr;gap:16px;margin-top:32px;
}
#page-gaming-recruitment-agency .gra-staff{
  position:relative;padding:26px 22px 24px;background:var(--card);
  border:1px solid var(--line);border-top:5px solid var(--mark);
  transition:box-shadow .18s ease,transform .18s ease;
}
#page-gaming-recruitment-agency .gra-staff:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(28,35,23,.10);}
#page-gaming-recruitment-agency .gra-staff::before{
  content:"";position:absolute;left:22px;top:0;width:2px;height:14px;background:var(--line-2);
}
#page-gaming-recruitment-agency .gra-staff__h{font-size:19px;color:var(--ink);}
#page-gaming-recruitment-agency .gra-staff__p{margin-top:10px;font-size:16.5px;line-height:1.74;color:var(--body);}

/* ══ COMPLIANCE — loden reading column ═════════════════════════════════ */
#page-gaming-recruitment-agency .gra-comply__p{
  margin-top:20px;font-size:17px;line-height:1.8;color:var(--on-deep);
}
#page-gaming-recruitment-agency .gra-comply__p:first-of-type{margin-top:24px;}

/* ══ REMOTE — offset article ═══════════════════════════════════════════ */
#page-gaming-recruitment-agency .gra-remote__in{display:grid;grid-template-columns:1fr;gap:0;}
#page-gaming-recruitment-agency .gra-remote__rail{padding-top:4px;}
#page-gaming-recruitment-agency .gra-remote__body{max-width:760px;}
#page-gaming-recruitment-agency .gra-remote__p{margin-top:20px;font-size:17px;line-height:1.8;color:var(--body);}
#page-gaming-recruitment-agency .gra-remote__p:first-of-type{margin-top:24px;}

/* ══ THE FEE — inset clause ════════════════════════════════════════════ */
#page-gaming-recruitment-agency .gra-fee__box{
  margin-top:28px;max-width:820px;padding:26px 28px;
  background:var(--card);border:1px solid var(--line);border-left:5px solid var(--mark);
}
#page-gaming-recruitment-agency .gra-fee__p{font-size:17px;line-height:1.8;color:var(--body);}
#page-gaming-recruitment-agency .gra-fee__p + .gra-fee__p{margin-top:18px;}

/* ══ FAQ — disclosure list ═════════════════════════════════════════════ */
#page-gaming-recruitment-agency .gra-faqlist{margin-top:30px;max-width:1000px;}
#page-gaming-recruitment-agency .gra-faq{
  background:var(--card);border:1px solid var(--line);margin-bottom:10px;
  transition:border-color .18s ease;
}
#page-gaming-recruitment-agency .gra-faq:last-child{margin-bottom:0;}
#page-gaming-recruitment-agency .gra-faq[open]{border-color:var(--mark);}
#page-gaming-recruitment-agency .gra-faq__s{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:20px 22px;cursor:pointer;list-style:none;
}
#page-gaming-recruitment-agency .gra-faq__s::-webkit-details-marker{display:none;}
#page-gaming-recruitment-agency .gra-faq__s:focus-visible{outline:3px solid var(--mark);outline-offset:-3px;}
#page-gaming-recruitment-agency .gra-faq__q{font-size:18px;color:var(--ink);}
#page-gaming-recruitment-agency .gra-faq__m{
  position:relative;flex:0 0 auto;width:22px;height:22px;margin-top:2px;
}
#page-gaming-recruitment-agency .gra-faq__m::before,
#page-gaming-recruitment-agency .gra-faq__m::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--mark);transform:translate(-50%,-50%);
}
#page-gaming-recruitment-agency .gra-faq__m::before{width:16px;height:2px;}
#page-gaming-recruitment-agency .gra-faq__m::after{width:2px;height:16px;transition:opacity .2s ease;}
#page-gaming-recruitment-agency .gra-faq[open] .gra-faq__m::after{opacity:0;}
#page-gaming-recruitment-agency .gra-faq__a{padding:0 22px 22px;}
#page-gaming-recruitment-agency .gra-faq__a p{font-size:16.5px;line-height:1.76;color:var(--body);}

/* ══ NEWS — stub-marked lines ══════════════════════════════════════════ */
#page-gaming-recruitment-agency .gra-newsset{margin-top:28px;max-width:900px;}
#page-gaming-recruitment-agency .gra-news__li{
  display:flex;gap:16px;align-items:flex-start;
  padding:16px 0;border-bottom:1px solid var(--line);
}
#page-gaming-recruitment-agency .gra-news__li .gra-stub{flex:0 0 auto;margin-top:12px;}
#page-gaming-recruitment-agency .gra-news__p{font-size:17px;line-height:1.74;color:var(--body);}
#page-gaming-recruitment-agency .gra-news__alt{margin-top:24px;font-size:17px;}

/* ══ REFERENCES — loden rail with click-to-load facades ════════════════ */
#page-gaming-recruitment-agency .gra-storyset{
  display:grid;grid-template-columns:1fr;gap:24px;margin-top:34px;
}
#page-gaming-recruitment-agency .gra-story{
  background:var(--deep-2);border:1px solid var(--line-dk);padding:12px 12px 20px;
}
#page-gaming-recruitment-agency button.gra-vid{
  position:relative;display:block;width:100%;padding:0;border:0;
  overflow:hidden;background:var(--deep-3);cursor:pointer;
  transition:box-shadow .18s ease;
}
#page-gaming-recruitment-agency button.gra-vid:hover{box-shadow:0 0 0 2px var(--mark-lt);}
#page-gaming-recruitment-agency button.gra-vid:focus-visible{outline:3px solid var(--mark-lt);outline-offset:3px;}
#page-gaming-recruitment-agency .gra-vid__img{width:100%;height:auto;}
#page-gaming-recruitment-agency .gra-vid__play{
  position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;
  border-radius:50%;background:rgba(19,26,15,.84);border:2px solid var(--mark-lt);
  transition:background-color .18s ease;
}
#page-gaming-recruitment-agency .gra-vid__play::after{
  content:"";position:absolute;left:23px;top:18px;
  border-left:19px solid var(--mark-lt);border-top:12px solid transparent;border-bottom:12px solid transparent;
}
#page-gaming-recruitment-agency button.gra-vid:hover .gra-vid__play{background:var(--deep-3);}
#page-gaming-recruitment-agency .gra-story__frame{
  width:100%;aspect-ratio:4/3;border:0;display:block;
}
#page-gaming-recruitment-agency .gra-story__q{margin-top:18px;}
#page-gaming-recruitment-agency .gra-story__q p{font-size:16.5px;line-height:1.74;color:var(--on-deep-2);}
#page-gaming-recruitment-agency .gra-stories__more{margin-top:28px;font-size:17px;}

/* ══ AREA WE SERVE — four-up address grid ══════════════════════════════ */
#page-gaming-recruitment-agency .gra-serveset{
  display:grid;grid-template-columns:1fr;gap:16px;margin-top:32px;
}
#page-gaming-recruitment-agency .gra-serve{
  padding:24px 20px;background:var(--card);border:1px solid var(--line);
}
#page-gaming-recruitment-agency .gra-serve__pin{width:14px;height:20px;}
#page-gaming-recruitment-agency .gra-serve__h{
  margin-top:14px;font-size:17px;letter-spacing:.08em;color:var(--ink);
}
#page-gaming-recruitment-agency .gra-serve__rule{display:block;width:36px;height:4px;background:var(--mark);margin:12px 0 14px;}
#page-gaming-recruitment-agency .gra-serve__tel{font-size:17px;font-weight:700;}
#page-gaming-recruitment-agency a.gra-serve__telink{color:var(--mark);}
#page-gaming-recruitment-agency a.gra-serve__telink:hover{color:var(--mark-2);}
#page-gaming-recruitment-agency a.gra-serve__telink:focus-visible{outline:2px solid var(--mark);outline-offset:2px;}
#page-gaming-recruitment-agency .gra-serve__a{margin-top:10px;font-size:16px;line-height:1.68;color:var(--body);}

/* ══ MODAL — the page's ONLY enquiry surface (rule 30) ═════════════════ */
#page-gaming-recruitment-agency .gra-modal{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(19,26,15,.74);padding:20px;
}
#page-gaming-recruitment-agency .gra-modal.is-open{display:flex;align-items:center;justify-content:center;}
#page-gaming-recruitment-agency .gra-modal__box{
  position:relative;width:100%;max-width:560px;max-height:92vh;
  background:var(--card);border-radius:10px;overflow:hidden;
  box-shadow:0 26px 70px rgba(19,26,15,.52);
}
#page-gaming-recruitment-agency button.gra-modal__x{
  position:absolute;right:12px;top:12px;z-index:2;
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:50%;background:var(--card);color:var(--ink);
  cursor:pointer;transition:background-color .16s ease,color .16s ease;
}
#page-gaming-recruitment-agency button.gra-modal__x:hover{background:var(--mark);color:#ffffff;}
#page-gaming-recruitment-agency button.gra-modal__x:focus-visible{outline:3px solid var(--mark);outline-offset:2px;}
#page-gaming-recruitment-agency .gra-modal__box iframe{
  display:block;width:100%;height:82vh;min-height:820px;border:0;background:var(--card);
}

/* ══ responsive ════════════════════════════════════════════════════════ */
@media (min-width:620px){
  #page-gaming-recruitment-agency .gra-roleset{grid-template-columns:repeat(2,1fr);}
  #page-gaming-recruitment-agency .gra-serveset{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:700px){
  #page-gaming-recruitment-agency .gra-staffset{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:820px){
  #page-gaming-recruitment-agency .gra-defset{grid-template-columns:repeat(2,1fr);column-gap:52px;row-gap:0;}
  #page-gaming-recruitment-agency .gra-clockset{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:860px){
  #page-gaming-recruitment-agency .gra-difset{grid-template-columns:repeat(2,1fr);}
  #page-gaming-recruitment-agency .gra-huntset{grid-template-columns:repeat(2,1fr);}
  #page-gaming-recruitment-agency .gra-execset{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:900px){
  #page-gaming-recruitment-agency .gra-open__in{grid-template-columns:1.05fr .95fr;gap:54px;}
  #page-gaming-recruitment-agency .gra-scale__in{grid-template-columns:.95fr 1.05fr;gap:54px;}
  #page-gaming-recruitment-agency .gra-storyset{grid-template-columns:repeat(3,1fr);}
  #page-gaming-recruitment-agency .gra-remote__in{grid-template-columns:64px 1fr;}
}
@media (min-width:1000px){
  #page-gaming-recruitment-agency .gra-roleset{grid-template-columns:repeat(4,1fr);}
  #page-gaming-recruitment-agency .gra-serveset{grid-template-columns:repeat(4,1fr);}
  #page-gaming-recruitment-agency .gra-staffset{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:899px){
  #page-gaming-recruitment-agency .gra-modal__box iframe{height:78vh;min-height:640px;}
}

/* ══ rule 26 — reduced motion ══════════════════════════════════════════
   There is no @keyframes and no 'infinite' anywhere in this sheet; every
   transition above is a finite response to hover / focus-visible / active /
   details-open. This override stands them down for readers who ask. */
@media (prefers-reduced-motion:reduce){
  #page-gaming-recruitment-agency *,
  #page-gaming-recruitment-agency *::before,
  #page-gaming-recruitment-agency *::after{
    animation:none !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
