/* /clients-testimonials — AISHTMLNEWDESIGN-584
   Page-owned styles. EVERY selector is scoped to #page-clients-testimonials
   or a ct- prefixed class: never body, never a bare element, never
   #ais-header / #ais-footer. The document reset is owned by the shared layout
   sheet. Font is Inter; no body text below 16px.

   ══════════════════════════════════════════════════════════════════════
   Visual direction: "OPEN LETTER".

   Six clients put their name to a statement. So the page is letter paper and
   a signature, not a carousel of star ratings:

     · STOCK     — #faf7f1, warm cream letter paper. The hero is LIGHT here,
                   deliberately: CIVIC HALL, SAFE HARBOUR and ASSAY OFFICE all
                   open on a dark gradient, and this page should not be a
                   fourth variation on that.
     · INK       — #1b1a18 for the writing, #56524b for secondary lines.
     · VERMILION — #b2472f, the editorial mark. It is the opening quote glyph,
                   the signature rule, the stat figures and the CTAs. Nowhere
                   else.

   Each quote card carries an oversized vermilion open-quote and signs off
   with the client's name above a hairline, like a signature line. The
   "Leverage..." band inverts to ink so the one long heading in the record has
   somewhere to sit without dominating the reading column.

   No counting animation on the stats — they are static figures, which is both
   rule 26 and what the live page does.
   Motion is finite and user-initiated only.
   ══════════════════════════════════════════════════════════════════════ */

#page-clients-testimonials{
  --ct-stock:#faf7f1;
  --ct-stock-2:#f2ece0;
  --ct-ink:#1b1a18;
  --ct-ink-soft:#56524b;
  --ct-verm:#b2472f;
  --ct-verm-deep:#8f3722;
  --ct-rule:#e4ded1;
  --ct-wide:1160px;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ct-ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

#page-clients-testimonials .ct-wrap{
  width:min(var(--ct-wide),calc(100% - 48px));
  margin-inline:auto;
}

/* ── BUTTONS ───────────────────────────────────────────────────────── */
#page-clients-testimonials .ct-btn{
  display:inline-block;
  box-sizing:border-box;
  padding:16px 34px;
  border:2px solid transparent;
  border-radius:2px;
  font-family:inherit;
  font-size:17px;
  font-weight:700;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
#page-clients-testimonials .ct-btn--ink{
  background:var(--ct-ink);
  color:var(--ct-stock);
  border-color:var(--ct-ink);
}
#page-clients-testimonials .ct-btn--ink:hover,
#page-clients-testimonials .ct-btn--ink:focus-visible{background:var(--ct-verm);border-color:var(--ct-verm);color:#fff;}
#page-clients-testimonials .ct-btn--vermilion{
  background:var(--ct-verm);
  color:#fff;
  border-color:var(--ct-verm);
}
#page-clients-testimonials .ct-btn--vermilion:hover,
#page-clients-testimonials .ct-btn--vermilion:focus-visible{background:var(--ct-verm-deep);border-color:var(--ct-verm-deep);}
#page-clients-testimonials .ct-btn--outline{
  background:transparent;
  color:var(--ct-ink);
  border-color:var(--ct-ink);
}
#page-clients-testimonials .ct-btn--outline:hover,
#page-clients-testimonials .ct-btn--outline:focus-visible{background:var(--ct-ink);color:var(--ct-stock);}
#page-clients-testimonials .ct-btn:focus-visible{outline:3px solid var(--ct-verm);outline-offset:3px;}
#page-clients-testimonials .ct-actionrow{margin-top:38px;text-align:center;}

/* ── HERO — rule 24: static gradient, NO media, exactly one CTA ─────── */
#page-clients-testimonials .ct-hero{
  background:linear-gradient(172deg,#faf7f1 0%,#f2ece0 100%);
  border-bottom:1px solid var(--ct-rule);
  padding:92px 0 78px;
}
#page-clients-testimonials .ct-hero__inner{
  max-width:900px;
  text-align:center;
}
#page-clients-testimonials .ct-hero h1{
  margin:0 0 34px;
  font-size:clamp(38px,6vw,62px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.024em;
  color:var(--ct-ink);
}
/* the editorial mark under the title */
#page-clients-testimonials .ct-hero h1::after{
  content:"";
  display:block;
  width:64px;height:4px;
  margin:22px auto 0;
  background:var(--ct-verm);
}
#page-clients-testimonials .ct-hero__lede{
  margin:0 auto 34px;
  max-width:780px;
  font-size:18px;
  line-height:1.76;
  color:var(--ct-ink-soft);
}
#page-clients-testimonials .ct-crumb{margin-top:40px;}
#page-clients-testimonials .ct-crumb ol{
  display:flex;justify-content:center;gap:10px;
  margin:0;padding:0;list-style:none;
  font-size:16px;color:var(--ct-ink-soft);
}
#page-clients-testimonials .ct-crumb li + li::before{content:"/";margin-right:10px;color:#b4ab9b;}
#page-clients-testimonials .ct-crumb a{color:var(--ct-verm);}
#page-clients-testimonials .ct-crumb a:hover{color:var(--ct-verm-deep);text-decoration:underline;}

/* ── THE SIX LETTERS ───────────────────────────────────────────────── */
#page-clients-testimonials .ct-quotes{background:#fff;padding:78px 0;}
#page-clients-testimonials .ct-quotes h2{
  margin:0 0 46px;
  text-align:center;
  font-size:clamp(27px,3.2vw,38px);
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.018em;
  color:var(--ct-ink);
}
#page-clients-testimonials .ct-quotes__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
}
@media (min-width:760px){
  #page-clients-testimonials .ct-quotes__grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1080px){
  #page-clients-testimonials .ct-quotes__grid{grid-template-columns:repeat(3,1fr);}
}
#page-clients-testimonials .ct-quote{
  position:relative;
  background:var(--ct-stock);
  border:1px solid var(--ct-rule);
  border-radius:3px;
  padding:52px 28px 28px;
  display:flex;
  flex-direction:column;
}
/* the oversized open quote */
#page-clients-testimonials .ct-quote::before{
  content:"\201C";
  position:absolute;
  top:6px;left:22px;
  font-size:74px;
  line-height:1;
  font-weight:800;
  color:var(--ct-verm);
}
#page-clients-testimonials .ct-quote__body{
  margin:0 0 24px;
  font-size:17px;
  line-height:1.78;
  color:var(--ct-ink);
  flex:1 1 auto;
}
/* the signature line */
#page-clients-testimonials .ct-quote__who{
  margin:0;
  padding-top:16px;
  border-top:1px solid var(--ct-rule);
  font-size:18px;
  font-weight:800;
  letter-spacing:-.005em;
  color:var(--ct-ink);
}
#page-clients-testimonials .ct-quote__who::before{
  content:"— ";
  color:var(--ct-verm);
}

/* ── LEVERAGE BAND (inverted) ──────────────────────────────────────── */
#page-clients-testimonials .ct-leverage{
  background:var(--ct-ink);
  color:var(--ct-stock);
  padding:70px 0;
}
#page-clients-testimonials .ct-leverage__inner{
  max-width:940px;
  text-align:center;
}
#page-clients-testimonials .ct-leverage__mark{
  width:82px;height:auto;
  display:block;
  margin:0 auto 26px;
  opacity:.85;
}
#page-clients-testimonials .ct-leverage h2{
  /* One 40-word sentence used as a heading in the record. Set at reading
     size rather than display size so it is legible as the paragraph it
     actually is, without altering the markup the record specifies. */
  margin:0 0 34px;
  font-size:clamp(19px,2.1vw,24px);
  line-height:1.6;
  font-weight:700;
  letter-spacing:-.005em;
  color:var(--ct-stock);
}

/* ── 16 YEARS OF EXPERIENCE ────────────────────────────────────────── */
#page-clients-testimonials .ct-exp{background:var(--ct-stock);padding:78px 0;}
#page-clients-testimonials .ct-exp__head{
  max-width:820px;
  margin:0 auto 46px;
  text-align:center;
}
#page-clients-testimonials .ct-exp__mark{
  width:180px;height:auto;
  display:block;
  margin:0 auto 22px;
}
#page-clients-testimonials .ct-exp h2{
  margin:0 0 18px;
  font-size:clamp(27px,3.2vw,38px);
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.018em;
  color:var(--ct-ink);
}
#page-clients-testimonials .ct-exp p{
  margin:0;
  font-size:17px;
  line-height:1.78;
  color:var(--ct-ink-soft);
}
#page-clients-testimonials .ct-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;
  margin:0;
  background:var(--ct-rule);
  border:1px solid var(--ct-rule);
}
#page-clients-testimonials .ct-stat{
  background:#fff;
  padding:30px 24px;
  text-align:center;
}
#page-clients-testimonials .ct-stat__n{
  margin:0 0 10px;
  font-size:clamp(34px,4vw,46px);
  line-height:1;
  font-weight:800;
  letter-spacing:-.028em;
  color:var(--ct-verm);
}
#page-clients-testimonials .ct-stat__l{
  margin:0;
  font-size:16px;
  line-height:1.5;
  color:var(--ct-ink-soft);
}
#page-clients-testimonials .ct-stat__l span{
  display:block;
  font-size:18px;
  font-weight:700;
  color:var(--ct-ink);
}
#page-clients-testimonials .ct-exp__rule{
  display:block;
  width:min(280px,70%);
  height:auto;
  margin:40px auto 0;
  opacity:.9;
}

/* ── AREA WE SERVE ─────────────────────────────────────────────────── */
#page-clients-testimonials .ct-areas{background:#fff;padding:74px 0;}
#page-clients-testimonials .ct-areas h2{
  margin:0 0 34px;
  text-align:center;
  font-size:clamp(26px,3vw,34px);
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--ct-ink);
}
#page-clients-testimonials .ct-areas__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
  gap:20px;
}
#page-clients-testimonials .ct-area{
  background:var(--ct-stock);
  border:1px solid var(--ct-rule);
  border-top:3px solid var(--ct-verm);
  border-radius:2px;
  padding:26px 22px;
}
#page-clients-testimonials .ct-area img{width:20px;height:20px;display:block;margin-bottom:13px;}
#page-clients-testimonials .ct-area h3{
  margin:0 0 11px;
  font-size:16px;font-weight:800;
  letter-spacing:.09em;
  color:var(--ct-ink);
}
#page-clients-testimonials .ct-area p{
  margin:0 0 9px;
  font-size:16px;line-height:1.64;
  color:var(--ct-ink-soft);
}
#page-clients-testimonials .ct-area__tel a{font-weight:700;color:var(--ct-ink);}
#page-clients-testimonials .ct-area__tel a:hover{color:var(--ct-verm);}

/* ── CTA modal — shared shell, identical on every CTA page ──────────────────
   Replicated from /online-sweepstakes-gambling-software, which took it from
   /case-study/dicemasters-backgammon-platform-case-study via design-clone's
   extract_design.py. Values are PINNED, not re-tuned per page: the Get In
   Touch form must present the same on every URL, so this shell deliberately
   does not inherit OPEN LETTER's ink, type scale or radius. */
#page-clients-testimonials .ct-modal{
  color:#2c2419;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.72;
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:20px;
  overflow-y:auto;
  background:rgba(20,13,7,.72);
}
#page-clients-testimonials .ct-modal.is-open{display:flex;}
#page-clients-testimonials .ct-modal__box{
  color:#2c2419;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.72;
  position:relative;
  width:100%;
  max-width:620px;
  margin:auto;
  border-radius:16px;
  background:#fff;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  overflow:hidden;
}
#page-clients-testimonials .ct-modal__x{
  position:absolute;
  top:12px;right:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border:1px solid #ddd2ba;
  border-radius:50%;
  background:#fff;
  color:#1d1509;
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}
#page-clients-testimonials .ct-modal__x:hover{background:#2b1c12;color:#fbf6ec;}
#page-clients-testimonials .ct-modal__x:focus-visible{outline:3px solid var(--ct-verm);outline-offset:2px;}
#page-clients-testimonials .ct-modal iframe{
  display:block;
  width:100%;
  min-height:860px;
  border:0;
}

/* ── RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width:768px){
  #page-clients-testimonials .ct-wrap{width:calc(100% - 36px);}
  #page-clients-testimonials .ct-hero{padding:64px 0 52px;}
  #page-clients-testimonials .ct-quotes,
  #page-clients-testimonials .ct-exp,
  #page-clients-testimonials .ct-areas{padding:54px 0;}
  #page-clients-testimonials .ct-leverage{padding:50px 0;}
  #page-clients-testimonials .ct-btn{width:100%;max-width:340px;}
}
@media (max-width:420px){
  #page-clients-testimonials .ct-wrap{width:calc(100% - 28px);}
  /* Keep the radius on phones too — the panel is a card at every width. */
  #page-clients-testimonials .ct-modal{padding:12px;}
  #page-clients-testimonials .ct-modal__box{max-width:none;border-radius:14px;}
}

/* ── TESTIMONIAL VIDEO (restored to match live) ─────────────────────── */
/* The live page leads each card with its video; the converted card was text-only.
   Card is now video-first to match. The decorative open-quote glyph moves from the
   card to the quote body — on the card it would sit on top of the video. */
#page-clients-testimonials .ct-quote{padding:0 0 28px;overflow:hidden;}
#page-clients-testimonials .ct-quote::before{content:none;}
#page-clients-testimonials .ct-quote__video{
  aspect-ratio:16/9; width:100%; margin:0 0 24px; background:#000; display:block;
}
#page-clients-testimonials .ct-quote__video iframe{
  width:100%; height:100%; border:0; display:block;
}
#page-clients-testimonials .ct-quote__body{
  position:relative; margin:0 28px 24px; padding-top:34px;
}
#page-clients-testimonials .ct-quote__body::before{
  content:"\201C"; position:absolute; top:-6px; left:-4px;
  font-size:74px; line-height:1; font-weight:800; color:var(--ct-verm);
}
#page-clients-testimonials .ct-quote__who{margin:0 28px;}