/* GENERATED by scripts/build-ar.js from shared.css with rtlcss — do not edit */
/* =============================================
   SHARED STYLES — used on all pages
   Scalen brand system (Brand Guidelines 2026)
   Colors: 60% White · 30% Blue #0F1FA8 · 10% Orange #F04E2A
   Type:   Gobold (display) · Alexandria (body / UI)
   EDIT: brand tokens live in :root below
============================================= */

/* ---------- Brand fonts (self-hosted) ---------- */
@font-face {
  font-family:'Gobold';
  src:url('../fonts/brand/Gobold-Regular.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'Alexandria';
  src:url('../fonts/brand/Alexandria-VF-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:'Alexandria';
  src:url('../fonts/brand/Alexandria-VF-arabic.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41;
}

:root {
  /* Brand constants — never redefined */
  --brand-blue:    #0F1FA8;
  --brand-blue-dk: #0B1785;
  --brand-orange:  #F04E2A;
  --brand-orange-dk:#D63E1C;

  /* Surfaces */
  --bg:        #FFFFFF;
  --bg-dark:   #F4F5FB;   /* alternate light section */
  --bg-card:   #FFFFFF;

  /* Semantic accents (flip inside blue sections) */
  --blue:      var(--brand-blue);
  --blue-lt:   var(--brand-blue);
  --blue-hover:var(--brand-blue-dk);
  --orange:    var(--brand-orange);
  /* Legacy template accents → mapped onto the two brand colors */
  --green:     var(--brand-orange);
  --pink:      var(--brand-orange);
  --purple:    var(--brand-blue);
  --cyan:      var(--brand-blue);
  --white:     #ffffff;

  /* Text */
  --ink:       #0B1033;
  --ink-2:     #23284A;
  --grey:      #5A6078;
  --grey-lt:   #3F4560;
  --label:     var(--brand-blue);

  /* Lines + tints */
  --border:    rgba(15,31,168,0.12);
  --line:      rgba(15,31,168,0.12);
  --tint:      rgba(15,31,168,0.04);
  --tint-2:    rgba(15,31,168,0.08);

  --shadow-b:  0 14px 34px rgba(11,16,51,0.08);
  --shadow-c:  0 6px 20px rgba(11,16,51,0.07);
  --trans:     all 0.38s cubic-bezier(0.25,1,0.5,1);
  --radius:    10px;

  --font-d:    'Gobold', 'Alexandria', sans-serif;   /* display headlines */
  --font-h:    'Alexandria', sans-serif;             /* UI headings */
  --font-b:    'Alexandria', sans-serif;             /* body */
}

/* ---------- Blue sections (the brand's 30%) ----------
   Tokens flip so text turns white and accents turn orange. */
#hero, .page-hero, .cs-hero, .proj-hero, #stats, .marquee-wrap,
#footer, .cta-sec, .proj-cta, .cs-cta, .on-blue {
  --bg:        var(--brand-blue);
  --bg-card:   rgba(255,255,255,0.06);
  --blue:      var(--brand-orange);
  --blue-lt:   #ffffff;
  --blue-hover:var(--brand-orange-dk);
  --green:     var(--brand-orange);
  --ink:       #ffffff;
  --ink-2:     rgba(255,255,255,0.92);
  --grey:      rgba(255,255,255,0.78);
  --grey-lt:   rgba(255,255,255,0.88);
  --label:     #ffffff;
  --border:    rgba(255,255,255,0.18);
  --line:      rgba(255,255,255,0.18);
  --tint:      rgba(255,255,255,0.06);
  --tint-2:    rgba(255,255,255,0.10);
  --shadow-b:  none;
  --shadow-c:  none;
  background-color:var(--brand-blue);
  color:#fff;
}
/* White surfaces placed inside blue sections */
.on-white {
  --bg-card:#fff; --blue:var(--brand-blue); --blue-lt:var(--brand-blue); --blue-hover:var(--brand-blue-dk);
  --ink:#0B1033; --ink-2:#23284A; --grey:#5A6078; --grey-lt:#3F4560; --label:var(--brand-blue);
  --border:rgba(15,31,168,0.12); --line:rgba(15,31,168,0.12); --tint:rgba(15,31,168,0.04); --tint-2:rgba(15,31,168,0.08);
  background:#fff; color:var(--ink);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:var(--font-b);
  background:var(--bg); color:var(--ink);
  overflow-x:hidden; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }
button { cursor:pointer; font-family:var(--font-b); border:none; background:none; outline:none; }
::selection { background:var(--brand-blue); color:#fff; }
:focus-visible { outline:2px solid var(--brand-orange); outline-offset:3px; }

/* =============================================
   LAYOUT
============================================= */
.container { max-width:1260px; margin:0 auto; padding:0 32px; }

/* =============================================
   TYPOGRAPHY
============================================= */
.label-tag {
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--label); margin-bottom:18px;
}
.label-tag::before { content:''; width:28px; height:3px; background:var(--brand-orange); }

.sec-title {
  font-family:var(--font-d);
  font-size:clamp(36px,4.6vw,60px);
  font-weight:400; line-height:1.04; letter-spacing:0.01em;
  color:var(--ink);
}
.sec-title span { color:var(--brand-orange); }

.sec-head { text-align:center; margin-bottom:64px; }
.sec-head .label-tag { justify-content:center; }
.sec-head p { font-size:17px; color:var(--grey); max-width:560px; margin:14px auto 0; line-height:1.75; }

/* =============================================
   BUTTONS — geometric, flat, no glow
============================================= */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:6px;
  font-weight:600; font-size:15px; transition:var(--trans);
  white-space:nowrap; cursor:pointer; border:1.5px solid transparent;
}
.btn-blue, .btn-primary { background:var(--blue); color:#fff; }
.btn-blue:hover, .btn-primary:hover { background:var(--blue-hover); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--ink); background:var(--tint); }
#hero .btn-ghost, .page-hero .btn-ghost, .cs-hero .btn-ghost, .proj-hero .btn-ghost,
.cta-sec .btn-ghost, .proj-cta .btn-ghost, .cs-cta .btn-ghost, .on-blue .btn-ghost { border-color:rgba(255,255,255,0.45); }
.btn-green { background:var(--brand-orange); color:#fff; }
.btn-green:hover { background:var(--brand-orange-dk); }

/* =============================================
   MOTION — the logo brackets, plus the services strip that loops sideways.
   (.reveal is kept as a hook in the markup but no longer fades or slides content in.)
============================================= */
.reveal { opacity:1; transform:none; }

/* =============================================
   PAGE LOADER
============================================= */
#loader { display:none !important;
  position:fixed; inset:0; z-index:9999;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.5s ease, visibility 0.5s ease;
}
#loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader-ring {
  width:52px; height:52px;
  border:3px solid rgba(15,31,168,0.1);
  border-top-color:var(--brand-orange); border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(-360deg); } }

/* =============================================
   HEADER — transparent over the blue hero,
   white bar with the color logo once scrolled
============================================= */
#header {
  position:fixed; top:0; right:0; width:100%; z-index:1000;
  transition:background 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
  border-bottom:1px solid transparent;
}
#header.scrolled {
  background:#fff;
  border-bottom-color:rgba(15,31,168,0.1);
}
.header-wrap {
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 44px; transition:padding 0.4s ease;
}
#header.scrolled .header-wrap { padding:12px 44px; }

.logo { display:flex; align-items:center; gap:10px; }
.logo img { height:40px; width:auto; transition:height 0.4s ease; }
#header.scrolled .logo img { height:34px; }
.logo .logo-on-white { display:none; }
#header.scrolled .logo .logo-on-blue  { display:none; }
#header.scrolled .logo .logo-on-white { display:block; }
/* Desktop, top of the page: the full "SCALEN Marketing" lockup; it swaps to the short logo
   once the header turns white on scroll, and on phones (too small for the word "Marketing") */
.logo .logo-full { display:none; }
@media(min-width:769px){
  #header:not(.scrolled) .header-wrap { padding-top:16px; padding-bottom:16px; }
  #header:not(.scrolled) .logo .logo-on-blue { display:none; }
  #header:not(.scrolled) .logo .logo-full { display:block; height:58px; }
}

.nav-menu { display:flex; align-items:center; gap:32px; }
.nav-menu a {
  font-size:14px; font-weight:500; color:rgba(255,255,255,0.78);
  transition:color 0.25s; position:relative;
}
.nav-menu a::after {
  content:''; position:absolute; bottom:-6px; right:0;
  width:0; height:2px; background:var(--brand-orange); transition:width 0.3s;
}
.nav-menu a:hover,
.nav-menu a.active { color:#fff; }
.nav-menu a:hover::after,
.nav-menu a.active::after { width:100%; }
#header.scrolled .nav-menu a { color:var(--grey); }
#header.scrolled .nav-menu a:hover,
#header.scrolled .nav-menu a.active { color:var(--ink); }

.nav-cta {
  background:var(--brand-orange); color:#fff !important; padding:11px 22px;
  border-radius:6px; font-weight:600; font-size:13px; transition:var(--trans);
}
.nav-cta::after { display:none !important; }
.nav-cta:hover { background:var(--brand-orange-dk); }

/* Language switch (English ⇄ العربية) — desktop: after the CTA; mobile: next to the menu button */
.lang-switch {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 14px; border:1.5px solid rgba(255,255,255,0.55); border-radius:6px;
  font-family:'Alexandria',sans-serif; font-size:13px; font-weight:600; line-height:1;
  color:#fff !important; letter-spacing:0; transition:var(--trans);
}
.nav-menu a.lang-switch::after { display:none !important; }
.lang-switch:hover { border-color:#fff; background:rgba(255,255,255,0.12); }
#header.scrolled .lang-switch { border-color:var(--line); color:var(--brand-blue) !important; }
#header.scrolled .lang-switch:hover { border-color:var(--brand-blue); background:var(--tint); }
.lang-switch--mob { display:none; }

/* Hamburger */
.ham, .hamburger { display:none; flex-direction:column; gap:5px; padding:4px; }
.ham span, .hamburger span { display:block; width:26px; height:2px; background:#fff; transition:var(--trans); }
#header.scrolled .ham span, #header.scrolled .hamburger span { background:var(--ink); }
.ham.open span:nth-child(1), .hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(-45deg); }
.ham.open span:nth-child(2), .hamburger.open span:nth-child(2) { opacity:0; }
.ham.open span:nth-child(3), .hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(45deg); }

/* Mobile nav */
.mob-nav {
  position:fixed; top:0; left:-100%; width:290px; height:100vh;
  background:#fff; border-right:1px solid var(--line);
  padding:100px 36px 40px; display:flex; flex-direction:column;
  gap:24px; z-index:999; transition:left 0.42s cubic-bezier(0.25,1,0.5,1);
}
.mob-nav.open { left:0; }
.mob-nav a { font-size:19px; font-weight:600; color:var(--grey-lt); transition:color 0.25s; }
.mob-nav a:hover { color:var(--brand-blue); }
.mob-nav .btn-blue, .mob-nav .btn-primary { color:#fff; justify-content:center; border-radius:12px; }
.mob-close { position:absolute; top:24px; left:24px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--ink); }
.mob-overlay { display:none; position:fixed; inset:0; background:rgba(11,16,51,0.55); z-index:998; }
.mob-overlay.open { display:block; }

/* =============================================
   MARQUEE STRIP
============================================= */
.marquee-wrap { background:var(--brand-blue); padding:16px 0; overflow:hidden; border-top:1px solid rgba(255,255,255,0.12); }
.marquee-track { display:flex; width:max-content; animation:marq var(--marq-dur, 40s) linear infinite; }
.marquee-wrap:hover .marquee-track, .marquee-strip:hover .marquee-track { animation-play-state:paused; }
@keyframes marq { from { transform:translateX(0); } to { transform:translateX(50%); } }
.marquee-item {
  display:flex; align-items:center; gap:20px; padding:0 20px;
  white-space:nowrap; font-size:13px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:#fff;
}
.marquee-item .dot { color:var(--brand-orange); font-size:9px; }
/* Contact page strip uses .marquee-strip with <span> items — same look as .marquee-wrap */
.marquee-strip { background:var(--brand-blue); padding:16px 0; overflow:hidden; border-top:1px solid rgba(255,255,255,0.12); }
.marquee-strip .marquee-track > span {
  display:flex; align-items:center; gap:20px; padding:0 20px;
  white-space:nowrap; font-size:13px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:#fff;
}
.marquee-strip .mdiamond { color:var(--brand-orange); font-size:9px; }

/* =============================================
   INNER PAGE HERO (blue, with the corner pattern)
============================================= */
.page-hero {
  padding:170px 0 90px; text-align:center;
  background:var(--brand-blue); position:relative; overflow:hidden;
}
.page-hero-glow { display:none; }
.page-hero-inner { position:relative; z-index:1; }
.page-hero h1 {
  font-family:var(--font-d); font-size:clamp(46px,6vw,82px);
  font-weight:400; letter-spacing:0.01em; line-height:1.02; margin-bottom:18px; color:#fff;
}
.page-hero h1 span { color:var(--brand-orange); }
.page-hero p { font-size:17px; color:rgba(255,255,255,0.8); max-width:560px; margin:0 auto; }
.breadcrumb {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:rgba(255,255,255,0.7); margin-bottom:20px;
}
.breadcrumb a { color:#fff; }
.breadcrumb span { opacity:0.5; }

/* Focus frame — the logo's two corner brackets around each hero headline */
.page-hero h1, #hero .hero-title, .cs-hero h1, .proj-hero h1, .svc-hero h1 {
  display:block; width:fit-content; max-width:100%; position:relative;
  padding:30px 52px;
}
.page-hero h1 { margin-right:auto; margin-left:auto; margin-bottom:22px; }
/* Homepage title: the frame sits just outside the text column (negative margins
   cancel the padding), so the headline wraps exactly as it would without the frame —
   whether the lines come from <br> in the HTML or from plain CMS text. */
#hero .hero-title { width:fit-content; max-width:none; margin-left:-44px; }
.page-hero h1::before, .page-hero h1::after,
#hero .hero-title::before, #hero .hero-title::after,
.cs-hero h1::before, .cs-hero h1::after,
.proj-hero h1::before, .proj-hero h1::after, .svc-hero h1::before, .svc-hero h1::after {
  content:''; position:absolute; width:58px; height:58px;
  border:0 solid var(--brand-orange); pointer-events:none;
}
.page-hero h1::before, #hero .hero-title::before, .cs-hero h1::before, .proj-hero h1::before, .svc-hero h1::before {
  top:0; left:0; border-top-width:7px; border-left-width:7px; border-top-left-radius:9px;
}
.page-hero h1::after, #hero .hero-title::after, .cs-hero h1::after, .proj-hero h1::after, .svc-hero h1::after {
  bottom:0; right:0; border-bottom-width:7px; border-right-width:7px; border-bottom-right-radius:9px;
}
/* Left-aligned heroes: keep the text on the column edge, let the bracket sit outside it */
#hero .hero-title, .cs-hero h1, .proj-hero h1, .svc-hero h1 { padding:28px 34px 28px 44px; margin-right:-34px; }
.cs-hero, .proj-hero { position:relative; }
.cs-hero > *, .proj-hero > * { position:relative; z-index:1; }
#hero > .container { position:relative; z-index:2; }
#hero .hero-title { font-size:clamp(42px,4.8vw,66px); line-height:1.02; }
#hero .hero-badge {
  color:#fff; background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.22); border-radius:4px;
}
#hero .hero-badge i { color:var(--brand-orange); }
/* Hero photo: lifted off the blue with a layered deep-navy shadow (soft, not heavy) */
#hero .hero-img-wrap {
  border:none;
  box-shadow:0 38px 70px -20px rgba(3,8,56,0.70), 0 16px 30px -16px rgba(3,8,56,0.55);
}
#hero .fl-card { box-shadow:0 22px 44px -16px rgba(3,8,56,0.55); }
/* Flat brand look: drop the template's photo washes behind blue sections */
#hero .hero-bg, #stats .stats-bg { display:none; }

/* =============================================
   FOOTER (blue)
============================================= */
#footer { background:var(--brand-blue); border-top:1px solid rgba(255,255,255,0.14); }
#footer .logo img { height:64px; }
.footer-grid {
  padding:76px 0 56px;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:44px;
}
.footer-brand .logo { margin-bottom:18px; }
.footer-brand p { font-size:14px; color:var(--grey); line-height:1.8; max-width:280px; margin-bottom:22px; }
.footer-socs { display:flex; gap:10px; }
.fsoc {
  width:38px; height:38px; border-radius:6px;
  background:var(--tint); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#fff; transition:var(--trans);
}
.fsoc:hover { background:var(--brand-orange); border-color:var(--brand-orange); color:#fff; }
.footer-col h4 { font-family:var(--font-h); font-size:15px; font-weight:600; margin-bottom:20px; color:#fff; }
.footer-col ul { display:flex; flex-direction:column; gap:11px; }
.footer-col ul a { font-size:14px; color:var(--grey); transition:color 0.25s, padding-right 0.25s; }
.footer-col ul a:hover { color:#fff; padding-right:5px; }
.footer-bottom {
  border-top:1px solid var(--line); padding:22px 0;
  display:flex; align-items:center; justify-content:space-between;
}
.footer-bottom p { font-size:13px; color:var(--grey); }
.footer-bottom a { color:#fff; }

/* =============================================
   SCROLL TO TOP
============================================= */
#scrollTop {
  position:fixed; bottom:28px; left:28px; z-index:800;
  width:44px; height:44px; border-radius:8px;
  background:var(--brand-blue); color:#fff; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:var(--trans);
}
#scrollTop.show { opacity:1; visibility:visible; }
#scrollTop:hover { background:var(--brand-orange); }

/* =============================================
   CARDS — reused across pages
============================================= */
.svc-card {
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius); padding:34px 30px; transition:var(--trans);
  position:relative; overflow:hidden;
}
.svc-card:hover { border-color:rgba(15,31,168,0.35); }
.svc-icon {
  width:56px; height:56px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:21px; margin-bottom:22px;
}
.si-1, .si-3, .si-5 { background:rgba(15,31,168,0.08); color:var(--brand-blue); }
.si-2, .si-4, .si-6 { background:rgba(240,78,42,0.10); color:var(--brand-orange); }
.svc-card h3 { font-family:var(--font-h); font-size:19px; font-weight:600; margin-bottom:10px; color:var(--ink); }
.svc-card p  { font-size:14px; color:var(--grey); line-height:1.75; margin-bottom:20px; }
.svc-link {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--blue-lt); transition:gap 0.25s, color 0.25s;
}
.svc-link:hover { gap:14px; color:var(--brand-orange); }

/* =============================================
   RESPONSIVE
============================================= */
@media(max-width:1024px){
  .footer-grid { grid-template-columns:1fr 1fr; }
  /* Hero stacks and centers below tablet width */
  #hero .hero-title { padding:26px 40px; width:fit-content; max-width:100%; margin-right:auto; margin-left:auto; }
}
@media(max-width:768px){
  .nav-menu { display:none; }
  .lang-switch--mob { display:inline-flex; margin-inline-start:auto; margin-inline-end:16px; padding:8px 12px; }
  .ham, .hamburger { display:flex; }
  .header-wrap, #header.scrolled .header-wrap { padding:16px 20px; }
  .logo img { height:34px; }
  .container { padding:0 20px; }
  .page-hero { padding:140px 0 70px; }
  .page-hero h1, #hero .hero-title, .cs-hero h1, .proj-hero h1, .svc-hero h1 { padding:20px 28px; }
  .cs-hero h1, .proj-hero h1, .svc-hero h1 { margin-right:0; }
  .page-hero h1::before, .page-hero h1::after,
  #hero .hero-title::before, #hero .hero-title::after,
  .cs-hero h1::before, .cs-hero h1::after,
  .proj-hero h1::before, .proj-hero h1::after, .svc-hero h1::before, .svc-hero h1::after { width:38px; height:38px; border-width:0; }
  .page-hero h1::before, #hero .hero-title::before, .cs-hero h1::before, .proj-hero h1::before, .svc-hero h1::before { border-top-width:5px; border-left-width:5px; }
  .page-hero h1::after, #hero .hero-title::after, .cs-hero h1::after, .proj-hero h1::after, .svc-hero h1::after { border-bottom-width:5px; border-right-width:5px; }
  .footer-grid { grid-template-columns:1fr; gap:30px; }
  .footer-bottom { flex-direction:column; gap:10px; text-align:center; }
}

/* Portfolio card whose cover image is missing: brand gradient instead of a broken picture */
.pf-img.pf-noimg { background:linear-gradient(-135deg,#1a1b3a,#0F1FA8); display:flex; align-items:center; justify-content:center; padding:24px; }
.pf-img.pf-noimg::after { content:attr(data-name); font-family:var(--font-d); font-size:40px; line-height:1.05; color:#fff; text-align:center; letter-spacing:.01em; }

/* Service cards open their service page: the "Learn more" link covers the whole card */
.svc-card--link { position:relative; cursor:pointer; }
.svc-card--link .svc-link::after { content:''; position:absolute; inset:0; }


/* =============================================
   LOGO BRACKETS IN MOTION
   1. Hero titles: the brackets lock onto the headline once, when the page opens.
   2. Section titles: the brackets close in on the title when it scrolls into view.
   3. Service and project cards: the brackets draw into the corners on hover / focus.
   Besides these, only the services strip moves (it loops sideways). Reduced motion: brackets
   appear in place, without travel, and the strip stands still.
============================================= */
@keyframes brkLockTR { from { opacity:0; transform:translate(-18px,-18px); } }
@keyframes brkLockBL { from { opacity:0; transform:translate(18px,18px); } }
.page-hero h1::before, #hero .hero-title::before, .cs-hero h1::before, .proj-hero h1::before, .svc-hero h1::before {
  animation:brkLockTR .8s cubic-bezier(.16,1,.3,1) .25s both;
}
.page-hero h1::after, #hero .hero-title::after, .cs-hero h1::after, .proj-hero h1::after, .svc-hero h1::after {
  animation:brkLockBL .8s cubic-bezier(.16,1,.3,1) .25s both;
}

html.brk-hold .page-hero h1::before, html.brk-hold .page-hero h1::after,
html.brk-hold #hero .hero-title::before, html.brk-hold #hero .hero-title::after,
html.brk-hold .cs-hero h1::before, html.brk-hold .cs-hero h1::after,
html.brk-hold .proj-hero h1::before, html.brk-hold .proj-hero h1::after,
html.brk-hold .svc-hero h1::before, html.brk-hold .svc-hero h1::after { animation-play-state:paused; }

/* Section titles: small brackets just outside the text (the width is fitted to the text by shared.js) */
.sec-title { position:relative; width:fit-content; max-width:100%; }
.sec-head .sec-title { margin-right:auto; margin-left:auto; }
.sec-title::before, .sec-title::after {
  content:''; position:absolute; width:30px; height:30px; pointer-events:none;
  border:0 solid var(--brand-orange);
  transition:opacity .45s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.sec-title::before { top:-12px; left:-22px; border-top-width:5px; border-left-width:5px; border-top-left-radius:7px; }
.sec-title::after  { bottom:-8px; right:-22px; border-bottom-width:5px; border-right-width:5px; border-bottom-right-radius:7px; }
.brk-wait .sec-title:not(.brk-in)::before { opacity:0; transform:translate(-16px,-16px); }
.brk-wait .sec-title:not(.brk-in)::after  { opacity:0; transform:translate(16px,16px); }

/* Cards: brackets draw into the corners on hover / keyboard focus (replaces the hover lift) */
.svc-card, .pf-card, .svc-proj, .svc-other { position:relative; }
.svc-card::before, .svc-card::after, .pf-card::before, .pf-card::after,
.svc-proj::before, .svc-proj::after, .svc-other::before, .svc-other::after {
  content:''; position:absolute; z-index:3; width:26px; height:26px; pointer-events:none;
  border:0 solid var(--brand-orange); opacity:0;
  transition:opacity .2s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.svc-card::before, .pf-card::before, .svc-proj::before, .svc-other::before {
  top:12px; left:12px; border-top-width:4px; border-left-width:4px; border-top-left-radius:6px; transform:translate(-10px,-10px);
}
.svc-card::after, .pf-card::after, .svc-proj::after, .svc-other::after {
  bottom:12px; right:12px; border-bottom-width:4px; border-right-width:4px; border-bottom-right-radius:6px; transform:translate(10px,10px);
}
.svc-other::before, .svc-other::after { width:18px; height:18px; border-width:0; }
.svc-other::before { top:8px; left:8px; border-top-width:3px; border-left-width:3px; }
.svc-other::after  { bottom:8px; right:8px; border-bottom-width:3px; border-right-width:3px; }
.svc-card:hover::before, .svc-card:hover::after, .svc-card:focus-within::before, .svc-card:focus-within::after,
.pf-card:hover::before, .pf-card:hover::after, .pf-card:focus-visible::before, .pf-card:focus-visible::after,
.svc-proj:hover::before, .svc-proj:hover::after, .svc-proj:focus-visible::before, .svc-proj:focus-visible::after,
.svc-other:hover::before, .svc-other:hover::after, .svc-other:focus-visible::before, .svc-other:focus-visible::after {
  opacity:1; transform:none;
}

/* Page styles written for the old template still lift, zoom, float or loop things: switch those off */
.pf-card:hover, .blog-card:hover, .val-card:hover, .team-card:hover, .svc-proj:hover, .svc-other:hover,
.result-card:hover, .proc-card:hover, .price-card:hover, .info-card:hover,
.form-submit:hover, .btn-submit:hover, .tsoc:hover, .soc-link:hover,
.pf-card:hover .pf-img img, .blog-card:hover .blog-img img, .team-card:hover .team-photo img,
.gallery-img:hover img, .sf-img:hover img, .hero-img-wrap:hover img, .pf-card .pf-view { transform:none !important; }
.pf-overlay { display:none !important; }
.fl-card, .hero-badge i, .loader-ring { animation:none !important; }
.map-wrap::after { animation:none !important; }
.skill-fill { width:var(--w, 0%) !important; transition:none !important; }

@media (prefers-reduced-motion: reduce) {
  .page-hero h1::before, .page-hero h1::after, #hero .hero-title::before, #hero .hero-title::after,
  .cs-hero h1::before, .cs-hero h1::after, .proj-hero h1::before, .proj-hero h1::after, .svc-hero h1::before, .svc-hero h1::after { animation:none !important; }
  .sec-title::before, .sec-title::after,
  .svc-card::before, .svc-card::after, .pf-card::before, .pf-card::after,
  .svc-proj::before, .svc-proj::after, .svc-other::before, .svc-other::after { transition:opacity .2s ease; transform:none !important; }
}
@media (max-width: 640px) {
  .sec-title::before { top:-9px; left:-12px; width:22px; height:22px; border-top-width:4px; border-left-width:4px; }
  .sec-title::after  { bottom:-6px; right:-12px; width:22px; height:22px; border-bottom-width:4px; border-right-width:4px; }
}

/* Services strip: with reduced motion it stands still as a centred, wrapping row */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation:none; width:auto; flex-wrap:wrap; justify-content:center; row-gap:8px; max-width:1260px; margin:0 auto; padding:0 20px; }
  .marquee-track [data-dup] { display:none; }
}