/* ==========================================================================
   abdalamin.com, design system
   Palette extracted from "ABD ALAMIN LOGO.png": #004AAD (brand blue),
   #1A1A1A / #363636 (charcoal), white. Everything below is a CSS variable so
   it maps 1:1 onto Elementor Global Colors / Global Fonts after migration.
   No CSS Grid anywhere, every layout is flex-wrap, which is exactly how
   Elementor Flexbox Containers behave.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  /* Brand, 3 colours */
  --brand:        #004AAD;   /* Elementor Global: Primary */
  --brand-light:  #0F62D6;   /* Elementor Global: Secondary, gradients, glow */
  --ink:          #12161D;   /* Elementor Global: Text, headings, dark UI */

  /* Neutrals, 2 supporting */
  --slate:        #56606F;   /* body copy */
  --line:         #E2E7F0;   /* borders, rules */

  /* Surfaces */
  --paper:        #FFFFFF;
  --paper-soft:   #F7F9FD;
  --tint:         #EAF0FB;
  --tint-soft:    #F3F7FE;

  /* Type */
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.4rem, 1.5rem + 3.2vw, 3.6rem);
  --fs-h2:      clamp(1.95rem, 1.42rem + 1.95vw, 3rem);
  --fs-h3:      clamp(1.18rem, 1.08rem + 0.36vw, 1.4rem);
  --fs-h4:      clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
  --fs-lead:    clamp(1.03rem, 0.99rem + 0.24vw, 1.18rem);
  --fs-body:    1rem;
  --fs-small:   0.905rem;
  --fs-eyebrow: 0.77rem;

  /* Spacing, 4px base */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 2px 10px rgba(18, 22, 29, .05);
  --shadow-md: 0 14px 40px rgba(18, 22, 29, .09);

  --container: 1200px;
}

/* ---------- 2. RESET / BASE ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--slate);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

h1, h2, h3, h4 { color: var(--ink); font-weight: 600; line-height: 1.14; letter-spacing: -0.022em; margin: 0; }
h1 { font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.032em; }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.028em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p  { margin: 0; }
p + p { margin-top: var(--sp-4); }
a  { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-light); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { color: var(--ink); font-weight: 600; }

/* Visually hidden but readable by screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--brand-light); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- 3. LAYOUT PRIMITIVES ----------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }

.section { padding: clamp(64px, 8vw, 118px) 0; position: relative; }
.section--tight { padding: clamp(48px, 5vw, 78px) 0; }
.section--soft { background: var(--paper-soft); }
.section--tint { background: var(--tint-soft); }

.row { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.row--gap-lg { gap: var(--sp-7); }
.row--between { justify-content: space-between; }
.row--center { align-items: center; }

.measure { max-width: 58ch; }
.measure-sm { max-width: 44ch; }

/* Section header, eyebrow + short rule (reference 4 / 6.2) */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 var(--sp-4);
}
.eyebrow::after {
  content: ""; display: block; width: 34px; height: 2px;
  background: var(--brand); margin-top: var(--sp-2); border-radius: 2px;
}
.eyebrow--center { display: block; }
.eyebrow--center::after { margin-left: auto; margin-right: auto; }

.section-lead { font-size: var(--fs-lead); margin-top: var(--sp-4); }
.text-center { text-align: center; }
.center-block { margin-left: auto; margin-right: auto; }

/* ---------- 4. BUTTONS --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: inherit; font-size: var(--fs-small); font-weight: 600; line-height: 1;
  padding: 15px 26px; border-radius: var(--r-pill); border: 1.5px solid transparent;
  cursor: pointer; text-align: center;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn svg { flex: 0 0 auto; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-light); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,74,173, .26); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: var(--paper); color: var(--ink); border-color: var(--brand); transform: translateY(-2px); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #232a35; color: #fff; transform: translateY(-2px); }
.btn-lg { padding: 17px 32px; font-size: 1rem; }
.btn-sm { padding: 11px 18px; font-size: 0.84rem; }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

.btn-youtube { background: #CC0000; color: #fff; border-color: #CC0000; }
.btn-youtube:hover { background: #A30000; border-color: #A30000; color: #fff; transform: translateY(-2px); }
.btn-youtube svg { width: 20px; height: 14px; }

.link-arrow { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.link-arrow svg { transition: transform .2s; }
.link-arrow:hover { color: var(--brand); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- 5. HEADER ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: 74px; }
.brand-logo { display: flex; align-items: center; flex: 0 0 auto; }
.brand-logo img { width: 138px; height: 53px; object-fit: contain; }

.nav { display: flex; align-items: center; }
.nav-link { position: relative; font-size: var(--fs-small); font-weight: 500; color: var(--slate); padding: 6px 0; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--brand); transition: right .22s ease; border-radius: 2px;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { right: 0; }

/* The Book a Call button inside the nav is for the mobile drawer only.
   On desktop the single CTA lives in .header-cta. */
.nav-cta { display: none; }

.header-cta { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--line); color: #FF0000;
  transition: border-color .2s, transform .2s, background-color .2s;
}
.icon-btn:hover { border-color: #FF0000; background: #fff5f5; transform: translateY(-2px); }
.icon-btn svg { width: 19px; height: 13px; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1.5px solid var(--line); background: #fff;
  border-radius: var(--r-sm); cursor: pointer; padding: 0; position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; width: 19px; height: 2px;
  background: var(--ink); border-radius: 2px; transition: transform .22s, opacity .18s, background-color .18s;
}
.nav-toggle span { top: 50%; left: 50%; margin: -1px 0 0 -9.5px; }
.nav-toggle span::before { top: -6px; left: 0; }
.nav-toggle span::after  { top: 6px;  left: 0; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 6. HERO (reference 1) ---------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(48px, 6vw, 92px) 0 clamp(56px, 7vw, 104px);
  background:
    radial-gradient(58% 70% at 68% 22%, var(--tint) 0%, rgba(234,240,251,0) 62%),
    linear-gradient(180deg, #FFFFFF 0%, var(--tint-soft) 100%);
}
.hero-inner { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 4vw, 56px); }
.hero-copy { flex: 1 1 460px; min-width: 0; }
.hero-visual { flex: 0 1 360px; min-width: 250px; display: flex; justify-content: center; }
.hero-stats { flex: 0 0 172px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 7px 16px 7px 8px; font-size: 0.84rem; font-weight: 500; color: var(--ink);
  box-shadow: var(--shadow-sm); margin-bottom: var(--sp-5);
}
.hero-badge .dot {
  width: 22px; height: 22px; border-radius: 50%; background: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto;
}
.hero-badge .dot svg { width: 12px; height: 12px; }

.hero h1 { margin-bottom: var(--sp-5); }
.hero h1 .accent { color: var(--brand); }
.hero-desc { font-size: var(--fs-lead); max-width: 46ch; }
.hero .btn-group { margin-top: var(--sp-6); }

.hero-scroll {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-7); font-size: 0.82rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--slate);
}
.hero-scroll .ring {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; color: var(--brand);
  animation: bob 2.6s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Portrait, circular frame + dashed ring + floating marketing chips */
.portrait {
  position: relative; width: 100%; max-width: 344px; aspect-ratio: 1 / 1;
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.portrait-ring {
  position: absolute; inset: -14px; border-radius: 50%;
  border: 1.5px solid rgba(0,74,173, .18);
}
.portrait-arc {
  position: absolute; inset: -14px; border-radius: 50%;
  border: 3px solid transparent; border-top-color: var(--brand); border-right-color: var(--brand);
  transform: rotate(-38deg);
}
.portrait-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; background: var(--tint);
  box-shadow: 0 22px 50px rgba(0, 74, 173, .16);
}
.chip-float {
  position: absolute; display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 8px 14px; font-size: 0.78rem; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow-md); white-space: nowrap;
}
.chip-float svg { width: 14px; height: 14px; color: var(--brand); flex: 0 0 auto; }
.chip-float .num { color: var(--brand); }
.chip-1 { top: 6%;  left: -12%; animation: float 6s ease-in-out infinite .3s; }
.chip-2 { top: 42%; right: -16%; animation: float 6.6s ease-in-out infinite .9s; }
.chip-3 { bottom: 6%; left: -8%; animation: float 7.4s ease-in-out infinite .5s; }

.hero-stats { display: flex; flex-direction: column; gap: var(--sp-5); }
.stat { border-left: 2px solid var(--line); padding-left: var(--sp-4); }
.stat .figure { display: block; font-size: 1.7rem; font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: -0.03em; }
.stat .figure span { color: var(--brand); }
.stat .label { display: block; font-size: 0.8rem; color: var(--slate); margin-top: 2px; line-height: 1.35; }
.stat-source { font-size: 0.72rem; color: #5F6979; margin-top: var(--sp-2); }

/* ---------- 7. PLATFORM STRIP (reference 2) ------------------------------ */
.strip { background: var(--brand); color: #fff; padding: var(--sp-6) 0; overflow: hidden; }
.strip-label {
  text-align: center; font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: rgba(255,255,255, .72);
  margin-bottom: var(--sp-5);
}
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; align-items: center; gap: clamp(38px, 6vw, 78px); padding-right: clamp(38px, 6vw, 78px); flex: 0 0 auto; animation: marquee 34s linear infinite; }
/* Hover no longer pauses the marquee: the strip runs continuously. */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.marquee-item {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 1.06rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; white-space: nowrap; opacity: .92;
}
.marquee-item svg { width: 21px; height: 21px; flex: 0 0 auto; }

/* ---------- 8. ABOUT (references 3 + 3.1) -------------------------------- */
.about-visual { flex: 0 1 400px; min-width: 250px; position: relative; display: flex; justify-content: center; }
.about-copy { flex: 1 1 460px; min-width: 0; }
.about-circle { position: relative; width: 100%; max-width: 372px; aspect-ratio: 1/1; }
.about-circle img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--tint); }
.about-circle::before {
  content: ""; position: absolute; inset: -16px; border-radius: 50%;
  border: 1.5px solid var(--tint);
}
.about-blob {
  position: absolute; top: 4%; right: -4%; width: 108px; height: 108px; border-radius: 50%;
  background: var(--brand); color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; line-height: 1.15;
  box-shadow: 0 16px 34px rgba(0,74,173, .3);
}
.about-blob .n { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; }
.about-blob .t { font-size: 0.66rem; letter-spacing: .09em; text-transform: uppercase; opacity: .9; margin-top: 2px; }

/* small decorative geometry, reference 3 */
.deco { position: absolute; border-radius: 50%; pointer-events: none; }
.deco-a { width: 13px; height: 13px; border: 2px solid var(--brand); top: 2%; left: 2%; }
.deco-b { width: 9px;  height: 9px;  background: var(--brand); opacity: .35; bottom: 12%; right: 3%; }
.deco-c { width: 22px; height: 22px; border: 2px solid var(--line); bottom: 2%; left: 12%; }

/* Highlighted information rows (reference: "about me box") */
.highlight-stack { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.highlight-row {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  background: var(--tint-soft); border: 1px solid var(--tint);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5);
  transition: background-color .2s, border-color .2s, transform .2s;
}
.highlight-row--alt { background: #F7F9FD; border-color: var(--line); }
.highlight-row:hover { border-color: rgba(0,74,173, .3); transform: translateX(3px); }
.highlight-icon {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
  background: #fff; color: var(--brand); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.highlight-icon svg { width: 17px; height: 17px; }
.highlight-row h3 { font-size: var(--fs-h4); margin-bottom: 3px; }
.highlight-row p { font-size: 0.875rem; }

/* Fix The Subject credibility card. Brand gold #FCC701 comes from FTS Logo.png;
   the text uses a darkened tone of the same hue so it stays readable (AA). */
.credit-card {
  --fts: #FCC701;
  --fts-text: #7A5D00;
  display: flex; align-items: center; gap: var(--sp-4);
  border: 1px solid var(--line); border-left: 3px solid var(--fts);
  border-radius: var(--r-md); background: #FFFDF5;
  padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-5);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.credit-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.credit-card .credit-mark { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 11px; }
.credit-card .role { font-size: 0.72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); font-weight: 600; }
.credit-card .name { display: block; font-weight: 700; color: var(--fts-text); }
.credit-card .go { margin-left: auto; color: var(--slate); flex: 0 0 auto; }

.about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); margin-top: var(--sp-6); }
.follow { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.follow .label { font-size: var(--fs-small); color: var(--slate); }
.follow .rule { width: 34px; height: 1px; background: var(--line); }
.social-list { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.social-list a {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; color: var(--slate);
  transition: color .2s, border-color .2s, transform .2s;
}
.social-list a:hover { transform: translateY(-2px); }
.social-list svg { width: 16px; height: 16px; }

/* Hover reveals the platform's own brand colour. Default stays neutral so the
   row reads as one consistent element. */
.s-in:hover { color: #0A66C2; border-color: #0A66C2; background: #F0F6FC; }
.s-yt:hover { color: #CC0000; border-color: #CC0000; background: #FFF4F4; }
.s-fb:hover { color: #1877F2; border-color: #1877F2; background: #F0F5FE; }
.s-x:hover  { color: #0B0B0B; border-color: #0B0B0B; background: #F4F4F4; }
.s-be:hover { color: #0057FF; border-color: #0057FF; background: #F0F4FF; }
.s-tg:hover { color: #229ED9; border-color: #229ED9; background: #F0F9FD; }
.s-wa:hover { color: #128C7E; border-color: #128C7E; background: #F0FAF7; }
.s-ig:hover {
  color: #fff; border-color: transparent;
  background: linear-gradient(45deg, #F09433 0%, #E6683C 25%, #DC2743 50%, #CC2366 75%, #BC1888 100%);
}

/* ---------- 9. HOW I HELP (reference 4) ---------------------------------- */
.card-grid { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-8); }
.card-grid > * { flex: 1 1 300px; }
/* Three per row on desktop, and the final row keeps the same card width rather
   than stretching to fill. Elementor: container width 33.33%, wrap on. */
@media (min-width: 981px) {
  .card-grid > * { flex: 0 1 calc(33.333% - 16px); }
}
@media (min-width: 660px) and (max-width: 980px) {
  .card-grid > * { flex: 0 1 calc(50% - 12px); }
}

.service-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
/* subtle lighting/glow around the border on hover, no neon */
.service-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(15,98,214, .22), rgba(15,98,214,0) 62%);
  opacity: 0; transition: opacity .25s;
}
.service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0,74,173, .35);
  box-shadow: 0 0 0 4px rgba(0,74,173, .06), 0 18px 42px rgba(0,74,173, .13);
}
.service-card:hover::before { opacity: 1; }
.service-card > * { position: relative; }

.service-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.service-icon {
  width: 46px; height: 46px; border-radius: 13px; background: var(--tint); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.service-icon svg { width: 22px; height: 22px; }
.service-num { font-size: 0.8rem; font-weight: 700; color: var(--brand); letter-spacing: .06em; }
.service-card h3 { margin-bottom: var(--sp-3); }
.service-card .desc { font-size: var(--fs-small); }
.sub-list { margin: var(--sp-4) 0 var(--sp-5); display: flex; flex-direction: column; gap: 7px; }
.sub-list li { position: relative; padding-left: 17px; font-size: 0.855rem; }
.sub-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--brand); opacity: .55;
}
.service-card .link-arrow { margin-top: auto; }

.tag-team {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate); background: var(--paper-soft); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 4px 10px;
}
.team-note {
  margin-top: var(--sp-6); font-size: var(--fs-small);
  border-left: 2px solid var(--brand); padding-left: var(--sp-4); max-width: 62ch;
}

/* ---------- 10. EXPERIENCE (reference 5) --------------------------------- */
.exp-left { flex: 0 1 350px; min-width: 260px; }
.exp-right { flex: 1 1 480px; min-width: 0; }

/* Experience reads as a growth branch rather than a timeline: one organic stem
   down the left, a twig reaching out to each milestone, and a node where they
   meet. Two decorative SVGs and a border radius, nothing else.
   In Elementor: a container with the stem SVG as its background image, and the
   twig SVG as the background of each repeater item. */
.timeline { position: relative; padding-left: 56px; }

/* the stem, thinner at the top and heavier as it descends */
.timeline::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 20px;
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 400' preserveAspectRatio='none'%3E%3Cpath d='M7 2 C3 60 11 118 7 176 C3 234 11 292 7 350 C6 372 8 388 7 398' fill='none' stroke='%23004AAD' stroke-width='1.1' stroke-linecap='round' opacity='0.28'/%3E%3Cpath d='M7 150 C3 208 11 266 7 324 C6 352 8 380 7 398' fill='none' stroke='%23004AAD' stroke-width='2' stroke-linecap='round' opacity='0.34'/%3E%3C/svg%3E")
    no-repeat center / 100% 100%;
}

/* the node where a twig meets its milestone */
.tl-item { position: relative; padding-bottom: var(--sp-6); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -34px; top: 7px;
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  border: 3px solid var(--brand); z-index: 1;
}
/* the newest milestone is a solid bud rather than an outline */
.tl-item:last-child::before { background: var(--brand); }

/* the twig, curving out of the stem toward the node */
.tl-item::after {
  content: ""; position: absolute; left: -49px; top: 3px; width: 22px; height: 20px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M2 19 C5 15 5 11 10 10 C14 9 17 10 21 10' fill='none' stroke='%23004AAD' stroke-width='1.4' stroke-linecap='round' opacity='0.42'/%3E%3Cpath d='M9 10 C10 6 13 4 16 4' fill='none' stroke='%23004AAD' stroke-width='1.1' stroke-linecap='round' opacity='0.22'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* alternate the twig so the branch does not look mechanical */
.tl-item:nth-child(even)::after { transform: scaleY(-1); top: 8px; }
.tl-year { font-size: 0.78rem; font-weight: 700; letter-spacing: .1em; color: var(--brand); text-transform: uppercase; }
.tl-item h3 { font-size: var(--fs-h4); margin: 3px 0 5px; }
.tl-item p { font-size: var(--fs-small); }

.exp-figures { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-6); }
.exp-figures .stat { flex: 1 1 120px; }

/* ---------- 11. APPROACH (references 6 + 6.2) ---------------------------- */
.approach-left { flex: 0 1 380px; min-width: 260px; }
.approach-right { flex: 1 1 520px; min-width: 0; }

/* Five steps read as a connected vertical flow (reference 6.2) with the dashed
   ring + icon marker from reference 6 acting as the connector node. */
.steps { display: flex; flex-direction: column; }
.step {
  position: relative; display: flex; gap: var(--sp-5);
  padding-bottom: var(--sp-6);
}
.step:last-child { padding-bottom: 0; }
/* Connector and ring restored to the earlier treatment on request: a straight
   gradient rule between the nodes and a dashed halo around each icon. This is
   the one place dashed strokes are used, and it is deliberate. */
.step:not(:last-child)::before {
  content: ""; position: absolute; left: 25px; top: 58px; bottom: 6px; width: 1.5px;
  background: linear-gradient(180deg, rgba(0,74,173, .35), rgba(0,74,173, .1));
}
.step-ring {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px dashed rgba(0,74,173, .4); background: var(--tint-soft);
  display: flex; align-items: center; justify-content: center; position: relative;
  transition: border-color .2s, transform .2s;
}
.step:hover .step-ring { border-color: var(--brand); transform: scale(1.05); }
.step-ring i {
  width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.step-ring i svg { width: 17px; height: 17px; }
.step-body { padding-top: 5px; }
.step h3 { font-size: var(--fs-h4); margin-bottom: 5px; }
.step p { font-size: 0.9rem; max-width: 56ch; }

.focus-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: #fff; border-radius: var(--r-pill);
  padding: 7px 14px; font-size: 0.8rem; font-weight: 500; color: var(--ink);
}
.pill svg { width: 13px; height: 13px; color: var(--brand); }

/* ---------- 12. FEEDBACK (reference 7) ----------------------------------- */
/* Section header sitting beside its action button */
.section-head-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); margin-bottom: var(--sp-7);
}

/* Feedback header: eyebrow, heading, description, action, then the card row
   (reference 7). Held to a narrow measure so it reads as an editorial standfirst
   rather than a full-width block. */
.feedback-head { margin-bottom: var(--sp-8); max-width: 52ch; }
.feedback-head h2 { margin-bottom: var(--sp-4); }
.feedback-head .section-lead { margin-top: 0; font-size: var(--fs-body); }
.feedback-cta { margin-top: var(--sp-6); }

/* Three identical review cards. Equal width from the fixed basis, equal height
   from align-items: stretch plus a shared min-height. */
.quote-grid { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-5); }
.quote-grid > * { flex: 1 1 300px; }
@media (min-width: 981px) { .quote-grid > * { flex: 0 1 calc(33.333% - 16px); } }
@media (min-width: 660px) and (max-width: 980px) { .quote-grid > * { flex: 0 1 calc(50% - 12px); } }

/* Editorial testimonial card: soft tinted block, generous even padding, quote
   badge on top, and the client identity resting on the card floor. */
.quote-card {
  margin: 0; min-height: 340px;
  display: flex; flex-direction: column;
  background: var(--tint-soft); border: 1px solid var(--tint);
  border-radius: var(--r-md); padding: var(--sp-6);
  transition: transform .22s, box-shadow .22s, border-color .22s, background-color .22s;
}
.quote-card:hover {
  transform: translateY(-4px); border-color: rgba(0,74,173, .28);
  background: #fff; box-shadow: var(--shadow-md);
}
.quote-mark {
  width: 40px; height: 40px; border-radius: 12px; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-5); flex: 0 0 auto;
}
.quote-mark svg { width: 16px; height: 16px; }
.quote-card blockquote { margin: 0; color: var(--ink); font-size: 1.01rem; line-height: 1.64; }

/* Client identity on one compact row: avatar, name and country, rating */
.quote-foot {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: auto; padding-top: var(--sp-6);
}
.avatar {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 0.84rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; letter-spacing: .02em;
  box-shadow: 0 0 0 3px rgba(255,255,255, .9);
}
.quote-who { min-width: 0; }
.quote-who .n { display: block; font-weight: 600; color: var(--ink); font-size: var(--fs-small); line-height: 1.35; }
.quote-who .r { display: block; font-size: 0.78rem; line-height: 1.35; }
.stars { display: inline-flex; gap: 1px; color: var(--brand); margin-left: auto; flex: 0 0 auto; }
.stars svg { width: 13px; height: 13px; }

/* ---------- 13. PORTFOLIO (references 8 + 8.1) --------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }
.filter {
  font-family: inherit; font-size: 0.85rem; font-weight: 500; color: var(--slate);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: 11px 18px; cursor: pointer; transition: all .18s;
}
.filter:hover { border-color: var(--brand); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

.work-grid { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-6); }
.work-card {
  flex: 1 1 300px; max-width: 100%;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.work-card[hidden] { display: none; }
.work-card:hover { transform: translateY(-5px); border-color: rgba(0,74,173, .3); box-shadow: var(--shadow-md); }
.work-thumb { background: var(--paper-soft); overflow: hidden; aspect-ratio: 4 / 3; }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.work-card:hover .work-thumb img { transform: scale(1.035); }
.work-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1 1 auto; }
.work-cats { font-size: 0.7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--brand); }
.work-card h3 { font-size: var(--fs-h4); margin: var(--sp-2) 0 var(--sp-2); }
.work-card .result { font-size: var(--fs-small); }
.work-card .link-arrow { margin-top: var(--sp-4); }
.work-empty { flex: 1 1 100%; text-align: center; padding: var(--sp-7) 0; }
/* Three per row on desktop. Fixed basis so a filtered-down row of one or two
   cards keeps its size instead of stretching across the section. */
@media (min-width: 981px) {
  .work-card { flex: 0 1 calc(33.333% - 16px); }
}
@media (min-width: 660px) and (max-width: 980px) {
  .work-card { flex: 0 1 calc(50% - 12px); }
}

/* ---------- 14. WRITING (reference 9) ------------------------------------ */
.post-card {
  flex: 1 1 300px; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.post-card:hover { transform: translateY(-5px); border-color: rgba(0,74,173, .3); box-shadow: var(--shadow-md); }
.post-thumb { aspect-ratio: 16 / 10; background: var(--paper-soft); overflow: hidden; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1 1 auto; }
.post-meta { font-size: 0.7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--brand); }
.post-card h3 { font-size: var(--fs-h4); margin: var(--sp-2) 0; }
.post-card p { font-size: var(--fs-small); }
.post-card .link-arrow { margin-top: auto; padding-top: var(--sp-4); }

/* ---------- 15. CTA (references 10 + 10.1) ------------------------------- */
/* Compact CTA (reference 10.1 for proportion, reference 10 for the portrait
   bleeding above the panel edge over a dot field). */
#cta { padding-top: clamp(72px, 8vw, 108px); }
.cta-panel {
  position: relative;
  max-width: 1000px; margin: 0 auto;
  border-radius: var(--r-lg); border: 1px solid var(--tint);
  background:
    radial-gradient(70% 120% at 86% 60%, #E4ECFA 0%, rgba(228,236,250,0) 70%),
    linear-gradient(105deg, #FFFFFF 0%, var(--tint-soft) 55%, #E9F0FB 100%);
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--sp-6);
  padding: clamp(24px, 3vw, 38px) clamp(24px, 3.4vw, 46px) 0;
}
.cta-copy { flex: 1 1 380px; min-width: 0; position: relative; z-index: 1; padding-bottom: clamp(24px, 3vw, 38px); }
.cta-copy .hero-badge { margin-bottom: var(--sp-4); }
.cta-panel h2 { font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.5rem); }
.cta-panel h2 .accent { color: var(--brand); display: block; }
.cta-lead { font-size: var(--fs-small); max-width: 42ch; margin-top: var(--sp-3); }
.cta-note { font-size: 0.83rem; }
.platform-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-5); }
.platform-chips .pill { background: rgba(255,255,255, .82); font-size: 0.75rem; padding: 6px 12px; }

.cta-visual {
  position: relative; flex: 0 0 clamp(220px, 26%, 300px); min-width: 200px;
  align-self: stretch;
}
/* dot field behind the portrait */
.cta-visual::before {
  content: ""; position: absolute; right: -10px; bottom: 0;
  width: 260px; height: 260px; border-radius: 50%;
  background-image: radial-gradient(rgba(0,74,173, .22) 1.4px, transparent 1.4px);
  background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(circle, #000 45%, transparent 72%);
  mask-image: radial-gradient(circle, #000 45%, transparent 72%);
}
/* The portrait sits on the panel floor and runs past its top edge, the way the
   figure does in reference 10. Height is driven off the panel so the overlap
   stays constant whatever the copy does. In Elementor: an Image widget in a
   container with position absolute, bottom 0. */
.cta-visual img {
  position: absolute; bottom: 0; right: 0;
  height: calc(100% + 100px); width: auto; max-width: none; display: block;
}

/* Below 900px the panel stacks, so the portrait sits under the copy and stops
   bleeding. Otherwise it would grow wide enough to cover the text. */
@media (max-width: 900px) {
  .cta-panel { flex-direction: column; align-items: stretch; padding-bottom: 0; }
  .cta-copy { flex: 1 1 auto; padding-bottom: var(--sp-5); }
  .cta-visual { flex: 0 0 auto; align-self: center; width: 100%; max-width: 300px; height: 290px; }
  .cta-visual img { height: 290px; right: 50%; transform: translateX(50%); }
  .cta-visual::before { right: 50%; transform: translateX(50%); width: 210px; height: 210px; }
}

/* ---------- 16. FOOTER (reference 11) ------------------------------------ */
.site-footer { background: var(--paper-soft); border-top: 1px solid var(--line); padding: clamp(40px, 4.6vw, 62px) 0 var(--sp-5); }
.news-title { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.15rem); max-width: 16ch; }
.news-row { display: flex; flex-wrap: wrap; gap: var(--sp-7); align-items: stretch; }
.news-copy { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; }
.news-form-wrap { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; }
/* both columns close at the same baseline: logo on the left, nav on the right */
/* Newsletter: input and submit joined into one pill (reference 11) */
.news-form { margin-top: var(--sp-4); }
.news-field {
  display: flex; align-items: center; gap: var(--sp-2);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: 5px 5px 5px 8px; transition: border-color .2s, box-shadow .2s;
  max-width: 460px;
}
.news-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,74,173, .12); }
.news-field input[type="email"] {
  flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: var(--fs-small); color: var(--ink);
  background: transparent; border: 0; outline: none; padding: 12px 14px;
}
.news-field input[type="email"]::placeholder { color: #8C95A5; }
.news-submit {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: var(--fs-small); font-weight: 600; line-height: 1;
  background: var(--brand); color: #fff; border: 0; border-radius: var(--r-pill);
  padding: 14px 20px; cursor: pointer; transition: background-color .2s, transform .2s;
}
.news-submit:hover { background: var(--brand-light); transform: translateX(2px); }
.news-submit svg { transition: transform .2s; }
.news-submit:hover svg { transform: translateX(3px); }

.consent { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-3); font-size: 0.78rem; }
.consent input { margin-top: 4px; flex: 0 0 auto; accent-color: var(--brand); }
.news-status { font-size: 0.8rem; margin-top: var(--sp-2); color: var(--ink); }
.news-status:empty { display: none; }

/* One horizontal strip closes the footer: logo, social row and navigation on a
   single line at desktop, wrapping naturally below. */
.footer-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-5) var(--sp-6);
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line);
}
.footer-logo { flex: 0 0 auto; }
.footer-logo img { width: 150px; height: 73px; object-fit: contain; }
.footer-strip .social-list { flex: 0 1 auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5); flex: 0 1 auto; }
.footer-nav a { font-size: var(--fs-small); color: var(--slate); }
.footer-nav a:hover { color: var(--brand); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: center; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: 0.82rem; }

/* ---------- 17. PLACEHOLDER MARKER --------------------------------------- */
/* Anything the project folder does not contain is wrapped in this so it is
   impossible to ship by accident. Search the HTML for "REPLACE ME". */
/* .needs-value    : an inline text marker (labels, notes, empty slots)
   .is-placeholder : applied to buttons and icon links, so it marks them
   without touching the padding, size or colour the component already has. */
/* No dashed borders anywhere in the design. Placeholder markers use a solid
   amber rule so they are still impossible to miss. */
.needs-value {
  border: 1.5px solid #F59E0B; border-left: 3px solid #C2410C; border-radius: var(--r-sm);
  padding: 3px 9px; background: #FFF7ED; color: #9A3412;
  font-size: 0.78rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
}
a.needs-value:hover { color: #9A3412; }
.needs-value--block { display: block; padding: var(--sp-4); }

.is-placeholder { position: relative; outline: 2px solid #C2410C; outline-offset: 3px; }
.is-placeholder::after {
  content: "REPLACE ME"; position: absolute; top: -9px; right: -4px;
  background: #C2410C; color: #fff; border-radius: 3px;
  font-size: 0.52rem; font-weight: 700; letter-spacing: .06em; line-height: 1;
  padding: 3px 5px; pointer-events: none;
}
.social-list a.is-placeholder::after, .icon-btn.is-placeholder::after { content: "!"; padding: 2px 4px; top: -6px; right: -6px; }

/* ---------- 18. RESPONSIVE ----------------------------------------------- */
@media (max-width: 1080px) {
  .hero-stats { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; }
  .hero-stats .stat { flex: 1 1 140px; }
  .hero-visual { flex: 1 1 320px; }
  /* the stat rail drops below the hero here, so the portrait centres in a wider
     column and the right-hand chip would otherwise clip against the edge */
  .chip-2 { right: -6%; }
}

@media (max-width: 920px) {
  /* The static build's own mobile drawer used to live here. It hid .nav with
     opacity:0/visibility:hidden and only revealed it via .nav[data-open="true"],
     an attribute the old drawer JavaScript set. That script was removed at
     migration because the Elementor Nav Menu widget provides its own toggle and
     dropdown, so nothing could ever reveal the menu again: it was invisible on
     tablet, and the hamburger did nothing on mobile. The widget now controls its
     own responsive behaviour, so .nav simply stays in normal flow here. */
  .nav-link { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav-link::after { display: none; }
  .nav .btn { margin-top: var(--sp-4); }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: block; }
  .header-cta .btn-primary { display: none; }

  .chip-2 { right: -6%; }
  .chip-1 { left: -4%; }
  .chip-3 { left: -2%; }
  .about-blob { width: 92px; height: 92px; right: 0; }
}

@media (max-width: 700px) {
  /* Simplify the branch on small screens: keep the stem, drop the twigs so
     nothing can crowd the milestone text. */
  .timeline { padding-left: 34px; }
  .tl-item::after { display: none; }
  .tl-item::before { left: -34px; }

  .portrait { max-width: 300px; }
  .about-circle { max-width: 300px; }
  .hero-scroll { display: none; }
  .quote-card blockquote { font-size: 0.97rem; }
}

@media (max-width: 520px) {
  .chip-float { font-size: 0.72rem; padding: 6px 11px; }
  .chip-1 { left: -2%; }
  .chip-2 { right: -2%; }
  .chip-3 { left: 0; }
  .btn-group .btn { flex: 1 1 100%; }
  .hero-stats .stat { flex: 1 1 100%; }
  .brand-logo img { width: 118px; height: 45px; }
  .footer-logo img { width: 160px; height: 78px; }
}

/* ==========================================================================
   19. INNER PAGES
   Components used by About, Services, Portfolio, Blog, Tools, Prompts and
   Contact. Same tokens, same rhythm, same card language as the home page.
   ========================================================================== */

/* ---------- 19.1 Page hero ----------------------------------------------- */
.page-hero {
  position: relative; overflow: hidden;
  padding: clamp(52px, 6vw, 82px) 0 clamp(48px, 5.5vw, 74px);
  background:
    radial-gradient(58% 80% at 78% 18%, var(--tint) 0%, rgba(234,240,251,0) 62%),
    linear-gradient(180deg, #FFFFFF 0%, var(--tint-soft) 100%);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { max-width: 20ch; }
.page-hero .section-lead { max-width: 60ch; }
.page-hero-row { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: center; }
.page-hero-copy { flex: 1 1 440px; min-width: 0; }
.page-hero-media { flex: 0 1 340px; min-width: 240px; }
.page-hero-media img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--tint); }

.container-narrow { max-width: 760px; }

/* ---------- 19.2 Prose ---------------------------------------------------- */
.article-body { max-width: 68ch; color: var(--slate); }
.article-body > * + * { margin-top: var(--sp-5); }
.article-body p { font-size: 1.03rem; line-height: 1.75; }
.article-body h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem);
  margin-top: var(--sp-8); padding-top: var(--sp-2);
}
.article-body h3 { font-size: var(--fs-h3); margin-top: var(--sp-6); }
.article-body h2 + p, .article-body h3 + p { margin-top: var(--sp-4); }
.article-body ul, .article-body ol { display: flex; flex-direction: column; gap: var(--sp-3); }
.article-body ul li { position: relative; padding-left: 22px; line-height: 1.7; }
.article-body ul li::before {
  content: ""; position: absolute; left: 2px; top: 0.66em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: .55;
}
.article-body ol { counter-reset: n; }
.article-body ol li { position: relative; padding-left: 30px; line-height: 1.7; counter-increment: n; }
.article-body ol li::before {
  content: counter(n) "."; position: absolute; left: 0; top: 0;
  color: var(--brand); font-weight: 700; font-size: 0.9rem;
}
.article-body blockquote {
  margin: 0; padding: var(--sp-4) 0 var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--brand); color: var(--ink);
  font-size: 1.08rem; line-height: 1.6;
}
.article-body strong { color: var(--ink); }
.article-body img { border-radius: var(--r-md); border: 1px solid var(--line); }
.article-body figure { margin: 0; }
.article-body figcaption { font-size: 0.82rem; margin-top: var(--sp-3); color: var(--slate); }
.article-body a:not(.btn):not(.link-arrow) { text-decoration: underline; text-underline-offset: 3px; }

/* helper classes used inside the preserved article prose */
.article-body .h3, .card .h3 { font-size: var(--fs-h3); color: var(--ink); font-weight: 600; line-height: 1.2; }
.article-body .h4, .card .h4 { font-size: var(--fs-h4); color: var(--ink); font-weight: 600; line-height: 1.25; }
.body-text { font-size: var(--fs-body); }
.small { font-size: var(--fs-small); }
.checklist { display: flex; flex-direction: column; gap: var(--sp-3); }
.checklist li { position: relative; padding-left: 26px; font-size: var(--fs-small); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.35em; width: 15px; height: 9px;
  border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}
.stack { display: flex; flex-direction: column; }
.stack-3 { gap: var(--sp-3); }
.stack-4 { gap: var(--sp-4); }
.card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: 0.72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--brand);
}
.footer-title {
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate); margin-bottom: var(--sp-3);
}
.arrow { display: inline-block; }

/* generic content card, reused across inner pages */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-6) var(--sp-5);
}
.card--tint { background: var(--tint-soft); border-color: var(--tint); }

/* ---------- 19.3 Article page furniture ----------------------------------- */
.byline { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.byline img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--tint); }
.byline .n { font-weight: 600; color: var(--ink); font-size: var(--fs-small); line-height: 1.3; display: block; }
.byline .r { font-size: 0.78rem; line-height: 1.3; display: block; }

.article-hero-media { margin-top: var(--sp-7); }
.article-hero-media img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); }

.takeaway {
  margin-top: var(--sp-8); max-width: 68ch;
  background: var(--tint-soft); border: 1px solid var(--tint);
  border-left: 3px solid var(--brand); border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
}
.takeaway .footer-title { color: var(--brand); }

/* ---------- 19.4 FAQ / accordion (native details, zero JS) ----------------
   Compact by default: a tight row per question, an accent rule and a soft wash
   only when open. Maps onto an Elementor Accordion or Toggle widget. */
.faq { display: flex; flex-direction: column; gap: 6px; max-width: 76ch; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  transition: border-color .18s, background-color .18s;
}
.faq details:hover { border-color: rgba(0,74,173, .28); }
.faq details[open] { border-color: var(--tint); border-left-color: var(--brand); background: var(--tint-soft); }
.faq summary {
  cursor: pointer; list-style: none; padding: 13px 18px;
  font-weight: 600; color: var(--ink); font-size: 0.95rem; line-height: 1.4;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(1px); }
.faq .faq-body { padding: 0 18px 14px; font-size: 0.875rem; line-height: 1.65; max-width: 68ch; }
.faq .faq-body p + p { margin-top: var(--sp-3); }
/* centred FAQ composition, used on Contact */
.faq--center { margin-left: auto; margin-right: auto; max-width: 720px; }
.faq--center summary { text-align: left; }

/* ---------- 19.5 Case studies (editorial, alternating) -------------------- */
.case { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: center; }
.case + .case { margin-top: clamp(56px, 7vw, 104px); }
.case-media { flex: 1 1 440px; min-width: 0; }
.case-copy { flex: 1 1 380px; min-width: 0; }
.case-media img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper-soft); }
.case-media figcaption { font-size: 0.78rem; margin-top: var(--sp-3); }
@media (min-width: 900px) { .case--flip { flex-direction: row-reverse; } }

.metric-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-5); }
.metric { flex: 1 1 120px; border-left: 2px solid var(--line); padding-left: var(--sp-4); }
.metric .figure { display: block; font-size: 1.45rem; font-weight: 700; color: var(--ink); line-height: 1.15; letter-spacing: -0.03em; }
.metric .figure span { color: var(--brand); }
.metric .label { display: block; font-size: 0.78rem; margin-top: 2px; line-height: 1.35; }

/* ---------- 19.6 Capability groups (About) -------------------------------- */
.cap-grid { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.cap-group { flex: 1 1 300px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); }
@media (min-width: 981px) { .cap-group { flex: 0 1 calc(33.333% - 16px); } }
@media (min-width: 660px) and (max-width: 980px) { .cap-group { flex: 0 1 calc(50% - 12px); } }
.cap-group h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); }
.cap-group h3 svg { width: 17px; height: 17px; color: var(--brand); flex: 0 0 auto; }
.chip-list { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-list li {
  font-size: 0.78rem; color: var(--ink); background: var(--tint-soft);
  border: 1px solid var(--tint); border-radius: var(--r-pill); padding: 5px 11px;
}

/* ---------- 19.7 Tools & prompt library ----------------------------------- */
.tool-card {
  flex: 1 1 280px; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-5); transition: transform .22s, box-shadow .22s, border-color .22s;
}
@media (min-width: 981px) { .tool-card { flex: 0 1 calc(33.333% - 16px); } }
@media (min-width: 660px) and (max-width: 980px) { .tool-card { flex: 0 1 calc(50% - 12px); } }
.tool-card:hover { transform: translateY(-4px); border-color: rgba(0,74,173, .3); box-shadow: var(--shadow-md); }
.tool-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.tool-mark {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  background: var(--tint); color: var(--brand); font-weight: 700; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
}
.tool-card h3 { font-size: var(--fs-h4); }
.tool-card .cat { font-size: 0.72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.tool-card p { font-size: var(--fs-small); margin-top: var(--sp-2); }
.tool-card .link-arrow { margin-top: auto; padding-top: var(--sp-4); }

.prompt-card {
  flex: 1 1 320px; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
/* Two per row: the full prompt text is on show, so the cards need reading width. */
@media (min-width: 900px) { .prompt-card { flex: 0 1 calc(50% - 12px); } }
.prompt-card[hidden] { display: none; }
.prompt-card:hover { transform: translateY(-4px); border-color: rgba(0,74,173, .3); box-shadow: var(--shadow-md); }

/* Thumbnail leads the card. Drop a real <img class="prompt-img"> in and it
   replaces the generated tile; nothing else needs changing. */
.prompt-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); }
.prompt-thumb img.prompt-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The prompt itself, visible and scrollable so every card stays the same height */
.prompt-full {
  margin: 0; font-family: inherit; font-size: 0.82rem; line-height: 1.62;
  color: var(--ink); white-space: pre-wrap; word-break: break-word;
  background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: var(--sp-4); max-height: 230px; overflow-y: auto;
}
.prompt-full::-webkit-scrollbar { width: 8px; }
.prompt-full::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
/* Preview tile. No stock imagery is invented: the tile is a generated pattern
   carrying the prompt's own icon. Swap for a real preview image when you have one. */
.prompt-preview {
  position: relative; aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255, .9) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg, var(--tint) 0%, #DCE7F9 100%);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line);
}
.prompt-preview::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(0,74,173, .16) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 70%);
}
.prompt-preview svg { position: relative; width: 34px; height: 34px; color: var(--brand); }
.prompt-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1 1 auto; }
.prompt-card h3 { font-size: var(--fs-h4); margin: var(--sp-2) 0; }
.prompt-card p { font-size: var(--fs-small); }
.prompt-text { display: none; }
.copy-btn { margin-top: var(--sp-5); align-self: flex-start; padding: 14px 20px; }
.copy-btn.is-copied { background: #0F7B4F; border-color: #0F7B4F; color: #fff; }
.copy-btn.is-copied:hover { background: #0F7B4F; }

/* ---------- 19.8 Contact -------------------------------------------------- */
/* Centred composition, prominent icons, and a hover that reveals each
   platform's own colour rather than one generic accent. */
.contact-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
.contact-card {
  flex: 1 1 220px; max-width: 260px;
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-5) var(--sp-4); color: var(--slate);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: var(--slate); }
.contact-card .ic {
  width: 54px; height: 54px; border-radius: 15px;
  background: var(--tint); color: var(--brand);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3);
  transition: background-color .22s, color .22s, transform .22s;
}
.contact-card:hover .ic { transform: scale(1.06); }
.contact-card .ic svg { width: 25px; height: 25px; }
.contact-card .t { font-weight: 600; color: var(--ink); font-size: var(--fs-h4); }
.contact-card .v { font-size: var(--fs-small); word-break: break-word; }
.contact-card .link-arrow { transition: color .22s; }

/* per-platform hover: border, icon tile and the link pick up the brand colour */
.c-wa:hover { border-color: #25D366; }
.c-wa:hover .ic { background: #E7F9EF; color: #128C7E; }
.c-wa:hover .link-arrow { color: #128C7E; }

.c-tg:hover { border-color: #229ED9; }
.c-tg:hover .ic { background: #E8F6FC; color: #1B7FAD; }
.c-tg:hover .link-arrow { color: #1B7FAD; }

.c-mail:hover { border-color: #C5442E; }
.c-mail:hover .ic { background: #FDECE9; color: #B23320; }
.c-mail:hover .link-arrow { color: #B23320; }

.c-tel:hover { border-color: var(--brand); }
.c-tel:hover .ic { background: var(--tint); color: var(--brand); }
.c-tel:hover .link-arrow { color: var(--brand); }

/* centred section composition */
.section-center { text-align: center; }
.section-center .eyebrow { display: block; }
.section-center .eyebrow::after { margin-left: auto; margin-right: auto; }
.section-center .section-lead { margin-left: auto; margin-right: auto; }
.section-center .contact-card { text-align: left; }
.section-center .note-row { margin-left: auto; margin-right: auto; text-align: left; }

.booking-panel {
  border: 1px solid var(--tint); border-radius: var(--r-lg);
  background: linear-gradient(160deg, #FFFFFF 0%, var(--tint-soft) 100%);
  padding: clamp(24px, 3.4vw, 46px);
}
/* Cal.com inline scheduler. The embed div is height:100%, so the wrapper is
   what actually sets the height. */
.cal-embed {
  height: 640px; min-height: 640px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: #fff; overflow: hidden;
}
@media (max-width: 700px) { .cal-embed { height: 560px; min-height: 560px; } }

/* Compact form: tighter fields, tighter gaps, shorter textarea. */
.form-card { padding: var(--sp-5); max-width: 560px; }
.form-grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.field { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.field--full { flex: 1 1 100%; }
.field label { font-size: 0.78rem; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 0.875rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 12px; width: 100%;
}
.field textarea { min-height: 92px; resize: vertical; }
.field .hint { font-size: 0.72rem; line-height: 1.35; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(0,74,173, .12);
}
.field .hint { font-size: 0.76rem; }
.form-status { font-size: 0.85rem; margin-top: var(--sp-4); color: var(--ink); }
.form-status:empty { display: none; }

/* ---------- 19.9 Pagination ---------------------------------------------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-8); }
.pager a, .pager span {
  min-width: 42px; height: 42px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--fs-small); font-weight: 600; color: var(--slate); background: #fff;
}
.pager a:hover { border-color: var(--brand); color: var(--brand); }
.pager .is-current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager .is-disabled { opacity: .45; }

/* ---------- 19.10 Misc inner-page bits ------------------------------------ */
.cert-card { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: center; }
.cert-card .seal {
  flex: 0 0 auto; width: 76px; height: 76px; border-radius: 20px;
  background: var(--tint); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.cert-card .seal svg { width: 32px; height: 32px; }

.note-row {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: var(--fs-small); border-left: 2px solid var(--brand);
  padding-left: var(--sp-4); max-width: 70ch;
}

/* ---------- 19.11 Tools: category groups and compact tool rows ------------ */
.tool-cat { margin-top: clamp(40px, 5vw, 64px); }
.tool-cat:first-of-type { margin-top: var(--sp-7); }
.tool-cat[hidden] { display: none; }
.tool-cat-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.tool-cat-head .ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  background: var(--tint); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.tool-cat-head .ic svg { width: 18px; height: 18px; }
.tool-cat-head h3 { font-size: var(--fs-h3); }
.tool-cat > p.small { max-width: 68ch; margin-bottom: var(--sp-5); }

.tool-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.tool-item {
  flex: 1 1 250px; display: flex; align-items: flex-start; gap: var(--sp-3);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 13px 15px; color: var(--slate);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
@media (min-width: 981px) { .tool-item { flex: 0 1 calc(33.333% - 8px); } }
@media (min-width: 620px) and (max-width: 980px) { .tool-item { flex: 0 1 calc(50% - 6px); } }
.tool-item:hover { border-color: rgba(0,74,173, .32); transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--slate); }
.tool-item .mk {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  background: var(--tint-soft); border: 1px solid var(--tint); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; letter-spacing: -0.01em;
}
.tool-item .tx { min-width: 0; }
.tool-item .nm { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-weight: 600; color: var(--ink); font-size: 0.92rem; line-height: 1.3; }
.tool-item .ds { display: block; font-size: 0.8rem; line-height: 1.45; margin-top: 3px; }
.tag {
  font-size: 0.62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border-radius: var(--r-pill); padding: 3px 8px; border: 1px solid var(--line);
  background: var(--paper-soft); color: var(--slate);
}
.tag--free { background: #ECFDF3; border-color: #A6E9C5; color: #05603A; }
.tag--freemium { background: var(--tint-soft); border-color: var(--tint); color: var(--brand); }
.tag--paid { background: #FFF7ED; border-color: #FDBA74; color: #9A3412; }

/* ---------- 19.12 Resources and free learning ---------------------------- */
.course-card {
  flex: 1 1 300px; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
@media (min-width: 981px) { .course-card { flex: 0 1 calc(33.333% - 16px); } }
@media (min-width: 660px) and (max-width: 980px) { .course-card { flex: 0 1 calc(50% - 12px); } }
.course-card:hover { transform: translateY(-4px); border-color: rgba(0,74,173, .3); box-shadow: var(--shadow-md); }
.course-thumb {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 28% 26%, rgba(255,255,255, .92) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(135deg, var(--tint) 0%, #DCE7F9 100%);
  display: flex; align-items: center; justify-content: center;
}
.course-thumb::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(0,74,173, .15) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 18%, transparent 68%);
  mask-image: radial-gradient(circle at 50% 50%, #000 18%, transparent 68%);
}
.course-thumb svg { position: relative; width: 34px; height: 34px; color: var(--brand); }
.course-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1 1 auto; }
.course-card h3 { font-size: var(--fs-h4); margin: var(--sp-2) 0 var(--sp-3); }
.course-card > .course-body > p { font-size: var(--fs-small); }
.mentors { margin-top: var(--sp-4); }
.mentors .footer-title { margin-bottom: var(--sp-2); }
.mentor-list { display: flex; flex-wrap: wrap; gap: 6px; }
.mentor-list a, .mentor-list span {
  font-size: 0.76rem; border-radius: var(--r-pill); padding: 5px 11px;
  border: 1px solid var(--tint); background: var(--tint-soft); color: var(--brand);
  transition: background-color .18s, border-color .18s, color .18s;
}
.mentor-list a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.mentor-list span { background: var(--paper-soft); border-color: var(--line); color: var(--slate); }
.course-card .link-arrow { margin-top: auto; padding-top: var(--sp-5); }

/* ---------- 19.13 Compact step strip ------------------------------------- */
.step-strip { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.step-chip {
  flex: 1 1 200px; display: flex; align-items: flex-start; gap: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
  padding: 12px 15px;
}
.step-chip .n {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step-chip .t { font-weight: 600; color: var(--ink); font-size: 0.88rem; line-height: 1.35; display: block; }
.step-chip .d { font-size: 0.78rem; line-height: 1.45; display: block; margin-top: 2px; }

/* ---------- 19.13b About: editorial biography panel -----------------------
   A layered composition rather than a plain bordered paragraph: soft ground,
   a vertical accent rule, a larger opening line, quietly marked key phrases and
   a small tag rail. Elementor: Container + Text Editor + Icon List. */
.bio-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--tint-soft) 100%);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 40px) clamp(22px, 2.6vw, 32px);
}
/* the accent rule down the left edge */
.bio-panel::before {
  content: ""; position: absolute; left: 0; top: clamp(24px, 3vw, 40px); bottom: clamp(24px, 3vw, 40px);
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--brand) 0%, rgba(0,74,173, .15) 100%);
}
/* a fine decorative corner mark, top right */
.bio-panel::after {
  content: ""; position: absolute; top: 18px; right: 18px; width: 46px; height: 46px;
  border-top: 1px solid var(--tint); border-right: 1px solid var(--tint); border-radius: 0 12px 0 0;
  pointer-events: none;
}
.bio-lede {
  font-size: clamp(1.06rem, 1rem + 0.35vw, 1.22rem); line-height: 1.6;
  color: var(--ink); font-weight: 500;
}
.bio-panel p + p { margin-top: var(--sp-4); }
.bio-panel .bio-body { font-size: 0.97rem; line-height: 1.72; }
.bio-panel mark {
  background: var(--tint); color: var(--ink); font-weight: 600;
  padding: 1px 5px; border-radius: 4px;
}
.bio-rule { height: 1px; background: var(--line); margin: var(--sp-5) 0; border: 0; }
.bio-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.bio-tags li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.76rem; font-weight: 500; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px;
}
.bio-tags li svg { width: 12px; height: 12px; color: var(--brand); flex: 0 0 auto; }
.bio-note {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-top: var(--sp-5); font-size: 0.82rem; line-height: 1.55;
}
.bio-note svg { width: 14px; height: 14px; color: var(--brand); flex: 0 0 auto; margin-top: 3px; }

/* ---------- 19.14 Compact page hero -------------------------------------- */
.page-hero--tight { padding: clamp(38px, 4vw, 56px) 0 clamp(34px, 3.6vw, 50px); }
.page-hero--tight h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); }
.page-hero--tight .section-lead { max-width: 62ch; }

.split { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); align-items: center; }
.split > * { flex: 1 1 380px; min-width: 0; }
@media (min-width: 900px) { .split--flip { flex-direction: row-reverse; } }
.split img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); }

.value-card { flex: 1 1 300px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-6) var(--sp-5); }
@media (min-width: 981px) { .value-card { flex: 0 1 calc(33.333% - 16px); } }
@media (min-width: 660px) and (max-width: 980px) { .value-card { flex: 0 1 calc(50% - 12px); } }
.value-card .num { font-size: 0.8rem; font-weight: 700; color: var(--brand); letter-spacing: .06em; }
.value-card h3 { font-size: var(--fs-h4); margin: var(--sp-3) 0 var(--sp-3); }
.value-card p { font-size: var(--fs-small); }

@media (max-width: 700px) {
  .article-body p { font-size: 1rem; }
  .page-hero h1 { max-width: none; }
}

/* ---------- 19.15 Back to top -------------------------------------------
   Global, hidden until the visitor is roughly 450px down the page. A real
   <button>, keyboard reachable, with a visible focus ring. In Elementor this is
   a fixed-position Button widget plus the same few lines of JS. */
.to-top {
  position: fixed; right: clamp(16px, 2.4vw, 30px); bottom: clamp(16px, 2.4vw, 30px);
  z-index: 90;
  width: 46px; height: 46px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--tint); border-radius: 50%;
  background: rgba(255,255,255, .96); color: var(--brand);
  box-shadow: 0 6px 20px rgba(18, 22, 29, .12);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s, transform .22s, visibility .22s, background-color .2s, color .2s, border-color .2s;
}
.to-top[data-visible="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-3px); }
.to-top:focus-visible { outline: 3px solid var(--brand-light); outline-offset: 3px; }
.to-top svg { width: 17px; height: 17px; }

@media (max-width: 520px) {
  .to-top { width: 42px; height: 42px; right: 14px; bottom: 14px; }
  .to-top svg { width: 15px; height: 15px; }
}

/* ==========================================================================
   20. ELEMENTOR COMPATIBILITY LAYER
   Added during the WordPress migration. Nothing above this line was changed.

   Elementor owns structure; the rules above own the look. This layer only
   stops Elementor's generic defaults from fighting the design system, and
   maps Elementor's container markup onto the same geometry as .container.
   ========================================================================== */

/* Hello Elementor resets some of what the design system sets. Restore ours. */
body.elementor-page,
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--slate);
  background: var(--paper);
}

/* Elementor boxed containers reproduce .container geometry exactly. */
.e-con.e-con--boxed > .e-con-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

/* A container carrying .section must not also inherit Elementor's own vertical
   padding defaults, so the fluid clamp() rhythm from section 3 survives. */
.e-con.section,
.e-con.section--tight {
  --padding-block-start: 0;
  --padding-block-end: 0;
}

/* Elementor wraps every widget; the design system styles the inner elements,
   so the wrapper must stay geometrically neutral. */
.elementor-widget-text-editor > .elementor-widget-container,
.elementor-widget-button .elementor-button-wrapper { margin: 0; }

.elementor-widget-text-editor p + p { margin-top: var(--sp-4); }

/* Elementor's default button chrome must not override .btn. */
.elementor-widget-button .elementor-button.btn {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  font-family: var(--font);
  fill: currentColor;
}
.elementor-widget-button .elementor-button.btn .elementor-button-content-wrapper { display: contents; }
.elementor-widget-button .elementor-button.btn .elementor-button-text { flex-grow: 0; }

/* Images keep the design system's behaviour inside Elementor wrappers. */
:where(.elementor-widget-image) img { max-width: 100%; height: auto; display: block; }

/* Elementor injects a wrapper around icons; keep our sizing authoritative. */
.elementor-widget-icon .elementor-icon { padding: 0; }
:where(.elementor-widget-icon .elementor-icon) svg,
:where(.elementor-widget-icon .elementor-icon) i { width: 1em; height: 1em; }

/* Nested containers used as layout columns must not add their own gutters. */
.e-con.e-child.is-plain { padding: 0; }

/* ==========================================================================
   21. ELEMENTOR WIDGET BRIDGE
   Maps the markup produced by native Elementor widgets onto the appearance
   already defined by the design system above. This is the mechanism that lets
   content stay editable in Elementor while the visual identity stays exactly
   as approved in the static build. Nothing here invents new styling: every
   value is taken from the corresponding rule earlier in this file.
   ========================================================================== */

/* ---------- 21.1 Nav Menu widget adopts .nav / .nav-link ------------------ */
.nav .elementor-nav-menu--main .elementor-nav-menu {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: nowrap;
}
.nav .elementor-nav-menu li { margin: 0; }

.nav .elementor-nav-menu a.elementor-item {
  position: relative;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--slate);
  padding: 6px 0;
  background: none;
  border: 0;
  fill: currentColor;
}
/* Elementor draws its own hover indicator; the design system uses ::after. */
.nav .elementor-nav-menu a.elementor-item:before,
.nav .elementor-nav-menu a.elementor-item:after { border: 0; background: none; }

.nav .elementor-nav-menu a.elementor-item::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--brand);
  transition: right .22s ease;
  border-radius: 2px;
  opacity: 1;
  width: auto;
}
.nav .elementor-nav-menu a.elementor-item:hover,
.nav .elementor-nav-menu a.elementor-item:focus,
.nav .elementor-nav-menu a.elementor-item.elementor-item-active {
  color: var(--ink);
  background: none;
}
.nav .elementor-nav-menu a.elementor-item:hover::after,
.nav .elementor-nav-menu a.elementor-item.elementor-item-active::after { right: 0; }

/* Mobile toggle reuses the .nav-toggle chrome. */
.nav .elementor-menu-toggle {
  width: 44px; height: 44px;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: var(--r-sm);
  color: var(--ink);
}
.nav .elementor-menu-toggle:hover { background: #fff; }
.nav .elementor-menu-toggle svg { width: 22px; height: 22px; fill: var(--ink); }

/* Mobile dropdown panel. */
.nav .elementor-nav-menu--dropdown {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.nav .elementor-nav-menu--dropdown a.elementor-item {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--slate);
  padding: 12px 18px;
}
.nav .elementor-nav-menu--dropdown a.elementor-item::after { content: none; }
.nav .elementor-nav-menu--dropdown a.elementor-item:hover,
.nav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
  color: var(--ink);
  background: var(--tint-soft);
}

/* ---------- 21.2 Social Icons widget adopts .social-list ------------------ */
.social-list .elementor-social-icons-wrapper { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.social-list .elementor-social-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--slate);
  transition: border-color .2s, transform .2s, background-color .2s, color .2s;
  padding: 0;
  margin: 0;
  font-size: inherit;
}
.social-list .elementor-social-icon:hover { transform: translateY(-2px); }
.social-list .elementor-social-icon i,
.social-list .elementor-social-icon svg { width: 17px; height: 17px; fill: currentColor; }

/* Per-platform brand colours, matching .s-in / .s-yt / .s-ig etc. */
.social-list .elementor-social-icon-linkedin:hover  { color: #0A66C2; border-color: #0A66C2; background: #F0F6FC; }
.social-list .elementor-social-icon-youtube:hover   { color: #CC0000; border-color: #CC0000; background: #FFF5F5; }
.social-list .elementor-social-icon-instagram:hover { color: #C13584; border-color: #C13584; background: #FDF2F8; }
.social-list .elementor-social-icon-x-twitter:hover,
.social-list .elementor-social-icon-twitter:hover   { color: #12161D; border-color: #12161D; background: #F4F5F7; }
.social-list .elementor-social-icon-facebook:hover  { color: #1877F2; border-color: #1877F2; background: #F0F6FF; }
.social-list .elementor-social-icon-behance:hover   { color: #1769FF; border-color: #1769FF; background: #F0F5FF; }
.social-list .elementor-social-icon-telegram:hover  { color: #229ED9; border-color: #229ED9; background: #F0FAFF; }

/* ---------- 21.3 Form widget adopts the newsletter / contact styling ------ */
.elementor-form .elementor-field-group > label.elementor-field-label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
.elementor-form .elementor-field-textual {
  font-family: var(--font);
  font-size: var(--fs-small);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  line-height: 1.5;
}
.elementor-form .elementor-field-textual:focus {
  border-color: var(--brand);
  box-shadow: none;
  outline: 3px solid var(--brand-light);
  outline-offset: 2px;
}
.elementor-form .elementor-field-textual::placeholder { color: var(--slate); opacity: .75; }

.elementor-form .elementor-button[type="submit"] {
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 600;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: #fff;
  padding: 14px 26px;
  border: 0;
  transition: background-color .2s, transform .2s;
}
.elementor-form .elementor-button[type="submit"]:hover {
  background: var(--brand-light);
  transform: translateY(-1px);
}
.elementor-message.elementor-message-success { color: #17643B; }
.elementor-message.elementor-message-danger  { color: #A32020; }

/* ---------- 21.4 Accordion widget adopts the FAQ styling ------------------ */
.faq .elementor-accordion .elementor-accordion-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}
.faq .elementor-accordion .elementor-tab-title {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink);
  padding: 18px 22px;
  border: 0;
  background: none;
}
.faq .elementor-accordion .elementor-tab-content {
  border: 0;
  padding: 0 22px 18px;
  color: var(--slate);
  font-size: var(--fs-small);
  line-height: 1.7;
}

/* ---------- 21.5 Loop Grid inherits the card row geometry ----------------- */
/* The design system already styles .work-card, .post-card and friends. A Loop
   Grid only needs its own wrapper to behave like the flex rows above. */
.elementor-loop-container.elementor-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}
.elementor-loop-container.elementor-grid > .e-loop-item { display: flex; }
.elementor-loop-container.elementor-grid > .e-loop-item > .e-con { width: 100%; }

/* Taxonomy filter pills reuse the .filter appearance. */
.elementor-widget-taxonomy-filter .e-filter-item {
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--slate);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  transition: color .2s, border-color .2s, background-color .2s;
}
.elementor-widget-taxonomy-filter .e-filter-item:hover { color: var(--ink); border-color: var(--brand); }
.elementor-widget-taxonomy-filter .e-filter-item.e-filter-item-active {
  color: #fff; background: var(--brand); border-color: var(--brand);
}


/* ==========================================================================
   22. ELEMENTOR GEOMETRY OVERRIDES
   Elementor drives container width and padding through custom properties
   on .e-con. Where the design system already defines that geometry, these
   rules restate it at a specificity Elementor's own defaults cannot beat.
   ========================================================================== */

/* .container keeps the approved 1200px measure and 24px gutters. */
.e-con.container { max-width: var(--container); width: 100%; margin-inline: auto; padding: 0 var(--sp-5); }

/* Containers used as inline groups size to their content instead of 100%. */
.e-con.is-auto, .e-con.header-cta { width: auto; flex: 0 0 auto; }

/* Vertical rhythm comes from .section, not from Elementor's default padding. */
.e-con.section  { padding: clamp(64px, 8vw, 118px) 0; }
.e-con.section--tight { padding: clamp(48px, 5vw, 78px) 0; }

/* Elementor gives every container 10px default padding; neutralise it for
   layout containers that only exist to group children. */
.e-con.is-plain { padding: 0; }

/* ==========================================================================
   23. BUTTON WIDGET BRIDGE
   Elementor's Button widget puts custom CSS classes on the widget wrapper,
   while the element a visitor actually sees is the <a class="elementor-button">
   inside it. These rules neutralise the wrapper and hand the approved .btn
   appearance to that anchor, so a Button widget looks exactly like a .btn from
   section 4 while staying a native, editable Elementor widget.
   ========================================================================== */

.elementor-widget-button.btn,
.elementor-widget-button.btn-primary,
.elementor-widget-button.btn-secondary,
.elementor-widget-button.btn-ink,
.elementor-widget-button.btn-youtube {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  width: auto;
  transition: none;
  transform: none;
  box-shadow: none;
}

/* Base .btn geometry, mirroring section 4 exactly. */
.elementor-widget-button.btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  background: none;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.elementor-widget-button.btn .elementor-button svg { flex: 0 0 auto; }

/* Elementor's own size classes must not reintroduce their padding. */
.elementor-widget-button.btn .elementor-button.elementor-size-xs,
.elementor-widget-button.btn .elementor-button.elementor-size-sm,
.elementor-widget-button.btn .elementor-button.elementor-size-md,
.elementor-widget-button.btn .elementor-button.elementor-size-lg,
.elementor-widget-button.btn .elementor-button.elementor-size-xl { padding: 15px 26px; font-size: var(--fs-small); }

/* Variants. */
.elementor-widget-button.btn-primary .elementor-button { background: var(--e-global-color-primary, var(--brand)); color: #fff; }
.elementor-widget-button.btn-primary .elementor-button:hover {
  background: var(--e-global-color-secondary, var(--brand-light)); color: #fff;
  transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 74, 173, .26);
}
.elementor-widget-button.btn-secondary .elementor-button { background: transparent; color: var(--ink); border-color: var(--line); }
.elementor-widget-button.btn-secondary .elementor-button:hover { background: var(--paper); color: var(--ink); border-color: var(--brand); transform: translateY(-2px); }

.elementor-widget-button.btn-ink .elementor-button { background: var(--ink); color: #fff; }
.elementor-widget-button.btn-ink .elementor-button:hover { background: #232a35; color: #fff; transform: translateY(-2px); }

.elementor-widget-button.btn-youtube .elementor-button { background: #CC0000; color: #fff; border-color: #CC0000; }
.elementor-widget-button.btn-youtube .elementor-button:hover { background: #A30000; border-color: #A30000; color: #fff; transform: translateY(-2px); }
.elementor-widget-button.btn-youtube .elementor-button svg { width: 20px; height: 14px; }

/* Size modifiers, matching .btn-lg / .btn-sm. */
.elementor-widget-button.btn-lg .elementor-button,
.elementor-widget-button.btn-lg .elementor-button[class*="elementor-size-"] { padding: 17px 32px; font-size: 1rem; }
.elementor-widget-button.btn-sm .elementor-button,
.elementor-widget-button.btn-sm .elementor-button[class*="elementor-size-"] { padding: 11px 18px; font-size: 0.84rem; }

/* The content wrapper is a pass-through so gap and alignment come from .btn. */
.elementor-widget-button.btn .elementor-button-content-wrapper { display: contents; }
.elementor-widget-button.btn .elementor-button-text { flex-grow: 0; }

/* ==========================================================================
   24. CONTAINER DEFAULT PADDING
   Elementor gives every container 10px of padding by default. The design
   system supplies all spacing itself, so the default is removed and any
   padding a container needs is set explicitly in Elementor.
   ========================================================================== */
:root {
  --container-default-padding-top: 0px;
  --container-default-padding-right: 0px;
  --container-default-padding-bottom: 0px;
  --container-default-padding-left: 0px;
}

/* nav-link metrics */
/* Elementor's nav menu stylesheet sets its own line-height and tracking.
   The design system's .nav-link inherits the body values, so restore them. */
.nav .elementor-nav-menu a.elementor-item {
  line-height: 1.65;
  letter-spacing: normal;
  font-family: var(--font);
}

/* nav sizing */
/* The menu container stretches to fill the flex slot, which widens .nav
   past its content. Size it to its items so the row spacing matches. */
.nav .elementor-nav-menu--main, .nav .elementor-nav-menu--main ul.elementor-nav-menu { flex: 0 0 auto; width: auto; }

/* 25. HERO WIDGET BRIDGE */
/* The portrait image is a native Image widget, so the absolute positioning
   .portrait-img applies to the <img> is handed to the widget wrapper. */
.portrait > .elementor-widget-image { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.portrait > .elementor-widget-image > .elementor-widget-container,
.portrait > .elementor-widget-image figure,
.portrait > .elementor-widget-image a { height: 100%; margin: 0; }
.portrait > .elementor-widget-image img {
  display: block;
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  background: var(--tint); box-shadow: 0 22px 50px rgba(0, 74, 173, .16);
}
/* Elementor makes every widget a positioned containing block; the decorative
   rings and chips must resolve against .portrait instead. */
.portrait > .elementor-widget-html { position: static; }

/* Layout containers that only group children carry no chrome of their own. */
.e-con.hero-inner, .e-con.hero-copy, .e-con.hero-visual, .e-con.hero-stats,
.e-con.btn-group, .e-con.row { padding: 0; }
.e-con.hero-copy   { flex: 1 1 460px; min-width: 0; width: auto; }
.e-con.hero-visual { flex: 0 1 360px; min-width: 250px; width: auto; }
.e-con.hero-stats  { flex: 0 0 172px; width: auto; }
.e-con.btn-group   { width: auto; }

/* 26. HEADING COLOUR + WIDGET TRANSPARENCY */
/* Elementor's kit paints heading widgets with the global Primary colour.
   The design system paints headings with --ink and reserves --brand for
   .accent spans, so restate that at the specificity Elementor uses. */
.elementor-widget-heading .elementor-heading-title {
  color: var(--ink);
  font-family: var(--font);
  /* Elementor's heading stylesheet forces line-height:1; the design system
     sets 1.14 on h1-h4 in its reset. */
  line-height: 1.14;
}
.elementor-widget-heading .elementor-heading-title .accent { color: var(--brand); }

/* Some design system components are flex containers whose children must be
   the real elements, not Elementor's wrapper divs. Making the wrapper
   transparent lets gap, alignment and inline sizing behave as authored. */
.hero-stats > .elementor-widget-html,
.hero-stats > .elementor-widget-html > .elementor-widget-container,
.hero-badge > .elementor-widget-container,
.hero-badge p { display: contents; }

/* Inline-flex components must shrink to their content, not fill the column. */
.elementor-widget.hero-badge { width: fit-content; max-width: 100%; }

/* 27. WIDGET SPACING DEFAULT */
:root { --widgets-spacing: 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px; }

/* 28. WIDGET BOTTOM MARGINS */
/* Elementor zeroes every widget's bottom margin inside a container, because
   its model spaces widgets with the container gap. The design system uses
   margins for vertical rhythm, so the components that declare one have it
   restated here at a specificity Elementor's rule cannot beat. */
.e-con .elementor-widget.elementor-widget.hero-badge { margin-block-end: var(--sp-5); }
.e-con .elementor-widget.elementor-widget.eyebrow { margin-block-end: var(--sp-4); }
.e-con .elementor-widget.elementor-widget.strip-label { margin-block-end: var(--sp-5); }
.e-con .elementor-widget.elementor-widget.feedback-head { margin-block-end: var(--sp-8); }
.e-con .elementor-widget.elementor-widget.service-head { margin-block-end: var(--sp-4); }
.e-con .elementor-widget.elementor-widget.tool-head { margin-block-end: var(--sp-3); }
.e-con .elementor-widget.elementor-widget.tool-cat-head { margin-block-end: var(--sp-2); }
.e-con .elementor-widget.elementor-widget.sub-list { margin-block-end: var(--sp-5); }
.e-con .elementor-widget.elementor-widget.platform-chips { margin-block-end: var(--sp-5); }
.e-con .elementor-widget.elementor-widget.bio-rule { margin-block-end: var(--sp-5); }

/* 29. FRAMED IMAGE WIDGETS */
/* Circular photo frames style the <img> directly. As a native Image widget
   that <img> sits inside Elementor wrappers, so the frame geometry is passed
   through to it. */
.about-circle > .elementor-widget-image { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.about-circle > .elementor-widget-image > .elementor-widget-container,
.about-circle > .elementor-widget-image figure,
.about-circle > .elementor-widget-image a { height: 100%; margin: 0; }
.about-circle > .elementor-widget-image img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--tint); }
.about-circle > .elementor-widget-html, .about-visual > .elementor-widget-html { position: static; }

/* Layout groups carry no chrome of their own. */
.e-con.about-visual { flex: 0 1 400px; min-width: 250px; width: auto; padding: 0; }
.e-con.about-copy   { flex: 1 1 460px; min-width: 0; width: auto; padding: 0; }
.e-con.about-circle { width: 100%; max-width: 372px; padding: 0; }
.e-con.about-actions { width: auto; padding: 0; }

/* 30. INLINE-BLOCK WIDGETS */
/* .eyebrow and friends are inline-block in the design system; as widgets
   their wrapper would otherwise fill the column. */
.elementor-widget.eyebrow { width: fit-content; max-width: 100%; }
.elementor-widget.eyebrow--center { width: auto; }

/* .about-visual centres its circle on the inline axis. */
.e-con.about-visual { flex-direction: row; justify-content: center; align-items: flex-start; }

/* 31. TRANSPARENT WIDGET UTILITY */
/* A widget carrying .is-contents disappears from the box tree, so the markup
   inside it becomes a direct child of the surrounding container. That lets
   the design system's own flex rules, gaps and margin-top:auto behave exactly
   as they did in the static build, while the content stays editable in
   Elementor. Used wherever a component's real element must be the flex item. */
.elementor-widget.is-contents,
.elementor-widget.is-contents > .elementor-widget-container { display: contents; }

/* ==========================================================================
   32. FLEX SIZING AND MEASURE BRIDGE
   Two Elementor defaults outrank the design system and are restated here:

     .e-con.e-flex { flex: var(--flex-grow) var(--flex-shrink) var(--flex-basis) }
       beats every ".parent > * { flex: ... }" card-row rule.

     .elementor.elementor .e-con > .elementor-widget { max-width: 100% }
       beats every measure rule (.measure, .hero-desc, .team-note ...).

   Every value below is copied from the corresponding rule earlier in this file.
   ========================================================================== */

/* ---------- 32.1 Card rows ------------------------------------------------ */
.card-grid  > .e-con.e-flex,
.quote-grid > .e-con.e-flex { flex: 1 1 300px; width: auto; }

@media (min-width: 981px) {
  .card-grid  > .e-con.e-flex,
  .quote-grid > .e-con.e-flex { flex: 0 1 calc(33.333% - 16px); width: auto; }
}
@media (min-width: 660px) and (max-width: 980px) {
  .card-grid  > .e-con.e-flex,
  .quote-grid > .e-con.e-flex { flex: 0 1 calc(50% - 12px); width: auto; }
}

.split > .e-con.e-flex { flex: 1 1 380px; min-width: 0; width: auto; }

/* Work and post rows use their own basis rules; keep containers content-sized. */
.work-grid > .e-con.e-flex,
.row       > .e-con.e-flex,
.metric-row > .e-con.e-flex,
.exp-figures > .e-con.e-flex { width: auto; }

/* ---------- 32.2 Reading measures ---------------------------------------- */
.e-con .elementor-widget.elementor-widget.measure       { max-width: 58ch; }
.e-con .elementor-widget.elementor-widget.measure-sm    { max-width: 44ch; }
.e-con .elementor-widget.elementor-widget.hero-desc     { max-width: 46ch; }
.e-con .elementor-widget.elementor-widget.team-note     { max-width: 62ch; }
.e-con .elementor-widget.elementor-widget.feedback-head { max-width: 52ch; }
.e-con .elementor-widget.elementor-widget.cta-lead      { max-width: 42ch; }
.e-con .elementor-widget.elementor-widget.news-title    { max-width: 16ch; }
.e-con .elementor-widget.elementor-widget.article-body  { max-width: 68ch; }

/* Containers carrying a measure. */
.e-con.container-narrow { max-width: 760px; margin-inline: auto; }
.e-con.faq              { max-width: 76ch; }
.e-con.faq--center      { max-width: 720px; margin-inline: auto; }
.e-con.form-card        { max-width: 560px; }

/* Page hero measures. */
.page-hero .elementor-widget.elementor-widget.section-lead        { max-width: 60ch; }
.page-hero--tight .elementor-widget.elementor-widget.section-lead { max-width: 62ch; }
.page-hero .elementor-widget-heading h1.elementor-heading-title   { max-width: 20ch; }

/* ---------- 32.3 Cards stay full width inside their own column ----------- */
/* A card container is the flex item; the widgets inside it must fill it. */
.service-card > .elementor-widget,
.work-card    > .elementor-widget,
.post-card    > .elementor-widget,
.tool-card    > .elementor-widget,
.prompt-card  > .elementor-widget { width: 100%; }

/* 33. TWO-COLUMN SPLIT BASES */
/* Column containers restate their flex basis, which .e-con.e-flex outranks. */
.e-con.exp-left       { flex: 0 1 350px; min-width: 260px; width: auto; }
.e-con.exp-right      { flex: 1 1 480px; min-width: 0;    width: auto; }
.e-con.approach-left  { flex: 0 1 380px; min-width: 260px; width: auto; }
.e-con.approach-right { flex: 1 1 520px; min-width: 0;    width: auto; }
.e-con.cta-copy       { flex: 1 1 420px; min-width: 0;    width: auto; }
.e-con.feedback-head  { width: auto; }

/* 34. CTA AND FEEDBACK BRIDGE */
.e-con.cta-panel  { width: 100%; max-width: 1000px; margin-inline: auto; }
.e-con.cta-visual { flex: 0 0 clamp(220px, 26%, 300px); min-width: 200px; align-self: stretch; width: auto; }
.e-con.quote-card { width: auto; }
/* The feedback standfirst is a container here, so its measure and rhythm
   are restated for the container rather than a widget. */
.e-con.feedback-head { max-width: 52ch; margin-bottom: var(--sp-8); width: auto; }
@media (max-width: 900px) {
  .e-con.cta-visual { flex: 0 0 auto; align-self: center; width: 100%; max-width: 300px; height: 290px; }
}

/* 35. WORK AND POST CARD BRIDGE */
/* Cards are the flex items themselves, so their basis is restated against
   .e-con.e-flex. Values copied from sections 13 and 14. */
.e-con.work-card { flex: 1 1 300px; max-width: 100%; width: auto; }
.e-con.post-card { flex: 1 1 300px; width: auto; }
@media (min-width: 981px) {
  .e-con.work-card { flex: 0 1 calc(33.333% - 16px); }
}
@media (min-width: 660px) and (max-width: 980px) {
  .e-con.work-card { flex: 0 1 calc(50% - 12px); }
}
.e-con.work-thumb, .e-con.post-thumb { padding: 0; width: 100%; }
.e-con.work-body, .e-con.post-body { width: 100%; }

/* ==========================================================================
   36. FOOTER BRIDGE
   The footer is an Elementor Theme Builder template, so its columns, its Nav
   Menu widget and its Form widget need the same treatment as the header.
   Values are taken from section 16 above.
   ========================================================================== */

/* ---------- 36.1 Newsletter columns -------------------------------------- */
.e-con.news-copy      { flex: 1 1 400px; min-width: 0; width: auto; }
.e-con.news-form-wrap { flex: 1 1 380px; min-width: 0; width: auto; }
.e-con.footer-strip,
.e-con.footer-bottom  { width: 100%; }

/* ---------- 36.2 Footer navigation --------------------------------------- */
.footer-nav .elementor-nav-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
}
.footer-nav .elementor-nav-menu--main,
.footer-nav ul.elementor-nav-menu { flex: 0 0 auto; width: auto; }
.footer-nav .elementor-nav-menu li { margin: 0; }
.footer-nav a.elementor-item {
  font-size: var(--fs-small);
  font-family: var(--font);
  line-height: 1.65;
  letter-spacing: normal;
  color: var(--slate);
  padding: 0;
  background: none;
}
.footer-nav a.elementor-item:hover,
.footer-nav a.elementor-item.elementor-item-active { color: var(--brand); background: none; }
.footer-nav a.elementor-item::after,
.footer-nav a.elementor-item::before { content: none; }

/* ---------- 36.3 Newsletter form ----------------------------------------- */
/* The static build joins the email input and the subscribe button into one
   pill. Elementor renders each field as its own block, so the input carries the
   pill and the submit button is placed inside it on the right. */
.news-form .elementor-form-fields-wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  max-width: 460px;
}
.news-form .elementor-field-group { padding: 0; margin: 0; }

.news-form .elementor-field-type-email { flex: 1 1 100%; }
.news-form .elementor-field-type-email .elementor-field-textual {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  padding: 12px 150px 12px 22px;
  font-family: var(--font);
  font-size: var(--fs-small);
  color: var(--ink);
  line-height: 1.5;
  transition: border-color .2s, box-shadow .2s;
}
.news-form .elementor-field-type-email .elementor-field-textual:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 74, 173, .12);
  outline: none;
}
.news-form .elementor-field-type-email .elementor-field-textual::placeholder { color: #8C95A5; }

.news-form .elementor-field-type-submit {
  position: absolute;
  /* The submit is a sibling of the email field AND the consent row, so it
     is pinned to the top and given the input's own height. Centring the
     button inside that band puts it in the middle of the pill. */
  top: 0;
  right: 5px;
  height: var(--news-input-h, 48px);
  display: flex;
  align-items: center;
  width: auto;
  flex: 0 0 auto;
}
.news-form .elementor-field-type-submit .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  padding: 14px 20px;
  transition: background-color .2s, transform .2s;
}
.news-form .elementor-field-type-submit .elementor-button:hover {
  background: var(--brand-light);
  transform: translateX(2px);
}

/* Consent line sits under the pill, matching .consent. */
.news-form .elementor-field-type-acceptance {
  flex: 1 1 100%;
  margin-top: var(--sp-3);
  font-size: 0.78rem;
}
.news-form .elementor-field-type-acceptance .elementor-field-option {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
}
.news-form .elementor-field-type-acceptance input { margin-top: 4px; flex: 0 0 auto; accent-color: var(--brand); }
.news-form .elementor-field-type-acceptance label { font-size: 0.78rem; color: var(--slate); line-height: 1.5; }

/* Below the pill width the button returns to the flow so it never overlaps. */
@media (max-width: 420px) {
  /* The button stays inside the pill; only the room reserved for it and
     its own padding shrink slightly. */
  .news-form .elementor-field-type-email .elementor-field-textual { padding: 12px 118px 12px 18px; }
  .news-form .elementor-field-type-submit .elementor-button { padding: 12px 16px; }
}

/* 37. INNER PAGE COMPONENT BRIDGE */
/* Page hero. */
.e-con.page-hero-copy  { flex: 1 1 440px; min-width: 0;    width: auto; }
.e-con.page-hero-media { flex: 0 1 340px; min-width: 240px; width: auto; }
.page-hero-media img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--tint); }

/* Card families that are the flex item themselves. */
.e-con.value-card, .e-con.cap-group { flex: 1 1 300px; width: auto; }
@media (min-width: 981px) {
  .e-con.value-card, .e-con.cap-group { flex: 0 1 calc(33.333% - 16px); }
}
@media (min-width: 660px) and (max-width: 980px) {
  .e-con.value-card, .e-con.cap-group { flex: 0 1 calc(50% - 12px); }
}

/* Panels and cards fill their column. */
.e-con.card, .e-con.bio-panel, .e-con.form-card, .e-con.tool-cat { width: 100%; }
.e-con.split { width: 100%; }
.split img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); }

/* About: story and biography columns (inline flex values in the static build). */
.e-con.about-story-col { flex: 0 1 340px; min-width: 260px; width: auto; }
.e-con.about-bio-col   { flex: 1 1 480px; min-width: 0;    width: auto; }
.e-con.fts-col         { flex: 1 1 380px; min-width: 0;    width: auto; }
.e-con.cert-body       { flex: 1 1 340px; min-width: 0;    width: auto; }

/* About: inline max-widths from the static build. */
.e-con.cert-wrap       { max-width: 820px; width: 100%; }
.e-con.verified-review { max-width: 70ch;  width: 100%; }

/* Services: inline widths from the static build, plus the hr rule inside
   the About biography panel which Elementor's reset was flattening. */
.e-con.custom-card { max-width: 900px; margin-inline: auto; width: 100%; }
.e-con.svc-col     { flex: 1 1 380px; min-width: 0; width: auto; }
.bio-panel hr.bio-rule { height: 1px; background: var(--line); margin: var(--sp-5) 0; border: 0; }

/* 38. REMAINING WIDGET BOTTOM MARGINS */
/* Same reason as section 28: Elementor forces margin-block-end:0 on every
   widget inside a container. These components rely on a bottom margin. */
.e-con .elementor-widget.elementor-widget.footer-title { margin-block-end: var(--sp-3); }
.e-con .elementor-widget.elementor-widget.card-meta { margin-block-end: var(--sp-2); }
.e-con .elementor-widget.elementor-widget.highlight-row { margin-block-end: var(--sp-3); }
.e-con .elementor-widget.elementor-widget.cta-copy { margin-block-end: var(--sp-4); }
.e-con .elementor-widget.elementor-widget.news-title { margin-block-end: var(--sp-2); }
.e-con .elementor-widget.elementor-widget.mentors { margin-block-end: var(--sp-4); }

/* 39. PORTFOLIO CASE STUDY BRIDGE */
.e-con.case-media { flex: 1 1 440px; min-width: 0; width: auto; }
.e-con.case-copy  { flex: 1 1 380px; min-width: 0; width: auto; }
.e-con.pf-fig     { flex: 1 1 380px; min-width: 0; width: auto; }
.e-con.case-wrap, .e-con.case { width: 100%; }
/* The case heading is an h3 sized like an h2 in the static build. */
.elementor-widget.case-title .elementor-heading-title { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.028em; }

/* 40. PROMPT AND COURSE CARD BRIDGE */
/* Two prompt cards per row from 900px, as in section 19.7. */
.e-con.prompt-card { flex: 1 1 320px; width: auto; }
@media (min-width: 900px) { .e-con.prompt-card { flex: 0 1 calc(50% - 12px); } }
.e-con.course-card { flex: 1 1 300px; width: auto; }
@media (min-width: 981px) { .e-con.course-card { flex: 0 1 calc(33.333% - 16px); } }
@media (min-width: 660px) and (max-width: 980px) { .e-con.course-card { flex: 0 1 calc(50% - 12px); } }
.e-con.course-body, .e-con.prompt-body { width: 100%; }
/* Headings the static build sized down inline. */
.elementor-widget.h3-size .elementor-heading-title { font-size: var(--fs-h3); }

/* footer nav wrapping */
@media (max-width: 767px) {
  .footer-nav .elementor-nav-menu--main,
  .footer-nav .elementor-nav-menu--main ul.elementor-nav-menu {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
  }
  .footer-nav .elementor-nav-menu { flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }
}

/* 41. HERO RESPONSIVE RESTORE */
@media (max-width: 1080px) {
  /* Same values as the section 18 rules, restated at the specificity
     Elementor's .e-con.e-flex uses, so the stat rail becomes a wrapping
     row under the hero instead of a tall column beside it. */
  .e-con.hero-stats  { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; width: auto; }
  .e-con.hero-visual { flex: 1 1 320px; width: auto; }
  .hero-stats .stat  { flex: 1 1 140px; }
}

/* 42. CARD THUMBNAIL ASPECT LOCK */
/* .course-thumb and .prompt-thumb size themselves from aspect-ratio 16/9 and
   sit as flex items in a column card. Their content is only an icon, so their
   min-content height is near zero; once the card runs short of room the flex
   algorithm shrinks them (310x19 instead of 310x174 at 375px). Refusing to
   shrink keeps the declared ratio. Desktop and tablet were never shrinking,
   so they are unaffected. */
/* The real cause: these thumbs have no definite width of their own, so
   aspect-ratio resolved against their CONTENT width (the 34px icon) giving
   34 / (16/9) = 19.125px, after which align-items:stretch widened the box to
   310px but left the height at 19px. A definite width makes aspect-ratio
   resolve correctly; flex-shrink:0 stops it collapsing again. Desktop and
   tablet already computed the right ratio, so they are unchanged. */
.course-thumb,
.prompt-thumb,
.prompt-preview,
.work-thumb,
.post-thumb { width: 100%; flex-shrink: 0; }

/* 43. HERO CHIP STACKING */
/* In the static build the floating chips came after the portrait <img>, so
   they painted on top of it. As Elementor widgets the decorative chips sit in
   an HTML widget BEFORE the Image widget, and the image wrapper is positioned
   (section 25), so it painted over them: a hit test showed the image covering
   the left of chip-2 and the right of chips 1 and 3, clipping their labels.
   Lifting only the chips restores the intended order without moving anything. */
.chip-float { z-index: 2; }

/* 44. ABOUT CIRCLE RING SIZING */
/* .about-circle is an Elementor Container, and Elementor's background-overlay
   rule .e-con::before sets width:100%;height:100%. An explicit width/height
   beats the right/bottom offsets, so the decorative ring could no longer size
   itself from inset:-16px: it rendered 372x372 anchored at -16px (up and to
   the left) instead of 404x404 concentric with the portrait. Returning the
   sizing to auto lets the four offsets define the box again. */
.about-circle::before { width: auto; height: auto; }