/* ══════════════════════════════════════════════════════════════════════════
   /igaming-hiring — page-isolated stylesheet
   AISHTMLNEWDESIGN-464

   VISUAL DIRECTION — "SEARCH MANDATE"

   A specialist recruiter does not work from a job board. It works from a
   MANDATE: a signed instruction to go and find people, filed with its
   clauses, its jurisdictions, and a chain of custody for every candidate.
   This record is exactly that document — a definition, the roles named, the
   terms of attraction, the process from listing to placement, the legal and
   regulatory clause, the obstacles, and a forward look — so the page is
   dressed as the mandate rather than as a sales sheet. The reader is an
   operator deciding whether to hand the search over, not a candidate.

   Three materials, nothing else:

     · STOCK   — plain white (#ffffff) mandate paper, the dominant reading
                 ground, alternating with a pale petrol WASH (#eef3f5).
                 White-dominant on purpose: it is the one ground none of the
                 neighbouring pages use.
     · PETROL  — #0f2b33, a deep blue-green ink. The plates where the agency
                 speaks in its own voice (the mandate, the engagement, the
                 obstacle, the desks). Punctuation, never the page's ground.
     · SEAL    — berry #a3195b, the signing ink. The only hue that carries an
                 action. One accent, no second family, no gradient set.

   Composition mark: THE FILE TAB — a small rectangle with its top-right
   corner cut away, naming each clause of the mandate. It opens every section
   and frames every image plate. It is deliberately NOT a full-width hairline
   rail, a corner registration bracket, a margin ordinal, a two-digit token,
   a quadrant square, an inlaid diamond or an index numeral: those belong to
   other pages in this repo and none of them is reused here.

   Sections are composed as a centred hero, a crumb strip, a split plate, a
   lede + two-column article, a four-up bordered role grid, a ruled clause
   list, a reversed split plate, a two-column stage ladder with a spine, a
   two-up bordered advantage grid, a marker'd specification list, a dark
   two-column argument, a marker'd jurisdiction list, a tabbed trend list, a
   lede + quadrant article, a disclosure FAQ, a reference rail and a bordered
   desk grid — no two sections repeat a layout.

   Every rule is scoped to #page-igaming-hiring. 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 prefix, so nothing leaks and no
   heading/paragraph margin is collapsed to zero by a stray group selector.

   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 (#20323a floor)
     · rule 24 — image-free full-bleed hero, static gradient, ~900px column
     · rule 25 — one CTA per section, every label unique page-wide
     · rule 26 — no running animation: zero @keyframes, zero 'infinite';
                 transitions only, each a finite response to hover / focus /
                 active / details-open, with a reduced-motion override
     · rule 30 — no hand-built enquiry controls; the shared popup is the only
                 enquiry surface, so this sheet styles no field of any kind
     · rule 39A — anything that paints a background owns its foreground at a
                 specificity no prose rule in this sheet can beat
   ══════════════════════════════════════════════════════════════════════════ */

#page-igaming-hiring{
  /* ── palette ───────────────────────────────────────────────────────── */
  --stock:#ffffff;            /* mandate paper — the dominant ground      */
  --wash:#eef3f5;             /* pale petrol wash — alternate band        */
  --wash-2:#e3ecef;           /* deeper wash, used for inset cells        */
  --petrol:#0f2b33;           /* mandate ink — the dark plates            */
  --petrol-2:#16404a;         /* raised petrol                            */
  --petrol-3:#0a2028;         /* recessed petrol                          */
  --line:#d4dfe2;             /* hairline on stock                        */
  --line-2:#b6c7cb;           /* emphasised hairline                      */
  --line-dk:rgba(206,228,233,.22);  /* hairline on petrol                 */
  --ink:#0b1e24;              /* headings on light                        */
  --body:#20323a;             /* body copy on light — above the grey floor*/
  --body-dk:#cfe1e5;          /* body copy on petrol                      */
  --seal:#a3195b;             /* signing ink — the single signal          */
  --seal-2:#7d0f44;           /* pressed seal                             */
  --seal-3:#630b35;           /* deepest seal, for :active                */
  --seal-tint:#fbeaf2;        /* seal wash, for tabs on stock             */
  --seal-line:#f0cadd;        /* seal hairline                            */
  --seal-lt:#ff9dc4;          /* seal read on petrol (17px+ links)        */
  --seal-lt-2:#ffbdd8;        /* seal read on a TAB CHIP over petrol.
                                 Measured, not chosen by eye: #ff9dc4 on
                                 rgba(255,255,255,.09) over the lightest
                                 gradient stop (#16404a) is 4.47:1 — just
                                 under AA for 16px bold. At .07 alpha this
                                 value reads 5.90:1 on that stop and
                                 7.77:1 on the base stop.                */
  --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(--stock);
  -webkit-font-smoothing:antialiased;
}

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

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

/* Keyboard focus is visible everywhere, on both grounds. */
#page-igaming-hiring a:focus-visible,
#page-igaming-hiring button:focus-visible,
#page-igaming-hiring summary:focus-visible{
  outline:3px solid var(--seal);
  outline-offset:3px;
  border-radius:2px;
}
#page-igaming-hiring .ih-hero a:focus-visible,
#page-igaming-hiring .ih-hero button:focus-visible,
#page-igaming-hiring .ih-mandate button:focus-visible,
#page-igaming-hiring .ih-scale button:focus-visible,
#page-igaming-hiring .ih-area a:focus-visible{
  outline-color:var(--seal-lt);
}

/* ── shells ────────────────────────────────────────────────────────────── */
#page-igaming-hiring .ih-wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}
#page-igaming-hiring .ih-wrap--narrow{ max-width:920px; }

#page-igaming-hiring .ih-band{ padding:var(--sec) 0; }
#page-igaming-hiring .ih-band--paper{ background:var(--stock); }
#page-igaming-hiring .ih-band--wash{ background:var(--wash); border-block:1px solid var(--line); }

/* ── THE FILE TAB — the page's recurring mark ───────────────────────────
   A rectangle with its top-right corner cut away, as a manila tab is cut.
   It paints a background, so per rule 39A it owns its foreground at
   (1,2,1) — the class is repeated, which beats any "<ancestor> p" prose
   rule this sheet could ever grow. */
#page-igaming-hiring p.ih-tab.ih-tab{
  display:inline-block;
  margin:0 0 20px;
  padding:7px 20px 7px 13px;
  font-size:16px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--seal-2);
  background:var(--seal-tint);
  border:1px solid var(--seal-line);
  clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
}
#page-igaming-hiring p.ih-tab--dk.ih-tab{
  color:var(--seal-lt-2);
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.26);
}

#page-igaming-hiring .ih-head{ max-width:920px; margin-bottom:clamp(30px,3.4vw,44px); }
#page-igaming-hiring .ih-head h2{ margin-bottom:0; }
#page-igaming-hiring h2.ih-h2--dk{ color:#ffffff; }

/* ── buttons ────────────────────────────────────────────────────────────
   One shape, one hue. There is no secondary button anywhere on this page:
   the single second destination (Contact Us) is an in-copy link, per the
   skill's "second destination = inline link" rule. */
#page-igaming-hiring button.ih-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;
  letter-spacing:.01em;
  line-height:1.2;
  color:#ffffff;
  background:var(--seal);
  border:1px solid var(--seal);
  border-radius:2px;
  cursor:pointer;
  text-align:center;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition:background .18s ease, transform .18s ease, border-color .18s ease;
}
#page-igaming-hiring button.ih-btn:hover{ background:var(--seal-2); border-color:var(--seal-2); transform:translateY(-2px); }
#page-igaming-hiring button.ih-btn:focus-visible{ background:var(--seal-2); border-color:var(--seal-2); }
#page-igaming-hiring button.ih-btn:active{ background:var(--seal-3); border-color:var(--seal-3); transform:translateY(0); }

/* In-copy links. The self-contained baseline block sets
   `#page-igaming-hiring a{color:inherit}` at (1,0,1); a bare `.ih-inline`
   is (0,1,0) and a plain `#page-igaming-hiring a.ih-inline` only TIES at
   (1,1,1) and then LOSES, because the baseline <style> block is later in
   the document than this file. The class is repeated to reach (1,2,1), so
   the link genuinely outranks it. Counted, not eyeballed. */
#page-igaming-hiring a.ih-inline.ih-inline{
  color:var(--seal-2);
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
  transition:color .18s ease;
}
#page-igaming-hiring a.ih-inline.ih-inline:hover{ color:var(--seal); }

/* ══ HERO — rule 24 ════════════════════════════════════════════════════
   Full-bleed, edge to edge, background is a STATIC gradient (no animation,
   no background-image, no media of any kind), content in a centred 900px
   reading column, exactly one CTA. */
#page-igaming-hiring .ih-hero{
  width:100%;
  padding:clamp(70px,8.5vw,124px) var(--gut) clamp(64px,7.5vw,108px);
  background:linear-gradient(158deg,#0a2028 0%,#0f2b33 42%,#16404a 100%);
  border-bottom:1px solid var(--petrol-2);
}
#page-igaming-hiring .ih-hero__in{
  max-width:900px;
  margin-inline:auto;
  text-align:center;
}
#page-igaming-hiring p.ih-hero__tag{
  display:inline-block;
  margin:0 0 24px;
  padding:7px 20px 7px 13px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--seal-lt-2);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.26);
  clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
}
#page-igaming-hiring h1.ih-hero__h{
  color:#ffffff;
  margin-bottom:22px;
  text-wrap:balance;
}
#page-igaming-hiring p.ih-hero__p{
  margin:0 auto 34px;
  max-width:820px;
  font-size:18px;
  line-height:1.72;
  color:var(--body-dk);
}

/* ══ Breadcrumb ════════════════════════════════════════════════════════ */
#page-igaming-hiring .ih-crumb{
  background:var(--stock);
  border-bottom:1px solid var(--line);
}
#page-igaming-hiring .ih-crumb__in{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding-block:16px;
}
#page-igaming-hiring .ih-crumb__back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid var(--line);
  background:var(--wash);
  transition:border-color .18s ease, background .18s ease;
}
#page-igaming-hiring .ih-crumb__back:hover{ border-color:var(--seal); background:var(--seal-tint); }
#page-igaming-hiring .ih-crumb__back img{ display:block; width:16px; height:16px; }
#page-igaming-hiring .ih-crumb__in a.ih-crumb__l{
  font-size:16px;
  font-weight:600;
  color:var(--seal-2);
  transition:color .18s ease;
}
#page-igaming-hiring .ih-crumb__in a.ih-crumb__l:hover{ color:var(--seal); text-decoration:underline; text-underline-offset:3px; }
#page-igaming-hiring .ih-crumb__now{ font-size:16px; font-weight:600; color:var(--body); }

/* ══ THE MANDATE — split petrol plate, text left, image plate right ════ */
#page-igaming-hiring .ih-mandate{
  background:linear-gradient(100deg,var(--petrol) 0%,var(--petrol-2) 100%);
  padding:clamp(52px,6vw,84px) 0;
}
#page-igaming-hiring .ih-mandate__in{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,4vw,60px);
  align-items:center;
}
#page-igaming-hiring p.ih-mandate__p{
  margin:0 0 30px;
  font-size:18px;
  line-height:1.7;
  color:var(--body-dk);
  max-width:36em;
}

/* The image plate carries the same cut corner as the tab, so the picture
   reads as an exhibit clipped to the mandate rather than a floating card. */
#page-igaming-hiring .ih-plate{
  position:relative;
  padding:12px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.20);
  clip-path:polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
#page-igaming-hiring .ih-plate__img{
  display:block;
  width:100%;
  height:auto;
}

/* ══ Lede + article ════════════════════════════════════════════════════ */
#page-igaming-hiring .ih-lede{
  max-width:900px;
  padding-left:22px;
  border-left:4px solid var(--seal);
  margin-bottom:clamp(26px,3vw,38px);
}
#page-igaming-hiring .ih-lede p{
  font-size:19px;
  line-height:1.7;
  color:var(--ink);
  font-weight:500;
}
#page-igaming-hiring .ih-two{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,44px);
}
#page-igaming-hiring .ih-two p{ margin:0; line-height:1.72; }
#page-igaming-hiring p.ih-copy{ max-width:1000px; line-height:1.72; }
#page-igaming-hiring p.ih-copy--after{ margin-top:clamp(28px,3vw,40px); margin-bottom:0; }

/* ══ ROLES — four-up grid, PER-CELL borders ════════════════════════════
   Per-cell borders on purpose. The `gap:1px over a coloured container`
   divider trick paints every vacant slot of an auto-fit grid as a solid
   rectangle, which shipped as a visible empty band on a sibling page.
   The column count here is explicit (4 / 2 / 1) and the eight cells fill
   every row exactly at each of them, so no slot is ever vacant. */
#page-igaming-hiring .ih-roles{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(28px,3vw,42px);
  border-top:1px solid var(--line-2);
  border-left:1px solid var(--line-2);
}
#page-igaming-hiring .ih-role{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:26px 22px 28px;
  background:var(--stock);
  border-right:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  transition:background .18s ease;
}
#page-igaming-hiring .ih-role:hover{ background:var(--seal-tint); }
#page-igaming-hiring .ih-role__i{
  display:block;
  width:52px;
  height:52px;
  object-fit:contain;
}
#page-igaming-hiring h3.ih-role__t{
  margin:0;
  font-size:18px;
  line-height:1.35;
  font-weight:700;
  color:var(--ink);
}

/* ══ CLAUSES — ruled rows with a hanging cut-corner marker ═════════════ */
#page-igaming-hiring .ih-clauses{
  border-top:1px solid var(--line);
}
#page-igaming-hiring .ih-clause{
  position:relative;
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:0 22px;
  padding:clamp(24px,2.6vw,32px) 0;
  border-bottom:1px solid var(--line);
}
#page-igaming-hiring .ih-clause::before{
  content:"";
  grid-column:1;
  grid-row:1 / span 2;
  width:14px;
  height:14px;
  margin-top:9px;
  background:var(--seal);
  clip-path:polygon(0 0, 60% 0, 100% 40%, 100% 100%, 0 100%);
}
#page-igaming-hiring h3.ih-clause__t{
  grid-column:2;
  margin:0 0 10px;
  font-size:20px;
}
#page-igaming-hiring p.ih-clause__p{
  grid-column:2;
  margin:0;
  max-width:78ch;
  line-height:1.72;
}

/* ══ ENGAGEMENT — the plate reversed, image left ═══════════════════════ */
#page-igaming-hiring .ih-scale{
  background:linear-gradient(260deg,var(--petrol) 0%,var(--petrol-3) 100%);
  padding:clamp(52px,6vw,84px) 0;
}
#page-igaming-hiring .ih-scale__in{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,4vw,60px);
  align-items:center;
}
#page-igaming-hiring p.ih-scale__p{
  margin:0 0 30px;
  font-size:18px;
  line-height:1.7;
  color:var(--body-dk);
  max-width:36em;
}
#page-igaming-hiring p.ih-scale__alt{ margin:20px 0 0; }
#page-igaming-hiring .ih-scale__alt a.ih-inline.ih-inline{ color:var(--seal-lt); }
#page-igaming-hiring .ih-scale__alt a.ih-inline.ih-inline:hover{ color:#ffc4dc; }

/* ══ STAGES — a two-column ladder hung off a single spine ══════════════ */
#page-igaming-hiring .ih-stages{
  position:relative;
  padding-left:clamp(0px,2vw,26px);
}
#page-igaming-hiring .ih-stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(14px,2.4vw,40px);
  padding:clamp(24px,2.6vw,32px) 0 clamp(24px,2.6vw,32px) 30px;
  border-top:1px solid var(--line);
}
#page-igaming-hiring .ih-stage:last-child{ border-bottom:1px solid var(--line); }
/* the spine: one continuous rule down the left of the ladder, plus a square
   node per stage. Static — it is drawn, it never moves. */
#page-igaming-hiring .ih-stage::before{
  content:"";
  position:absolute;
  left:5px; top:0; bottom:0;
  width:2px;
  background:var(--line-2);
}
#page-igaming-hiring .ih-stage::after{
  content:"";
  position:absolute;
  left:0;
  top:clamp(28px,2.8vw,38px);
  width:12px;
  height:12px;
  background:var(--seal);
}
#page-igaming-hiring h3.ih-stage__t{
  margin:0;
  font-size:20px;
  line-height:1.3;
}
#page-igaming-hiring p.ih-stage__p{
  margin:0;
  line-height:1.72;
}

/* ══ ADVANTAGES — two-up grid, per-cell borders, ten cells / five rows ══ */
#page-igaming-hiring .ih-adv{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:clamp(28px,3vw,42px);
  border-top:1px solid var(--line-2);
  border-left:1px solid var(--line-2);
}
#page-igaming-hiring .ih-adv__i{
  padding:26px clamp(20px,2.4vw,32px) 28px;
  border-right:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  background:var(--stock);
  transition:background .18s ease, box-shadow .18s ease;
}
#page-igaming-hiring .ih-adv__i:hover{
  background:var(--wash);
  box-shadow:inset 4px 0 0 var(--seal);
}
#page-igaming-hiring h3.ih-adv__t{ margin:0 0 10px; font-size:20px; }
#page-igaming-hiring p.ih-adv__p{ margin:0; line-height:1.7; }

/* ══ SPECIFICATION — the record's check mark as the row marker ═════════ */
#page-igaming-hiring .ih-spec{
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}
#page-igaming-hiring .ih-spec__i{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:18px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
#page-igaming-hiring .ih-spec__m{
  display:block;
  width:24px;
  height:24px;
  margin-top:4px;
}
#page-igaming-hiring p.ih-spec__p{ margin:0; line-height:1.72; }

/* ══ THE OBSTACLE — dark, two columns, no action ═══════════════════════ */
#page-igaming-hiring .ih-hard{
  background:var(--petrol);
  padding:var(--sec) 0;
}
#page-igaming-hiring .ih-hard__two{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,3.2vw,52px);
  padding-top:clamp(24px,2.6vw,34px);
  border-top:1px solid var(--line-dk);
}
#page-igaming-hiring p.ih-hard__p{
  margin:0;
  font-size:17px;
  line-height:1.78;
  color:var(--body-dk);
}

/* ══ JURISDICTIONS — the record's circle mark as the row marker ════════ */
#page-igaming-hiring .ih-legal{
  display:grid;
  gap:0;
}
#page-igaming-hiring .ih-legal__i{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:20px;
  padding:26px 0 26px 0;
  border-bottom:1px solid var(--line);
}
#page-igaming-hiring .ih-legal__i:first-child{ border-top:1px solid var(--line); }
#page-igaming-hiring .ih-legal__m{ display:block; width:22px; height:22px; margin-top:6px; }
#page-igaming-hiring h3.ih-legal__t{ margin:0 0 10px; font-size:20px; }
#page-igaming-hiring p.ih-legal__p{ margin:0; max-width:82ch; line-height:1.72; }

/* ══ TRENDS — each item tabbed like a filed note ═══════════════════════ */
#page-igaming-hiring .ih-trends{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:clamp(26px,3vw,38px);
}
#page-igaming-hiring li.ih-trend{
  padding:22px 24px 24px;
  font-size:17px;
  line-height:1.68;
  color:var(--body);
  background:var(--stock);
  border:1px solid var(--line-2);
  border-left:4px solid var(--seal);
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition:border-color .18s ease, transform .18s ease;
}
#page-igaming-hiring li.ih-trend:hover{ transform:translateY(-3px); border-color:var(--seal-line); border-left-color:var(--seal-2); }
/* The last item is odd-numbered; it spans both columns so the grid never
   leaves a vacant cell to paint. */
#page-igaming-hiring li.ih-trend:last-child{ grid-column:1 / -1; }

/* ══ WORLDWIDE — a quadrant of ruled paragraphs ════════════════════════ */
#page-igaming-hiring .ih-global{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
#page-igaming-hiring p.ih-global__p{
  margin:0;
  padding:26px clamp(20px,2.4vw,32px);
  line-height:1.72;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ══ FAQ — a disclosure list; one panel open at a time (page JS) ═══════ */
#page-igaming-hiring .ih-faq{ border-top:1px solid var(--line-2); }
#page-igaming-hiring .ih-q{ border-bottom:1px solid var(--line-2); background:var(--wash); }
#page-igaming-hiring .ih-q[open]{ background:var(--stock); }
#page-igaming-hiring .ih-q__s{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:22px 4px;
  cursor:pointer;
  list-style:none;
}
#page-igaming-hiring .ih-q__s::-webkit-details-marker{ display:none; }
#page-igaming-hiring h3.ih-q__t{
  margin:0;
  font-size:19px;
  line-height:1.42;
  font-weight:700;
  color:var(--ink);
  transition:color .18s ease;
}
#page-igaming-hiring .ih-q__s:hover h3.ih-q__t{ color:var(--seal-2); }
/* the marker: a plus that becomes a minus when the panel opens. Motion is a
   finite response to the user opening the disclosure — rule 26. */
#page-igaming-hiring .ih-q__m{
  position:relative;
  flex:0 0 26px;
  width:26px;
  height:26px;
  margin-top:2px;
  border:1px solid var(--line-2);
  background:var(--stock);
  transition:background .18s ease, border-color .18s ease, transform .2s ease;
}
#page-igaming-hiring .ih-q__m::before,
#page-igaming-hiring .ih-q__m::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:var(--seal-2);
  transform:translate(-50%,-50%);
}
#page-igaming-hiring .ih-q__m::before{ width:12px; height:2px; }
#page-igaming-hiring .ih-q__m::after{ width:2px; height:12px; transition:opacity .2s ease; }
#page-igaming-hiring .ih-q[open] .ih-q__m{ background:var(--seal); border-color:var(--seal); transform:rotate(180deg); }
#page-igaming-hiring .ih-q[open] .ih-q__m::before{ background:#ffffff; }
#page-igaming-hiring .ih-q[open] .ih-q__m::after{ opacity:0; }
#page-igaming-hiring .ih-q__a{ padding:0 46px 24px 4px; }
#page-igaming-hiring .ih-q__a p{ margin:0; line-height:1.72; }

/* ══ REFERENCES — video facades. The iframe is created on click, never
   before, so nothing autoplays and nothing loads unasked. ═════════════ */
#page-igaming-hiring .ih-stories{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,32px);
}
#page-igaming-hiring .ih-story{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line-2);
  background:var(--stock);
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
#page-igaming-hiring button.ih-vid{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  border-bottom:1px solid var(--line-2);
  background:var(--petrol);
  cursor:pointer;
  line-height:0;
}
#page-igaming-hiring .ih-vid img{
  display:block;
  width:100%;
  height:auto;
  transition:opacity .18s ease;
}
#page-igaming-hiring .ih-vid:hover img{ opacity:.82; }
#page-igaming-hiring .ih-vid__p{
  position:absolute;
  left:50%;
  top:50%;
  width:60px;
  height:60px;
  margin:-30px 0 0 -30px;
  background:var(--seal);
  border-radius:50%;
  transition:background .18s ease, transform .18s ease;
}
#page-igaming-hiring .ih-vid__p::after{
  content:"";
  position:absolute;
  left:23px;
  top:19px;
  border-style:solid;
  border-width:11px 0 11px 17px;
  border-color:transparent transparent transparent #ffffff;
}
#page-igaming-hiring .ih-vid:hover .ih-vid__p{ background:var(--seal-2); transform:scale(1.06); }
#page-igaming-hiring .ih-story__frame{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  border:0;
  border-bottom:1px solid var(--line-2);
}
#page-igaming-hiring .ih-story__q{ padding:22px clamp(18px,2vw,24px) 24px; }
#page-igaming-hiring .ih-story__q p{ margin:0; font-size:17px; line-height:1.7; color:var(--body); }
#page-igaming-hiring p.ih-more{ margin:clamp(24px,3vw,34px) 0 0; }

/* ══ AREA WE SERVE — filed under FOOTER in the record, authored here ═══ */
#page-igaming-hiring .ih-area{
  background:linear-gradient(168deg,var(--petrol-3) 0%,var(--petrol) 60%,var(--petrol-2) 100%);
  padding:var(--sec) 0;
}
#page-igaming-hiring .ih-desks{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line-dk);
  border-left:1px solid var(--line-dk);
}
#page-igaming-hiring .ih-desk{
  padding:26px clamp(20px,2.4vw,32px) 28px;
  border-right:1px solid var(--line-dk);
  border-bottom:1px solid var(--line-dk);
}
#page-igaming-hiring h3.ih-desk__t{
  margin:0 0 12px;
  font-size:18px;
  font-weight:800;
  letter-spacing:.12em;
  color:#ffffff;
}
#page-igaming-hiring p.ih-desk__tel{ margin:0 0 10px; }
#page-igaming-hiring .ih-desk a.ih-tel{
  font-size:18px;
  font-weight:700;
  color:var(--seal-lt);
  transition:color .18s ease;
}
#page-igaming-hiring .ih-desk a.ih-tel:hover{ color:#ffc4dc; text-decoration:underline; text-underline-offset:4px; }
#page-igaming-hiring p.ih-desk__a{
  margin:0;
  font-size:17px;
  line-height:1.7;
  color:var(--body-dk);
}

/* ══ CTA modal — close control + the embedded widget, nothing else ═════ */
#page-igaming-hiring .ih-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  padding:100px 24px 24px 24px; overflow-y: auto;
  background:rgba(6,20,25,.80);
  align-items: flex-start;
  justify-content:center;
}
#page-igaming-hiring .ih-modal.is-open{ display:flex; }
#page-igaming-hiring .ih-modal__box{
  position:relative;
  width:min(640px,100%);
  max-height:90vh;
  overflow:auto;
  background:#ffffff;
  border-radius:2px;
  box-shadow:0 26px 72px rgba(0,0,0,.55);
}
#page-igaming-hiring button.ih-modal__x{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  cursor:pointer;
  color:#ffffff;
  background:var(--petrol);
  transition:background .18s ease;
}
#page-igaming-hiring button.ih-modal__x:hover{ background:var(--seal); }
#page-igaming-hiring .ih-modal__box iframe{
  display:block;
  width:100%;
  min-height:560px;
  border:0;
}

/* ══ RESPONSIVE ═══════════════════════════════════════════════════════
   Layouts are recomposed, not merely shrunk: the four-up role grid steps
   to two and then one, the split plates stack image-under-text, the stage
   ladder folds to a single column with the spine kept, and the trend grid
   drops to one column (where the last-child column span is reset so it
   cannot leave a short cell). */
@media (max-width:1080px){
  #page-igaming-hiring .ih-mandate__in,
  #page-igaming-hiring .ih-scale__in{ grid-template-columns:minmax(0,1fr); }
  #page-igaming-hiring .ih-scale__in .ih-plate--wide{ order:2; }
  #page-igaming-hiring .ih-scale__in .ih-scale__say{ order:1; }
  #page-igaming-hiring .ih-roles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #page-igaming-hiring .ih-stage{ grid-template-columns:minmax(0,1fr); gap:12px; }
  #page-igaming-hiring .ih-stories{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #page-igaming-hiring .ih-story:last-child{ grid-column:1 / -1; }
}

@media (max-width:820px){
  #page-igaming-hiring .ih-two,
  #page-igaming-hiring .ih-hard__two,
  #page-igaming-hiring .ih-adv,
  #page-igaming-hiring .ih-global,
  #page-igaming-hiring .ih-trends,
  #page-igaming-hiring .ih-desks{ grid-template-columns:minmax(0,1fr); }
  #page-igaming-hiring li.ih-trend:last-child{ grid-column:auto; }
  #page-igaming-hiring .ih-hero__in{ text-align:left; }
  #page-igaming-hiring p.ih-hero__p{ margin-inline:0; }
}

@media (max-width:640px){
  #page-igaming-hiring .ih-roles{ grid-template-columns:minmax(0,1fr); }
  #page-igaming-hiring .ih-stories{ grid-template-columns:minmax(0,1fr); }
  #page-igaming-hiring .ih-story:last-child{ grid-column:auto; }
  #page-igaming-hiring button.ih-btn{ width:100%; }
  #page-igaming-hiring .ih-lede{ padding-left:16px; border-left-width:3px; }
  #page-igaming-hiring .ih-q__a{ padding-right:8px; }
  #page-igaming-hiring .ih-legal__i{ grid-template-columns:22px minmax(0,1fr); gap:14px; }
  #page-igaming-hiring .ih-spec__i{ gap:14px; }
  #page-igaming-hiring .ih-modal__box iframe{ min-height:520px; }
  #page-igaming-hiring .ih-modal{ padding:100px 14px 14px 14px; overflow-y: auto; }
}

@media (max-width:420px){
  #page-igaming-hiring .ih-clause{ grid-template-columns:14px minmax(0,1fr); gap:0 14px; }
  #page-igaming-hiring .ih-stage{ padding-left:24px; }
  #page-igaming-hiring .ih-vid__p{ width:52px; height:52px; margin:-26px 0 0 -26px; }
  #page-igaming-hiring .ih-vid__p::after{ left:20px; top:16px; border-width:10px 0 10px 15px; }
}

/* ══ REDUCED MOTION ═══════════════════════════════════════════════════
   Nothing on this page animates at rest — there is not a single @keyframes
   rule in this file and getAnimations() is empty on load. The transitions
   that exist are finite responses to hover / focus-visible / active /
   details-open, and they are stood down here too. */
@media (prefers-reduced-motion: reduce){
  #page-igaming-hiring *,
  #page-igaming-hiring *::before,
  #page-igaming-hiring *::after{
    animation:none !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}