/* ==========================================================================
   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; gap: var(--sp-5); }
.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; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@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) {
  .nav {
    position: fixed; inset: 75px 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; background: #fff; border-bottom: 1px solid var(--line);
    padding: var(--sp-4) var(--sp-5) var(--sp-6);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 75px); overflow-y: auto;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav[data-open="true"] { transform: translateY(0); opacity: 1; visibility: visible; }
  .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; }
}