/* IBIX clickability layer (2026-10-14, owner feedback: "not clear what to press").
   Loaded AFTER each page's inline <style> so these win. Three rules:
   1. A next-step link is a circle-arrow button: ring with an arrow, then a plain label.
   2. A link inside a sentence is always underlined, in the link colour.
   3. A case-study card is clickable as a whole, with the circle-arrow link as its label.
   Doubled class names (.x.x) beat page-level rules such as ".case-2 .case-link".
   Owner picked the circle-arrow style (option D) on 2026-10-14. */

a.svc-row-link.svc-row-link,
a.case-link.case-link{
  display:inline-flex;align-items:center;gap:14px;align-self:flex-start;
  width:auto;min-width:0;min-height:46px;margin-top:6px;padding:0;
  font-family:'Inter','Inter Fallback',sans-serif;font-size:15px;font-weight:500;
  line-height:1.3;letter-spacing:0;text-transform:none;text-decoration:none;
  color:var(--white);background:none;border:0;border-radius:0;border-top:0;
  transition:color .25s;
}
a.svc-row-link.svc-row-link::before,
a.case-link.case-link::before{
  content:"\2192" / "";flex:0 0 46px;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--cyan);
  color:var(--cyan);font-size:20px;line-height:1;letter-spacing:0;
  transition:background .3s,color .3s,transform .3s;
}
[dir="rtl"] a.svc-row-link.svc-row-link::before,
[dir="rtl"] a.case-link.case-link::before{content:"\2190" / ""}
@media (hover:hover) and (pointer:fine){
  a.svc-row-link.svc-row-link:hover,
  a.case-link.case-link:hover,
  .case-card:hover a.case-link.case-link{color:var(--cyan)}
  a.svc-row-link.svc-row-link:hover::before,
  a.case-link.case-link:hover::before,
  .case-card:hover a.case-link.case-link::before{background:var(--cyan);color:#040B16;transform:rotate(-45deg)}
  [dir="rtl"] a.svc-row-link.svc-row-link:hover::before,
  [dir="rtl"] a.case-link.case-link:hover::before,
  [dir="rtl"] .case-card:hover a.case-link.case-link::before{transform:rotate(45deg)}
}
a.svc-row-link.svc-row-link:focus-visible,
a.case-link.case-link:focus-visible{outline:2px solid var(--white);outline-offset:6px;border-radius:999px}

/* Whole card is the click target; the circle-arrow link is its visible label. */
.case-card{position:relative}
.case-card a.case-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.case-card:has(a.case-link){cursor:pointer}


/* Links inside a sentence: always underlined. */
.svc-row-areas a,
.gw-privacy a,
.gw-contact-line a,
a.reviews-rating-label{
  color:var(--cyan);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;border-bottom:0;
}
@media (hover:hover) and (pointer:fine){
  .svc-row-areas a:hover,
  .gw-privacy a:hover,
  .gw-contact-line a:hover,
  a.reviews-rating-label:hover{color:var(--white);text-decoration-thickness:2px}
}
.svc-row-areas a:focus-visible,
.gw-privacy a:focus-visible,
.gw-contact-line a:focus-visible,
a.reviews-rating-label:focus-visible{outline:2px solid var(--white);outline-offset:3px}

/* Cards with no destination must not behave as if clickable. */
.case-card:not(:has(a.case-link)):hover{transform:none;border-color:var(--glass-border)}

/* "Also:" lines: one step larger and lighter. */
.svc-row-areas{font-size:15px;color:var(--silver-dim)}

/* Inline links on every other page (service, case study, blog, about): underlined, never colour alone. */
.lede a,.prose a,.callout a,.addon-list a,.note a,.qa-item a,.contact-line a,
.faq-a p a,.faq-a-text a,.card a:not([class]),.card a.inline-link,p a.cyan,.crumb a{
  color:var(--cyan);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;border-bottom:0;
}
@media (hover:hover) and (pointer:fine){
  .lede a:hover,.prose a:hover,.callout a:hover,.addon-list a:hover,.note a:hover,.qa-item a:hover,
  .contact-line a:hover,.faq-a p a:hover,.faq-a-text a:hover,.card a:not([class]):hover,
  .card a.inline-link:hover,p a.cyan:hover,.crumb a:hover{color:var(--white);text-decoration-thickness:2px}
}

/* Quieter secondary action on case-study heroes: still visibly a link. */
.btn-ghost{color:var(--silver-dim);font-size:14px;text-decoration:underline;text-underline-offset:4px}

/* Homepage: closing step of "Your first 30 days". */
.process-cta{display:flex;justify-content:center;margin-top:40px}

/* Case studies: closing call to action and "More work". */
.more-work{max-width:1100px;margin:0 auto;padding:0 28px 80px}
.more-work h2{font-size:clamp(28px,4vw,40px);margin-bottom:22px}
.more-work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.more-work-grid:has(>.mw-card:only-child){grid-template-columns:1fr}
a.mw-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px;
  background:rgba(6,16,36,.7);border:1px solid var(--glass-border);border-radius:16px;
  color:var(--silver-dim);text-decoration:none;transition:border-color .25s,transform .25s}
a.mw-card .mw-tag{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cyan)}
a.mw-card .mw-title{font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif;font-size:28px;line-height:1.05;color:var(--white)}
a.mw-card .mw-go{margin-top:4px;font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--cyan)}
a.mw-card .mw-go::after{content:"\2192" / "";margin-inline-start:10px;font-size:17px;display:inline-block;transition:transform .25s}
@media (hover:hover) and (pointer:fine){
  a.mw-card:hover{border-color:rgba(0,229,255,.55);transform:translateY(-4px)}
  a.mw-card:hover .mw-go::after{transform:translateX(4px)}
}
a.mw-card:focus-visible{outline:2px solid var(--white);outline-offset:3px}
@media(max-width:640px){.more-work-grid{grid-template-columns:1fr}.more-work{padding:0 18px 60px}}

/* Section headings on the homepage: Services and Work read as headings, not 11px labels. */
#services-heading,#portfolio-heading{
  font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif;font-weight:400;
  font-size:clamp(32px,4.4vw,56px);letter-spacing:1px;line-height:1.05;
  text-transform:none;color:var(--white);display:block;margin-bottom:56px;
}
#services-heading::before,#portfolio-heading::before{display:none}

/* Service rows: image and title go to the same page as the button; hover lights the button. */
.svc-media-link{display:block}
.svc-title-link{color:inherit;text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .svc-title-link:hover{color:var(--cyan)}
  .svc-row:has(.svc-media-link:hover) a.svc-row-link.svc-row-link,
  .svc-row:has(.svc-title-link:hover) a.svc-row-link.svc-row-link{color:var(--cyan)}
  .svc-row:has(.svc-media-link:hover) a.svc-row-link.svc-row-link::before,
  .svc-row:has(.svc-title-link:hover) a.svc-row-link.svc-row-link::before{background:var(--cyan);color:#040B16;transform:rotate(-45deg)}
  [dir="rtl"] .svc-row:has(.svc-media-link:hover) a.svc-row-link.svc-row-link::before,
  [dir="rtl"] .svc-row:has(.svc-title-link:hover) a.svc-row-link.svc-row-link::before{transform:rotate(45deg)}
}
.svc-title-link:focus-visible,.svc-media-link:focus-visible{outline:2px solid var(--white);outline-offset:3px}

/* Case studies: one headline result under the hero (a line, not a row of boxes). */
.result-line{max-width:900px;margin:0 auto;padding:8px 28px 56px;text-align:center}
.result-line b{display:block;font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif;font-weight:400;
  font-size:clamp(38px,6.4vw,68px);line-height:1;letter-spacing:1px;color:var(--cyan)}
.result-line span{display:block;margin:12px auto 0;max-width:60ch;font-size:17px;line-height:1.7;color:var(--silver-dim)}
@media(max-width:560px){.result-line{padding:4px 18px 44px}}

/* Arabic: no letter-spacing or forced caps (it breaks the joined letterforms), Arabic face. */
[dir="rtl"] a.svc-row-link.svc-row-link,
[dir="rtl"] a.case-link.case-link,
[dir="rtl"] a.mw-card .mw-tag,
[dir="rtl"] a.mw-card .mw-go{font-family:'Tajawal','Tajawal Fallback',sans-serif;letter-spacing:0;text-transform:none}
[dir="rtl"] a.svc-row-link.svc-row-link,[dir="rtl"] a.case-link.case-link{font-size:15px}
[dir="rtl"] a.mw-card .mw-title,
[dir="rtl"] .result-line b,
[dir="rtl"] #services-heading,[dir="rtl"] #portfolio-heading{font-family:'Tajawal','Tajawal Fallback',sans-serif;font-weight:700;letter-spacing:0}
.more-work-grid.one{grid-template-columns:1fr}

/* Arabic footer column heads: Bebas Neue has no Arabic glyphs, so name the Arabic face outright. */
[dir="rtl"] .foot-col-head{font-family:'Tajawal','Tajawal Fallback',sans-serif;font-weight:700;letter-spacing:0}

/* Price cards: the price is the biggest thing on the card, not a label. */
.card .price-big{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;
  font-family:'Bebas Neue','Bebas Neue Fallback',sans-serif;font-size:clamp(48px,5vw,64px);
  line-height:1;letter-spacing:1px;color:var(--cyan)}
.card .price-big small{font-family:'Inter','Inter Fallback',sans-serif;font-size:15px;
  letter-spacing:0;color:var(--silver-dim)}

/* Mobile restructure helpers (2026-10-14): plain visible Q&A, bullet inclusions, repeat CTA row. */
.mq-list{max-width:820px;margin:0 auto}
.mq{padding:22px 0;border-top:1px solid var(--glass-border)}
.mq:last-child{border-bottom:1px solid var(--glass-border)}
.mq h3{font-family:'Inter','Inter Fallback',sans-serif;font-size:17px;font-weight:600;line-height:1.4;color:var(--white);margin:0 0 8px;letter-spacing:0;text-transform:none}
.mq p{margin:0;font-size:15px;line-height:1.75;color:var(--silver-dim)}
.mq p a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
ul.incl{list-style:none;margin:14px 0 0;padding:0}
ul.incl li{position:relative;padding:0 0 8px 22px;font-size:15px;line-height:1.55;color:var(--silver-dim)}
ul.incl li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:6px;border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(-45deg) translateY(-50%)}
.card .for{margin:0;font-size:15px;line-height:1.6;color:var(--white)}
.cta-row{display:flex;flex-wrap:wrap;gap:18px 26px;justify-content:center;align-items:center;margin-top:34px}
.cta-row .btn-ghost{margin-left:0}
.answer-block{max-width:780px;margin:0 auto;text-align:center;font-size:18px;line-height:1.75;color:var(--silver-dim)}
.answer-block strong{color:var(--white);font-weight:600}
@media(max-width:640px){
  .hero{padding-top:48px}
  section.block{padding-top:44px;padding-bottom:44px}
}

@media(max-width:640px){
  .stat-band-grid{grid-template-columns:repeat(2,1fr)!important;row-gap:14px!important}
  .stat-band .stat-num{font-size:34px}
  .stat-band .stat-label{font-size:13px}
}
ul.steps3{list-style:none;margin:0;padding:0;counter-reset:s}
ul.steps3 li{counter-increment:s;position:relative;padding:0 0 18px 44px;font-size:16px;line-height:1.7;color:var(--silver-dim)}
ul.steps3 li strong{display:block;color:var(--white);font-weight:600}
ul.steps3 li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border:1px solid var(--cyan);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--cyan)}

ul.buyers{list-style:none;margin:14px 0 0;padding:0}
ul.buyers li{padding:16px 0;border-top:1px solid var(--glass-border);font-size:16px;line-height:1.7;color:var(--silver-dim)}
ul.buyers li:last-child{border-bottom:1px solid var(--glass-border)}
ul.buyers li strong{display:block;color:var(--white);font-weight:600;margin-bottom:2px}

/* Mobile menu: the four SEO town pages as one compact secondary line under SEO (2026-10-16). */
.ibx-mob-sub .ibx-mob-sub-towns{display:flex;flex-wrap:wrap;column-gap:18px;padding-inline-start:14px;margin-top:-4px}
.ibx-mob-sub .ibx-mob-sub-towns a{min-height:44px;font-size:13px;color:var(--text-menu-desc,var(--silver-dim))}
.ibx-mob-sub .ibx-mob-sub-towns a[aria-current="page"]{color:var(--cyan)}

/* Pressed state (2026-10-16, owner: on phones the circle-arrow links did not react when pressed).
   Hover-lift above already sits inside (hover:hover) and (pointer:fine), so a phone never gets a stuck hover.
   :active gives a quick press: a small scale-down and the arrow circle fills. */
a.svc-row-link.svc-row-link,
a.case-link.case-link,
a.mw-card,
.btn-primary,.btn-secondary-soft,.btn-ghost,.contact-btn,.ibx-nav-cta,.ibx-mob-cta{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
a.svc-row-link.svc-row-link,
a.case-link.case-link{transition:color .25s,transform 100ms ease-out}
a.svc-row-link.svc-row-link::before,
a.case-link.case-link::before{transition:background 100ms,color 100ms,transform .3s}
a.svc-row-link.svc-row-link:active,
a.case-link.case-link:active,
.case-card:active a.case-link.case-link{transform:scale(.97);color:var(--cyan)}
a.svc-row-link.svc-row-link:active::before,
a.case-link.case-link:active::before,
.case-card:active a.case-link.case-link::before{background:var(--cyan);color:#040B16;border-color:var(--cyan)}
a.mw-card{transition:border-color .25s,transform 100ms ease-out}
a.mw-card:active{transform:scale(.98);border-color:var(--cyan);background:rgba(0,229,255,.1)}
.btn-primary:active,.contact-btn:active,.ibx-nav-cta:active,.ibx-mob-cta:active{transform:scale(.97);filter:brightness(.88);transition-duration:90ms}
.btn-secondary-soft:active,.btn-ghost:active,.contact-btn-ghost:active{transform:scale(.97);color:var(--white);transition-duration:90ms}
@media (prefers-reduced-motion:reduce){
  a.svc-row-link.svc-row-link:active,
  a.case-link.case-link:active,
  .case-card:active a.case-link.case-link,
  a.mw-card:active,
  .btn-primary:active,.contact-btn:active,.ibx-nav-cta:active,.ibx-mob-cta:active,
  .btn-secondary-soft:active,.btn-ghost:active,.contact-btn-ghost:active{transform:none}
}