/* inner-pages.css — fills the gaps for Noxfolio-layout inner pages (About, Capabilities, Works,
   Project details, Tafannon, article). Loads last. Scoped to body.inner-page so the home page is untouched. */

body.inner-page { background: var(--color-bg); }
body.inner-page .page-banner-area { background: transparent; }
body.inner-page .page-banner-area .page-title { font-size: clamp(2.5rem, 1.5rem + 4vw, 4.75rem); letter-spacing: -0.03em; line-height: 1.05; max-width: 22ch; margin: 0 auto 14px; }
body.inner-page .banner-ar { font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif; color: var(--color-brand); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); margin: 0 0 18px; }
body.inner-page .breadcrumb { background: none; margin: 0; }
body.inner-page .breadcrumb-item a { color: rgba(255,255,255,.65); }
body.inner-page .breadcrumb-item.active { color: var(--color-brand); }
body.inner-page .works-lede { max-width: 60ch; margin: 0 auto 30px; color: rgba(255,255,255,.65); font-size: var(--fs-18); }

/* About: portrait with the experience badge */
.about-portrait { position: relative; border-radius: 16px; overflow: visible; }
.about-portrait img { width: 100%; height: auto; border-radius: 16px; background: var(--color-panel); display: block; }
.about-portrait .experience-years { position: absolute; top: auto; bottom: 24px; right: -18px; transform: none; width: 150px; height: 150px; border-radius: 50%; background: var(--color-brand); color: var(--color-ink); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; }
.about-portrait .experience-years b { font-family: "DM Sans", sans-serif; font-size: var(--fs-45); line-height: 1; color: var(--color-ink); }
.about-portrait .experience-years h5 { color: var(--color-ink); font-size: var(--fs-14); margin: 6px 0 0; line-height: 1.2; }
@media (max-width: 991.98px) { .about-portrait { max-width: 460px; margin: 0 auto; } .about-portrait .experience-years { right: 8px; } }

/* About: metric "numbers" are wider than 01. */
.metric-items .service-item .number { color: var(--color-brand); font-size: var(--fs-35); font-weight: 700; min-width: 140px; margin-right: 30px; line-height: 1; }
@media (max-width: 575.98px) { .metric-items .service-item .number { min-width: 0; font-size: var(--fs-28); } }

/* About: awards */
.aw-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.1); }
.aw-list li { display: grid; grid-template-columns: 140px 1.2fr 2fr; gap: 6px 30px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.1); align-items: baseline; }
.aw-medal { font-family: "DM Sans", sans-serif; font-weight: 700; color: var(--color-white); font-size: var(--fs-20); }
.aw-medal.gold { color: var(--color-brand); }
.aw-name { color: var(--color-white); font-weight: 500; }
.aw-cat { color: rgba(255,255,255,.65); }
@media (max-width: 767.98px) { .aw-list li { grid-template-columns: 1fr; } }

/* About: trusted-by names */
.client-logo-area .section-title h6 span { color: var(--color-brand); }
.trusted-names { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: 40px; }
.trusted-names li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: var(--color-white); font-family: "DM Sans", sans-serif; font-size: var(--fs-17); }
@media (max-width: 991.98px) { .trusted-names { columns: 3; } }
@media (max-width: 575.98px) { .trusted-names { columns: 2; column-gap: 20px; } }

/* Capabilities: real images in the "what I do" frames, sector list */
.what-i-do-images img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.service-item .content h4 a { color: inherit; }
.service-item .content h4 a:hover { color: var(--color-brand); }
.sector-list { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; columns: 2; column-gap: 50px; }
.sector-list li { break-inside: avoid; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.1); color: var(--color-white); font-family: "DM Sans", sans-serif; font-size: var(--fs-18); }
@media (max-width: 767.98px) { .sector-list { columns: 1; } }

/* Works: real key visuals in the masonry + archive table */
.projects-masonry-area .project-image img { width: 100%; height: auto; display: block; }
.archive-wrap { overflow-x: auto; border-top: 1px solid rgba(255,255,255,.22); }
.archive { width: 100%; border-collapse: collapse; }
.archive thead th { color: rgba(255,255,255,.45); font-weight: 500; font-size: var(--fs-14); padding: 14px 16px 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); text-align: left; white-space: nowrap; }
.archive tbody th, .archive td { padding: 14px 16px 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.archive tbody th { color: var(--color-white); font-family: "DM Sans", sans-serif; font-weight: 600; font-size: var(--fs-17); text-align: left; }
.archive tbody th a { color: var(--color-white); text-decoration: underline; text-decoration-color: var(--color-brand); text-underline-offset: 4px; }
.archive tbody th a:hover { color: var(--color-brand); }
.archive .cs { margin-left: 10px; font-size: var(--fs-12); font-weight: 500; color: var(--color-ink); background: var(--color-brand); border-radius: 999px; padding: 2px 8px; }
.archive td { color: rgba(255,255,255,.65); font-size: var(--fs-14); }
.archive .num { text-align: right; padding-right: 0; white-space: nowrap; }
.archive tbody td.num:last-child { color: var(--color-white); font-weight: 600; font-size: var(--fs-17); }
@media (max-width: 767.98px) { .archive th:nth-child(2), .archive td:nth-child(2), .archive th:nth-child(3), .archive td:nth-child(3) { display: none; } }

/* Project details */
.projects-details-image img { width: 100%; max-height: 590px; object-fit: cover; object-position: center 30%; border-radius: 14px; }
.projects-details-area .image img { width: 100%; aspect-ratio: 410 / 320; object-fit: cover; border-radius: 12px; }
.project-details-info .pd-info-item h5, .project-details-info .pd-info-item span { color: var(--color-ink); }
.pd-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 10px 0 28px; }
.pd-metrics b { display: block; font-family: "DM Sans", sans-serif; font-size: var(--fs-45); line-height: 1; color: var(--color-brand); margin-bottom: 8px; }
.pd-metrics span { color: rgba(255,255,255,.65); font-size: var(--fs-15); }
@media (max-width: 767.98px) { .pd-metrics { grid-template-columns: 1fr 1fr; } }
.related-projects-area .project-image img { width: 100%; aspect-ratio: 410 / 390; object-fit: cover; }

/* Tafannon */
.blog-item.style-two .image img { width: 100%; aspect-ratio: 406 / 300; object-fit: cover; }
.blog-item.style-two .content p { color: rgba(255,255,255,.65); margin: 0; }
.widget-recent-news .image img { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; }
.cta-widget { background: var(--color-panel); border: 1px solid rgba(var(--color-brand-rgb),.35); padding-top: 50px; }
.cta-widget::before { display: none; }
.article-hero img { width: 100%; max-height: 520px; object-fit: cover; object-position: center 20%; border-radius: 14px; }
.next-prev-post .post-item .image img { width: 65px; height: 65px; object-fit: cover; border-radius: 8px; }
.blog-details-wrap .content a:not(.tag):not(.details-btn) { color: var(--color-brand); }

/* Contact form inside the shared contact strip (validated by templates.js) */
.field .err { display: none; color: var(--color-error); font-size: var(--fs-14); margin: 6px 0 0; }
.field.invalid .err { display: block; }
.field.invalid .form-control { border-color: var(--color-error); }
.form-status { font-size: var(--fs-14); margin: 12px 0 0; min-height: 1.4em; }
.form-status.ok { color: var(--color-brand); }
.form-status.bad { color: var(--color-error); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Grid classes the trimmed bootstrap.min.css doesn't ship (it only keeps what the home page uses) */
@media (min-width: 576px) { .col-sm-6 { flex: 0 0 auto; width: 50%; } }
@media (min-width: 992px) {
  .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
}
@media (min-width: 1200px) {
  .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
}

/* Skip link (header.css in this folder predates it) */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 2000; background: var(--color-brand); color: var(--color-ink) !important; padding: 10px 16px; border-radius: 12px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* Article: author photos are full-size cut-outs; keep them as avatars */
.author-date-share .author img { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--color-panel); }
.admin-comment .author-thumb img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--color-panel); }

/* Works: note shown when a pillar has no published case study yet */
.works-empty { color: rgba(255,255,255,.65); font-size: var(--fs-17); padding: 30px 0 10px; }
.project-filter li:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }

/* Works: project gallery (previews from _gallery-work) */
.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 24px; }
.gallery-grid li[hidden] { display: none; }
.gallery-card a { display: block; color: var(--color-white); text-decoration: none; }
.gallery-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; background: var(--color-panel); }
.gallery-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gallery-card a:hover img { transform: scale(1.04); }
.gallery-pillar { display: block; margin-top: 14px; color: var(--color-brand); font-size: var(--fs-13); }
.gallery-title { display: block; margin-top: 4px; font-family: "DM Sans", sans-serif; font-size: var(--fs-18); font-weight: 600; line-height: 1.3; }
.gallery-card a:hover .gallery-title { color: var(--color-brand); }
.gallery-card a:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; border-radius: 14px; }
@media (max-width: 1199.98px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } .gallery-title { font-size: var(--fs-16); } }

/* Works: CV call-to-action band */
.pv-cta-band { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding: 40px 46px; border: 1px solid rgba(var(--color-brand-rgb),.35); border-radius: 16px; background: var(--color-panel); }
.pv-cta-band .sub-title { color: var(--color-brand); font-size: var(--fs-15); }
.pv-cta-band h3 { margin: 8px 0 0; font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem); max-width: 34ch; }
@media (max-width: 575.98px) { .pv-cta-band { padding: 28px 22px; } }

/* Visible breadcrumb (matches the BreadcrumbList JSON-LD) */
.crumbs { margin: 0 0 28px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; padding: 0; list-style: none; font-size: var(--fs-14); letter-spacing: .02em; }
.crumbs li { display: inline-flex; align-items: center; color: rgba(255,255,255,.55); }
.crumbs li + li::before { content: "/"; margin: 0 12px; color: rgba(255,255,255,.28); }
.crumbs a { color: rgba(255,255,255,.75); text-decoration: none; transition: color .2s; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--color-brand); }
.crumbs [aria-current="page"] { color: var(--color-brand); }

/* FAQ uses the AI Engine bilingual masthead, scoped to preserve its question layout. */
:is(.faq-mast, .page-ai-mast) { padding:88px 0 56px; }
:is(.faq-mast, .page-ai-mast) .wrap { max-width:1280px; margin:0 auto; padding:0 40px; }
:is(.faq-mast, .page-ai-mast) .crumbs { margin-bottom:32px; font-size:var(--fs-13); color:rgba(242,243,245,.4); }
:is(.faq-mast, .page-ai-mast) .crumbs ol { display:flex; gap:12px; list-style:none; padding:0; margin:0; }
:is(.faq-mast, .page-ai-mast) .crumbs li + li::before { content:'/'; margin-right:12px; }
:is(.faq-mast, .page-ai-mast) .mast-titles { display:grid; grid-template-columns:1fr auto; align-items:end; gap:24px 48px; }
:is(.faq-mast, .page-ai-mast) .mast-en { font-family:'DM Sans',system-ui,sans-serif; font-size:var(--fs-fluid-mast); line-height:.88; letter-spacing:-.045em; font-weight:600; margin:0; }
:is(.faq-mast, .page-ai-mast) .mast-en .ln { display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.1em; }
:is(.faq-mast, .page-ai-mast) .mast-en .ln > span { display:inline-block; }
:is(.faq-mast, .page-ai-mast) .mast-ar { font-family:'IBM Plex Sans Arabic','Tajawal',sans-serif; font-weight:500; color:var(--color-brand); font-size:calc(var(--fs-fluid-mast) * .42); line-height:1.2; text-align:right; padding-bottom:.2em; margin:0; }
@media (max-width: 991.98px) { :is(.faq-mast, .page-ai-mast) { padding:56px 0 40px; } :is(.faq-mast, .page-ai-mast) .mast-titles { grid-template-columns:1fr; } :is(.faq-mast, .page-ai-mast) .mast-ar { font-size:clamp(1.75rem,8vw,2.5rem); } }
@media (max-width: 767.98px) { :is(.faq-mast, .page-ai-mast) .wrap { padding:0 20px; } }
@media (max-width: 479.98px) { :is(.faq-mast, .page-ai-mast) .mast-en { font-size:clamp(2.5rem,12vw,3.5rem); } }

.page-ai-mast .mast-foot { margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); }
.page-ai-mast .mast-lede { font-size:var(--fs-22); color:rgba(242,243,245,.62); margin:0; }

/* About annotation refinements, scoped to the page. */
.about-page .page-ai-mast { background:#121211; border:0 solid #b8b8b8; border-radius:2px; }
.about-page .about-page-area { padding-top:75px; padding-bottom:75px; }
.about-page .about-portrait img { background:transparent; border-color:#191e25; }
.about-page .about-page-content-part > .theme-btn { padding-left:24px; padding-right:24px; margin-left:0; }
.about-page .about-heading-icon { vertical-align:middle; margin-right:8px; max-width:none; }
.about-page #faq-accordion .accordion-button { padding-left:24px; padding-right:60px; position:relative; }
.about-page #faq-accordion .accordion-button::before { content:none; display:none; }
.about-page #faq-accordion .accordion-button::after { content:'−'; position:absolute; right:20px; top:50%; transform:translateY(-50%); width:28px; height:28px; margin:0; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:none; display:grid; place-items:center; font-family:Arial,sans-serif; font-size:var(--fs-20); line-height:1; color:var(--color-brand); }
.about-page #faq-accordion .accordion-button.collapsed::after { content:'+'; }
.about-page #faq { background:#010101; padding:115px 0; }
.about-page .trusted-names { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); columns:auto; gap:16px; list-style:none; padding:0; }
.about-page .trusted-names .client-card { min-height:130px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.03); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:20px; break-inside:avoid; }
.about-page .client-card img { width:150px; max-width:100%; height:55px; object-fit:contain; }

@media(max-width: 767.98px) { .about-page .trusted-names { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Match header gutters, with the question column centered inside them. */
.about-page #faq > .container { width:100%; max-width:1440px; margin-inline:auto; padding-inline:40px; }
.about-page #faq .faq-head, .about-page #faq .faq-list { width:100%; max-width:980px; margin-inline:auto; }
@media(max-width: 767.98px) { .about-page #faq > .container { padding-inline:20px; } }

/* About heading and accordion alignment. */
.about-page .about-page-content-part .about-heading-icon { width:15px; height:15px; margin-top:7px; }
.about-page .services-area .about-heading-icon, .about-page .faq-content-part .about-heading-icon { width:15px; height:15px; margin-top:8px; }
.about-page #faq-accordion .accordion-item { padding-left:20px; padding-right:20px; }
.about-page #faq-accordion .accordion-header { margin:0; }
.about-page #faq-accordion .accordion-button { display:block; width:100%; text-align:left; padding:20px 48px 20px 18px; white-space:normal; }
.about-page #faq-accordion .accordion-button::after { right:0; }
.about-page #faq-accordion .accordion-body { padding:0 18px 24px; }
@media(max-width: 767.98px) { .about-page #faq-accordion .accordion-item { padding-inline:12px; } .about-page #faq-accordion .accordion-button { padding-left:8px; } .about-page #faq-accordion .accordion-body { padding-left:8px; padding-right:8px; } }

.about-page .awards-list-area .about-heading-icon { width:15px; height:15px; margin-top:7px; }
.about-page #faq .faq-eyebrow { display:inline-flex; align-items:center; gap:8px; }
.about-page #faq .faq-eyebrow img { max-width:none; }