/* ══════════════════════════════════════════════════════════════════════════
   /igaming-recruitment-agency — page-isolated stylesheet
   AISHTMLNEWDESIGN-465

   VISUAL DIRECTION — "THE HIDDEN MARKET"

   The H1 states the whole idea: talent you WON'T find on job boards. So the
   page is not a document, not a call sheet and not a process diagram — it is
   the two halves of one market. The advertised half is lit and legible; the
   unadvertised half, where a specialist search actually works, sits below the
   line in deep indigo. The reader is an operator deciding whether to retain an
   agency, so the lit half carries the argument and the deep half carries the
   things only a specialist reaches.

   Two grounds and one ink, and nothing else:

     · LIT     — #f3f3fa open-market paper, the dominant reading ground, with
                 #e9e9f4 for the alternating band. Faintly indigo rather than
                 white or warm: white is another page's ground and warm stone
                 is two others'.
     · DEEP    — #1d1747 / #262058 / #15102f. Not decoration: every deep plate
                 is a section that is ABOUT what is not advertised (the expert
                 agency, the technology, the global trends, the desks).
     · MARK    — #3E4095, which is not a chosen hue at all. It is the ink the
                 record's OWN assets are drawn in: circle-with-shadow.svg fills
                 #3E4095 and left-icon.svg strokes #393185. The page takes its
                 single signal from the artwork it has to carry. #9ea1ee is the
                 same ink read on the deep plates.

   Composition mark: THE SIGHTLINE. A hairline that opens every section —
   SOLID for the stretch of market you can see, then breaking into DOTS for the
   stretch you cannot. It reappears as the approach-leader in the role
   directory: a dotted run from each desk's name out to a solid terminal mark,
   which is what a private approach looks like. It is deliberately NOT a
   cut-corner file tab, a ruled roster row, a margin ordinal, a spec rule, an
   inlaid diamond, a two-digit token, a registration bracket or a quadrant
   rail: those belong to seven other pages in this repo and not one of them is
   reused here. There is no index numeral, no counting bar, no glass, no
   aurora and no corner-bracket arm anywhere in this sheet.

   Second mark: THE WATERLINE PLATE. Twice on the page a band is split across
   its middle — lit above, deep below — and the content plate straddles the
   split. Used once each way round. Static; it is a background stop, not motion.

   Sections: centred gradient hero, crumb strip, split waterline plate, lede +
   three ruled columns, two-up desk directory, two-up note grid, the waterline
   plate reversed, full-width ruled specification, four-up deep cell grid,
   indented step ladder, deep two-column article, icon-marked benefit list,
   reading column with an inset clause block, deep single-column forward look,
   check-marked undertaking, disclosure FAQ, reference rail, desk grid — no two
   repeat a layout.

   Every rule is scoped to #page-igaming-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). Element baselines below each repeat the
   wrapper id rather than sharing one group selector, so no heading or
   paragraph margin is ever collapsed wholesale.

   Design contract (frontend-design SKILL.md): rule 1 Inter · rule 2 nothing
   under 16px · rule 23 no slate-grey body copy on light · rule 24 image-free
   full-bleed hero, static gradient, ~900px column · rule 25 one CTA per
   section, every label unique · rule 26 no running animation (zero @keyframes,
   zero 'infinite'; transitions only, each a finite response to hover / focus /
   active / details-open, plus a reduced-motion override) · rule 29 real
   intrinsic image sizes · rule 30 no hand-built enquiry control of any kind ·
   rule 39A anything that paints a background owns its foreground at a
   specificity no prose rule here can beat.
   ══════════════════════════════════════════════════════════════════════════ */

#page-igaming-recruitment-agency{
  /* ── palette ───────────────────────────────────────────────────────── */
  --lit:#f3f3fa;              /* open-market paper — the dominant ground   */
  --lit-2:#e9e9f4;            /* alternating band                          */
  --face:#ffffff;             /* the straddling plates only                */
  --line:#d6d6e8;             /* hairline on lit                           */
  --line-2:#bcbcd8;           /* emphasised hairline / the dotted run      */
  --deep:#1d1747;             /* the unadvertised half                     */
  --deep-2:#262058;           /* raised deep                               */
  --deep-3:#15102f;           /* recessed deep                             */
  --line-dk:rgba(196,196,240,.24);
  --line-dk-2:rgba(196,196,240,.42);
  --ink:#171339;              /* headings on lit                           */
  --body:#332f56;             /* body on lit — 10.9:1 on --lit             */
  --body-dk:#d5d4ee;          /* body on deep — 10.7:1 on --deep           */
  --mark:#3E4095;             /* the record's own icon ink — 7.7:1 on lit  */
  --mark-2:#31337c;           /* pressed                                   */
  --mark-3:#26286a;           /* :active                                   */
  --mark-lt:#9ea1ee;          /* the same ink read on deep — 6.9:1         */
  --mark-tint:#e6e6f8;

  --wrap:1180px;
  --gut:clamp(20px,4vw,40px);
  --sec:clamp(56px,6.5vw,96px);

  font-family:"Inter",system-ui,sans-serif;
  font-size:16px;
  line-height:1.62;
  color:var(--body);
  background:var(--lit);
  -webkit-font-smoothing:antialiased;
}

/* The shared layout sheet sets no global box model, so the page sets its own,
   scoped to the wrapper and never on a bare universal selector. Without it
   every width:100% + horizontal-padding shell overflows a 390px viewport. */
#page-igaming-recruitment-agency,
#page-igaming-recruitment-agency *,
#page-igaming-recruitment-agency *::before,
#page-igaming-recruitment-agency *::after{ box-sizing:border-box; }

/* ── element baselines ─────────────────────────────────────────────────
   Each selector repeats the wrapper id on purpose. Writing
   "#page-x h1,h2,h3" applies the id to h1 only and takes EVERY h2/h3 on the
   document down with it — that shipped once and collapsed a whole page's
   vertical rhythm. Margins are non-zero by default; components adjust them,
   they never zero them wholesale. */
#page-igaming-recruitment-agency h1{ margin:0 0 22px; font-size:clamp(34px,4.6vw,56px); line-height:1.08; font-weight:800; letter-spacing:-.022em; color:var(--ink); }
#page-igaming-recruitment-agency h2{ margin:0 0 18px; font-size:clamp(28px,3.2vw,40px); line-height:1.18; font-weight:800; letter-spacing:-.016em; color:var(--ink); }
#page-igaming-recruitment-agency h3{ margin:0 0 10px; font-size:clamp(19px,1.5vw,22px); line-height:1.3; font-weight:700; letter-spacing:-.005em; color:var(--ink); }
#page-igaming-recruitment-agency p{ margin:0 0 18px; font-size:17px; }
#page-igaming-recruitment-agency p:last-child{ margin-bottom:0; }
#page-igaming-recruitment-agency ul{ margin:0; padding:0; list-style:none; }
#page-igaming-recruitment-agency ol{ margin:0; padding:0; list-style:none; }
#page-igaming-recruitment-agency li{ font-size:17px; }
#page-igaming-recruitment-agency img{ max-width:100%; }
#page-igaming-recruitment-agency figure{ margin:0; }
#page-igaming-recruitment-agency blockquote{ margin:0; }
#page-igaming-recruitment-agency strong.ira-lead{ color:var(--ink); font-weight:700; }

/* Keyboard focus is visible on both grounds. */
#page-igaming-recruitment-agency a:focus-visible,
#page-igaming-recruitment-agency button:focus-visible,
#page-igaming-recruitment-agency summary:focus-visible{
  outline:3px solid var(--mark);
  outline-offset:3px;
  border-radius:2px;
}
#page-igaming-recruitment-agency .ira-hero a:focus-visible,
#page-igaming-recruitment-agency .ira-hero button:focus-visible,
#page-igaming-recruitment-agency .ira-deep a:focus-visible,
#page-igaming-recruitment-agency .ira-deep button:focus-visible,
#page-igaming-recruitment-agency .ira-area a:focus-visible{
  outline-color:var(--mark-lt);
}

/* ── shells ─────────────────────────────────────────────────────────────── */
#page-igaming-recruitment-agency .ira-wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}
#page-igaming-recruitment-agency .ira-wrap--read{ max-width:920px; }

#page-igaming-recruitment-agency .ira-band{ padding:var(--sec) 0; }
#page-igaming-recruitment-agency .ira-band--paper{ background:var(--lit); }
#page-igaming-recruitment-agency .ira-band--tint{
  background:var(--lit-2);
  border-block:1px solid var(--line);
}

/* ══ THE SIGHTLINE — the page's recurring mark ═════════════════════════
   Solid for the stretch of market that is visible; dots for the stretch
   that is not. Two background layers on one 1px pseudo-element: the solid
   run paints over the first 96px of the dotted run. */
#page-igaming-recruitment-agency .ira-head{
  max-width:940px;
  margin:0 0 clamp(28px,3.2vw,42px);
}
#page-igaming-recruitment-agency .ira-head::before{
  content:"";
  display:block;
  height:2px;
  margin-bottom:20px;
  background-image:
    linear-gradient(90deg,var(--mark) 0 96px,transparent 96px),
    repeating-linear-gradient(90deg,var(--line-2) 0 2px,transparent 2px 8px);
  background-repeat:no-repeat,repeat-x;
  background-size:100% 2px,8px 2px;
  background-position:0 0,0 0;
}
#page-igaming-recruitment-agency .ira-head--dk::before{
  background-image:
    linear-gradient(90deg,var(--mark-lt) 0 96px,transparent 96px),
    repeating-linear-gradient(90deg,var(--line-dk-2) 0 2px,transparent 2px 8px);
}
#page-igaming-recruitment-agency .ira-head h2{ margin-bottom:0; }
#page-igaming-recruitment-agency h2.ira-h2--dk{ color:#ffffff; }

/* ── buttons ────────────────────────────────────────────────────────────
   One shape, one ink. There is no secondary button anywhere on this page:
   the single second destination (Contact Us) ships as an in-copy link. */
#page-igaming-recruitment-agency button.ira-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:14px 30px;
  font-family:inherit;
  font-size:17px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.01em;
  color:#ffffff;
  background:var(--mark);
  border:2px solid var(--mark);
  border-radius:2px;
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,transform .12s ease;
}
#page-igaming-recruitment-agency button.ira-btn:hover{ background:var(--mark-2); border-color:var(--mark-2); }
#page-igaming-recruitment-agency button.ira-btn:active{ background:var(--mark-3); border-color:var(--mark-3); transform:translateY(1px); }
/* The hero button sits on the deep gradient: it inverts to the lit ground so
   it is the brightest object in the hero. Owns its own foreground. */
#page-igaming-recruitment-agency button.ira-btn.ira-btn--lt{
  color:var(--deep-3);
  background:#ffffff;
  border-color:#ffffff;
}
#page-igaming-recruitment-agency button.ira-btn.ira-btn--lt:hover{ background:var(--mark-tint); border-color:var(--mark-tint); }
#page-igaming-recruitment-agency button.ira-btn.ira-btn--lt:active{ background:#d5d5f2; border-color:#d5d5f2; }

/* in-copy links */
#page-igaming-recruitment-agency a.ira-link{
  color:var(--mark);
  font-weight:700;
  border-bottom:2px solid var(--line-2);
  padding-bottom:1px;
  transition:color .16s ease,border-color .16s ease;
}
#page-igaming-recruitment-agency a.ira-link:hover{ color:var(--mark-2); border-bottom-color:var(--mark); }

/* ══ HERO — rule 24 ═══════════════════════════════════════════════════
   Full-bleed. The background is a STATIC two-stop gradient — no image, no
   background-position animation, nothing that moves. Content is one centred
   column of 900px with exactly one CTA and no visual of any kind. */
#page-igaming-recruitment-agency .ira-hero{
  width:100%;
  padding:clamp(72px,9vw,124px) var(--gut) clamp(64px,8vw,108px);
  background:linear-gradient(160deg,var(--deep-3) 0%,var(--deep) 52%,var(--deep-2) 100%);
  border-bottom:2px solid var(--mark);
}
#page-igaming-recruitment-agency .ira-hero__in{
  max-width:900px;
  margin-inline:auto;
  text-align:center;
}
/* The sightline opens the page too, centred under the eyebrow. */
#page-igaming-recruitment-agency p.ira-hero__eyebrow{
  margin:0 auto 20px;
  width:max-content;
  max-width:100%;
  padding-bottom:14px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mark-lt);
  background-image:
    linear-gradient(90deg,var(--mark-lt) 0 72px,transparent 72px),
    repeating-linear-gradient(90deg,var(--line-dk-2) 0 2px,transparent 2px 8px);
  background-repeat:no-repeat,repeat-x;
  background-size:100% 2px,8px 2px;
  background-position:0 100%,0 100%;
}
#page-igaming-recruitment-agency h1.ira-hero__h{ color:#ffffff; }
#page-igaming-recruitment-agency p.ira-hero__p{
  margin:0 auto 32px;
  max-width:820px;
  font-size:clamp(17px,1.35vw,19px);
  color:var(--body-dk);
}

/* ══ Breadcrumb ══════════════════════════════════════════════════════ */
#page-igaming-recruitment-agency .ira-crumb{
  background:var(--lit);
  border-bottom:1px solid var(--line);
}
#page-igaming-recruitment-agency .ira-crumb__in{
  display:flex;
  align-items:center;
  gap:12px;
  padding-block:16px;
  flex-wrap:wrap;
}
#page-igaming-recruitment-agency a.ira-crumb__back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid var(--line-2);
  border-radius:2px;
  background:var(--face);
  transition:border-color .16s ease,background-color .16s ease;
}
#page-igaming-recruitment-agency a.ira-crumb__back:hover{ border-color:var(--mark); background:var(--mark-tint); }
#page-igaming-recruitment-agency a.ira-crumb__l{
  font-size:16px;
  font-weight:600;
  color:var(--mark);
  transition:color .16s ease;
}
#page-igaming-recruitment-agency a.ira-crumb__l:hover{ color:var(--mark-2); text-decoration:underline; }
#page-igaming-recruitment-agency .ira-crumb__now{ font-size:16px; font-weight:600; color:var(--body); }

/* ══ WATERLINE PLATE — a band split across its middle, lit above and deep
   below, with both content plates straddling the split. Used twice, once
   each way round. The split is a hard gradient stop: static, no motion. ══ */
#page-igaming-recruitment-agency .ira-line{
  padding:clamp(44px,5vw,72px) 0;
  background-image:linear-gradient(to bottom,var(--lit) 0 50%,var(--deep) 50% 100%);
  border-block:1px solid var(--line);
}
#page-igaming-recruitment-agency .ira-line--flip{
  background-image:linear-gradient(to bottom,var(--deep) 0 50%,var(--lit-2) 50% 100%);
}
#page-igaming-recruitment-agency .ira-line__in{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(20px,3vw,40px);
  align-items:stretch;
}
#page-igaming-recruitment-agency .ira-plate{
  background:var(--face);
  border:1px solid var(--line-2);
  padding:clamp(16px,2vw,26px);
  display:flex;
  align-items:center;
  justify-content:center;
}
#page-igaming-recruitment-agency img.ira-plate__img{ display:block; width:100%; height:auto; }
#page-igaming-recruitment-agency .ira-say{
  background:var(--face);
  border:1px solid var(--line-2);
  border-left:4px solid var(--mark);
  padding:clamp(26px,3.2vw,44px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
#page-igaming-recruitment-agency h2.ira-say__h{ font-size:clamp(26px,2.7vw,34px); }
#page-igaming-recruitment-agency p.ira-say__p{ margin-bottom:26px; color:var(--body); }
#page-igaming-recruitment-agency .ira-say button.ira-btn{ align-self:flex-start; }
#page-igaming-recruitment-agency p.ira-say__alt{ margin:18px 0 0; font-size:17px; }

/* ══ DEFINITION — a lede, then three ruled columns ══════════════════════ */
#page-igaming-recruitment-agency p.ira-lede{
  max-width:940px;
  margin-bottom:clamp(28px,3vw,40px);
  font-size:clamp(18px,1.5vw,21px);
  line-height:1.55;
  color:var(--ink);
  font-weight:500;
}
#page-igaming-recruitment-agency .ira-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,2.6vw,36px);
  border-top:2px solid var(--line-2);
  padding-top:clamp(22px,2.6vw,32px);
}
#page-igaming-recruitment-agency p.ira-cols__p{ margin:0; }
#page-igaming-recruitment-agency .ira-cols__p + .ira-cols__p{
  padding-left:clamp(22px,2.6vw,36px);
  border-left:1px solid var(--line);
  margin-left:calc(-1 * clamp(22px,2.6vw,36px) / 2);
}

/* ══ THE DIRECTORY — the desks a specialist search calls. Each row runs a
   dotted approach-leader out to a solid terminal mark. Per-cell borders:
   never a gap:1px grid, which paints every vacant slot as a grey band. ══ */
#page-igaming-recruitment-agency p.ira-copy{ max-width:980px; margin-bottom:clamp(26px,3vw,38px); }
#page-igaming-recruitment-agency p.ira-copy--after{ margin:clamp(26px,3vw,38px) 0 0; }
#page-igaming-recruitment-agency p.ira-copy--dk{ color:var(--body-dk); }

#page-igaming-recruitment-agency .ira-dir{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,3vw,48px);
}
#page-igaming-recruitment-agency .ira-desk{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
#page-igaming-recruitment-agency .ira-dir .ira-desk:nth-last-child(-n+2){ border-bottom:0; }
#page-igaming-recruitment-agency img.ira-desk__i{
  flex:none;
  width:56px;
  height:56px;
  padding:6px;
  background:var(--face);
  border:1px solid var(--line);
  border-radius:2px;
}
#page-igaming-recruitment-agency h3.ira-desk__t{
  margin:0;
  font-size:19px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#page-igaming-recruitment-agency .ira-desk__lead{
  position:relative;
  flex:1 1 24px;
  min-width:24px;
  height:2px;
  background-image:repeating-linear-gradient(90deg,var(--line-2) 0 2px,transparent 2px 8px);
  background-size:8px 2px;
}
#page-igaming-recruitment-agency .ira-desk__lead::after{
  content:"";
  position:absolute;
  right:0;
  top:-3px;
  width:8px;
  height:8px;
  background:var(--mark);
}
#page-igaming-recruitment-agency .ira-desk:hover img.ira-desk__i{ border-color:var(--mark); }

/* ══ TERMS OF ATTRACTION — two-up cells, each opened by its own sightline.
   Per-cell top borders, so an odd last row leaves no painted empty slot. ══ */
#page-igaming-recruitment-agency .ira-notes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,3.4vw,56px);
  row-gap:clamp(26px,3vw,40px);
}
#page-igaming-recruitment-agency .ira-note{ padding-top:20px; position:relative; }
#page-igaming-recruitment-agency .ira-note::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background-image:
    linear-gradient(90deg,var(--mark) 0 52px,transparent 52px),
    repeating-linear-gradient(90deg,var(--line-2) 0 2px,transparent 2px 8px);
  background-repeat:no-repeat,repeat-x;
  background-size:100% 2px,8px 2px;
}
#page-igaming-recruitment-agency h3.ira-note__t{ font-size:20px; }
#page-igaming-recruitment-agency p.ira-note__p{ margin:0; }

/* ══ CANDIDATE SPECIFICATION — full-width ruled rows: term left, note
   right. One column of rows, not a card grid. ══════════════════════════ */
#page-igaming-recruitment-agency .ira-specs{ border-top:2px solid var(--line-2); }
#page-igaming-recruitment-agency .ira-spec{
  display:grid;
  grid-template-columns:minmax(200px,300px) minmax(0,1fr);
  gap:clamp(16px,2.4vw,44px);
  padding:clamp(18px,2.2vw,26px) 0;
  border-bottom:1px solid var(--line);
}
#page-igaming-recruitment-agency h3.ira-spec__t{ margin:0; font-size:20px; color:var(--mark); }
#page-igaming-recruitment-agency p.ira-spec__p{ margin:0; }

/* ══ THE UNLIT SIDE / FORWARD LOOK / WHERE IT IS HEADED — deep plates ══ */
#page-igaming-recruitment-agency .ira-deep{
  padding:var(--sec) 0;
  background:var(--deep);
  color:var(--body-dk);
}
#page-igaming-recruitment-agency .ira-deep--alt{ background:var(--deep-2); }
#page-igaming-recruitment-agency .ira-deep--read{ background:var(--deep-3); }

#page-igaming-recruitment-agency .ira-advs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin-top:clamp(26px,3vw,38px);
}
#page-igaming-recruitment-agency .ira-adv{
  padding:clamp(20px,2.2vw,28px);
  border:1px solid var(--line-dk);
  margin:-1px 0 0 -1px;   /* collapse doubled hairlines without a gap grid */
  transition:background-color .16s ease;
}
#page-igaming-recruitment-agency .ira-adv:hover{ background:rgba(255,255,255,.05); }
#page-igaming-recruitment-agency h3.ira-adv__t{ font-size:19px; color:#ffffff; }
#page-igaming-recruitment-agency p.ira-adv__p{ margin:0; font-size:16px; color:var(--body-dk); }

#page-igaming-recruitment-agency .ira-two{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,3.4vw,56px);
  row-gap:clamp(20px,2.4vw,30px);
}
#page-igaming-recruitment-agency p.ira-two__p{
  margin:0;
  padding-top:18px;
  border-top:1px solid var(--line-dk);
  color:var(--body-dk);
}

#page-igaming-recruitment-agency p.ira-trend{
  margin:0;
  padding:clamp(18px,2.2vw,24px) 0;
  border-bottom:1px solid var(--line-dk);
  color:var(--body-dk);
  font-size:clamp(17px,1.3vw,18px);
}
#page-igaming-recruitment-agency p.ira-trend:first-of-type{
  font-size:clamp(18px,1.5vw,21px);
  line-height:1.55;
  color:#ffffff;
  font-weight:500;
}
#page-igaming-recruitment-agency p.ira-trend:last-child{ border-bottom:0; padding-bottom:0; }

/* ══ THE APPROACH — six moves, each hung off its own indented rule ═════ */
#page-igaming-recruitment-agency .ira-steps{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,3.4vw,56px);
  row-gap:clamp(22px,2.6vw,32px);
}
#page-igaming-recruitment-agency .ira-step{
  padding-left:clamp(18px,2vw,26px);
  border-left:3px solid var(--mark);
}
#page-igaming-recruitment-agency p.ira-step__p{ margin:0; font-size:16px; }

/* ══ RETURN — the record's circle mark opens each row ═══════════════════ */
#page-igaming-recruitment-agency .ira-bens{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,3.4vw,56px);
}
#page-igaming-recruitment-agency .ira-ben{
  display:flex;
  gap:16px;
  padding:clamp(20px,2.2vw,26px) 0;
  border-bottom:1px solid var(--line);
}
#page-igaming-recruitment-agency .ira-bens .ira-ben:nth-last-child(-n+2){ border-bottom:0; padding-bottom:0; }
#page-igaming-recruitment-agency img.ira-ben__m{ flex:none; width:22px; height:22px; margin-top:5px; }
#page-igaming-recruitment-agency .ira-ben__b{ min-width:0; }
#page-igaming-recruitment-agency h3.ira-ben__t{ font-size:20px; }
#page-igaming-recruitment-agency p.ira-ben__p{ margin:0; }

/* ══ THE FRAME — regulation: prose, an inset clause block, prose ═══════ */
#page-igaming-recruitment-agency p.ira-read{ font-size:clamp(17px,1.3vw,18px); }
#page-igaming-recruitment-agency .ira-comply{
  margin:clamp(24px,2.8vw,34px) 0;
  padding:clamp(22px,2.6vw,30px);
  background:var(--face);
  border:1px solid var(--line-2);
  border-top:4px solid var(--mark);
}
#page-igaming-recruitment-agency p.ira-comply__h{
  margin:0 0 14px;
  font-size:17px;
  font-weight:700;
  color:var(--ink);
}
#page-igaming-recruitment-agency .ira-comply__i{
  position:relative;
  padding:10px 0 10px 28px;
  font-size:16px;
  border-top:1px solid var(--line);
}
#page-igaming-recruitment-agency .ira-comply__i::before{
  content:"";
  position:absolute;
  left:0;
  top:19px;
  width:14px;
  height:2px;
  background:var(--mark);
}

/* ══ THE UNDERTAKING — the record's check mark opens each line ═════════ */
#page-igaming-recruitment-agency .ira-whys{ border-top:2px solid var(--line-2); }
#page-igaming-recruitment-agency .ira-why{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:clamp(16px,2vw,22px) 0;
  border-bottom:1px solid var(--line);
}
#page-igaming-recruitment-agency img.ira-why__m{ flex:none; width:24px; height:24px; margin-top:3px; }
#page-igaming-recruitment-agency p.ira-why__p{ margin:0; }

/* ══ FAQ — a disclosure list; the page JS keeps one panel open ═════════ */
#page-igaming-recruitment-agency .ira-faq{ border-top:2px solid var(--line-2); }
#page-igaming-recruitment-agency .ira-q{ border-bottom:1px solid var(--line); }
#page-igaming-recruitment-agency .ira-q__s{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:20px 0;
  cursor:pointer;
  list-style:none;
  transition:color .16s ease;
}
#page-igaming-recruitment-agency .ira-q__s::-webkit-details-marker{ display:none; }
#page-igaming-recruitment-agency h3.ira-q__t{
  margin:0;
  flex:1;
  font-size:clamp(18px,1.45vw,20px);
  font-weight:700;
  color:var(--ink);
  transition:color .16s ease;
}
#page-igaming-recruitment-agency .ira-q__s:hover h3.ira-q__t{ color:var(--mark); }
/* The marker is a plus that becomes a minus on open — a finite, user-driven
   state change, not motion for its own sake. */
#page-igaming-recruitment-agency .ira-q__m{
  position:relative;
  flex:none;
  width:26px;
  height:26px;
  margin-top:2px;
  border:1px solid var(--line-2);
  border-radius:2px;
  background:var(--face);
  transition:background-color .16s ease,border-color .16s ease;
}
#page-igaming-recruitment-agency .ira-q__m::before,
#page-igaming-recruitment-agency .ira-q__m::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:2px;
  margin:-1px 0 0 -6px;
  background:var(--mark);
  transition:transform .18s ease,opacity .18s ease;
}
#page-igaming-recruitment-agency .ira-q__m::after{ transform:rotate(90deg); }
#page-igaming-recruitment-agency .ira-q[open] .ira-q__m{ background:var(--mark); border-color:var(--mark); }
#page-igaming-recruitment-agency .ira-q[open] .ira-q__m::before,
#page-igaming-recruitment-agency .ira-q[open] .ira-q__m::after{ background:#ffffff; }
#page-igaming-recruitment-agency .ira-q[open] .ira-q__m::after{ transform:rotate(0deg); opacity:0; }
#page-igaming-recruitment-agency .ira-q__a{
  padding:0 44px 22px 0;
  max-width:820px;
}
#page-igaming-recruitment-agency .ira-q__a p{ margin:0; }

/* ══ REFERENCES — video facades. The iframe is created on click, never
   before: no third-party frame is requested until the reader asks. ═════ */
#page-igaming-recruitment-agency .ira-stories{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,34px);
}
#page-igaming-recruitment-agency .ira-story{
  background:var(--face);
  border:1px solid var(--line-2);
  display:flex;
  flex-direction:column;
}
#page-igaming-recruitment-agency button.ira-vid{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  border-bottom:1px solid var(--line);
  background:var(--deep-3);
  cursor:pointer;
  line-height:0;
}
#page-igaming-recruitment-agency button.ira-vid img{
  display:block;
  width:100%;
  height:auto;
  transition:opacity .16s ease;
}
#page-igaming-recruitment-agency button.ira-vid:hover img{ opacity:.82; }
#page-igaming-recruitment-agency .ira-vid__p{
  position:absolute;
  left:50%;
  top:50%;
  width:62px;
  height:62px;
  margin:-31px 0 0 -31px;
  border-radius:50%;
  background:var(--mark);
  border:3px solid #ffffff;
  transition:background-color .16s ease,transform .12s ease;
}
#page-igaming-recruitment-agency .ira-vid__p::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  margin:-10px 0 0 -5px;
  border-style:solid;
  border-width:10px 0 10px 16px;
  border-color:transparent transparent transparent #ffffff;
}
#page-igaming-recruitment-agency button.ira-vid:hover .ira-vid__p{ background:var(--mark-2); }
#page-igaming-recruitment-agency button.ira-vid:active .ira-vid__p{ transform:scale(.94); }
#page-igaming-recruitment-agency .ira-story__frame{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  border:0;
  border-bottom:1px solid var(--line);
}
#page-igaming-recruitment-agency .ira-story__q{ padding:clamp(18px,2vw,24px); }
#page-igaming-recruitment-agency .ira-story__q p{ margin:0; font-size:16px; }
#page-igaming-recruitment-agency p.ira-more{ margin:clamp(24px,2.8vw,34px) 0 0; }

/* ══ AREA WE SERVE — filed under FOOTER in the record; the shared footer is
   never forked, so the section is authored inside <main> and dressed as the
   deep plate it belongs to. ═══════════════════════════════════════════ */
#page-igaming-recruitment-agency .ira-area{
  padding:var(--sec) 0;
  background:var(--deep);
  border-top:2px solid var(--mark);
  color:var(--body-dk);
}
#page-igaming-recruitment-agency .ira-desks{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
}
#page-igaming-recruitment-agency .ira-desk2{
  padding:clamp(20px,2.2vw,26px);
  border:1px solid var(--line-dk);
  margin:-1px 0 0 -1px;
}
#page-igaming-recruitment-agency h3.ira-desk2__t{
  font-size:17px;
  font-weight:800;
  letter-spacing:.13em;
  color:var(--mark-lt);
}
#page-igaming-recruitment-agency p.ira-desk2__tel{ margin:0 0 10px; font-size:18px; font-weight:700; }
#page-igaming-recruitment-agency a.ira-tel{ color:#ffffff; transition:color .16s ease; }
#page-igaming-recruitment-agency a.ira-tel:hover{ color:var(--mark-lt); text-decoration:underline; }
#page-igaming-recruitment-agency p.ira-desk2__a{ margin:0; font-size:16px; color:var(--body-dk); }

/* ══ CTA modal — the close control and the embedded widget, nothing else.
   The widget owns its own heading; no wrapper title, no badge, no divider.
   This page hand-builds no enquiry control of any kind (rule 30). ═════ */
#page-igaming-recruitment-agency .ira-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:12000;
  background:rgba(21,16,47,.72);
  padding: 100px 16px 24px 16px;
  overflow-y:auto;
}
#page-igaming-recruitment-agency .ira-modal.is-open{
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
#page-igaming-recruitment-agency .ira-modal__box{
  position:relative;
  width:100%;
  max-width:620px;
  margin:auto;
  background:#ffffff;
  border:1px solid var(--line-2);
  border-top:4px solid var(--mark);
  padding:44px 18px 18px;
}
#page-igaming-recruitment-agency button.ira-modal__x{
  position:absolute;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  background:var(--lit-2);
  border:1px solid var(--line-2);
  border-radius:2px;
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}
#page-igaming-recruitment-agency button.ira-modal__x:hover{ background:var(--mark); color:#ffffff; border-color:var(--mark); }
#page-igaming-recruitment-agency .ira-modal iframe{
  display:block;
  width:100%;
  min-height:820px;
  border:0;
}

/* ══ RESPONSIVE ═══════════════════════════════════════════════════════
   Recomposed, not shrunk: the four-up deep grid steps to two then one, the
   waterline plates stack with the split moved to the seam between them, and
   every two-up grid becomes a single column of ruled rows. ═══════════ */
@media (max-width:1080px){
  #page-igaming-recruitment-agency .ira-advs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #page-igaming-recruitment-agency .ira-desks{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #page-igaming-recruitment-agency .ira-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #page-igaming-recruitment-agency .ira-cols__p + .ira-cols__p{ padding-left:0; border-left:0; margin-left:0; }
  #page-igaming-recruitment-agency .ira-cols__p:nth-child(2){
    padding-left:clamp(22px,2.6vw,36px);
    border-left:1px solid var(--line);
  }
}
@media (max-width:920px){
  #page-igaming-recruitment-agency .ira-line__in{ grid-template-columns:minmax(0,1fr); }
  #page-igaming-recruitment-agency .ira-stories{ grid-template-columns:minmax(0,1fr); }
  #page-igaming-recruitment-agency .ira-story{ max-width:520px; }
  #page-igaming-recruitment-agency .ira-spec{ grid-template-columns:minmax(0,1fr); gap:8px; }
}
@media (max-width:760px){
  #page-igaming-recruitment-agency .ira-dir{ grid-template-columns:minmax(0,1fr); }
  #page-igaming-recruitment-agency .ira-dir .ira-desk:nth-last-child(-n+2){ border-bottom:1px solid var(--line); }
  #page-igaming-recruitment-agency .ira-dir .ira-desk:last-child{ border-bottom:0; }
  #page-igaming-recruitment-agency .ira-notes,
  #page-igaming-recruitment-agency .ira-steps,
  #page-igaming-recruitment-agency .ira-two,
  #page-igaming-recruitment-agency .ira-bens{ grid-template-columns:minmax(0,1fr); }
  #page-igaming-recruitment-agency .ira-bens .ira-ben:nth-last-child(-n+2){ border-bottom:1px solid var(--line); padding-bottom:clamp(20px,2.2vw,26px); }
  #page-igaming-recruitment-agency .ira-bens .ira-ben:last-child{ border-bottom:0; padding-bottom:0; }
  #page-igaming-recruitment-agency .ira-cols{ grid-template-columns:minmax(0,1fr); }
  #page-igaming-recruitment-agency .ira-cols__p:nth-child(2){ padding-left:0; border-left:0; }
  #page-igaming-recruitment-agency .ira-advs,
  #page-igaming-recruitment-agency .ira-desks{ grid-template-columns:minmax(0,1fr); }
  #page-igaming-recruitment-agency h3.ira-desk__t{ white-space:normal; }
  #page-igaming-recruitment-agency .ira-desk__lead{ display:none; }
  #page-igaming-recruitment-agency .ira-q__a{ padding-right:0; }
}
@media (max-width:520px){
  #page-igaming-recruitment-agency button.ira-btn{ width:100%; }
  #page-igaming-recruitment-agency .ira-say button.ira-btn{ align-self:stretch; }
  #page-igaming-recruitment-agency .ira-modal__box{ padding:44px 12px 12px; }
}

/* ══ REDUCED MOTION ═══════════════════════════════════════════════════
   There is no @keyframes rule in this sheet and no 'animation' property at
   all — the only motion on the page is the finite transition on a hover,
   focus, press or details-open. This turns even those off. ═══════════ */
@media (prefers-reduced-motion:reduce){
  #page-igaming-recruitment-agency *,
  #page-igaming-recruitment-agency *::before,
  #page-igaming-recruitment-agency *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}