/* ============================================================
   Core Care Consultancy — shared stylesheet
   Used by all pages (EN & AR). RTL overrides live in styles-rtl.css
   ============================================================ */

:root{
  /* COLOR — Charcoal + warm cream + brass (premium compliance palette with subtle warmth) */
  --bg:#FBF8F1;
  --bg-soft:#F5F0E5;
  --bg-deep:#EDE6D6;
  --ink:#18191A;
  --ink-soft:#4A4A4A;
  --ink-mute:#7A7A7A;
  --charcoal:#18191A;
  --charcoal-deep:#0D0D0D;
  --charcoal-soft:#2C2D2E;
  --accent:#B8975A;
  --accent-deep:#8E6932;
  --accent-soft:#F0E8D6;
  --accent-tint:#F8F4E8;
  --brass:#B8975A;
  --logo-blue:#5077C9;
  --status:#4FAF50;
  --rule:rgba(24,25,26,.10);
  --rule-strong:rgba(24,25,26,.18);
  --rule-on-dark:rgba(255,255,255,.12);
  --bg-rgb:255,255,255;
  --ink-rgb:24,25,26;
  --accent-rgb:184,151,90;
  --cream-rgb:251,248,241;
  --charcoal-rgb:24,25,26;

  /* Legacy aliases — every existing class keeps working unchanged */
  --moss:var(--charcoal);
  --moss-deep:var(--charcoal-deep);
  --moss-soft:var(--charcoal-soft);
  --sage:var(--accent-soft);
  --sage-soft:var(--accent-tint);
  --moss-rgb:var(--charcoal-rgb);
  --brand:var(--charcoal);
  --brand-deep:var(--charcoal-deep);
  --brand-soft:var(--charcoal-soft);
  --brand-tint:var(--accent-soft);
  --brand-tint-soft:var(--accent-tint);
  --brand-rgb:var(--charcoal-rgb);
  --bone:var(--bg);
  --bone-soft:var(--bg-soft);
  --bone-deep:var(--bg-deep);
  --bone-rgb:var(--bg-rgb);
  --paper:var(--bg);
  --paper-2:var(--bg-soft);
  --paper-3:var(--bg-deep);
  --ink-2:var(--charcoal);
  --ink-3:var(--charcoal-soft);
  --paper-rgb:var(--bg-rgb);
  --rule-light:var(--rule-strong);
  --mute:var(--ink-soft);
  --mute-2:var(--ink-mute);
  --brass-dark:var(--accent-deep);
  --danger:#A53A2A;
  --success:#2E6E4F;

  /* TYPE */
  --display:'Fraunces','Times New Roman',serif;
  --sans:'Geist',system-ui,-apple-system,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;

  /* SPACING */
  --space-1:4px;
  --space-2:8px;
  --space-3:16px;
  --space-4:24px;
  --space-5:40px;
  --space-6:64px;
  --space-7:96px;
  --space-8:144px;

  /* LAYOUT */
  --container:1280px;
  --gutter:clamp(24px,5vw,80px);
  --section-pad:clamp(80px,11vw,144px);

  /* RADII */
  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-pill:999px;

  /* SHADOWS */
  --shadow-soft:0 8px 32px rgba(var(--ink-rgb),.06);
  --shadow-lift:0 16px 48px rgba(var(--ink-rgb),.10);
  --shadow-numeral:0 24px 28px -16px rgba(var(--ink-rgb),.18);

  /* MOTION */
  --t-fast:200ms;
  --t-med:400ms;
  --t-slow:800ms;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out-expo:cubic-bezier(.22,1,.36,1);
  --ease-out-back:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--moss);color:var(--bone)}

/* ---------------- LAYOUT PRIMITIVES ---------------- */
.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding-inline:var(--gutter);
  position:relative;
  z-index:2;
}
section{position:relative;z-index:2}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.eyebrow.on-dark{color:var(--sage)}

.hr-rule{height:1px;background:var(--rule-light);border:0;margin:0}
.hr-rule.on-dark{background:rgba(255,255,255,.1)}

/* ---------------- TOPBAR ---------------- */
.topbar{
  background:var(--bone-deep);
  color:var(--ink-soft);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.04em;
  position:relative;z-index:50;
  border-bottom:1px solid var(--rule);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:40px}
.topbar a{display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft);transition:color var(--t-fast) var(--ease)}
.topbar a:hover{color:var(--moss)}
.topbar .left{display:flex;gap:24px}
.topbar .right{display:flex;gap:18px;align-items:center}
.topbar svg{width:13px;height:13px}
.topbar .status-dot{width:8px;height:8px;border-radius:50%;background:var(--status);display:inline-block;margin-right:6px;vertical-align:middle;box-shadow:0 0 0 3px rgba(79,175,80,.18)}
.lang-switch{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--rule-strong);
  padding:4px 9px;
  font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;
  border-radius:var(--radius-sm);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.lang-switch:hover{border-color:var(--moss);background:var(--sage-soft)}
@media (max-width:760px){
  .topbar .left a:nth-child(2){display:none}
  .topbar{font-size:11px}
}
@media (hover:none) and (pointer:coarse){
  .topbar .wrap{height:44px}
  .topbar a{padding:6px 0}
}

/* ---------------- NAV ---------------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(var(--bg-rgb),.96);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.nav.scrolled{
  border-bottom-color:var(--rule);
  background:var(--bg);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:32px}
.brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:-.01em;color:var(--ink)}
.brand-mark{
  width:40px;height:40px;border-radius:var(--radius-sm);
  background:var(--bone-soft);
  display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;flex:0 0 auto;
  border:1px solid var(--rule);
}
.brand-mark img,.brand-mark svg{
  width:100%;height:100%;object-fit:contain;display:block;padding:5px;
}
.brand-name{display:inline-flex;flex-direction:column;line-height:1}
.brand-name small{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px;font-weight:400}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{
  font-size:14px;font-weight:500;color:var(--ink-soft);
  position:relative;padding:8px 0;
  transition:color var(--t-fast) var(--ease);
}
.nav-links a:hover,.nav-links a.is-current{color:var(--ink)}
.nav-links a.is-current::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--moss);border-radius:2px;
}
.nav-cta{display:inline-flex}
.menu-toggle{
  display:none;width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--rule-strong);
  align-items:center;justify-content:center;
  transition:background var(--t-fast) var(--ease);
}
.menu-toggle:hover{background:var(--sage-soft)}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{
  content:"";display:block;width:18px;height:2px;background:var(--ink);position:relative;border-radius:2px;
}
.menu-toggle span::before{position:absolute;top:-6px;left:0;width:18px}
.menu-toggle span::after{position:absolute;top:6px;left:0;width:14px}
@media (max-width:960px){
  .nav-links,.nav-cta{display:none}
  .menu-toggle{display:inline-flex}
}

/* ---------------- MOBILE SHEET ---------------- */
.mobile-sheet{
  position:fixed;inset:0;z-index:90;
  background:var(--bone);
  transform:translateX(100%);
  transition:transform var(--t-med) var(--ease);
  display:flex;flex-direction:column;
}
.mobile-sheet.open{transform:translateX(0)}
.mobile-sheet header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--gutter);border-bottom:1px solid var(--rule);
}
.mobile-sheet nav{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);gap:8px}
.mobile-sheet nav a{font-family:var(--display);font-size:36px;line-height:1.1;color:var(--ink);padding:12px 0;border-bottom:1px solid var(--rule)}
.mobile-sheet nav a:last-child{font-family:var(--mono);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--moss)}
.mobile-sheet .foot{padding:24px var(--gutter);border-top:1px solid var(--rule);font-family:var(--mono);font-size:12px;display:flex;flex-direction:column;gap:8px;color:var(--ink-soft)}
.mobile-sheet .foot a:hover{color:var(--moss)}

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;
  border-radius:var(--radius-pill);
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.01em;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
  white-space:nowrap;
}
.btn .arrow{
  display:inline-block;width:16px;height:16px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7'/><path d='M7 7h10v10'/></svg>");
  background-size:contain;background-repeat:no-repeat;background-position:center;
  transition:transform var(--t-fast) var(--ease);
}
.btn:hover .arrow{transform:translate(3px,-3px)}

.btn-primary{background:var(--moss);color:var(--bone);box-shadow:0 1px 0 rgba(var(--ink-rgb),.10)}
.btn-primary:hover{background:var(--moss-deep);box-shadow:var(--shadow-soft);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}

.btn-ghost{background:var(--sage);color:var(--ink);border-color:transparent}
.btn-ghost:hover{background:var(--sage-soft);transform:translateY(-1px)}

.btn-on-dark{background:var(--bone);color:var(--ink)}
.btn-on-dark:hover{background:var(--sage);transform:translateY(-1px)}

/* horizontal-arrow variant for inline links inside cards */
.btn .arrow.flat{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>");
}
.btn:hover .arrow.flat{transform:translateX(4px)}

/* ---------------- HERO ---------------- */
.hero{
  padding-block:clamp(48px,7vw,96px) clamp(64px,10vw,144px);
  position:relative;z-index:2;
}
.hero .wrap{position:relative}
.hero-grid{
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;
}
.hero-text{max-width:62ch}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:var(--radius-pill);
  background:var(--bone-soft);border:1px solid var(--rule);
  font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink);
  margin-bottom:32px;
}
.hero-badge svg{width:16px;height:16px;color:var(--moss)}
.hero h1{
  font-family:var(--display);
  font-size:clamp(40px,5vw,72px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.018em;
  color:var(--ink);
  margin:0 0 28px;
  font-variation-settings:"opsz" 144,"SOFT" 50;
}
.hero h1 em{font-style:italic;font-weight:400;color:var(--moss)}
.hero-lead{
  font-size:18px;line-height:1.6;color:var(--ink-soft);
  max-width:54ch;margin:0 0 32px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:36px}
.hero-rating{
  display:flex;align-items:center;gap:14px;
  padding-top:24px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--ink-soft);
}
.hero-rating .stars{display:inline-flex;gap:2px;color:var(--moss)}
.hero-rating .stars svg{width:16px;height:16px}

.hero-media{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;
}
.hero-photo{
  margin:0;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--bone-soft);box-shadow:var(--shadow-soft);
  border:1px solid var(--rule);
  position:relative;
}
.hero-photo-main{aspect-ratio:4/5}
.hero-photo-main img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo-card{
  aspect-ratio:4/5;
  background:linear-gradient(135deg,var(--sage-soft),var(--bone-soft));
  display:flex;align-items:center;justify-content:center;
  padding:32px;
}
.kpi-card{
  background:var(--bone-soft);border:1px solid var(--rule);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lift);
  padding:20px;width:100%;max-width:240px;
  display:flex;flex-direction:column;gap:6px;
}
.kpi-card-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.kpi-card-value{font-family:var(--display);font-size:48px;font-weight:400;color:var(--ink);line-height:1;font-variation-settings:"opsz" 96}
.kpi-card-value small{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink-soft);margin-left:4px}
.kpi-card-meta{font-size:12px;color:var(--ink-soft);margin-top:4px}
.kpi-card-spark{width:100%;height:32px;color:var(--moss);margin-top:8px}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero h1{font-size:clamp(40px,9vw,64px)}
  .hero-media{grid-template-columns:1.4fr 1fr}
}
@media (max-width:560px){
  .hero-media{grid-template-columns:1fr;gap:14px}
  .hero-photo-card{aspect-ratio:16/9;padding:20px}
  .kpi-card{max-width:none}
}

/* compact hero used on internal pages */
.hero.compact{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.hero.compact h1{font-size:clamp(36px,6vw,80px);margin-bottom:20px}
.hero.compact::after{display:none}
.breadcrumb{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--mute);text-transform:uppercase;
  display:flex;gap:10px;align-items:center;
  margin-bottom:32px;
}
.breadcrumb a{color:var(--mute);transition:color var(--t-fast) var(--ease)}
.breadcrumb a:hover{color:var(--brass-dark)}
.breadcrumb .sep{color:var(--rule-light)}
.breadcrumb .here{color:var(--ink)}

/* ---------------- TRUST MARQUEE ---------------- */
.trust{
  padding-block:clamp(32px,5vw,56px);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--bone-soft);
  overflow:hidden;
}
.trust-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);text-align:center;margin-bottom:24px;
}
.marquee{
  display:flex;gap:0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  overflow:hidden;
}
.marquee-track{
  display:flex;gap:72px;flex-shrink:0;
  animation:marquee 80s linear infinite;
  padding-right:72px;
  will-change:transform;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{
  font-family:var(--display);font-size:clamp(20px,2vw,28px);font-weight:400;letter-spacing:-.01em;
  color:var(--ink);white-space:nowrap;
  display:inline-flex;align-items:center;gap:24px;
  transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.marquee-item:hover{color:var(--moss);transform:translateY(-1px)}
.marquee-item::after{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--moss);
  opacity:.55;transition:opacity var(--t-fast) var(--ease);
}
.marquee-item:last-child::after{display:none}
.marquee-item img{
  height:52px;width:auto;display:block;
  opacity:1;
  transition:transform var(--t-med) var(--ease);
}
.marquee-item:hover img{transform:scale(1.04)}
.marquee-item:has(img)::after{display:none}
.marquee-item:has(img){padding-block:6px;padding-inline:18px;background:var(--bone);border-radius:var(--radius-md);border:1px solid var(--rule)}
.marquee-item:has(img):hover{background:var(--bone);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.06)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none}
}
@media (max-width:560px){
  .marquee-item img{height:36px}
}

/* ---------------- ADVISORY: Why a consultancy ---------------- */
.advisory{padding-block:var(--section-pad);background:var(--bone)}
.advisory-head{
  text-align:center;max-width:60ch;margin:0 auto 36px;
}
.advisory-head .num{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--moss);
  display:block;margin-bottom:18px;
}
.advisory-head h2{
  font-family:var(--display);font-size:clamp(36px,5vw,64px);
  font-weight:400;letter-spacing:-.02em;line-height:1.04;
  color:var(--ink);margin:0;
  font-variation-settings:"opsz" 144,"SOFT" 50;
}
.advisory-head h2 em{font-style:italic;color:var(--moss)}

.advisory-quote{
  max-width:62ch;margin:0 auto 56px;
  padding:8px 0 8px 28px;
  border-left:3px solid var(--moss);
}
.advisory-quote p{
  font-family:var(--display);font-size:clamp(20px,2.4vw,30px);
  line-height:1.4;letter-spacing:-.01em;
  color:var(--ink);font-style:italic;font-weight:400;
  font-variation-settings:"opsz" 60,"SOFT" 50;
  margin:0;
}

.reasons-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:20px;
  max-width:1100px;margin:0 auto;
}
.reason-card{
  padding:32px;
  background:var(--bone-soft);
  border-radius:var(--radius-md);
  border:1px solid var(--rule);
  display:flex;flex-direction:column;gap:12px;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.reason-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  border-color:transparent;
}
.reason-num{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  color:var(--moss);font-weight:500;text-transform:uppercase;
}
.reason-card h3{
  font-family:var(--display);font-size:clamp(20px,1.9vw,26px);
  font-weight:400;letter-spacing:-.01em;line-height:1.22;
  color:var(--ink);margin:0 0 4px;
  font-variation-settings:"opsz" 96,"SOFT" 50;
}
.reason-card p{
  font-size:15.5px;line-height:1.65;color:var(--ink-soft);margin:0;
}

@media (max-width:760px){
  .reasons-grid{grid-template-columns:1fr;gap:14px}
  .reason-card{padding:24px 22px}
  .advisory-quote{padding-left:18px;margin-bottom:36px}
  .advisory-head{margin-bottom:28px}
}

/* RTL: flip the quote border to the right side */
html[dir="rtl"] .advisory-quote{
  padding:8px 28px 8px 0;
  border-left:0;
  border-right:3px solid var(--moss);
}
@media (max-width:760px){
  html[dir="rtl"] .advisory-quote{padding-right:18px}
}

/* ---------------- WHO-BRIEF EXPANDED LEDE + VALUES STRIP ---------------- */
.who-brief-lede{
  font-size:17px;line-height:1.65;color:var(--ink-soft);
  max-width:64ch;margin:18px auto 0;
}
.who-brief-lede + .who-brief-lede{margin-top:16px}
.who-brief .section-head + .values-strip{margin-top:48px}

.who-brief-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
.who-brief-grid .who-brief-text{text-align:left}
[dir="rtl"] .who-brief-grid .who-brief-text{text-align:right}
.who-brief-grid .who-brief-lede{max-width:56ch;margin:18px 0 0}
[dir="rtl"] .who-brief-grid .who-brief-lede{margin-inline:0}
.who-brief-grid .num{display:block;margin-bottom:8px}
.who-brief-figure{
  margin:0;border-radius:12px;overflow:hidden;
  aspect-ratio:16/10;
  box-shadow:0 2px 8px rgba(24,25,26,.06),0 12px 32px rgba(24,25,26,.04);
}
.who-brief-figure img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 700ms cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.who-brief-figure:hover img{transform:scale(1.025)}
.who-brief-grid + .values-strip{margin-top:64px}
@media (max-width:800px){
  .who-brief-grid{grid-template-columns:1fr;gap:28px}
  .who-brief-grid .who-brief-text{text-align:center}
  [dir="rtl"] .who-brief-grid .who-brief-text{text-align:center}
  .who-brief-grid .who-brief-lede{margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  .who-brief-figure img{transition:none!important;transform:none!important}
}
.values-strip{
  list-style:none;padding:0;margin:48px 0 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  border-top:1px solid var(--rule);padding-top:32px;
}
.values-strip li{
  position:relative;
  display:flex;flex-direction:column;gap:6px;
  transition:transform 320ms cubic-bezier(.22,1,.36,1);
}
.values-strip li:hover{transform:translateY(-3px)}
.values-strip li:not(:last-child)::after{
  content:"";position:absolute;top:6px;bottom:6px;right:-12px;
  width:1px;background:var(--accent);opacity:.3;
  transition:opacity 320ms ease,transform 320ms cubic-bezier(.22,1,.36,1);
  transform-origin:center top;
}
.values-strip li:hover:not(:last-child)::after{opacity:.6}
[dir="rtl"] .values-strip li:not(:last-child)::after{
  right:auto;left:-12px;
}
.values-strip-num{
  display:block;
  font-size:10px;font-weight:700;letter-spacing:.14em;
  color:var(--accent-deep);text-transform:uppercase;
  margin-bottom:2px;
  transform-origin:left center;
  transition:color 280ms ease,letter-spacing 280ms ease;
}
[dir="rtl"] .values-strip-num{transform-origin:right center}
.values-strip li:hover .values-strip-num{
  color:var(--accent);letter-spacing:.22em;
}
@media (prefers-reduced-motion:reduce){
  .values-strip li,
  .values-strip-num,
  .values-strip li:not(:last-child)::after{transition:none!important;transform:none!important}
}
.values-strip-label{
  font-family:var(--display);font-size:18px;font-weight:500;
  color:var(--ink);letter-spacing:-.01em;line-height:1.25;
}
.values-strip-desc{
  font-size:14px;line-height:1.55;color:var(--ink-soft);
}
@media (max-width:960px){
  .values-strip{grid-template-columns:repeat(2,1fr);gap:20px}
  .values-strip li::after{display:none}
}
@media (max-width:560px){
  .values-strip{grid-template-columns:1fr;gap:18px}
}

/* ---------------- INDUSTRIES ---------------- */
.industries{padding-block:var(--section-pad);background:var(--bone-soft)}
.industries .section-head{margin-bottom:var(--space-5)}
.industries-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.industry-tile.has-photo{flex-direction:column;align-items:stretch;gap:14px;padding:0;overflow:hidden}
.industry-tile.has-photo .industry-photo{
  margin:0;display:block;aspect-ratio:16/10;overflow:hidden;
  background:var(--bone-soft);
}
.industry-tile.has-photo .industry-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 600ms cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.industry-tile.has-photo:hover .industry-photo img{transform:scale(1.04)}
.industry-tile.has-photo .ico{
  position:absolute;top:14px;left:14px;
  width:34px;height:34px;
  background:var(--bone);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 4px rgba(24,25,26,.12);
  z-index:1;
}
[dir="rtl"] .industry-tile.has-photo .ico{left:auto;right:14px}
.industry-tile.has-photo .ico svg{width:18px;height:18px}
.industry-tile.has-photo .industry-tile-body{padding:0 18px 20px;display:flex;flex-direction:column;gap:8px}
.industry-tile.has-photo::before{left:0;right:0;top:auto;bottom:0}
@media (prefers-reduced-motion:reduce){
  .industry-tile.has-photo .industry-photo img{transition:none!important;transform:none!important}
}
.industry-tile{
  position:relative;
  display:flex;align-items:flex-start;gap:14px;
  padding:20px 18px;background:var(--bone);
  border:1px solid var(--rule);border-radius:var(--radius-md);
  cursor:pointer;
  transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.industry-tile::before{
  content:"";position:absolute;left:18px;right:18px;top:0;height:2px;
  background:var(--brand-blue);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-med) var(--ease);
  border-radius:0 0 2px 2px;
}
html[dir="rtl"] .industry-tile::before{transform-origin:right center}
.industry-tile:hover{
  transform:translateY(-2px);
  border-color:var(--brand-blue);
  box-shadow:0 6px 24px rgba(80,119,201,.10);
}
.industry-tile:hover::before{transform:scaleX(1)}
.industry-tile .ico{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  background:var(--brand-blue-soft);border-radius:var(--radius-pill);
  color:var(--brand-blue);margin-top:2px;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.industry-tile:hover .ico{transform:scale(1.06)}
.industry-tile .ico svg{width:20px;height:20px}
.industry-tile-body{
  display:flex;flex-direction:column;gap:8px;min-width:0;flex:1;
}
.industry-tile .label{
  font-family:var(--display);font-size:17px;font-weight:500;
  color:var(--ink);letter-spacing:-.01em;line-height:1.2;
}
.industry-tile .tile-tags{
  display:flex;flex-wrap:wrap;gap:5px;
  list-style:none;padding:0;margin:2px 0 0;
}
.industry-tile .tile-tags li{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;
  background:var(--bone-soft);
  border:1px solid var(--rule);
  border-radius:var(--radius-pill);
  color:var(--ink-soft);
  white-space:nowrap;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.industry-tile:hover .tile-tags li{
  border-color:var(--brand-blue-soft);
  color:var(--brand-blue);
}
.industry-tile .desc-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--t-med) var(--ease),margin-top var(--t-med) var(--ease);
  margin-top:0;
}
.industry-tile .desc-wrap > .desc{
  overflow:hidden;
  margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft);
  opacity:0;transform:translateY(-4px);
  transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease);
}
@media (hover:hover){
  .industry-tile:hover .desc-wrap{
    grid-template-rows:1fr;
    margin-top:4px;
  }
  .industry-tile:hover .desc-wrap > .desc{
    opacity:1;transform:translateY(0);
    padding-top:10px;
    border-top:1px solid var(--brand-blue-soft);
  }
}
@media (hover:none){
  .industry-tile{cursor:default}
  .industry-tile::before{display:none}
  .industry-tile .desc-wrap{grid-template-rows:1fr;margin-top:4px}
  .industry-tile .desc-wrap > .desc{
    opacity:1;transform:none;
    padding-top:10px;
    border-top:1px solid var(--rule);
  }
}
@media (max-width:960px){
  .industries-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .industries-grid{grid-template-columns:1fr;gap:10px}
  .industry-tile{padding:16px 14px;gap:12px}
  .industry-tile .ico{width:32px;height:32px}
  .industry-tile .label{font-size:15px}
  .industry-tile .desc{font-size:13px}
  .industry-tile .tile-tags li{font-size:9.5px;padding:2px 7px}
}

/* ---------------- SECTION HEAD ---------------- */
.section-head{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
  margin-bottom:var(--space-6);
  align-items:end;
}
.section-head .left .num,.section-head .right .num{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);
  margin-bottom:20px;display:block;
}
.section-head h2{
  font-family:var(--display);
  font-size:clamp(36px,5vw,76px);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0;
  font-variation-settings:"opsz" 96,"SOFT" 50;
}
.section-head h2 em{font-style:italic;font-weight:400;color:var(--moss)}
.section-head .right{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:48ch}
@media (max-width:960px){
  .section-head{grid-template-columns:1fr;gap:24px}
  .section-head .right{max-width:none}
}

/* ---------------- CARD PRIMITIVE ---------------- */
.card{
  background:var(--bone-soft);
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  padding:var(--space-5);
  box-shadow:var(--shadow-soft);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
  position:relative;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lift);
  border-color:var(--rule-strong);
}
.card-icon{
  width:48px;height:48px;border-radius:var(--radius-sm);
  background:var(--sage);color:var(--moss);
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:var(--space-4);
}
.card-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.section{padding-block:var(--section-pad);position:relative;z-index:2}
.section.dark{background:var(--moss-deep);color:var(--bone)}
.section.dark .eyebrow{color:var(--sage)}
.section.dark h2{color:var(--bone)}
.section.dark h2 em{color:var(--sage)}
.section.dark p{color:rgba(var(--bone-rgb),.78)}

/* ---------------- SERVICES ---------------- */
.services{padding-block:var(--section-pad)}
.svc-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
.svc{
  display:flex;flex-direction:column;gap:14px;
  text-decoration:none;color:inherit;
  position:relative;
}
.svc .num{
  position:absolute;top:var(--space-5);right:var(--space-5);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);
}
.svc h3{
  font-family:var(--display);font-size:clamp(24px,2.6vw,32px);font-weight:400;
  line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:0;
  font-variation-settings:"opsz" 72,"SOFT" 50;
}
.svc p{font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0;max-width:38ch}
.svc-photos{
  display:block;
  margin-top:auto;padding-top:8px;
  overflow:hidden;
  border-radius:var(--radius-sm);
}
.svc-photos img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center;
  border-radius:var(--radius-sm);
  transition:transform var(--t-med) var(--ease);
  display:block;
  max-height:180px;
}
.svc:hover .svc-photos img{transform:scale(1.03)}
.svc-photos-wide{display:block}
.svc-photos-wide img{aspect-ratio:24/9;max-height:200px}
.svc-wide{grid-column:1/-1}
.svc .more{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);
  margin-top:8px;
}
.svc .more .arrow{width:14px;height:14px}
@media (max-width:760px){
  .svc-grid{grid-template-columns:1fr}
  .svc-photos-wide{grid-template-columns:1fr 1fr}
}

/* ---------------- SCOPE / CHIP CLOUD ---------------- */
.scope{padding-block:var(--section-pad)}
.chip-cloud{
  display:flex;flex-wrap:wrap;gap:10px;
}
.chip{
  display:inline-flex;align-items:baseline;gap:8px;
  padding:10px 16px;
  background:var(--bone-soft);border:1px solid var(--rule);
  border-radius:var(--radius-pill);
  font-size:13px;color:var(--ink-soft);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.chip strong{font-weight:600;color:var(--ink)}
.chip:hover{background:var(--sage-soft);border-color:var(--moss);color:var(--ink)}

/* ---------------- CTA CARD ---------------- */
.cta-card-section{padding-block:clamp(40px,6vw,72px)}
.cta-card{
  background:var(--bone-soft);border:1px solid var(--rule);
  border-radius:var(--radius-lg);
  padding:clamp(40px,6vw,80px);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:20px;
  box-shadow:var(--shadow-soft);
}
.cta-card h2{
  font-family:var(--display);font-size:clamp(32px,4vw,56px);font-weight:400;
  line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin:0;
  font-variation-settings:"opsz" 96,"SOFT" 50;max-width:18ch;
}
.cta-card h2 em{font-style:italic;color:var(--moss)}
.cta-card p{font-size:16px;line-height:1.6;color:var(--ink-soft);margin:0;max-width:48ch}
.cta-card-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}

/* ---------------- PROCESS ---------------- */
.process{padding-block:var(--section-pad)}
.process-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.process-intro .num{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:20px}
.process-intro h2{
  font-family:var(--display);font-size:clamp(36px,5vw,68px);font-weight:400;line-height:1.04;letter-spacing:-.015em;color:var(--ink);margin:0 0 24px;
  font-variation-settings:"opsz" 96,"SOFT" 50;max-width:14ch;
}
.process-intro h2 em{font-style:italic;color:var(--moss)}
.process-intro > p{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:48ch;margin:0 0 32px}
.process-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.process-rating{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-soft);padding-top:24px;border-top:1px solid var(--rule)}
.process-rating .stars{display:inline-flex;gap:2px;color:var(--moss)}
.process-rating .stars svg{width:16px;height:16px}

.process-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
.process-steps .card{
  text-align:center;padding:48px 32px 36px;
  display:flex;flex-direction:column;gap:8px;align-items:center;
}
.step-num{
  font-family:var(--display);font-size:clamp(72px,9vw,128px);font-weight:400;line-height:.9;color:var(--ink);
  text-shadow:var(--shadow-numeral);
  font-variation-settings:"opsz" 144,"SOFT" 50;
  margin-bottom:16px;
}
.process-steps h4{
  font-family:var(--display);font-size:24px;font-weight:400;line-height:1.2;color:var(--ink);margin:0;
  font-variation-settings:"opsz" 60,"SOFT" 50;
}
.process-steps p{font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0;max-width:48ch}
@media (min-width:961px){
  .process-intro{
    position:sticky;
    top:88px;
    align-self:start;
  }
}
@media (max-width:960px){
  .process-grid{grid-template-columns:1fr;gap:48px}
  .process-intro h2{max-width:none}
}

/* ---------------- WHY US ---------------- */
.why{padding-block:var(--section-pad)}
.section-head-center{grid-template-columns:1fr;text-align:center;justify-items:center}
.section-head-center .num{display:block}
.section-head-center h2{max-width:22ch;margin-inline:auto}
.why-lede{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:54ch;margin:24px auto 0}

.why-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:var(--space-6);
}
.why-grid .card{display:flex;flex-direction:column;gap:14px;padding:36px}
.why-grid .card h3{
  font-family:var(--display);font-size:24px;font-weight:400;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:0;
  font-variation-settings:"opsz" 60,"SOFT" 50;
}
.why-grid .card p{font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0;max-width:36ch}
.why-grid .dots{display:inline-flex;gap:6px;margin-top:auto}
.why-grid .dots i{width:6px;height:6px;border-radius:50%;background:var(--rule-strong);display:inline-block}
.why-grid .dots i:first-child{background:var(--brand)}
@media (max-width:960px){
  .why-grid{grid-template-columns:1fr}
}

/* ---------------- TRUST STRIP ---------------- */
.trust-strip{padding-block:clamp(28px,4vw,48px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.trust-strip-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:24px 48px;
}
.trust-strip-list li{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink)}
.trust-strip-list svg{width:18px;height:18px;color:var(--moss);flex:0 0 auto}
@media (max-width:560px){
  .trust-strip-list{justify-content:flex-start;gap:16px}
}

/* ---------------- COMPARE TABLE ---------------- */
.compare{padding-block:var(--section-pad)}
.compare-lede{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:54ch;margin:24px auto 0}
.compare-table{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--bone-soft);
}
.compare-row{display:contents}
.compare-row .cell{
  padding:18px 22px;font-size:14px;color:var(--ink-soft);
  border-top:1px solid var(--rule);display:flex;align-items:center;
}
.compare-row:nth-child(odd) .cell{background:var(--bone-soft)}
.compare-row:nth-child(even) .cell{background:var(--bone)}
.compare-head .cell{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  font-weight:500;border-top:0;background:var(--bone-deep)!important;padding:18px 22px;
}
.compare-row .cell-win{background:var(--moss)!important;color:var(--bone)!important}
.compare-row .cell.cell-win{border-top-color:rgba(var(--bone-rgb),.12)}
.compare-head .cell.cell-win{background:var(--moss-deep)!important;color:var(--bone)!important}
.compare-row .cell:first-child{color:var(--ink)}
.compare-row .dash{color:var(--ink-mute);font-size:18px}
.compare-row .check{color:var(--bone);font-size:16px;font-weight:600}
@media (max-width:760px){
  .compare-table{grid-template-columns:1.4fr 1fr 1fr;font-size:13px}
  .compare-row .cell{padding:14px 12px}
}
@media (max-width:480px){
  .compare-table{display:flex;flex-direction:column;gap:10px;background:transparent;border:0;border-radius:0}
  .compare-row{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    border:1px solid var(--rule);border-radius:var(--radius-md);
    background:var(--bone-soft);padding:14px;
  }
  .compare-row .cell{
    padding:0;border:0!important;background:transparent!important;
    font-size:13px;
  }
  .compare-row .cell:first-child{
    grid-column:1/-1;
    font-family:var(--display);font-size:16px;font-weight:400;line-height:1.3;color:var(--ink);
    padding-bottom:10px;border-bottom:1px solid var(--rule)!important;
    font-variation-settings:"opsz" 40,"SOFT" 50;
  }
  .compare-row .cell:nth-child(2),.compare-row .cell:nth-child(3){
    display:flex;flex-direction:column;align-items:flex-start;gap:6px;
    padding:8px 10px;border-radius:var(--radius-sm);
  }
  .compare-row .cell:nth-child(2)::before{
    content:"DIY";
    font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);
  }
  .compare-row .cell:nth-child(3)::before{
    content:"Core Care";
    font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);
  }
  .compare-row .cell.cell-win{
    background:var(--moss)!important;color:var(--bone)!important;
  }
  .compare-row .dash{font-size:20px;color:var(--ink-mute)}
  .compare-row .check{font-size:18px;color:var(--bone)}
  .compare-head{display:none}
}

/* ---------------- STATS BAND ---------------- */
.stats{padding-block:var(--section-pad);position:relative;z-index:2}
.stats .wrap{position:relative;z-index:3}
.stats-head{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:var(--space-6);
}
.stats-head .num{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);display:block;margin-bottom:12px}
.stats-head h2{
  font-family:var(--display);font-size:clamp(36px,5vw,72px);font-weight:400;line-height:1.04;letter-spacing:-.015em;color:var(--bone);margin:0;
  font-variation-settings:"opsz" 96,"SOFT" 50;max-width:18ch;
}
.stats-head h2 em{font-style:italic;color:var(--sage)}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{
  border-top:1px solid var(--rule-on-dark);
  padding-top:24px;
}
.stat .v{
  font-family:var(--display);font-size:clamp(56px,8vw,108px);font-weight:400;line-height:1;color:var(--bone);
  font-variation-settings:"opsz" 144,"SOFT" 50;
  display:inline-flex;align-items:flex-start;
}
.stat .v sup{font-size:.4em;font-weight:400;color:var(--sage);margin-left:4px;line-height:1}
.stat .l{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-top:14px}
@media (max-width:760px){
  .stats-head{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
}

/* ---------------- CASES ---------------- */
.cases{padding-block:var(--section-pad)}
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cases-grid .card{padding:36px;display:flex;flex-direction:column;gap:14px}
.case-tag{
  display:inline-flex;align-self:flex-start;
  padding:6px 12px;border-radius:var(--radius-pill);
  background:var(--sage-soft);color:var(--moss);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.cases-grid h3{
  font-family:var(--display);font-size:clamp(22px,2.4vw,28px);font-weight:400;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:0;
  font-variation-settings:"opsz" 60,"SOFT" 50;
}
.cases-grid p{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0}
.case-meta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin-top:auto;padding-top:12px;border-top:1px solid var(--rule)}
@media (max-width:960px){
  .cases-grid{grid-template-columns:1fr}
}

/* ---------------- TEAM ---------------- */
.team{padding-block:var(--section-pad)}
.team-grid{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
}
.team-grid .card{padding:28px;display:flex;flex-direction:column;gap:10px}
.team-grid .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:500}
.team-grid h4{
  font-family:var(--display);font-size:20px;font-weight:400;line-height:1.2;color:var(--ink);margin:0;
  font-variation-settings:"opsz" 48,"SOFT" 50;
}
.team-grid p{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0}
@media (max-width:1100px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.team-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.team-grid{grid-template-columns:1fr}}

/* ---------------- FAQ ---------------- */
.faq{padding-block:var(--section-pad)}
.faq-lede{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:54ch;margin:24px auto 0}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;align-items:start}
/* TODO content-swap: replace assets/img/faq/quote-bg.jpg with a branded atmospheric photo (900×600+ JPG) */
.faq-quote{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  min-height:520px;
  background:linear-gradient(180deg,rgba(var(--brand-rgb),.55),rgba(var(--brand-rgb),.85)),url("../img/faq/quote-bg.jpg") center/cover;
  color:var(--bone);padding:40px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:16px;
}
.quote-glyph{
  font-family:var(--display);font-size:120px;line-height:1;color:var(--bone);opacity:.85;
  align-self:flex-start;margin-bottom:auto;font-variation-settings:"opsz" 144,"SOFT" 50;
}
.faq-quote blockquote{
  font-family:var(--display);font-size:clamp(22px,2.4vw,28px);font-weight:400;line-height:1.3;
  color:var(--bone);margin:0;font-variation-settings:"opsz" 60,"SOFT" 50;
}
.faq-quote cite{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);font-style:normal;display:block;padding-top:12px;border-top:1px solid rgba(var(--bone-rgb),.18)}

.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{
  background:var(--bone-soft);border:1px solid var(--rule);
  border-radius:var(--radius-pill);overflow:hidden;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),border-radius var(--t-fast) var(--ease);
}
.faq-item.open{background:var(--sage-soft);border-color:var(--moss);border-radius:var(--radius-md)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 28px;text-align:start;
  font-size:15px;font-weight:500;color:var(--ink);
}
.faq-q .toggle{
  width:20px;height:20px;flex:0 0 auto;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A2018' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-size:contain;background-repeat:no-repeat;background-position:center;
  transition:transform var(--t-fast) var(--ease);
}
.faq-item.open .toggle{transform:rotate(180deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-med) var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden;min-height:0}
.faq-a p{margin:0;padding:0 28px 22px;font-size:14px;line-height:1.6;color:var(--ink-soft)}

@media (max-width:960px){
  .faq-grid{grid-template-columns:1fr}
  .faq-quote{min-height:280px}
}

/* ---------------- CTA BAND ---------------- */
.cta-band{
  padding-block:clamp(72px,9vw,120px);
  background:var(--ink);color:var(--paper);
  position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 60%,rgba(181,137,74,.18) 100%);
  pointer-events:none;
}
.cta-band .wrap{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
@media (min-width:900px){.cta-band .wrap{grid-template-columns:1.4fr .8fr;gap:64px}}
.cta-band h2{
  font-family:var(--display);font-weight:300;
  font-variation-settings:"opsz" 144;
  font-size:clamp(36px,5vw,72px);line-height:1.02;
  letter-spacing:-.025em;margin:0;
}
.cta-band h2 em{font-style:italic;color:var(--brass)}
.cta-band p{color:rgba(244,240,230,.72);font-size:17px;max-width:46ch;margin:18px 0 0}
.cta-actions{display:flex;flex-direction:column;gap:14px}
.cta-actions a{width:100%;justify-content:center}
@media (min-width:600px){.cta-actions{flex-direction:row}.cta-actions a{width:auto}}

/* ---------------- FORM ---------------- */
.form-section{padding-block:var(--section-pad)}
.form-grid{
  display:grid;grid-template-columns:1fr 1.3fr;gap:32px;align-items:stretch;
  border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--bone-soft);
}
.form-aside{
  background:var(--moss-deep);color:var(--bone);
  padding:clamp(32px,4vw,56px);
  display:flex;flex-direction:column;gap:18px;
}
.form-aside .eyebrow{color:var(--sage)}
.form-aside h3{
  font-family:var(--display);font-size:clamp(28px,3.4vw,40px);font-weight:400;line-height:1.1;color:var(--bone);margin:0;
  font-variation-settings:"opsz" 80,"SOFT" 50;
}
.form-aside h3 em{font-style:italic;color:var(--sage)}
.form-aside p{font-size:15px;line-height:1.6;color:rgba(var(--bone-rgb),.78);margin:0}
.form-lines{list-style:none;padding:0;margin:auto 0 0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.form-lines a{color:var(--bone);transition:color var(--t-fast) var(--ease)}
.form-lines a:hover{color:var(--sage)}

.form-body{padding:clamp(32px,4vw,56px);display:flex;flex-direction:column;gap:18px}
.form-row{display:grid;gap:18px}
.form-row.two{grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.field .req{color:var(--moss);margin-left:2px}
.field input,.field select,.field textarea{
  border:1px solid var(--rule-strong);background:var(--bone);color:var(--ink);
  border-radius:var(--radius-sm);padding:14px 16px;font-size:15px;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
  font-family:inherit;
}
.field textarea{resize:vertical;min-height:120px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--moss);box-shadow:0 0 0 3px rgba(var(--moss-rgb),.18);
}
.field .err{display:none;font-size:12px;color:#A53A2A}
.field.error .err{display:block}
.field.error input,.field.error select,.field.error textarea{border-color:#A53A2A}
.field.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:8px}
.consent{display:inline-flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink-soft);max-width:36ch;line-height:1.4}
.consent input{accent-color:var(--moss);margin-top:2px}
.consent.error span{color:#A53A2A}
.form-status{font-size:14px;padding:10px 0;min-height:1em}
.form-status.is-success{color:var(--moss)}
.form-status.is-error{color:#A53A2A}
@media (max-width:960px){
  .form-grid{grid-template-columns:1fr}
  .form-row.two{grid-template-columns:1fr}
}

/* ---------------- CONTACT — single-column card + hero channels ---------------- */
.contact-hero .contact-hero-body{
  max-width:64ch;margin:0 auto;text-align:center;
}
.contact-hero .contact-hero-body .eyebrow,
.contact-hero .contact-hero-body h1,
.contact-hero .contact-hero-body .lead{text-align:center}
.contact-hero .contact-hero-body h1{margin-inline:auto}
.contact-hero .contact-hero-body .lead{margin-inline:auto;max-width:56ch}

.contact-channels{
  list-style:none;padding:0;margin:32px 0 0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:16px 32px;
}
.contact-channels li{display:inline-flex;align-items:center;gap:10px;font-size:15px}
.contact-channels .ic{
  width:36px;height:36px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  background:var(--bone-soft);border:1px solid var(--rule);color:var(--ink);
}
.contact-channels .ic svg{width:16px;height:16px}
.contact-channels a{color:var(--ink);text-decoration:none;transition:color var(--t-fast) var(--ease)}
.contact-channels a:hover{color:var(--moss)}

.form-card{
  max-width:780px;margin:0 auto;
  background:var(--bone-soft);border:1px solid var(--rule);
  border-radius:var(--radius-lg);overflow:hidden;
}
.form-card-head{
  padding:clamp(28px,3.5vw,44px) clamp(28px,4vw,56px) 0;
  text-align:left;
}
.form-card-head .eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--moss);
  display:block;margin-bottom:14px;
}
.form-card-head h2{
  font-family:var(--display);font-size:clamp(28px,3.2vw,40px);
  font-weight:400;letter-spacing:-.01em;line-height:1.1;
  color:var(--ink);margin:0 0 14px;
  font-variation-settings:"opsz" 80,"SOFT" 50;
}
.form-card-head h2 em{font-style:italic;color:var(--moss)}
.form-card-head p{
  font-size:15px;line-height:1.6;color:var(--ink-soft);
  margin:0 0 8px;max-width:60ch;
}

.form-body.single-col{
  padding:clamp(24px,3vw,40px) clamp(28px,4vw,56px) clamp(28px,3.5vw,44px);
}

@media (max-width:560px){
  .contact-channels{flex-direction:column;align-items:flex-start;gap:14px}
  .form-card-head{padding:24px 22px 0}
  .form-body.single-col{padding:20px 22px 24px}
}

/* ---------------- SERVICE DETAIL ---------------- */
.detail{padding-block:var(--section-pad)}
.detail-grid{
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--rule-light);
}
@media (min-width:1024px){.detail-grid{grid-template-columns:1.4fr .9fr;column-gap:64px}}
.detail-main{padding:48px 0}
.detail-main h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.4vw,42px);line-height:1.1;
  letter-spacing:-.01em;margin:0 0 22px;
}
.detail-main h2:not(:first-child){margin-top:48px}
.detail-main h2 em{font-style:italic;color:var(--brass-dark)}
.detail-main p{color:var(--ink-3);font-size:17px;margin:0 0 16px;line-height:1.6;max-width:64ch}
.detail-main ul.checks{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:1fr;gap:0;
}
@media (min-width:600px){.detail-main ul.checks{grid-template-columns:1fr 1fr;gap:0 32px}}
.detail-main ul.checks li{
  padding:18px 0;border-bottom:1px solid var(--rule-light);
  display:flex;align-items:flex-start;gap:14px;font-size:15.5px;
}
.detail-main ul.checks li::before{
  content:"";flex-shrink:0;margin-top:8px;
  width:14px;height:1px;background:var(--brass);
}

.detail-aside{
  padding:48px 0 48px clamp(0px,3vw,48px);
  border-left:1px solid transparent;
}
@media (min-width:1024px){
  .detail-aside{
    border-left:1px solid var(--rule-light);
    position:sticky;top:96px;align-self:flex-start;
  }
}
.aside-card{
  border:1px solid var(--rule-light);
  background:rgba(255,255,255,.5);
  padding:28px;display:flex;flex-direction:column;gap:14px;
  position:relative;overflow:hidden;
}
.aside-card::before{
  content:"";position:absolute;inset:auto auto -1px -1px;
  width:54px;height:4px;background:var(--brass);
}
.aside-card h4{
  font-family:var(--display);font-weight:400;font-size:24px;
  letter-spacing:-.01em;margin:8px 0 0;line-height:1.2;
}
.aside-card .label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.aside-card dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px;margin:8px 0 0;font-size:14px}
.aside-card dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);align-self:center}
.aside-card dd{margin:0;color:var(--ink-3)}
.aside-card .actions{display:flex;flex-direction:column;gap:10px;margin-top:6px}

.aside-card.dark{
  background:var(--ink);color:var(--paper);border-color:var(--ink);
  margin-top:18px;
}
.aside-card.dark::before{background:var(--brass)}
.aside-card.dark .label{color:var(--brass)}
.aside-card.dark dt{color:rgba(244,240,230,.55)}
.aside-card.dark dd{color:rgba(244,240,230,.85)}

/* related services strip */
.related{padding-block:clamp(64px,8vw,120px);background:var(--paper-2);border-top:1px solid var(--rule-light)}
.related-grid{
  display:grid;grid-template-columns:1fr;gap:0;
  border:1px solid var(--rule-light);background:var(--rule-light);
}
@media (min-width:760px){.related-grid{grid-template-columns:repeat(3,1fr)}}
.related-grid > a{
  background:var(--paper-2);padding:28px 24px;
  display:flex;flex-direction:column;gap:8px;color:inherit;
  transition:background var(--t-med) var(--ease);
}
.related-grid > a:hover{background:#fff8e9}
.related-grid .num{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.16em}
.related-grid h4{font-family:var(--display);font-weight:400;font-size:22px;margin:6px 0 0;letter-spacing:-.01em;line-height:1.2}
.related-grid .arrow-link{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--brass-dark);display:inline-flex;gap:8px;align-items:center}

/* ---------------- FOOTER ---------------- */
.site-footer{padding-block:var(--space-7) var(--space-6);background:var(--moss-deep);color:var(--bone)}
.footer-lockup{
  display:inline-flex;align-items:center;gap:14px;
  text-decoration:none;color:inherit;
  margin-bottom:4px;
}
.footer-logo{width:44px;height:44px;display:block;flex:none}
.footer-wordmark-group{
  display:flex;flex-direction:column;align-items:flex-start;line-height:1;gap:6px;
}
html[dir="rtl"] .footer-wordmark-group{align-items:flex-end}
.footer-wordmark{
  font-family:var(--sans);
  font-size:clamp(20px,2.4vw,32px);
  font-weight:700;letter-spacing:.04em;line-height:1;
  text-transform:uppercase;color:var(--bone);
  display:block;
}
.footer-tagline{
  font-family:var(--sans);
  font-size:clamp(10px,1.1vw,12px);
  font-weight:400;letter-spacing:.32em;line-height:1;
  text-transform:uppercase;
  color:rgba(var(--bone-rgb),.65);
  display:block;
}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;
  padding-block:var(--space-6);
}
.footer-brand{display:flex;flex-direction:column;gap:18px;align-items:flex-start;max-width:36ch}
.footer-tag{font-size:15px;line-height:1.6;color:rgba(var(--bone-rgb),.78);margin:0}
.footer-col h5{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);
  margin:0 0 16px;font-weight:500;
}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.footer-col a{font-size:14px;color:rgba(var(--bone-rgb),.85);transition:color var(--t-fast) var(--ease)}
.footer-col a:hover{color:var(--bone)}
.footer-legal{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
  padding-top:var(--space-5);border-top:1px solid var(--rule-on-dark);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(var(--bone-rgb),.65);
}
@media (max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
}

/* ---------------- REVEAL — pure CSS transitions ---------------- */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 700ms cubic-bezier(.22,1,.36,1), transform 700ms cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.reveal.d1{transition-delay:60ms}
.reveal.d2{transition-delay:120ms}
.reveal.d3{transition-delay:180ms}
.reveal.d4{transition-delay:240ms}
.reveal.d5{transition-delay:300ms}
.reveal.d6{transition-delay:360ms}
.reveal.d7{transition-delay:420ms}
.reveal.d8{transition-delay:480ms}
.reveal.in, .reveal.is-in{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------------- UTIL ---------------- */
.sr{position:absolute;left:-9999px}
.no-decor{text-decoration:none}

/* ---------------- FLOATING CTA PILL ---------------- */
.floating-cta-pill{
  position:fixed;left:50%;bottom:24px;z-index:80;
  transform:translateX(-50%) translateY(80px);opacity:0;pointer-events:none;
  display:inline-flex;align-items:center;gap:14px;
  padding:10px 14px 10px 22px;
  background:var(--moss);color:var(--bone);
  border:1px solid var(--moss-deep);
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-lift);
  text-decoration:none;
  transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease),background var(--t-fast) var(--ease);
  max-width:calc(100vw - 32px);
}
.floating-cta-pill.is-visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.floating-cta-pill:hover{background:var(--moss-deep)}
.floating-cta-eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage);line-height:1;
}
.floating-cta-label{
  font-family:var(--sans);font-size:14px;font-weight:500;color:var(--bone);line-height:1.1;
}
.floating-cta-pill .arrow{
  width:16px;height:16px;display:inline-block;flex:0 0 auto;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4EFE5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7'/><path d='M7 7h10v10'/></svg>");
  background-size:contain;background-repeat:no-repeat;background-position:center;
  margin-left:4px;padding:8px;box-sizing:content-box;background-color:var(--moss-deep);border-radius:var(--radius-pill);
  transition:transform var(--t-fast) var(--ease);
}
.floating-cta-pill:hover .arrow{transform:translate(2px,-2px)}
@media (max-width:480px){
  .floating-cta-pill{padding:8px 12px 8px 18px;gap:10px}
  .floating-cta-label{font-size:13px}
  .floating-cta-eyebrow{display:none}
}

/* ---------------- GLOBAL MOBILE TWEAKS ---------------- */
@media (max-width:760px){
  :root{--section-pad:clamp(56px,9vw,80px)}
  .section-head{margin-bottom:32px}
  .hero h1{font-size:clamp(36px,9vw,52px)}
  .stats-head h2,.process-intro h2,.cta-card h2{font-size:clamp(28px,7vw,40px)}
  .footer-wordmark{font-size:clamp(24px,5vw,32px)}
  .footer-logo{width:36px;height:36px}
  .footer-lockup{gap:10px}
  .floating-cta-pill{bottom:16px}
  body{font-size:15px}
}
@media (max-width:480px){
  .btn{padding:12px 18px;font-size:13px}
  .topbar{display:none}
}

/* ====================================================
   Charcoal palette: italic em accents use brass
   ==================================================== */
h1 em, h2 em, h3 em, h4 em, h5 em, .footer-wordmark em, blockquote em {
  color: var(--accent);
  font-style: italic;
}

/* Dark statement-band em on charcoal background: full brass for visibility */
.section.dark h2 em, .stats-head h2 em, .form-aside h3 em,
.cta-band h2 em, .faq-quote blockquote em {
  color: var(--accent);
}

/* Brass-on-dark eyebrow + label colors (used in stats band, footer, form aside, etc.) */
.section.dark .num, .stats-head .num, .form-aside .eyebrow,
.cta-band .eyebrow, .stat .l, .footer-col h5, .stat .v sup {
  color: var(--accent);
}

/* Faq-quote cite + footer wordmark em: full brass on charcoal */
.faq-quote cite, .footer-wordmark em {
  color: var(--accent);
}

/* Footer brand accents (wordmark "Care." + column headings) use logo blue */
.footer-wordmark em,
.footer-col h5 {
  color: var(--logo-blue);
}

/* Active nav-link underline: brass for visibility against charcoal text */
.nav-links a.is-current::after {
  background: var(--accent);
}

/* Check icon (services subpages .checks li::before) uses brass */
.detail-main .checks li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8975A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='m9 12 2 2 4-4'/></svg>");
}

/* Dot indicators in why-grid */
.why-grid .dots i:first-child { background: var(--accent); }

/* Card icons: keep charcoal box, brass icon stroke */
.card-icon { background: var(--bg-soft); color: var(--charcoal); }
.svc .more, .related-grid .arrow-link, .cases .case-tag {
  color: var(--accent);
}
.cases .case-tag { background: var(--accent-tint); color: var(--accent-deep); }

/* Comparison table: winning column is charcoal, accent dash on losing column */
.compare-row .cell.cell-win { background: var(--charcoal) !important; color: var(--bg) !important; }
.compare-head .cell.cell-win { background: var(--charcoal-deep) !important; color: var(--accent) !important; }
.compare-row .check { color: var(--accent); font-weight: 600; }

/* Brand-mark frame: lighter on white background */
.brand-mark { background: var(--bg-soft); border-color: var(--rule); }

/* Hero badge contrast on white */
.hero-badge { background: var(--bg-soft); border-color: var(--rule); }
.hero-badge svg { color: var(--accent); }

/* ---------------- A11Y ---------------- */
.skip-link{
  position:absolute;left:16px;top:-40px;z-index:100;
  background:var(--moss);color:var(--bone);
  padding:10px 16px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:500;
  transition:top var(--t-fast) var(--ease);
}
.skip-link:focus{top:16px;outline:none}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--moss);outline-offset:2px;border-radius:4px;
}
.btn:focus-visible{outline-offset:3px}
.faq-q:focus-visible{outline-offset:-2px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .marquee-track{animation:none}
  .reveal{opacity:1!important;transform:none!important}
}

/* ---------------- SUBPAGE — COMPACT HERO ---------------- */
.hero.compact{padding-block:clamp(48px,7vw,96px) clamp(56px,8vw,112px)}
.hero.compact .hero-grid{grid-template-columns:1fr;max-width:880px}
.hero.compact h1{font-size:clamp(40px,6vw,84px);margin-bottom:24px}
.hero.compact .lead{font-size:18px;line-height:1.6;color:var(--ink-soft);max-width:54ch;margin:0 0 32px}

/* compact hero with side media (e.g. about.html) */
.hero.compact.has-media .hero-grid{
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  max-width:none;
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.hero.compact.has-media h1{font-size:clamp(36px,5vw,68px)}
.hero-media-figure{
  margin:0;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:4/5;background:var(--bone-soft);
  max-height:clamp(420px,62vh,620px);
}
.hero-media-figure img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:960px){
  .hero.compact.has-media .hero-grid{grid-template-columns:1fr;max-width:880px;gap:40px}
  .hero-media-figure{aspect-ratio:16/10;max-height:none;order:2}
}

.breadcrumb{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:32px;
}
.breadcrumb a{color:var(--ink-mute);transition:color var(--t-fast) var(--ease)}
.breadcrumb a:hover{color:var(--moss)}
.breadcrumb .sep{color:var(--rule-strong);margin:0 4px}
.breadcrumb .here{color:var(--ink)}

/* ---------------- SUBPAGE — DETAIL GRID ---------------- */
.detail{padding-block:var(--section-pad)}
.detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(40px,5vw,80px);align-items:start}
.detail-main h2{
  font-family:var(--display);font-size:clamp(28px,3.4vw,44px);font-weight:400;
  line-height:1.1;letter-spacing:-.015em;color:var(--ink);margin:48px 0 16px;
  font-variation-settings:"opsz" 80,"SOFT" 50;max-width:18ch;
}
.detail-main h2:first-child{margin-top:0}
.detail-main h2 em{font-style:italic;color:var(--moss)}
.detail-main p{font-size:16px;line-height:1.7;color:var(--ink-soft);margin:0 0 16px;max-width:62ch}
.detail-main .checks{
  list-style:none;padding:0;margin:8px 0 0;
  display:grid;gap:10px;
}
.detail-main .checks li{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 16px;
  background:var(--bone-soft);border:1px solid var(--rule);
  border-radius:var(--radius-sm);
  font-size:14px;line-height:1.5;color:var(--ink);
}
.detail-main .checks li::before{
  content:"";display:inline-block;flex:0 0 auto;width:18px;height:18px;margin-top:1px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F75CC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='m9 12 2 2 4-4'/></svg>");
  background-size:contain;background-repeat:no-repeat;
}

.detail-aside{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px}
.aside-card{
  background:var(--bone-soft);border:1px solid var(--rule);
  border-radius:var(--radius-md);padding:28px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--shadow-soft);
}
.aside-card .label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.aside-card h4{
  font-family:var(--display);font-size:24px;font-weight:400;line-height:1.2;color:var(--ink);margin:0;
  font-variation-settings:"opsz" 60,"SOFT" 50;
}
.aside-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13px}
.aside-card dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.aside-card dd{margin:0;color:var(--ink-soft)}
.aside-card .actions{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.aside-card.dark{background:var(--moss-deep);color:var(--bone);border-color:var(--moss-soft)}
.aside-card.dark .label{color:var(--sage)}
.aside-card.dark h4{color:var(--bone)}
.aside-card.dark p{color:rgba(var(--bone-rgb),.78);font-size:14px;margin:0;line-height:1.5}
.btn-block{width:100%;justify-content:center}

@media (max-width:960px){
  .detail-grid{grid-template-columns:1fr;gap:48px}
  .detail-aside{position:static}
}

/* ---------------- SUBPAGE — RELATED PRACTICE AREAS ---------------- */
.related{padding-block:var(--section-pad);background:var(--bone-soft);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.related-grid a{
  background:var(--bone);border:1px solid var(--rule);border-radius:var(--radius-md);padding:28px;
  display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.related-grid a:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--rule-strong)}
.related-grid .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.related-grid h4{
  font-family:var(--display);font-size:22px;font-weight:400;line-height:1.2;color:var(--ink);margin:0;
  font-variation-settings:"opsz" 56,"SOFT" 50;
}
.related-grid p{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0}
.related-grid .arrow-link{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);margin-top:auto}
@media (max-width:760px){.related-grid{grid-template-columns:1fr}}

/* ---------------- SUBPAGE — CTA BAND ---------------- */
.cta-band{
  padding-block:var(--section-pad);background:var(--moss-deep);color:var(--bone);
  display:grid;
}
.cta-band .wrap{
  display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center;
}
.cta-band h2{
  font-family:var(--display);font-size:clamp(32px,4vw,56px);font-weight:400;line-height:1.08;letter-spacing:-.015em;color:var(--bone);margin:0 0 12px;
  font-variation-settings:"opsz" 96,"SOFT" 50;max-width:18ch;
}
.cta-band h2 em{font-style:italic;color:var(--sage)}
.cta-band .eyebrow{color:var(--sage)}
.cta-band p{font-size:16px;line-height:1.6;color:rgba(var(--bone-rgb),.78);margin:0;max-width:54ch}
.cta-band .cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
@media (max-width:960px){
  .cta-band .wrap{grid-template-columns:1fr;gap:32px}
  .cta-band .cta-actions{justify-content:flex-start}
}

/* ---------------- SUBPAGE — UTILITY OVERRIDES ---------------- */
.menu-close-label{border:0;font-family:var(--mono);font-size:12px;letter-spacing:.1em}
.section-head--mb{margin-bottom:32px}

/* ---------------- 404 PAGE ---------------- */
.not-found{padding-block:clamp(80px,12vw,160px);text-align:center}
.not-found .wrap{max-width:720px}
.not-found-num{
  font-family:var(--display);font-size:clamp(120px,18vw,220px);font-weight:400;line-height:1;
  color:var(--brand);display:block;margin-bottom:24px;
  font-variation-settings:"opsz" 144,"SOFT" 50;
}
.not-found h1{
  font-family:var(--display);font-size:clamp(40px,5vw,72px);font-weight:400;line-height:1.04;
  letter-spacing:-.02em;color:var(--ink);margin:0 0 20px;
  font-variation-settings:"opsz" 96,"SOFT" 50;
}
.not-found h1 em{font-style:italic;color:var(--brand)}
.not-found > .wrap > p{font-size:18px;line-height:1.6;color:var(--ink-soft);max-width:48ch;margin:0 auto 32px}
.not-found-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:64px}
.not-found-suggest{padding-top:32px;border-top:1px solid var(--rule)}
.not-found-suggest .eyebrow{display:block;margin-bottom:16px;text-align:center}
.not-found-suggest ul{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
}
.not-found-suggest a{
  display:inline-block;padding:8px 16px;border-radius:var(--radius-pill);
  background:var(--bone-soft);border:1px solid var(--rule);
  font-size:13px;color:var(--ink);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.not-found-suggest a:hover{background:var(--brand-tint-soft);border-color:var(--brand)}

/* ---------------- HERO BROCHURE LINK ---------------- */
.hero-pdf-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-soft);
  padding:14px 8px;
  transition:color var(--t-fast) var(--ease);
}
.hero-pdf-link:hover{color:var(--brand)}
.hero-pdf-link svg{width:16px;height:16px;flex:0 0 auto}
.related-heading{font-size:clamp(28px,3vw,40px)}

/* ---------------- LEGAL PAGES (privacy + terms) ---------------- */
.legal-body{padding-block:clamp(40px,6vw,80px) var(--section-pad)}
.legal-body .wrap{max-width:820px}
.legal-notice{
  background:var(--brand-tint-soft);border:1px solid var(--brand);
  border-radius:var(--radius-md);padding:20px 24px;
  font-size:14px;line-height:1.55;color:var(--ink);
  margin-bottom:var(--space-6);
}
.legal-notice strong{color:var(--brand-deep);font-weight:600}
.legal-content h2{
  font-family:var(--display);font-size:clamp(24px,2.6vw,32px);font-weight:400;
  line-height:1.15;letter-spacing:-.01em;color:var(--ink);
  margin:48px 0 16px;
  font-variation-settings:"opsz" 72,"SOFT" 50;
}
.legal-content h2:first-child{margin-top:0}
.legal-content p{font-size:16px;line-height:1.7;color:var(--ink-soft);margin:0 0 16px;max-width:62ch}
.legal-content p a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.legal-content p a:hover{color:var(--brand-deep)}
.legal-content ul.checks{margin:8px 0 16px}
.legal-content .contact-lines{
  list-style:none;padding:0;margin:8px 0 16px;
  display:flex;flex-direction:column;gap:8px;font-size:15px;
}
.legal-content .contact-lines strong{color:var(--ink);margin-right:8px}
.legal-content .contact-lines a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* ---------------- PROCESS NUMERAL — SCROLL-LINKED ENTRANCE ---------------- */
/* Each big serif numeral scales + fades up as its card enters viewport.
   Uses modern scroll-driven animation where supported; falls back to
   IntersectionObserver-triggered transition on Safari/older Firefox. */
@keyframes stepNumEnter{
  from{opacity:0;transform:translateY(140px) scale(.65)}
  to  {opacity:1;transform:translateY(0) scale(1)}
}
@supports (animation-timeline: view()){
  .process-steps .step-num{
    animation:stepNumEnter linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 0%;
    will-change:opacity,transform;
  }
}
@supports not (animation-timeline: view()){
  .process-steps .step-num{
    opacity:0;
    transform:translateY(48px) scale(.8);
    transition:opacity 700ms cubic-bezier(.22,1,.36,1) 60ms,transform 700ms cubic-bezier(.22,1,.36,1) 60ms;
    will-change:opacity,transform;
  }
  .process-steps .card.in .step-num,
  .process-steps .card.is-in .step-num{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce){
  .process-steps .step-num{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}

/* ====================================================
   Brand blue accent — matches the logo chevron color.
   Used sparingly to tie utility/decorative elements
   back to the brand mark without competing with brass.
   ==================================================== */
:root{
  --brand-blue:#5077C9;
  --brand-blue-deep:#3A5DB0;
  --brand-blue-soft:#E1E8F4;
}

/* Section eyebrows ("01 — Practice areas" etc.) — blue on light sections */
.section-head .num,
.process-intro .num{
  color:var(--brand-blue);
}

/* Small icon glyphs inside service/why-us/related cards */
.card-icon{
  color:var(--brand-blue);
}

/* Hero badge check icon (the small SVG in "Trusted in the UAE since 2014" pill) */
.hero-badge svg{
  color:var(--brand-blue);
}

/* Chip cloud (standards): blue accent on hover */
.chip:hover{
  border-color:var(--brand-blue);
  background:var(--brand-blue-soft);
  color:var(--ink);
}

/* Status dot in topbar (still semantically "available") — tinted toward brand blue */
.topbar .status-dot{
  background:var(--brand-blue);
  box-shadow:0 0 0 3px rgba(80,119,201,.18);
}

/* Process steps in dedicated page: 2-up grid, no intro column */
.process-steps-full{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
@media (max-width:760px){
  .process-steps-full{grid-template-columns:1fr}
}

/* ============== Pinned scrollytelling (generic) ==============
   Used by .process-pinned and .advisory-pinned. Each instance sets
   --steps to its number of cards so min-height scales automatically.
*/
.scroll-pin{
  --steps: 5;
  position:relative;
  padding:0;
  min-height: calc(var(--steps) * 100vh + 40vh);
}
.process-pinned{background:var(--bone-soft)}
.advisory-pinned{background:var(--bone)}
.scroll-pin-sticky{
  position:sticky;top:0;
  height:100vh;min-height:560px;
  display:grid;align-items:center;
  overflow:hidden;
}
.scroll-pin-sticky .wrap{width:100%}
.scroll-pin-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:clamp(28px,5vh,56px);
  gap:24px;
}
.scroll-pin-head .num{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-blue);
}
.scroll-pin-count{
  font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--ink-soft);
  display:inline-flex;gap:4px;align-items:baseline;
}
.scroll-pin-count .cur{
  color:var(--ink);font-weight:500;
  display:inline-block;min-width:1.6ch;
  transition:color var(--t-fast) var(--ease);
}
.scroll-pin-count .sep{color:var(--ink-mute)}
.scroll-pin-stage{
  position:relative;
  min-height:clamp(280px,46vh,500px);
}
.scroll-pin-step{
  position:absolute;inset:0;
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(28px,6vw,72px);
  align-items:center;
  opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--ease),transform .55s var(--ease);
  pointer-events:none;
  will-change:opacity,transform;
}
.scroll-pin-step.is-active{
  opacity:1;transform:translateY(0);pointer-events:auto;
}
.scroll-pin-step.is-leaving{
  opacity:0;transform:translateY(-24px);
}
.scroll-pin-step .step-num{
  font-family:var(--display);
  font-size:clamp(120px,18vw,260px);
  font-weight:400;line-height:.85;
  color:var(--ink);
  font-variation-settings:"opsz" 144,"SOFT" 50;
  text-shadow:var(--shadow-numeral);
  letter-spacing:-.02em;
}
.scroll-pin-text h3,
.scroll-pin-text h4{
  font-family:var(--display);
  font-size:clamp(32px,4.4vw,56px);
  font-weight:400;letter-spacing:-.015em;line-height:1.06;
  color:var(--ink);margin:0 0 18px;
  font-variation-settings:"opsz" 72,"SOFT" 50;
}
.scroll-pin-text p{
  font-size:clamp(15.5px,1.25vw,18px);line-height:1.6;
  color:var(--ink-soft);margin:0;max-width:62ch;
}
.scroll-pin-progress{
  display:flex;align-items:center;gap:10px;
  margin-top:clamp(28px,5vh,56px);
}
.scroll-pin-progress .dot{
  width:36px;height:4px;border:0;background:var(--rule);
  border-radius:2px;cursor:pointer;padding:0;
  transition:background var(--t-fast) var(--ease),width var(--t-fast) var(--ease);
}
.scroll-pin-progress .dot:hover{background:var(--ink-mute)}
.scroll-pin-progress .dot.is-active{
  background:var(--brand-blue);width:56px;
}
html[dir="rtl"] .scroll-pin-step{grid-template-columns:1fr auto}
html[dir="rtl"] .scroll-pin-step .step-num{order:2}
html[dir="rtl"] .scroll-pin-text{order:1;text-align:right}
@media (max-width:760px){
  .scroll-pin{min-height: calc(var(--steps) * 70vh + 30vh)}
  .scroll-pin-sticky{min-height:520px}
  .scroll-pin-stage{min-height:clamp(300px,60vh,440px)}
  .scroll-pin-step{
    grid-template-columns:1fr;
    gap:4px;
    align-items:start;
    align-content:start;
  }
  .scroll-pin-step .step-num{font-size:96px;line-height:.9}
  .scroll-pin-text h3,
  .scroll-pin-text h4{font-size:26px;margin:6px 0 10px}
  .scroll-pin-text p{font-size:15px;line-height:1.55}
  .scroll-pin-head{margin-bottom:24px}
  .scroll-pin-progress{margin-top:20px;gap:8px}
  .scroll-pin-progress .dot{width:24px;height:3px}
  .scroll-pin-progress .dot.is-active{width:40px}
  html[dir="rtl"] .scroll-pin-step{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .scroll-pin-step{transition:none}
}

.svc-grid-preview{grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){.svc-grid-preview{grid-template-columns:1fr}}
.services-cta-row{text-align:center;margin-top:40px}

/* ====================================================
   SPLASH - first-visit landing animation
   Plays once per session on the homepage. Inline <head>
   script sets html[data-splash="seen"] on subsequent
   visits so we never flash the splash again.
   ==================================================== */
html[data-splash="seen"] #splash{display:none!important}

#splash{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:var(--bone);
  transition:opacity 600ms cubic-bezier(.22,1,.36,1);
}
#splash[hidden]{display:none}
#splash.is-hiding{opacity:0;pointer-events:none}

.splash-stack{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(16px,2vw,28px);
}
.splash-logo{
  width:clamp(64px,8vw,96px);height:auto;display:block;
  opacity:0;transform:scale(.78);
  animation:splash-logo-in 700ms cubic-bezier(.22,1,.36,1) forwards;
}
.splash-wordmark{
  font-family:var(--sans);
  font-size:clamp(28px,5vw,52px);
  font-weight:700;letter-spacing:.04em;line-height:1;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0;transform:translateY(10px);
  animation:splash-word-in 700ms 360ms cubic-bezier(.22,1,.36,1) forwards;
}
.splash-tagline{
  font-family:var(--sans);
  font-size:clamp(11px,1.3vw,14px);
  font-weight:400;letter-spacing:.34em;line-height:1;
  text-transform:uppercase;
  color:var(--ink-soft);
  opacity:0;transform:translateY(6px);
  animation:splash-word-in 600ms 520ms cubic-bezier(.22,1,.36,1) forwards;
  margin-top:-8px;
}

@keyframes splash-logo-in{
  to{opacity:1;transform:scale(1)}
}
@keyframes splash-word-in{
  to{opacity:1;transform:translateY(0)}
}

@media (prefers-reduced-motion: reduce){
  #splash,.splash-logo,.splash-wordmark,.splash-tagline{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}

/* ====================================================
   Page banner — full-width image below the hero on
   service detail pages and about.html.
   ==================================================== */
.page-banner{margin-block:clamp(24px,4vw,56px)}
.page-banner-figure{
  margin:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:21/9;
  max-height:clamp(320px,52vh,520px);
  background:var(--bone-soft);
}
.page-banner-figure img{
  width:100%;height:100%;object-fit:cover;display:block;
}
@media (max-width:560px){
  .page-banner-figure{border-radius:var(--radius-md);aspect-ratio:4/3;max-height:none}
}

/* Engagement / case-study card image */
.case-figure{
  margin:0 0 18px;
  border-radius:var(--radius-md);
  overflow:hidden;
  aspect-ratio:3/2;
  background:var(--bone-soft);
}
.case-figure img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--t-med) var(--ease);
}
.cases-grid .card:hover .case-figure img{transform:scale(1.03)}
.case-figure > .gfx{aspect-ratio:3/2;width:100%}

/* ====================================================
   Service cards - stronger scroll-in entrance
   Makes each card visibly "land" as the user scrolls,
   not just fade. Used on services.html (7 cards) and
   the homepage svc-grid-preview (3 cards).
   ==================================================== */
.svc-grid .svc.reveal{
  opacity:0;
  transform:translateY(48px) scale(.96);
  transition:opacity 800ms cubic-bezier(.22,1,.36,1),transform 800ms cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.svc-grid .svc.reveal.d1{transition-delay:140ms}
.svc-grid .svc.reveal.d2{transition-delay:280ms}
.svc-grid .svc.reveal.in,
.svc-grid .svc.reveal.is-in{
  opacity:1;
  transform:translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce){
  .svc-grid .svc.reveal,
  .svc-grid .svc.reveal.d1,
  .svc-grid .svc.reveal.d2{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}

/* ===================================================
   FAQ - Framer-style panel
   2-column card with "FAQ" watermark, numbered Q cards
   with staggered scroll-in entrance and chevron toggle.
   =================================================== */
.faq-fr{padding-block:var(--section-pad);background:var(--bone)}
.faq-fr-card{
  position:relative;overflow:hidden;
  background:var(--bone-soft);
  border-radius:32px;
  padding:clamp(40px,5vw,80px) clamp(28px,4vw,64px);
}
.faq-fr-watermark{
  position:absolute;left:4%;top:50%;transform:translateY(-50%);
  font-family:var(--display);font-weight:400;
  font-size:clamp(180px,28vw,360px);
  color:rgba(24,25,26,.045);
  pointer-events:none;line-height:.8;letter-spacing:-.04em;
  font-variation-settings:"opsz" 144,"SOFT" 50;
  z-index:0;-webkit-user-select:none;user-select:none;
}
.faq-fr-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(32px,5vw,72px);
  align-items:start;
}
.faq-fr-intro h2.faq-fr-heading{
  font-family:var(--display);font-size:clamp(36px,5vw,56px);
  font-weight:400;letter-spacing:-.02em;line-height:1.05;
  margin:0 0 16px;color:var(--ink);
  font-variation-settings:"opsz" 96,"SOFT" 50;
}
.faq-fr-intro h2.faq-fr-heading em{font-style:italic;color:var(--moss)}
.faq-fr-sub{
  font-size:16px;line-height:1.55;color:var(--ink-soft);
  margin:0 0 32px;max-width:34ch;
}
.faq-fr-contact{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:14px;
}
.faq-fr-contact li{display:flex;align-items:center;gap:14px}
.faq-fr-contact .ic{
  width:40px;height:40px;border-radius:50%;
  background:var(--bone);border:1px solid var(--rule);
  display:grid;place-items:center;color:var(--ink);flex:none;
}
.faq-fr-contact .ic svg{width:18px;height:18px}
.faq-fr-contact a{font-size:15px;color:var(--ink);text-decoration:none;transition:color var(--t-fast) var(--ease)}
.faq-fr-contact a:hover{color:var(--moss)}

.faq-fr-list{display:flex;flex-direction:column;gap:12px}
.faq-fr-list .faq-item{
  background:var(--bone);border-radius:18px;
  border:1px solid var(--rule);overflow:hidden;
  transition:box-shadow var(--t-med) var(--ease),border-color var(--t-fast) var(--ease);
}
.faq-fr-list .faq-item.open{
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  border-color:transparent;
  background:var(--bone);
  border-radius:18px;
}
.faq-fr-list .faq-q{
  display:flex;align-items:center;gap:18px;
  width:100%;padding:22px 24px;background:none;border:0;cursor:pointer;
  font-family:inherit;text-align:left;
  justify-content:flex-start;
}
.faq-fr-list .faq-num{
  font-family:var(--display);font-size:18px;font-weight:400;
  color:var(--ink-soft);flex:none;min-width:28px;letter-spacing:-.01em;
}
.faq-fr-list .qtxt{
  flex:1;font-family:var(--display);font-size:17px;font-weight:500;
  color:var(--ink);letter-spacing:-.01em;line-height:1.4;
}
.faq-fr-list .toggle{
  width:24px;height:24px;flex:none;color:var(--ink-soft);
  display:grid;place-items:center;
  transition:transform 360ms cubic-bezier(.22,1,.36,1);
  background:none;border:0;border-radius:0;
}
.faq-fr-list .toggle svg{width:18px;height:18px;display:block}
.faq-fr-list .faq-item.open .toggle{transform:rotate(180deg)}
.faq-fr-list .faq-a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 420ms cubic-bezier(.22,1,.36,1);
}
.faq-fr-list .faq-item.open .faq-a{grid-template-rows:1fr}
.faq-fr-list .faq-a > div{overflow:hidden;min-height:0}
.faq-fr-list .faq-a p{
  margin:0;padding:0 24px 22px 70px;
  font-size:15px;line-height:1.65;color:var(--ink-soft);
}

/* Custom Framer-style entrance for FAQ items: y:36 + slight scale, longer travel */
.faq-fr-list .faq-item.reveal{
  opacity:0;
  transform:translateY(36px) scale(.985);
}
.faq-fr-list .faq-item.reveal.in,
.faq-fr-list .faq-item.reveal.is-in{
  opacity:1;
  transform:translateY(0) scale(1);
}

@media (max-width:760px){
  .faq-fr-grid{grid-template-columns:1fr;gap:36px}
  .faq-fr-card{padding:32px 22px;border-radius:24px}
  .faq-fr-watermark{font-size:clamp(140px,40vw,220px);top:auto;bottom:8%;transform:none;left:-2%}
  .faq-fr-list .qtxt{font-size:15px}
  .faq-fr-list .faq-a p{padding:0 22px 18px 56px;font-size:14px}
  .faq-fr-list .faq-num{font-size:16px;min-width:24px}
  .faq-fr-list .faq-q{gap:14px;padding:18px 20px}
}

/* RTL: chevron flip is not needed (it points down), but mirror padding offsets */
html[dir="rtl"] .faq-fr-list .faq-a p{padding:0 70px 22px 24px}
@media (max-width:760px){
  html[dir="rtl"] .faq-fr-list .faq-a p{padding:0 56px 18px 22px}
}

/* =================================================================
   GRAPHIC PRIMITIVES
   Inline SVG/CSS graphics that replace stock photography in service
   tiles, About engagement cards, and service detail pages.
   Spec: docs/superpowers/specs/2026-05-15-image-system-overhaul-design.md

   Note: .gfx-score, .gfx-stat-tile.light, and .gfx-doc use #fff
   (pure white) rather than var(--bg) (cream) on purpose. These cards
   sit on the cream page background and use white to gain a subtle
   visual lift. Var(--bg) would make them disappear into the page.
   ================================================================= */

.gfx{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  font-family:inherit;
}
.gfx-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  color:var(--accent-deep);
}

/* --- Primitive 1: Certificate card ----------------------------- */
.gfx-cert{
  background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);
  border:1px solid var(--bg-deep);
  padding:24px;
  display:flex;flex-direction:column;
}
.gfx-cert::before{
  content:"";position:absolute;inset:14px;
  border:1px solid var(--accent);opacity:.35;border-radius:4px;
  pointer-events:none;
}
.gfx-cert-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:16px;position:relative;z-index:1;
}
.gfx-cert-marks{display:flex;gap:6px}
.gfx-cert-mark{
  width:36px;height:36px;border-radius:4px;
  background:var(--ink);color:var(--bg-soft);
  font-size:9px;font-weight:800;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;
  text-align:center;line-height:1;padding:2px;
}
.gfx-cert-mark.brass{background:var(--accent);color:var(--ink)}
.gfx-cert-body{position:relative;z-index:1;display:flex;flex-direction:column}
.gfx-cert-standard{
  font-size:28px;font-weight:800;color:var(--ink);
  letter-spacing:-0.02em;margin:0 0 4px;
}
.gfx-cert-name{font-size:13px;color:var(--ink-soft);margin:0 0 18px}
.gfx-cert-rows{
  display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;
  font-size:11px;
}
.gfx-cert-row{display:flex;flex-direction:column;gap:2px}
.gfx-cert-row span{
  color:var(--ink-mute);text-transform:uppercase;
  letter-spacing:.08em;font-size:9px;
}
.gfx-cert-row strong{color:var(--ink);font-weight:600}
.gfx-cert-seal{
  align-self:flex-end;margin-top:12px;z-index:1;
  width:56px;height:56px;border-radius:50%;
  background:var(--accent);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;text-align:center;line-height:1.1;
  box-shadow:0 2px 6px rgba(var(--accent-rgb),.4);
}

/* --- Primitive 2: Process diagram ------------------------------ */
.gfx-process{
  background:var(--ink);color:var(--bg);
  padding:28px 24px;
  display:flex;flex-direction:column;
}
.gfx-process-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--accent);font-weight:700;margin-bottom:4px;
}
.gfx-process-title{
  font-size:18px;font-weight:700;margin:0 0 24px;letter-spacing:-0.01em;
}
.gfx-steps{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;
  position:relative;flex:1;align-items:stretch;
}
.gfx-steps::before{
  content:"";position:absolute;top:14px;left:8%;right:8%;height:1px;
  background:var(--accent);opacity:.4;
}
.gfx-step{
  display:flex;flex-direction:column;align-items:flex-start;
  position:relative;padding-right:8px;
}
.gfx-step-num{
  width:28px;height:28px;border-radius:50%;
  background:var(--bg);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;margin-bottom:10px;
  position:relative;z-index:1;
}
.gfx-step.active .gfx-step-num{background:var(--accent);color:var(--ink)}
.gfx-step-name{font-size:11px;font-weight:700;line-height:1.3;margin-bottom:4px}
.gfx-step-meta{font-size:10px;color:rgba(var(--cream-rgb),.55);letter-spacing:.04em}
.gfx-process-footer{
  margin-top:18px;padding-top:14px;
  border-top:1px solid rgba(var(--accent-rgb),.2);
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;
}
.gfx-process-footer .key{color:rgba(var(--cream-rgb),.55)}
.gfx-process-footer .val{color:var(--accent);font-weight:700}

/* Mobile: process diagram becomes vertical at <640px */
@media (max-width:640px){
  .gfx-steps{grid-auto-flow:row;grid-auto-columns:1fr;gap:14px}
  .gfx-steps::before{display:none}
  .gfx-step{flex-direction:row;align-items:center;gap:12px;padding-right:0}
  .gfx-step-num{margin-bottom:0;flex-shrink:0}
  .gfx-step-name{font-size:12px}
}

/* --- Primitive 3: Score arc ------------------------------------ */
.gfx-score{
  background:#fff;border:1px solid var(--bg-deep);
  padding:24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.gfx-score-arc{position:relative;width:140px;height:140px}
.gfx-score-arc svg{transform:rotate(-90deg);width:100%;height:100%}
.gfx-score-num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:36px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;
}
.gfx-score-cap{
  font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-mute);margin-top:14px;font-weight:600;
}
.gfx-score-detail{font-size:12px;color:var(--ink-soft);margin-top:6px;text-align:center}

/* Variant: before/after split for About card */
.gfx-score-split{display:flex;gap:24px;width:100%;align-items:center;justify-content:center}
.gfx-score-split .gfx-score-arc{width:90px;height:90px}
.gfx-score-split .gfx-score-num{font-size:22px}
.gfx-score-split-arrow{font-size:20px;color:var(--accent);font-weight:700}

/* --- Primitive 4: Vendor card ---------------------------------- */
.gfx-vendor{
  background:linear-gradient(135deg,var(--bg) 0%,var(--bg-soft) 100%);
  border:1px solid var(--bg-deep);
  padding:24px;
  display:flex;flex-direction:column;
}
.gfx-vendor-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:14px;
}
.gfx-vendor-org{
  font-size:11px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-mute);font-weight:700;
}
.gfx-vendor-status{
  font-size:10px;font-weight:800;letter-spacing:.08em;
  padding:4px 10px;border-radius:999px;
  background:var(--success);color:var(--bg);text-transform:uppercase;
}
.gfx-vendor-id{
  font-size:22px;font-weight:800;color:var(--ink);
  letter-spacing:-0.01em;margin:0 0 4px;
}
.gfx-vendor-name{font-size:13px;color:var(--ink-soft);margin:0 0 16px}
.gfx-vendor-rows{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:11px;margin-bottom:14px}
.gfx-vendor-rows dt{color:var(--ink-mute);text-transform:uppercase;letter-spacing:.08em;font-size:9px;font-weight:700;margin:0}
.gfx-vendor-rows dd{color:var(--ink);font-weight:600;margin:0}
.gfx-vendor-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.gfx-vendor-chip{
  font-size:10px;font-weight:600;letter-spacing:.04em;
  padding:4px 10px;border-radius:4px;
  background:var(--ink);color:var(--bg-soft);
}
.gfx-vendor-chip.brass{background:var(--accent);color:var(--ink)}

/* --- Primitive 5: Stat grid ------------------------------------ */
.gfx-stat-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.gfx-stat-tile{
  padding:18px;display:flex;flex-direction:column;justify-content:space-between;
  border-radius:6px;
}
.gfx-stat-tile.dark{background:var(--ink);color:var(--bg)}
.gfx-stat-tile.light{background:#fff;color:var(--ink);border:1px solid var(--bg-deep)}
.gfx-stat-num{
  font-size:36px;font-weight:800;letter-spacing:-0.03em;
  color:var(--accent);line-height:1;
}
.gfx-stat-tile.light .gfx-stat-num{color:var(--ink)}
.gfx-stat-cap{
  font-size:11px;margin-top:8px;line-height:1.35;
}
.gfx-stat-tile.dark .gfx-stat-cap{color:rgba(var(--cream-rgb),.7)}
.gfx-stat-tile.light .gfx-stat-cap{color:var(--ink-soft)}

@media (max-width:640px){
  .gfx-stat-grid{grid-template-columns:1fr}
}

/* --- Primitive 6: UAE map -------------------------------------- */
.gfx-map{
  background:var(--bg-soft);border:1px solid var(--bg-deep);
  padding:24px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
}
.gfx-map svg{width:100%;max-width:280px;height:auto}
.gfx-map-cap{
  font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-mute);margin-top:14px;font-weight:600;
}

/* --- Primitive 7: Document mockup ------------------------------ */
.gfx-doc{
  background:#fff;border:1px solid var(--bg-deep);
  padding:24px;
  display:flex;flex-direction:column;
}
.gfx-doc-bar{
  height:6px;background:var(--accent);border-radius:2px;
  margin-bottom:14px;width:60%;
}
.gfx-doc-title{
  font-size:14px;font-weight:800;color:var(--ink);
  margin:0 0 4px;letter-spacing:-0.01em;
}
.gfx-doc-meta{
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-mute);font-weight:600;margin-bottom:14px;
}
.gfx-doc-lines{display:flex;flex-direction:column;gap:6px}
.gfx-doc-lines div{height:4px;background:var(--bg-deep);border-radius:2px}
.gfx-doc-lines div:nth-child(1){width:100%}
.gfx-doc-lines div:nth-child(2){width:92%}
.gfx-doc-lines div:nth-child(3){width:78%}
.gfx-doc-lines div:nth-child(4){width:88%}
.gfx-doc-lines div:nth-child(5){width:60%}
.gfx-doc-lines div.heavy{background:var(--ink);height:5px}
.gfx-doc-stamp{
  position:absolute;right:18px;bottom:18px;width:38px;height:38px;
  border:2px solid var(--accent);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:800;color:var(--accent);
  text-align:center;line-height:1;transform:rotate(-12deg);
}

/* --- Primitive 8: Certificate stack (composition of 3 certs) --- */
.gfx-cert-stack{
  position:relative;aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
}
.gfx-cert-stack .gfx-cert{
  position:absolute;width:78%;
  aspect-ratio:4/3;
}
.gfx-cert-stack .gfx-cert:nth-child(1){
  transform:translate(-12%,-8%) rotate(-4deg);
  opacity:.6;
}
.gfx-cert-stack .gfx-cert:nth-child(2){
  transform:translate(0,0) rotate(0deg);
  z-index:2;
}
.gfx-cert-stack .gfx-cert:nth-child(3){
  transform:translate(12%,8%) rotate(4deg);
  opacity:.6;
}
.gfx-cert-stack .gfx-cert .gfx-cert-seal{
  position:absolute;right:18px;bottom:18px;
  align-self:auto;margin-top:0;
}

/* --- RTL adjustments ------------------------------------------ */
[dir="rtl"] .gfx-process-footer,
[dir="rtl"] .gfx-cert-head,
[dir="rtl"] .gfx-vendor-head{
  direction:rtl;
}
[dir="rtl"] .gfx-doc-stamp{
  right:auto;left:18px;
}
[dir="rtl"] .gfx-cert-seal{
  align-self:flex-start;
}
[dir="rtl"] .gfx-doc-bar{margin-right:0;margin-left:auto}
[dir="rtl"] .gfx-steps{direction:rtl}
[dir="rtl"] .gfx-step{padding-right:0;padding-left:8px}