/* Executive — classic A4 résumé sheet (screen + print) */
.t-exec {
  --paper: #fff; --ink: #0f172a; --text: #334155; --muted: #64748b; --line: #e3e8ef;
  --side: #172033; --side-text: #c8d1de; --side-muted: #8d9bb2;
  background: #e8ebf0; color: var(--text);
  font: 400 15px/1.65 "Source Sans 3", "Tajawal", system-ui, sans-serif;
}
[dir="rtl"] .t-exec { font-family: "Tajawal", "Source Sans 3", system-ui, sans-serif; font-size: 15.5px; line-height: 1.8; }
.t-exec ::selection { background: rgba(var(--accent-rgb), .3); }

/* Top bar */
.ex-bar { position: sticky; top: 0; z-index: 60; background: rgba(232, 235, 240, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow .2s, background-color .2s; }
.ex-bar.is-scrolled { background: rgba(255, 255, 255, .9); box-shadow: 0 1px 0 rgba(15, 23, 42, .06), 0 8px 24px -16px rgba(15, 23, 42, .3); }
.ex-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1000px; margin: 0 auto; padding: 12px 20px; }
.ex-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
.ex-mono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--side); color: var(--accent); font-size: 13px; letter-spacing: .04em; }
.ex-bar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ex-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(15, 23, 42, .12); border-radius: 8px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; transition: border-color .2s, color .2s, background-color .2s; }
.ex-chip:hover { border-color: var(--accent); color: var(--accent); }
.ex-chip-solid { border-color: var(--side); background: var(--side); color: #fff; }
.ex-chip-solid:hover { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
@media (max-width: 640px) {
  .ex-brand-name { display: none; }
  .ex-chip:not(.ex-lang) span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .ex-chip { padding: 8px 11px; }
}

/* Sheet */
.ex-page { max-width: 1000px; margin: 24px auto 0; padding: 0 20px 56px; }
.ex-paper { display: grid; grid-template-columns: 300px 1fr; overflow: hidden; border-radius: 4px; background: var(--paper); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 28px 60px -28px rgba(15, 23, 42, .3); }
/* The body comes first in the source; the sidebar is moved to the first column on wide
   screens and on paper. Phones keep source order (name first). Screen-only, because an A4
   page (794 px) would otherwise match this query when printing. */
@media screen and (max-width: 820px) { .ex-paper { grid-template-columns: 1fr; } .ex-paper > .ex-side { order: 0; } }

.ex-side { order: -1; display: flex; flex-direction: column; gap: 28px; padding: 40px 30px; background: var(--side); color: var(--side-text); }
.ex-photo { width: 150px; height: 150px; margin: 0 auto 4px; overflow: hidden; border: 4px solid var(--accent); border-radius: 50%; box-shadow: 0 0 0 7px rgba(255, 255, 255, .05); }
.ex-photo img { width: 100%; height: 100%; object-fit: cover; }
.ex-side-h { position: relative; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.ex-side-h::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; width: 38px; height: 2px; background: var(--accent); }
[dir="rtl"] .ex-side-h { font-size: 15px; letter-spacing: 0; }

.ex-contact { display: grid; gap: 11px; }
.ex-contact li { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.5; }
.ex-contact li > i { width: 16px; margin-top: 3px; color: var(--accent); text-align: center; }
.ex-contact small { display: none; }
.ex-contact div { min-width: 0; }
.ex-contact a, .ex-contact span { overflow-wrap: anywhere; color: var(--side-text); }
[dir="rtl"] .ex-contact a[dir="ltr"] { display: inline-block; }
.ex-contact a:hover { color: #fff; }

.ex-skills { display: grid; gap: 11px; }
.ex-skills li { display: grid; gap: 5px; font-size: 13.5px; line-height: 1.4; }
.ex-track { height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.ex-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.ex-langs { display: grid; gap: 12px; }
.ex-langs li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ex-langs strong { display: block; color: #fff; font-size: 14px; font-weight: 600; }
.ex-langs small { color: var(--side-muted); font-size: 12px; }
.ex-dots { display: flex; gap: 4px; }
.ex-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.ex-dots i.on { background: var(--accent); }
.ex-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-tags li { padding: 2px 10px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 4px; font-size: 12.5px; }
.ex-links { display: grid; gap: 9px; }
.ex-links a { display: flex; align-items: center; gap: 10px; color: var(--side-text); font-size: 13px; overflow-wrap: anywhere; }
.ex-links a:hover { color: #fff; }
.ex-links i { width: 16px; color: var(--accent); text-align: center; }
[dir="rtl"] .ex-links a { justify-content: flex-end; }

/* QR to the online CV — pinned to the bottom of the side column, on screen and on paper */
.ex-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; text-align: center; break-inside: avoid; }
.ex-qr img { width: 116px; height: 116px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .07); }
.ex-qr figcaption { display: grid; gap: 1px; color: var(--side-muted); font-size: 12px; line-height: 1.45; }
.ex-qr figcaption span { color: var(--side-text); font-weight: 600; letter-spacing: .03em; }

/* Main column */
.ex-body { min-width: 0; padding: 44px 44px 36px; }
@media (max-width: 640px) { .ex-body { padding: 30px 22px; } .ex-side { padding: 30px 22px; } }
.ex-head { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 2px solid var(--line); }
.ex-head h1 { color: var(--ink); font-size: clamp(2rem, 4.6vw, 2.7rem); font-weight: 700; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; }
[dir="rtl"] .ex-head h1 { font-weight: 800; letter-spacing: 0; line-height: 1.35; text-transform: none; }
.ex-role { margin-top: 10px; color: var(--accent); color: color-mix(in srgb, var(--accent) 60%, #000); font-size: 1.02rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
[dir="rtl"] .ex-role { font-size: 1.1rem; letter-spacing: 0; }
.ex-available { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; padding: 4px 12px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 13px; font-weight: 600; }

/* Company line under the role (screen + paper) */
.ex-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.ex-head-meta .ex-available { margin-top: 0; }
.ex-co { display: inline-flex; align-items: center; gap: 11px; max-width: 100%; padding-block: 5px; padding-inline: 5px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fbfcfd; transition: border-color .2s, box-shadow .2s, transform .2s; }
a.ex-co:hover { border-color: rgba(var(--accent-rgb), .7); box-shadow: 0 10px 24px -16px rgba(15, 23, 42, .45); transform: translateY(-1px); }
.ex-co-logo { display: block; width: 40px; height: 40px; flex: none; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(var(--accent-rgb), .55); }
.ex-co-logo img { width: 100%; height: 100%; object-fit: cover; }
.ex-co-logo .cv-mono { border-radius: 50%; font-size: 14px; }
.ex-co-text { display: grid; min-width: 0; line-height: 1.3; }
.ex-co-text small { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
[dir="rtl"] .ex-co-text small { font-size: 12.5px; letter-spacing: 0; }
.ex-co-text strong { color: var(--ink); font-size: 14.5px; font-weight: 700; }
.ex-co-url { margin-inline-start: 3px; padding-inline-start: 12px; border-inline-start: 1px solid var(--line); color: var(--accent); color: color-mix(in srgb, var(--accent) 65%, #000); font-size: 13px; font-weight: 600; white-space: nowrap; }
[dir="rtl"] .ex-co-url { margin-left: 0; margin-right: 3px; padding-left: 0; padding-right: 12px; border-left: 0; border-right: 1px solid var(--line); }
a.ex-co:hover .ex-co-url { color: var(--accent); }
@media screen and (max-width: 520px) { .ex-co-url { display: none; } }

.ex-sec { margin-bottom: 28px; scroll-margin-top: 80px; }
.ex-sec > h2, .ex-card h2 { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
[dir="rtl"] .ex-sec > h2, [dir="rtl"] .ex-card h2 { font-size: 17px; letter-spacing: 0; }
.ex-sec > h2 i, .ex-card h2 i { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--side); color: var(--accent); font-size: 12px; }
.ex-sec > h2::after, .ex-card h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ex-text p + p { margin-top: 10px; }
.ex-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ex-stats > div { flex: 1 1 100px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; text-align: center; }
.ex-stats dt { color: var(--ink); font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.ex-stats dd { color: var(--muted); font-size: 12px; line-height: 1.35; }

.ex-tl { position: relative; padding-inline-start: 24px; }
.ex-tl::before { content: ""; position: absolute; inset-inline-start: 5px; top: 8px; bottom: 10px; width: 2px; background: var(--line); }
.ex-item { position: relative; padding-bottom: 18px; break-inside: avoid; }
.ex-item:last-child { padding-bottom: 0; }
.ex-item::before { content: ""; position: absolute; inset-inline-start: -24px; top: 7px; width: 12px; height: 12px; border: 3px solid var(--accent); border-radius: 50%; background: #fff; }
.ex-item-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.ex-item h3 { color: var(--ink); font-size: 1.04rem; font-weight: 700; line-height: 1.4; }
.ex-date { padding: 1px 8px; border-radius: 4px; background: rgba(var(--accent-rgb), .12); color: var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ex-org { margin-top: 2px; color: var(--muted); font-size: 14px; font-weight: 600; }
.ex-org a:hover { color: var(--accent); }
.ex-desc { margin-top: 6px; font-size: 14.5px; }
.ex-points { display: grid; gap: 4px; margin-top: 7px; font-size: 14.5px; }
.ex-points li { position: relative; padding-inline-start: 16px; }
.ex-points li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .68em; width: 6px; height: 6px; background: var(--accent); }

.ex-projects { display: grid; gap: 14px; }
.ex-proj { break-inside: avoid; }
.ex-proj h3 { color: var(--ink); font-size: 1rem; font-weight: 700; }
.ex-proj h3 a { margin-inline-start: 6px; color: var(--accent); font-size: 13px; font-weight: 600; }
.ex-proj p { font-size: 14.5px; }
.ex-proj-tags { margin-top: 2px; color: var(--muted); font-size: 13px !important; }

.ex-certs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
@media (max-width: 640px) { .ex-certs { grid-template-columns: 1fr; } }
.ex-certs li { display: flex; gap: 10px; break-inside: avoid; font-size: 13.5px; line-height: 1.45; }
.ex-certs li > i { margin-top: 3px; color: var(--accent); }
.ex-certs strong { display: block; color: var(--ink); font-weight: 600; }
.ex-certs span { color: var(--muted); font-size: 12.5px; }

/* Screen-only extras */
.ex-extras { display: grid; gap: 22px; margin-top: 26px; }
.ex-card { padding: 30px; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); scroll-margin-top: 80px; }
@media (max-width: 640px) { .ex-card { padding: 22px; } }
.ex-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.ex-shot { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #fff; transition: transform .25s, box-shadow .25s, border-color .25s; }
.ex-shot:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .6); box-shadow: 0 14px 30px -18px rgba(15, 23, 42, .4); }
.ex-shot-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f4f6f9; }
.ex-shot-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ex-shot-cap { padding: 10px 12px; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.4; }
/* Project showcase: wide screenshots in a 16:9 frame (cover, no letterboxing), monogram tile otherwise */
.ex-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 16px; }
.ex-pshot { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #fff; transition: transform .25s, box-shadow .25s, border-color .25s; }
a.ex-pshot:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .6); box-shadow: 0 16px 34px -20px rgba(15, 23, 42, .45); }
.ex-pshot-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--side); font-size: 1.6rem; }
.ex-pshot-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
a.ex-pshot:hover .ex-pshot-img img { transform: scale(1.05); }
.ex-pshot-img .cv-mono { background: radial-gradient(120% 120% at 0% 0%, rgba(var(--accent-rgb), .32), rgba(var(--accent-rgb), .06)), var(--side); }
.ex-pshot-cap { display: grid; gap: 3px; padding: 12px 14px 14px; border-top: 3px solid var(--accent); }
.ex-pshot-cap strong { color: var(--ink); font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.ex-pshot-cap small { color: var(--muted); font-size: 12.5px; }
.ex-pshot-go { position: absolute; top: 10px; inset-inline-end: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(23, 32, 51, .78); color: #fff; font-size: 11px; opacity: 0; transition: opacity .2s; }
a.ex-pshot:hover .ex-pshot-go, a.ex-pshot:focus-visible .ex-pshot-go { opacity: 1; }
@media (hover: none) { .ex-pshot-go { opacity: 1; } }
/* Recommendations (screen-only card): quote with an accent rule, the person underneath */
.ex-quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 16px; }
.ex-quotes > li { display: flex; }
.ex-quote { display: flex; flex: 1; flex-direction: column; gap: 16px; min-width: 0; padding: 22px 22px 18px; border: 1px solid var(--line); border-inline-start: 3px solid var(--accent); border-radius: 6px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.ex-quote:hover { border-color: rgba(var(--accent-rgb), .6); border-inline-start-color: var(--accent); box-shadow: 0 14px 30px -20px rgba(15, 23, 42, .4); }
.ex-quote-text { color: var(--text); font-size: 14.5px; line-height: 1.7; }
[dir="rtl"] .ex-quote-text, .ex-quote-text[dir="rtl"] { font-size: 15px; line-height: 1.85; }
.ex-quote-text::before { content: "\f10d"; display: block; margin-bottom: 12px; color: var(--accent); font: 900 20px/1 "Font Awesome 6 Free"; }
[dir="rtl"] .ex-quote-text::before, .ex-quote-text[dir="rtl"]::before { content: "\f10e"; }
[dir="rtl"] .ex-quote-text[dir="ltr"]::before { content: "\f10d"; }
.ex-quote-text p + p { margin-top: 10px; }
.ex-quote-by { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.ex-quote-ava { display: block; width: 44px; height: 44px; flex: none; overflow: hidden; border: 2px solid var(--accent); border-radius: 50%; font-size: 14px; }
.ex-quote-ava img { width: 100%; height: 100%; object-fit: cover; }
.ex-quote-ava .cv-mono { border-radius: 50%; background: var(--side); }
.ex-quote-who { display: grid; min-width: 0; line-height: 1.4; }
.ex-quote-who strong { color: var(--ink); font-size: 14.5px; font-weight: 700; }
.ex-quote-who a { display: inline-flex; align-items: center; gap: 7px; justify-self: start; }
.ex-quote-who a i { color: var(--muted); font-size: 10.5px; transition: color .2s; }
.ex-quote-who a:hover strong, .ex-quote-who a:hover i { color: var(--accent); color: color-mix(in srgb, var(--accent) 70%, #000); }
.ex-quote-who small { color: var(--muted); font-size: 13px; }
.ex-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ex-services li { padding: 20px; border: 1px solid var(--line); border-radius: 6px; transition: border-color .2s; }
.ex-services li:hover { border-color: rgba(var(--accent-rgb), .6); }
.ex-services i { margin-bottom: 12px; color: var(--accent); font-size: 22px; }
.ex-services h3 { color: var(--ink); font-size: 15.5px; font-weight: 700; }
.ex-services p { margin-top: 4px; font-size: 14px; }
.ex-contact-card { display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px; }
@media screen and (max-width: 820px) { .ex-contact-card { grid-template-columns: 1fr; } }
.ex-lead { color: var(--text); }
.ex-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ex-social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; background: var(--side); color: #fff; font-size: 17px; transition: background-color .2s, color .2s; }
.ex-social a:hover { background: var(--accent); color: var(--on-accent); }
.ex-form .cv-field span { color: var(--ink); font-weight: 600; }
.ex-form input, .ex-form textarea { border-color: var(--line); border-radius: 6px; background: #fbfcfd; }
.ex-form .cv-form-btn { border-radius: 6px; background: var(--side); color: #fff; }
.ex-form .cv-form-btn:hover { background: var(--accent); color: var(--on-accent); }
.ex-foot { margin-top: 26px; color: var(--muted); font-size: 13px; text-align: center; }

/* Print preview mode (?print=1) */
.is-print .ex-page { margin-top: 24px; }
.ex-print-fab { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 70; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--side); color: #fff; font-weight: 700; box-shadow: 0 14px 30px -10px rgba(15, 23, 42, .5); }

@page { size: A4; margin: 0; }
/* Engines that cannot repeat padding on every page fragment get real page margins instead,
   so page 2 does not start at the paper edge (the first page keeps the full-bleed top). */
@supports not (box-decoration-break: clone) {
  @page { margin: 10mm 0; }
  @page :first { margin-top: 0; }
  @media print { .ex-paper { min-height: 287mm !important; } }
}
@media print {
  .ex-head-meta { margin-top: 6px; }
  .ex-co { padding-block: 0; }
  .ex-co-logo { width: 7mm; height: 7mm; }
  .t-exec { background: #fff; font-size: 12.4px; line-height: 1.5; }
  [dir="rtl"] .t-exec { font-size: 12.8px; line-height: 1.65; }
  .ex-bar, .ex-extras, .ex-foot, .ex-print-fab, .ex-available { display: none !important; }
  .ex-page { max-width: none; margin: 0; padding: 0; }
  .ex-paper { grid-template-columns: 68mm 1fr; min-height: 297mm; overflow: visible; border-radius: 0; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ex-side, .ex-body { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .ex-side { gap: 18px; padding: 12mm 7mm 10mm; }
  .ex-photo { width: 34mm; height: 34mm; border-width: 3px; }
  .ex-body { padding: 12mm 11mm 10mm; }
  .ex-head { margin-bottom: 14px; padding-bottom: 12px; }
  .ex-head h1 { font-size: 26pt; }
  .ex-sec { margin-bottom: 14px; }
  .ex-sec > h2 { margin-bottom: 10px; font-size: 11pt; }
  .ex-sec > h2 i { width: 24px; height: 24px; font-size: 10px; }
  .ex-item { padding-bottom: 10px; }
  .ex-desc, .ex-points, .ex-proj p { font-size: 11.6px; }
  .ex-stats > div { padding: 6px 8px; }
  .ex-stats dt { font-size: 14pt; }
  .ex-certs { gap: 7px 16px; }
  .ex-proj, .ex-item, .ex-certs li { break-inside: avoid; }
  .ex-sec > h2 { break-after: avoid; }
  /* Company line: compact, no hover chrome; the short web address stands in for the link */
  .ex-head-meta { margin-top: 9px; }
  .ex-co { gap: 2.5mm; padding-block: 1mm; padding-inline: 1mm 3.5mm; background: none; box-shadow: none; transform: none; }
  .ex-co-logo { width: 9mm; height: 9mm; box-shadow: 0 0 0 1px var(--line); }
  .ex-co-text small, [dir="rtl"] .ex-co-text small { font-size: 7.5pt; }
  .ex-co-text strong { font-size: 10pt; }
  .ex-co-url { font-size: 9pt; }
  /* QR: about 30 mm, the bridge from paper to the online CV */
  .ex-qr { gap: 2mm; padding-top: 0; }
  .ex-qr img { width: 30mm; height: 30mm; border-radius: 2mm; box-shadow: none; }
  .ex-qr figcaption { font-size: 8.5pt; line-height: 1.4; }
}