/* =============================================================================================
   Design-token layer for the content pages (body.system-page — services, industries, solutions,
   technologies, blog, careers, works, legal…). Loaded last on those pages so their older
   per-template styles resolve to the same Figma tokens the homepage and Figma pages use.
   Figma "Webcastle-Qatar" tokens:
     text/primary #000 · text/secondary #404040 · text/tertiary #797979 · text/on-dark #c8c8c8
     accent/primary #06b22d · bg/secondary #f8f9fa · bg/tertiary #f5f5f5 · border/default #e5e5e5
     H1 60/70 -1 · H2 52/60 -1 · H3 32/38 M · H4 24/28 M · H5 20/26 M
     Body/Large 20/28 M · Body/Default 18/26 M · Body/Small 16/22 M · section padding 120px
   ============================================================================================= */

body.system-page {
  --ink: #000; --mute: #404040; --g: #06b22d; --g-deep: #06b22d;
  color: #000;
}

/* ---- Colour: collapse the near-duplicate greys and greens onto the tokens ---- */
html body.system-page :is(.sys-hero p, .q-page-hero p, .sys-directory-copy > p:not(.sys-number), .q-subhead p,
  .q-features .q-card p, .q-svc .q-prose, .q-prose, .q-card p, .q-directory-card p, .sys-article-toc a, .q-home-hero .js-hero-sub) { color: #404040 !important; }
html body.system-page :is(.q-page-hero nav, .q-page-hero nav *, .sys-number, .q-row-num, .q-person p + p, .q-article-meta) { color: #797979 !important; }
html body.system-page :is(.q-steps .q-prose, .q-steps .q-card p, .q-steps .q-subhead p, .q-band-copy .q-prose, .q-band-point p,
  .q-callout p, .q-step .q-step-body p, .q-hero p, .q-hero nav) { color: #c8c8c8 !important; }
html body.system-page :is(.q-prose a:not(.q-content-link), .sys-tech-link, .q-case-cat, .q-home-hero-eyebrow) { color: #06b22d !important; }
html body.system-page :is(.sys-hero h1, .q-page-hero h1, .q-home-hero h1, .q-prose h2, .q-prose h3, .q-prose h4) { color: #000; }

/* ---- Backgrounds and borders ---- */
html body.system-page :is(.q-split.q-tint, .q-checklist.q-tint, .q-logo-cards .q-case figure, .q-section-muted, .q-home-hero [data-hero-next]) { background-color: #f8f9fa !important; }
html body.system-page :is(.q-hero) { background-color: #000 !important; }
html body.system-page :is(.q-step) { background: #191919 !important; border-color: #333 !important; }
html body.system-page :is(.q-card, .q-slide, .q-case, .q-features .q-card, .q-svc .q-prose li, .q-row, .pack-card,
  [data-compact-rows] .q-row, .q-logo-cards .q-case figure, .sys-tags li, .sys-hero) { border-color: #e5e5e5 !important; }
html body.system-page[data-system-family="technologies"] main .shadow-sm { border-color: #e5e5e5 !important; }
html body.system-page .q-features .q-card { box-shadow: none !important; }

/* ---- Typography ---- */
/* Page title (H1): 60/70, -1px */
html body.system-page main :is(.sys-hero h1, .q-page-hero h1, .q-hero h1, .q-home-hero h1) {
  font-size: 60px !important; line-height: 70px !important; letter-spacing: -1px !important; font-weight: 400 !important;
}
/* Section headings (H2): 52/60, -1px — content inside articles uses H3 below */
html body.system-page main h2:not(.q-article h2):not(.q-article-body h2):not(.sys-article-layout .q-prose h2):not(.sr-only):not(.ind-d-cta h2):not(.wd-block h2):not(.ra-need h2):not(.ct-box h2):not(.pv-card h2) {
  font-size: 52px !important; line-height: 60px !important; letter-spacing: -1px !important; font-weight: 400 !important;
}
/* Article body headings: H3 32/38 Medium, H4 24/28 Medium */
html body.system-page :is(.q-article, .sys-article-layout .q-prose) h2 { font-size: 32px !important; line-height: 38px !important; letter-spacing: 0 !important; font-weight: 500 !important; }
html body.system-page :is(.q-article, .sys-article-layout .q-prose) h3 { font-size: 24px !important; line-height: 28px !important; letter-spacing: 0 !important; font-weight: 500 !important; }
/* Card / block titles: H4 24/28 Medium; dense cards H5 20/26 Medium */
html body.system-page main h3:not(.q-article h3):not(.sys-article-layout .q-prose h3):not(.q-stats-band h3):not(.ind-row h3):not(.wd-block h3):not(.ra-model h3) {
  font-size: 24px !important; line-height: 28px !important; letter-spacing: 0 !important; font-weight: 500 !important;
}
html body.system-page main :is(.q-features .q-card h3, .q-steps .q-card h3, .q-step h3, .q-logo-cards .q-case h3, .q-row h3, .q-band-point h3, .q-card h3, .pack-card h3, .ind-d-why-grid h3) {
  font-size: 20px !important; line-height: 26px !important;
}
/* Stats numbers: display style 52/60 Regular */
html body.system-page main .q-stats-band .q-card h3 { font-size: 52px !important; line-height: 60px !important; letter-spacing: -1px !important; font-weight: 400 !important; }
/* Lead paragraphs: Body/Large 20/28 Medium */
html body.system-page main :is(.sys-hero p, .q-page-hero p, .q-hero p, .q-intro .q-prose > p:first-child, .q-intro .q-intro-copy p:first-of-type,
  .q-split .q-prose > p:first-of-type, .q-band-copy .q-prose > p:first-of-type, .q-home-hero .js-hero-sub) {
  font-size: 20px !important; line-height: 28px !important; letter-spacing: 0 !important; font-weight: 500 !important;
}
/* Body copy: Body/Default 18/26 Medium */
html body.system-page main :is(.q-prose, .q-prose p, .q-svc .q-prose, .q-intro .q-intro-copy p:not(:first-of-type), .q-intro-media .q-intro-copy p,
  .sys-directory-copy > p:not(.sys-number), .q-subhead p, .q-features .q-prose > p, .q-steps .q-prose > p, .sys-tags li, .q-svc .q-prose li) {
  font-size: 18px !important; line-height: 26px !important; font-weight: 500 !important;
}
/* Card copy: Body/Small 16/22 Medium */
html body.system-page main :is(.q-card p, .q-features .q-card p, .q-steps .q-card p, .q-step .q-step-body p, .q-directory-card p,
  .q-callout p, .q-band-point p, .q-person p + p, .pack-card p) {
  font-size: 16px !important; line-height: 22px !important; font-weight: 500 !important;
}
/* Small labels: UI/Label 14 SemiBold */
html body.system-page main :is(.sys-number, .q-row-num, .q-step-num, .q-case-cat, .q-article-meta, .q-home-hero-eyebrow) {
  font-size: 14px !important; line-height: 17px !important; font-weight: 600 !important; letter-spacing: 0 !important;
}

/* ---- Section rhythm: 120px like every Figma section (80 / 64 on smaller screens) ---- */
html body.system-page main :is(.q-section, .q-svc, [data-inner-polish] > section:not(.sys-hero):not([data-hero]):not(.sys-article-layout)):not(.q-page-hero):not(.sys-hero):not(.q-hero):not(.ind-d-hero):not(.ind-d-cta-wrap):not(.wd-hero):not(.wd-body):not(.wd-stats-wrap):not(.wd-more):not(.works-hero + section):not(.ra-hero):not(.ra-need):not(.ct-hero):not(.pv-hero):not(.os-hero):not(.os-banner):not(.sp-hero):not(.os-stats):not(.os-leaders):not(.ct-cta):not(.post-nav):not(.post-cover):not(.post-related) {
  padding-top: 120px !important; padding-bottom: 120px !important;
}

/* ---- Form fields: Figma input (bg/tertiary #f5f5f5, 50px, 16/22 Medium, no border) ---- */
html body.system-page main :is(.sys-search input, .q-filter input, .q-filter select, input[type="search"], select):not([type="hidden"]) {
  height: 50px; padding: 14px 16px !important; border: 0 !important; border-radius: 0; background: #f5f5f5 !important;
  font-size: 16px !important; line-height: 22px !important; font-weight: 500; color: #000;
}

/* ---- Responsive scale (matches the Figma pages' breakpoints) ---- */
@media (max-width: 900px) {
  html body.system-page main :is(.q-section, .q-svc, [data-inner-polish] > section:not(.sys-hero):not([data-hero]):not(.sys-article-layout)):not(.q-page-hero):not(.sys-hero):not(.q-hero):not(.ind-d-hero):not(.ind-d-cta-wrap):not(.wd-hero):not(.wd-body):not(.wd-stats-wrap):not(.wd-more):not(.works-hero + section):not(.ra-hero):not(.ra-need):not(.ct-hero):not(.pv-hero):not(.os-hero):not(.os-banner):not(.sp-hero):not(.os-stats):not(.os-leaders):not(.ct-cta):not(.post-nav):not(.post-cover):not(.post-related) { padding-top: 80px !important; padding-bottom: 80px !important; }
  html body.system-page main h2:not(.q-article h2):not(.q-article-body h2):not(.sys-article-layout .q-prose h2):not(.sr-only):not(.ind-d-cta h2):not(.wd-block h2):not(.ra-need h2):not(.ct-box h2):not(.pv-card h2) { font-size: 42px !important; line-height: 49px !important; }
  html body.system-page main :is(.sys-hero h1, .q-page-hero h1, .q-hero h1, .q-home-hero h1) { font-size: 48px !important; line-height: 56px !important; }
}
@media (max-width: 700px) {
  html body.system-page main :is(.q-section, .q-svc, [data-inner-polish] > section:not(.sys-hero):not([data-hero]):not(.sys-article-layout)):not(.q-page-hero):not(.sys-hero):not(.q-hero):not(.ind-d-hero):not(.ind-d-cta-wrap):not(.wd-hero):not(.wd-body):not(.wd-stats-wrap):not(.wd-more):not(.works-hero + section):not(.ra-hero):not(.ra-need):not(.ct-hero):not(.pv-hero):not(.os-hero):not(.os-banner):not(.sp-hero):not(.os-stats):not(.os-leaders):not(.ct-cta):not(.post-nav):not(.post-cover):not(.post-related) { padding-top: 64px !important; padding-bottom: 64px !important; }
  html body.system-page main h2:not(.q-article h2):not(.q-article-body h2):not(.sys-article-layout .q-prose h2):not(.sr-only):not(.ind-d-cta h2):not(.wd-block h2):not(.ra-need h2):not(.ct-box h2):not(.pv-card h2) { font-size: 36px !important; line-height: 42px !important; letter-spacing: -.6px !important; }
  html body.system-page main :is(.sys-hero h1, .q-page-hero h1, .q-hero h1, .q-home-hero h1) { font-size: 40px !important; line-height: 46px !important; }
  html body.system-page main :is(.sys-hero p, .q-page-hero p, .q-hero p, .q-intro .q-prose > p:first-child, .q-intro .q-intro-copy p:first-of-type, .q-split .q-prose > p:first-of-type, .q-band-copy .q-prose > p:first-of-type) { font-size: 18px !important; line-height: 26px !important; }
  html body.system-page :is(.q-article, .sys-article-layout .q-prose) h2 { font-size: 26px !important; line-height: 32px !important; }
  html body.system-page main h3:not(.q-article h3):not(.sys-article-layout .q-prose h3):not(.q-stats-band h3):not(.ind-row h3):not(.wd-block h3):not(.ra-model h3) { font-size: 20px !important; line-height: 26px !important; }
  html body.system-page main .q-stats-band .q-card h3 { font-size: 42px !important; line-height: 50px !important; }
}

/* Restore the Figma type scale for shared utility classes on content pages
   (remaining-pages.css redefined --text-h4 as 26/34 there). */
body.system-page {
  --text-h2: 52px; --text-h2--line-height: 60px;
  --text-h4: 24px; --text-h4--line-height: 28px;
}
html body.system-page main [class*="var(--text-h4)"] { font-weight: 500; line-height: 28px !important; }
html body.system-page main :is([class*="var(--text-ui-label)"], [class*="var(--text-ui-tag)"]) { line-height: 17px !important; }
/* Figma body text is Gilroy Medium (headings set their own weights above). */
body.system-page { font-weight: 500; }
/* Near-black text leftovers -> text/primary #000 */
html body.system-page :is(.q-directory-card, .pack-overview, .pack-capabilities, .sys-editorial-heading, [aria-labelledby="team-videos-heading"] h2, .sys-hero, .q-page-hero) { color: #000; }
/* Industries list: H3 names (32/38 Medium) — overrides the generic content-page h3 size above. */
html body.system-page main .ind-row > summary h3 { font-size: 32px !important; line-height: 38px !important; font-weight: 500 !important; }
@media (max-width: 700px) { html body.system-page main .ind-row > summary h3 { font-size: 24px !important; line-height: 28px !important; } }

html body.system-page main :is(.ind-preview, .ind-body > p) { font-size: 18px !important; line-height: 26px !important; font-weight: 500 !important; color: #404040 !important; }

/* Our Works hero: title + lead on the left, search and industry filter bottom-right (Figma input token). */
html body.system-page main .works-hero .q-page-hero-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.works-tools { display: flex; gap: 16px; flex: 0 0 616px; }
html body.system-page main .works-hero .q-page-hero-copy { flex: 1 1 auto; min-width: 0; max-width: 640px; }
.works-field { position: relative; display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; height: 50px; padding: 0 16px; background: #f5f5f5; color: #797979; transition: box-shadow var(--dur-fast, 200ms) var(--ease, ease); }
.works-field:focus-within { box-shadow: inset 0 0 0 1px #000; }
.works-field svg { flex: none; }
.works-select svg { position: absolute; right: 16px; pointer-events: none; color: #000; }
html body.system-page main .works-hero .works-field :is(input, select) { flex: 1; min-width: 0; height: 100%; padding: 0 !important; border: 0 !important; background: transparent !important; outline: none; font-size: 16px !important; line-height: 22px !important; font-weight: 500; color: #000; }
html body.system-page main .works-hero .works-field input::placeholder { color: #797979; opacity: 1; }
html body.system-page main .works-hero .works-field select { appearance: none; padding-right: 28px !important; cursor: pointer; }
@media (max-width: 900px) {
  html body.system-page main .works-hero .q-page-hero-inner { flex-direction: column; align-items: stretch; gap: 32px; }
  .works-tools { flex-basis: auto; }
  html body.system-page main .works-hero .q-page-hero-copy { max-width: none; }
}
@media (max-width: 560px) { .works-tools { flex-direction: column; gap: 12px; } .works-field { flex: none; } }

/* =============================================================================================
   Industry detail pages (layout of webcastletech.com/industries/<slug>/, in the Figma tokens):
   centred title + image/intro split · experience split + client logo grid · dark "why" cards ·
   outcomes split with tinted cards · banner CTA · latest projects.
   ============================================================================================= */
.ind-d-container { width: min(1250px, 100% - 48px); margin-inline: auto; }
html body.system-page main .ind-d-hero { padding: 80px 0 0; }
html body.system-page main .ind-d-hero h1 { text-align: center; margin: 0 0 60px; font-size: 60px !important; line-height: 70px !important; letter-spacing: -1px !important; font-weight: 400 !important; color: #000; }
.ind-d-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.ind-d-figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #f8f9fa; }
.ind-d-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ind-d-intro-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
html body.system-page main .ind-d-intro-copy p { font-size: 20px; line-height: 28px; font-weight: 500; color: #404040; margin: 0; }
.ind-d-intro-copy > a { margin-top: 24px; }

.ind-d-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
html body.system-page main :is(.ind-d-split, .ind-d-outcomes-copy, .ind-d-head) p { font-size: 18px; line-height: 26px; font-weight: 500; color: #404040; margin: 0; }
.ind-d-logos { display: grid; grid-template-columns: repeat(5, 1fr); margin: 60px 0 0; padding: 0; list-style: none; border-top: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; }
.ind-d-logos li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; height: 150px; padding: 24px; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
.ind-d-logos img { max-width: 70%; max-height: 64px; object-fit: contain; }
.ind-d-logos--named img { max-height: 48px; }
.ind-d-logos--named span { font-size: 16px; line-height: 22px; font-weight: 500; color: #000; }

html body.system-page main .ind-challenges { background: #f8f9fa; }

html body.system-page main .ind-d-why { background: #000; color: #fff; }
.ind-d-head { text-align: center; max-width: 760px; margin: 0 auto; }
html body.system-page main .ind-d-why h2 { color: #fff; margin: 0; }
html body.system-page main .ind-d-why .ind-d-head p { color: #c8c8c8; margin-top: 16px; }
.ind-d-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 60px 0 0; padding: 0; list-style: none; }
.ind-d-why-grid li { background: #191919; border: 1px solid #333; padding: 32px; transition: border-color var(--dur-base, 350ms) var(--ease, ease); }
.ind-d-why-grid li:hover { border-color: #06b22d; }
.ind-d-num { display: block; font-size: 14px; line-height: 17px; font-weight: 600; color: #06b22d; }
html body.system-page main .ind-d-why-grid h3 { color: #fff; margin: 40px 0 12px; }
html body.system-page main .ind-d-why-grid p { font-size: 16px; line-height: 22px; font-weight: 500; color: #c8c8c8; margin: 0; }

.ind-d-outcomes-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: center; }
html body.system-page main .ind-d-outcomes-copy h2 { margin: 0 0 16px; }
.ind-d-outcomes ul { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0; padding: 0; list-style: none; }
.ind-d-outcomes li { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 200px; padding: 32px; background: #f8f9fa; }
.ind-d-icon { display: block; width: auto; height: auto; background: none; color: #06b22d; }
.ind-d-icon svg { display: block; width: 32px; height: 32px; }
html body.system-page main .ind-d-outcomes li h3 { margin: 0; }

html body.system-page main .ind-d-cta-wrap { padding: 0 0 120px; }
.ind-d-cta { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 80px 40px; background: #001508; }
.ind-d-cta-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ind-d-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(0,0,0,.75), rgba(0,0,0,.35)); }
html body.system-page main .ind-d-cta h2 { font-size: 32px !important; line-height: 38px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: #fff; margin: 0; max-width: 760px; }
html body.system-page main .ind-d-cta p { font-size: 18px; line-height: 26px; font-weight: 500; color: #c8c8c8; margin: 16px 0 0; max-width: 640px; }
.ind-d-cta > a { margin-top: 32px; }
html body.system-page main a.ind-btn-white:hover { background: #e5e5e5; border-color: #e5e5e5; }

html body.system-page main .ind-d-projects { background: #f8f9fa; }
.ind-d-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 60px; }
html body.system-page main .ind-d-head-row h2 { margin: 0; }

@media (max-width: 1024px) {
  .ind-d-why-grid { grid-template-columns: repeat(2, 1fr); }
  .ind-d-logos { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  html body.system-page main .ind-d-hero { padding-top: 56px; }
  html body.system-page main .ind-d-hero h1 { margin-bottom: 40px; }
  .ind-d-intro, .ind-d-split, .ind-d-outcomes-grid { grid-template-columns: 1fr; gap: 32px; }
  .ind-d-logos { grid-template-columns: repeat(3, 1fr); margin-top: 40px; }
  .ind-d-why-grid { margin-top: 40px; }
  html body.system-page main .ind-d-cta-wrap { padding-bottom: 80px; }
  .ind-d-head-row { margin-bottom: 40px; }
}
@media (max-width: 700px) {
  html body.system-page main .ind-d-cta-wrap { padding-bottom: 64px; }
  .ind-d-cta { padding: 56px 24px; }
  html body.system-page main .ind-d-cta h2 { font-size: 24px !important; line-height: 28px !important; }
  html body.system-page main .ind-d-intro-copy p { font-size: 18px; line-height: 26px; }
}
@media (max-width: 560px) {
  .ind-d-why-grid, .ind-d-outcomes ul { grid-template-columns: 1fr; }
  .ind-d-logos { grid-template-columns: repeat(2, 1fr); }
  .ind-d-logos li { height: 120px; }
  .ind-d-outcomes li { min-height: 0; }
  .ind-d-head-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 900px) { html body.system-page main .ind-d-hero h1 { font-size: 48px !important; line-height: 56px !important; } }
@media (max-width: 700px) { html body.system-page main .ind-d-hero h1 { font-size: 40px !important; line-height: 46px !important; } }

/* =============================================================================================
   Our Works detail pages (layout of webcastletech.com/projects/<slug>/): banner image, title +
   tagline row, intro, narrative blocks, requirement/highlight lists, stats band, latest case studies.
   ============================================================================================= */
html body.system-page main .wd-hero { padding: 80px 0 0 !important; }
.wd-banner { margin: 0 0 40px; aspect-ratio: 2.4 / 1; overflow: hidden; }
.wd-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wd-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 32px; }
html body.system-page main .wd-title h1 { margin: 0; text-align: left; }
html body.system-page main .wd-tagline { margin: 0 0 8px; max-width: none; flex: 1; text-align: right; font-size: 18px; line-height: 26px; font-weight: 500; color: #404040; }
html body.system-page main p.wd-intro { margin: 0 0 16px; max-width: none; font-size: 20px; line-height: 28px; font-weight: 500; color: #404040; }

html body.system-page main .wd-body { padding: 60px 0 0 !important; }
.wd-body .ind-d-container { display: flex; flex-direction: column; gap: 48px; }
.wd-block { max-width: none; }
html body.system-page main .wd-block h2 { font-size: 32px !important; line-height: 38px !important; letter-spacing: 0 !important; font-weight: 500 !important; margin: 0 0 16px; }
html body.system-page main .wd-block p { font-size: 18px; line-height: 26px; font-weight: 500; color: #404040; margin: 0 0 16px; }
html body.system-page main .wd-block p:last-child { margin-bottom: 0; }
.wd-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
html body.system-page main .wd-list li { position: relative; padding-left: 28px; font-size: 18px; line-height: 26px; font-weight: 500; color: #404040; }
.wd-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: #06b22d; }
.wd-block + .wd-list { margin-top: 16px; }
.wd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.wd-pair .wd-block { max-width: none; }

.wd-gallery { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.wd-gallery--1 { grid-template-columns: 1fr; }
.wd-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.wd-gallery--3 { grid-template-columns: repeat(3, 1fr); }
.wd-gallery li { display: flex; align-items: center; justify-content: center; padding: 16px; background: #f5f5f5; overflow: hidden; }
.wd-gallery img { width: 100%; height: auto; display: block; transition: transform var(--dur-slow, 600ms) var(--ease, ease); }
.wd-gallery li:hover img { transform: scale(1.02); }

html body.system-page main .wd-stats-wrap { padding: 60px 0 0 !important; }
.wd-stats { display: grid; gap: 32px; margin: 0; padding: 48px 32px; background: #f8f9fa; text-align: center; }
.wd-stats--1 { grid-template-columns: 1fr; } .wd-stats--2 { grid-template-columns: repeat(2, 1fr); } .wd-stats--3 { grid-template-columns: repeat(3, 1fr); } .wd-stats--4 { grid-template-columns: repeat(4, 1fr); }
.wd-stats div { display: flex; flex-direction: column-reverse; gap: 8px; }
.wd-stats dd { margin: 0; font-size: 52px; line-height: 60px; letter-spacing: -1px; font-weight: 400; color: #000; }
.wd-stats dt { font-size: 16px; line-height: 22px; font-weight: 500; color: #404040; }

html body.system-page main .wd-hero + .wd-body, html body.system-page main .wd-hero:last-child { margin-bottom: 0; }

.ind-d-projects .rounded-\[30px\] { border-radius: 30px; }

@media (max-width: 1024px) { .wd-stats--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  html body.system-page main .wd-hero { padding-top: 56px !important; }
  .wd-title { flex-direction: column; align-items: flex-start; gap: 16px; }
  html body.system-page main .wd-tagline { text-align: left; max-width: none; }
  .wd-pair { grid-template-columns: 1fr; gap: 40px; }
  .wd-gallery--3 { grid-template-columns: repeat(2, 1fr); }

}
@media (max-width: 700px) {
  html body.system-page main p.wd-intro, html body.system-page main .wd-block p, html body.system-page main .wd-list li { font-size: 18px; line-height: 26px; }
  html body.system-page main .wd-block h2 { font-size: 24px !important; line-height: 28px !important; }
  .wd-stats { padding: 32px 20px; grid-template-columns: repeat(2, 1fr) !important; }
  .wd-stats dd { font-size: 36px; line-height: 42px; }

}
@media (max-width: 560px) { .wd-gallery--2, .wd-gallery--3 { grid-template-columns: 1fr; } .wd-banner { aspect-ratio: 16 / 10; } }
html body.system-page main .wd-title h1 { font-size: 52px !important; line-height: 60px !important; letter-spacing: -1px !important; font-weight: 400 !important; color: #000; }
@media (max-width: 900px) { html body.system-page main .wd-title h1 { font-size: 42px !important; line-height: 49px !important; } }
@media (max-width: 700px) { html body.system-page main .wd-title h1 { font-size: 36px !important; line-height: 42px !important; letter-spacing: -.6px !important; } }
/* The CMS banner/photo files have rounded corners baked in: the 4% scale above crops them to square. */
html body.system-page main :is(.wd-hero, .wd-body, .wd-stats-wrap) + .ind-d-projects { margin-top: 120px; }
@media (max-width: 900px) { html body.system-page main :is(.wd-hero, .wd-body, .wd-stats-wrap) + .ind-d-projects { margin-top: 80px; } }
@media (max-width: 700px) { html body.system-page main :is(.wd-hero, .wd-body, .wd-stats-wrap) + .ind-d-projects { margin-top: 64px; } }
/* Service links inside a work's bullet list read as plain list text, green on hover. */
html body.system-page main .wd-list a { display: inline; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-decoration: none; transition: color var(--dur-fast, 200ms) var(--ease, ease); }
html body.system-page main .wd-list a:hover { color: #06b22d; }
/* Requirement / highlight columns use the page H2 token; narrative headings stay H3. */
@media (max-width: 900px) {  }
@media (max-width: 700px) {  }

/* Narrative headings are H3; headings that are H2 in the content (and short) use the page H2 token. */
html body.system-page main .wd-block--lg h2 { font-size: 52px !important; line-height: 60px !important; letter-spacing: -1px !important; font-weight: 400 !important; margin-bottom: 24px; }
@media (max-width: 900px) { html body.system-page main .wd-block--lg h2 { font-size: 42px !important; line-height: 49px !important; } }
@media (max-width: 700px) { html body.system-page main .wd-block--lg h2 { font-size: 36px !important; line-height: 42px !important; letter-spacing: -.6px !important; } }

/* Latest case studies carousel (same project cards and images as webcastletech.com/projects). */
html body.system-page main .wd-cases { padding: 120px 0 !important; background: #fff; }
html body.system-page main .wd-cases-title { margin: 0 0 60px; }
.wd-viewall { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; color: #06b22d; white-space: nowrap; transition: gap var(--dur-base, 350ms) var(--ease, ease); }
.wd-viewall:hover { gap: 10px; }
.wd-carousel { position: relative; }
.wd-track { display: flex; gap: 24px; margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.wd-track::-webkit-scrollbar { display: none; }
.wd-track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.wd-track li { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; min-width: 0; }
.wd-case { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 16px; background: #f5f5f5; color: #000; transition: background var(--dur-base, 350ms) var(--ease, ease), box-shadow var(--dur-base, 350ms) var(--ease, ease); }
.wd-case:hover { background: #eee; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.wd-case-cat { min-height: 22px; font-size: 16px; line-height: 22px; font-weight: 500; color: #404040; }
.wd-case-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
.wd-case-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow, 600ms) var(--ease, ease); }
.wd-case:hover .wd-case-img img { transform: scale(1.04); }
html body.system-page main .wd-case-name { font-size: 24px; line-height: 28px; font-weight: 500; }
.wd-case-more { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 8px; font-size: 18px; line-height: 26px; font-weight: 500; }
.wd-case-more svg { transition: transform var(--dur-base, 350ms) var(--ease, ease); }
.wd-case:hover .wd-case-more svg { transform: translateX(4px); }
.wd-progress { height: 2px; margin-top: 32px; background: #e5e5e5; }
.wd-progress span { display: block; width: 12%; height: 100%; background: #06b22d; transition: width var(--dur-fast, 200ms) linear; }
@media (max-width: 1024px) { .wd-track li { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 900px) { html body.system-page main .wd-cases { padding: 80px 0 !important; } html body.system-page main .wd-cases-title { margin-bottom: 40px; } }
@media (max-width: 700px) { html body.system-page main .wd-cases { padding: 64px 0 !important; } .wd-track li { flex-basis: 84%; } html body.system-page main .wd-case-name { font-size: 20px; line-height: 24px; } }

/* Works detail: heading scale follows the source page (large H2 token / H3 / H4), plus chips, video and wide media. */
html body.system-page main .wd-block--md h2 { font-size: 32px !important; line-height: 38px !important; letter-spacing: 0 !important; font-weight: 500 !important; margin-bottom: 16px; }
html body.system-page main .wd-block--sm h2 { font-size: 24px !important; line-height: 28px !important; letter-spacing: 0 !important; font-weight: 500 !important; margin-bottom: 16px; }
@media (max-width: 700px) { html body.system-page main .wd-block--md h2 { font-size: 24px !important; line-height: 28px !important; } html body.system-page main .wd-block--sm h2 { font-size: 20px !important; line-height: 26px !important; } }
.wd-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.wd-chips li { display: inline-flex; align-items: center; gap: 10px; height: 53px; padding: 0 20px; border: 1px solid #e5e5e5; background: #fff; transition: border-color var(--dur-fast, 200ms) var(--ease, ease); }
.wd-chips li:hover { border-color: #06b22d; }
.wd-chips img { width: 24px; height: 24px; object-fit: contain; }
.wd-chips span { font-size: 18px; line-height: 26px; font-weight: 500; color: #000; }
.wd-video, .wd-media { margin: 0; background: #000; overflow: hidden; }
.wd-video video, .wd-media img { display: block; width: 100%; height: auto; }
.wd-media { background: #f5f5f5; }
/* Chips that are links (services on the loyalty case studies). */
html body.system-page main .wd-chips--links li { padding: 0; }
html body.system-page main .wd-chips--links a { display: inline-flex; align-items: center; height: 100%; padding: 0 20px; font-size: 18px; line-height: 26px; font-weight: 500; color: #000; transition: color var(--dur-fast, 200ms) var(--ease, ease); }
html body.system-page main .wd-chips--links a:hover { color: #06b22d; }
html body.system-page main .wd-chips--links a { border: 0 !important; border-radius: 0 !important; background: none !important; }
/* Project cards without an industry label keep the label row so titles line up across a row. */
html body.system-page main [data-projects] li p:empty { min-height: 17px; }

/* "Read More": three project cards in view, arrow buttons in the heading row. */
html body.system-page main .wd-more { padding: 120px 0 0 !important; }
.wd-more-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 60px; }
html body.system-page main .wd-more-head h2 { margin: 0; }
.wd-more-track { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.wd-more-track::-webkit-scrollbar { display: none; }
.wd-more-track > li { flex: 0 0 calc((100% - 64px) / 3); scroll-snap-align: start; min-width: 0; }
html body.system-page main .wd-more-track p:empty { min-height: 17px; }
@media (max-width: 1024px) { .wd-more-track > li { flex-basis: calc((100% - 32px) / 2); } }
@media (max-width: 900px) { html body.system-page main .wd-more { padding-top: 80px !important; } .wd-more-head { margin-bottom: 40px; } }
@media (max-width: 700px) { html body.system-page main .wd-more { padding-top: 64px !important; } .wd-more-track { gap: 24px; } .wd-more-track > li { flex-basis: 84%; } }
/* More Projects sits on the grey band (bg/secondary), with white space above it. */
html body.system-page main .wd-more { background: #f8f9fa; margin-top: 120px; padding: 120px 0 !important; }
@media (max-width: 900px) { html body.system-page main .wd-more { margin-top: 80px; padding: 80px 0 !important; } }
@media (max-width: 700px) { html body.system-page main .wd-more { margin-top: 64px; padding: 64px 0 !important; } }
/* Our Works listing: one continuous white page, no band or divider under the hero. */
html body.system-page main .works-hero { border-bottom: 0 !important; box-shadow: none !important; }
html body.system-page main .works-hero + section { background: #fff !important; padding-top: 40px !important; }
/* CMS headings sometimes wrap their text in <strong>; headings keep the heading weight (H3 = Medium). */
html body.system-page main .wd-block h2 :is(strong, b, em, span) { font-weight: inherit !important; font-style: normal; }
html body.system-page main .wd-more-head h2 { font-weight: 400; }

/* Blog listing: home page blog cards, three per row, numbered pager. */
html body.system-page main [data-blog-grid] li p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body.system-page main [data-blog-grid] h3 { font-size: 24px !important; line-height: 28px !important; }
.blog-empty { margin: 0; font-size: 18px; line-height: 26px; font-weight: 500; color: #404040; }
.blog-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.blog-pager[hidden], .blog-empty[hidden] { display: none; }
.blog-page { min-width: 48px; height: 48px; padding: 0 14px; border: 1px solid #e5e5e5; background: #fff; color: #000; font-size: 16px; line-height: 22px; font-weight: 600; transition: background var(--dur-fast, 200ms) var(--ease, ease), color var(--dur-fast, 200ms) var(--ease, ease), border-color var(--dur-fast, 200ms) var(--ease, ease); }
.blog-page:hover:not(:disabled) { border-color: #000; }
.blog-page[aria-current="page"] { background: #000; border-color: #000; color: #fff; }
.blog-page:disabled { opacity: .35; cursor: default; }
.blog-gap { min-width: 24px; text-align: center; color: #797979; }
html body.system-page main .works-hero .q-page-hero-inner { margin-left: auto; margin-right: auto; }
html body.system-page main [data-blog-grid] { gap: 48px 24px; }
@media (max-width: 700px) { html body.system-page main [data-blog-grid] { gap: 40px; } }


/* Blog post: previous / next blog cards (thumbnail + heading) after the article. */
html body.system-page main .post-nav { padding: 0 0 120px !important; }
.post-nav-inner { width: min(1250px, 100% - 48px); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.post-nav-card { display: flex; align-items: center; gap: 16px; width: 320px; max-width: 100%; min-width: 0; padding: 12px; border: 1px solid #e5e5e5; background: #fff; color: #000; transition: border-color var(--dur-fast, 200ms) var(--ease, ease), background var(--dur-base, 350ms) var(--ease, ease); }
.post-nav-card:hover { border-color: #000; background: #f8f9fa; }
.post-nav-card--next { flex-direction: row-reverse; text-align: right; }
.post-nav-thumb { flex: none; width: 72px; height: 72px; overflow: hidden; background: #f5f5f5; }
.post-nav-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow, 600ms) var(--ease, ease); }
.post-nav-card:hover .post-nav-thumb img { transform: scale(1.05); }
.post-nav-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.post-nav-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 15px; font-weight: 600; text-transform: uppercase; color: #06b22d; }
.post-nav-card--next .post-nav-label { justify-content: flex-end; }
html body.system-page main .post-nav-copy h6 { margin: 0; font-size: var(--text-h6) !important; line-height: 26px !important; font-weight: 500 !important; color: #000; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { html body.system-page main .post-nav { padding-bottom: 80px !important; } }
@media (max-width: 700px) {
  html body.system-page main .post-nav { padding-bottom: 64px !important; }
  .post-nav-inner { flex-direction: column; }
  .post-nav-card, .post-nav-card--next { width: 100%; flex-direction: row; text-align: left; gap: 12px; padding: 10px; }
  .post-nav-card--next .post-nav-label { justify-content: flex-start; }
  .post-nav-thumb { width: 64px; height: 64px; }
  html body.system-page main .post-nav-copy h6 { font-size: 16px !important; line-height: 22px !important; }
}

/* Blog post: main image full width under the title and description. */
html body.system-page main .post-cover { padding: 48px 0 0 !important; }
.post-cover-inner { width: min(1250px, 100% - 48px); margin-inline: auto; }
.post-cover figure { margin: 0; background: #f5f5f5; }
.post-cover img { display: block; width: 100%; height: auto; }
html body.system-page main .post-cover + .q-section { padding-top: 64px !important; }
@media (max-width: 900px) { html body.system-page main .post-cover { padding-top: 32px !important; } html body.system-page main .post-cover + .q-section { padding-top: 48px !important; } }

/* Blog post "On this page": marker for the section being read; headings clear the fixed header on jump. */
html body.system-page .sys-article-toc a { display: block; position: relative; padding-left: 14px; transition: color var(--dur-fast, 200ms) var(--ease, ease); }
html body.system-page .sys-article-toc a::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; background: transparent; transition: background var(--dur-base, 350ms) var(--ease, ease); }
html body.system-page .sys-article-toc a.is-current { color: #000 !important; }
html body.system-page .sys-article-toc a.is-current::before { background: #06b22d; }
html body.system-page .sys-article-toc a:hover { color: #06b22d !important; }
.q-article [id] { scroll-margin-top: calc(var(--header-h, 78px) + 32px); }

/* Blog post: no divider between the title block and the image. */
html body.system-page[data-system-family="blog"] main .sys-hero { border-bottom: 0 !important; box-shadow: none !important; }

/* Project detail text fills the content width. */
.wd-title h1 { flex: 0 1 auto; }
html body.system-page main :is(.wd-block, .wd-intro, .wd-list) { max-width: none; }

/* Project detail content: first heading is the H2 (52/60); every heading after it is an H3 (32/38). */
html body.system-page main .wd-block--md h3 { font-size: 32px !important; line-height: 38px !important; letter-spacing: 0 !important; font-weight: 500 !important; margin: 0 0 16px; color: #000; }
@media (max-width: 700px) { html body.system-page main .wd-block--md h3 { font-size: 24px !important; line-height: 28px !important; } }

/* Sharp image corners: the live site's images carry rounded corners in the file itself.
   Flat-colour corners are filled with that colour (data-sharp="fill"); photo corners are cropped inside a clipping frame. */
.sharp-crop { display: block; overflow: hidden; width: 100%; }
.sharp-crop > img { display: block; width: 100%; height: auto; }
.wd-banner .sharp-crop { height: 100%; }
.wd-banner .sharp-crop > img { height: 100%; object-fit: cover; }
.wd-gallery li > .sharp-crop { height: 100%; }
img[data-sharp="fill"] { border-radius: 0; }
.sharp-crop > img[data-sharp="crop"] { transform: scale(var(--sharp-scale, 1)); }

.works-tools--single { flex: 0 0 300px; }
@media (max-width: 900px) { .works-tools--single { flex-basis: auto; } }

/* Blog post: Related Blogs (same card as the blog listing). */
html body.system-page main .post-related { padding: 120px 0 !important; background: #f8f9fa; }
.post-related-inner { width: min(1250px, 100% - 48px); margin-inline: auto; }
.post-related-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
html body.system-page main .post-related-head h2 { margin: 0; }
@media (max-width: 900px) { html body.system-page main .post-related { padding: 80px 0 !important; } .post-related-head { margin-bottom: 32px; } }
@media (max-width: 700px) { html body.system-page main .post-related { padding: 64px 0 !important; } .post-related-head { flex-direction: column; align-items: flex-start; gap: 16px; } }
html body.system-page main .post-related .wd-more-track p:empty { min-height: 17px; }

/* =============================================================================================
   Technologies listing (/technologies/): category list + tiles, What We Focus On, case studies,
   industries and related services — same tokens as the rest of the site.
   ============================================================================================= */
.tl-container { width: min(1250px, 100% - 48px); margin-inline: auto; }

/* Category list + tiles */
.tl-tech [data-tech-grid]:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fill, 132px); gap: 30px; flex: 1; min-width: 0; align-content: start; margin: 0; padding: 0; list-style: none; }
.tl-tile { color: #000; }
.tl-tile-box { transition: box-shadow var(--dur-fast, 200ms) var(--ease, ease), transform var(--dur-base, 350ms) var(--ease, ease); }
.tl-tile:hover .tl-tile-box { box-shadow: inset 0 0 0 1px #000; transform: translateY(-3px); }
.tl-tile:focus-visible .tl-tile-box { box-shadow: inset 0 0 0 2px #06b22d; }
@media (max-width: 1023px) { .tl-tech [data-tech-grid]:not([hidden]) { width: 100%; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 24px 16px; } .tl-tech .tl-tile-box, .tl-tech [data-tech-grid] .size-\[132px\] { width: 100%; height: auto; aspect-ratio: 1/1; } }

/* What We Focus On (dark, same layout as Why Choose Us) */
.tl-focus { background: #000; }
.tl-focus-head { max-width: 760px; }
html body.system-page main .tl-focus h2 { margin: 0 0 20px; color: #fff; }
html body.system-page main .tl-focus-head p { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; color: #c8c8c8; }
.tl-focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 40px; margin: 72px 0 0; padding: 0; list-style: none; }
.tl-focus-icon { display: block; color: #06b22d; margin-bottom: 24px; }
html body.system-page main .tl-focus-grid h3 { margin: 0 0 12px; color: #fff; }
html body.system-page main .tl-focus-grid p { margin: 0; font-size: 16px; line-height: 22px; font-weight: 500; color: #c8c8c8; }

/* Industry and service cards */
.tl-cards { display: grid; gap: 48px 24px; margin: 0; padding: 0; list-style: none; }
.tl-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tl-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl-card { display: flex; flex-direction: column; gap: 24px; height: 100%; color: #000; }
.tl-card-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #f5f5f5; }
.tl-cards--3 .tl-card-img { aspect-ratio: 4 / 3; }
.tl-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow, 600ms) var(--ease, ease); }
.tl-card:hover .tl-card-img img { transform: scale(1.04); }
.tl-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: 1; }
html body.system-page main .tl-card-body h3 { margin: 0; }
html body.system-page main .tl-card-body p { margin: 0; font-size: 18px; line-height: 26px; font-weight: 500; color: #404040; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tl-card-body > a:last-child { margin-top: auto; padding-top: 4px; }
.tl-cards--boxed .tl-card { gap: 0; background: #fff; border: 0; }
.tl-cards--boxed .tl-card-body { padding: 24px; }

@media (max-width: 1024px) { .tl-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl-focus-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .tl-focus-grid { margin-top: 48px; } }
@media (max-width: 700px) {
  .tl-cards--4, .tl-cards--3, .tl-focus-grid { grid-template-columns: 1fr; }
  .tl-cards { gap: 40px; } .tl-focus-grid { gap: 40px; }
  html body.system-page main .tl-focus-head p { font-size: 18px; line-height: 26px; }
}

/* Technologies listing: the Our Works band sits directly under the dark section (no extra top gap). */
html body.system-page main .tl-works { margin-top: 0; }
.tl-related.bg-bg-secondary { background: #f8f9fa; }