/* SAJIDMK · Typography controls (added without changing page structure) */
:root {
  --site-font-scale: 1;
  --site-theme-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --ff-display: var(--site-theme-font);
  --ff-body: var(--site-theme-font);
}
html[data-font-theme="inter"] { --site-theme-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }
html[data-font-theme="manrope"] { --site-theme-font: 'Manrope', 'Inter', system-ui, sans-serif; }
html[data-font-theme="space-grotesk"] { --site-theme-font: 'Space Grotesk', 'Inter', system-ui, sans-serif; }
/* Buttons and form fields inherit the selected family without affecting terminal/code. */
html body :is(button, input, textarea, select):not(.term-input):not(.term-command) { font-family: var(--ff-body); }
/* Keep the small settings panel at a stable size while the reader enlarges portfolio content. */
html body .sg-dock, html body .sg-dock :is(button, input) { font-family: 'Inter', system-ui, sans-serif; }
html body .sg-panel { scrollbar-width: thin; scrollbar-color: rgba(201,206,211,.4) transparent; }
.sg-range--font { --sg-accent: #D5D9DD; }
.sg-font-scale-legend { display:flex; justify-content:space-between; gap:8px; margin:8px 1px 0; color:#B9B5BA; font-size:10px; }
.sg-font-scale-legend span:first-child { font-size:11px; }
.sg-font-scale-legend span:last-child { font-size:15px; line-height:1; }
.sg-typography-choices .sg-setting-caption { margin:0 0 11px; }
.sg-font-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
html body .sg-font-option {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px;
  min-width:0; min-height:76px; padding:9px 8px!important; border-radius:14px!important;
  border:1px solid rgba(201,206,211,.22)!important;
  color:#F5F3ED!important; background:rgba(255,255,255,.055)!important;
  text-align:left; cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
html body .sg-font-option[aria-pressed="true"] { border-color:rgba(233,240,248,.95)!important; background:rgba(201,206,211,.13)!important; box-shadow:0 0 0 1px rgba(245,243,237,.18),inset 0 1px rgba(255,255,255,.15)!important; }
html body .sg-font-option:is(:hover,:focus-visible) { border-color:#F5F3ED!important; background:rgba(255,255,255,.12)!important; }
html body .sg-font-option .sg-font-sample { font-size:25px!important; line-height:1.03; letter-spacing:-.055em; color:#fff!important; }
html body .sg-font-option .sg-font-name { font-size:11px!important; font-weight:700!important; line-height:1.25; color:#F5F3ED!important; }
html body .sg-font-option .sg-font-note { font-size:9px!important; line-height:1.35; color:#BCC3CB!important; }
.sg-font-option[data-font-theme="inter"] .sg-font-sample { font-family:'Inter',system-ui,sans-serif; }
.sg-font-option[data-font-theme="manrope"] .sg-font-sample { font-family:'Manrope',system-ui,sans-serif; }
.sg-font-option[data-font-theme="space-grotesk"] .sg-font-sample { font-family:'Space Grotesk',system-ui,sans-serif; }
/* Larger visitor-selected text should wrap, not clip in card grids or the homepage. */
html[data-site-font-enlarged="true"] body :is(.vision-main-pane,.vision-identity,.section,.optical-liquid-glass, .optical-glass-item,.hero) { min-width:0; }
html[data-site-font-enlarged="true"] body :is(.vision-actions,.vision-role-line,.hero-cta,.footer-links,.contact-actions) { flex-wrap:wrap; }
html[data-site-font-enlarged="true"] body :is(.vision-name,.section h2,.client-showcase-content h3,.sajid-offer-card h3,.sajid-subscribe-card h3) { max-width:100%; overflow-wrap:break-word; }
@media(max-width:480px){ .sg-font-options { gap:5px; } html body .sg-font-option { padding:8px 6px!important; min-height:70px; } html body .sg-font-option .sg-font-name { font-size:10px!important; } }
@media(prefers-reduced-motion:reduce){html body .sg-font-option {transition:none;}}