/* ===== Site additions on top of Unfold: theme tokens, new pages, theme toggle ===== */
:root, html[data-theme="dark"] {
  --fg: #fff;
  --muted: rgba(255,255,255,.55);
  --card: #111;
  --card-2: #191919;
  --line: rgba(255,255,255,.14);
  --accent: #D63447;
  color-scheme: dark;
}
html[data-theme="light"] {
  --fg: #000;
  --muted: rgba(0,0,0,.55);
  --card: #f5f5f5;
  --card-2: #ececec;
  --line: rgba(0,0,0,.14);
  --accent: #D63447;
  color-scheme: light;
}

html { scroll-behavior: auto; }
.muted { color: var(--muted); }

/* ---- themed dual images ---- */
html[data-theme="dark"] .theme-light-only { display: none !important; }
html[data-theme="light"] .theme-dark-only { display: none !important; }
html[data-theme="light"] img.divider-img { filter: invert(1); }

/* ---- hero / banners (plain background image, theme-aware, no JS parallax so switching is instant) ---- */
.cover-v1 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-color: var(--card);
}
.cover-v1 > .container { flex: 1; display: flex; align-items: center; width: 100%; }
.cover-v1 > .container > .row { width: 100%; }
.cover-v1 > .mouse-wrap { align-self: flex-start; margin-top: auto; }
.cover-v1.cover-sm { min-height: 58vh; padding-top: 110px; padding-bottom: 50px; }
.hero-themed { background-image: var(--hero-dark, none); }
html[data-theme="light"] .hero-themed { background-image: var(--hero-light, var(--hero-dark, none)); }
.hero-themed.no-img {
  background-image: radial-gradient(circle at 25% 20%, rgba(214,52,71,.35), transparent 45%), linear-gradient(135deg, #0b0b0b, #1c1c1c);
}
html[data-theme="light"] .hero-themed.no-img {
  background-image: radial-gradient(circle at 25% 20%, rgba(214,52,71,.22), transparent 45%), linear-gradient(135deg, #fafafa, #e9e9e9);
}
.home-hero {
  background-color: #000;
  background-image: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), var(--hero-dark, none);
  background-position: center center;
  background-size: cover;
}
html[data-theme="light"] .home-hero {
  background-image: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), var(--hero-light, var(--hero-dark, none));
}
.home-hero .heading { font-size: 3.5rem; }
.home-hero .subheading { font-size: 23px; }
.home-hero .heading, .home-hero .subheading { text-shadow: 0 2px 18px rgba(0,0,0,.65); }
html[data-theme="light"] .home-hero .heading,
html[data-theme="light"] .home-hero .subheading { color: #fff; }
@media (max-width: 991.98px) {
  .home-hero .heading { font-size: 2.25rem; }
  .home-hero .subheading { font-size: 18px; }
}
html[data-theme="dark"] .cover-v1 .heading, html[data-theme="dark"] .cover-v1 .blog-heading,
html[data-theme="dark"] .cover-v1 .subheading, html[data-theme="dark"] .cover-v1 .post-meta { color: #fff; }
html[data-theme="light"] .cover-v1 .heading, html[data-theme="light"] .cover-v1 .blog-heading,
html[data-theme="light"] .cover-v1 .subheading, html[data-theme="light"] .cover-v1 .post-meta { color: #000; }
.cover-v1 .post-meta { opacity: .85; }

/* ---- image placeholders (project/blog cards without an uploaded image) ---- */
.ph {
  width: 100%; min-height: 280px; display: flex; align-items: flex-end; padding: 24px;
  background: linear-gradient(135deg, #1d1d1d, #2b2b2b);
  color: rgba(255,255,255,.35); font-weight: 900; font-size: 1.4rem;
}
.ph.ph-b { background: linear-gradient(135deg, #2a1418, #1a1a1a); }
.ph.ph-tall { min-height: 420px; }
html[data-theme="light"] .ph { background: linear-gradient(135deg, #e5e5e5, #d6d6d6); color: rgba(0,0,0,.3); }
html[data-theme="light"] .ph.ph-b { background: linear-gradient(135deg, #f1d9dc, #e3e3e3); }
.blog-item .ph { min-height: 300px; height: 100%; }

/* ---- shared small components ---- */
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pill {
  font-size: 12px; letter-spacing: .04em; padding: 5px 12px; border-radius: 30px;
  border: 1px solid var(--line); color: var(--fg); background: transparent;
}
.rich-text p, .rich-text li { line-height: 1.85; }
.rich-text img { max-width: 100%; height: auto; margin: 1rem 0; }
.rich-text pre, .post-body pre { background: var(--card-2); color: var(--fg); padding: 16px; border-radius: 6px; overflow: auto; }
.rich-text code { background: var(--card-2); padding: 2px 6px; border-radius: 4px; }
.rich-text pre code { background: transparent; padding: 0; }
.rich-text a { color: var(--accent); }
.rich-text h2, .rich-text h3 { margin-top: 2rem; margin-bottom: 1rem; font-weight: 900; }
.detail-val a, .categories_tags a, .timeline-company a, .cert-card a { color: var(--accent); }

/* ---- Project directory ---- */
.project-section-footer { margin-top: 26px; text-align: center; }
.project-directory { min-height: 100vh; padding-top: 118px; }
.project-breadcrumbs { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; color: var(--muted); font-size: 13px; }
.project-breadcrumbs a { color: var(--fg); }
.project-directory-header { padding-bottom: 28px; border-bottom: 1px dashed var(--line); }
.project-kicker { margin: 0 0 8px; color: var(--accent); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.project-directory-header h1 { margin: 0; color: var(--fg); font-size: 48px; font-weight: 900; line-height: 1.08; }
.project-directory-header > p:last-child { margin: 12px 0 0; color: var(--muted); }
.project-directory-list { display: grid; gap: 14px; margin-top: 26px; }
.project-list-card { padding: 22px 24px; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; }
.project-list-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.project-category-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.project-category { padding: 2px 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-size: 10px; }
.project-list-card h2 { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 800; }
.project-list-card h2 a { color: var(--fg); }
.project-view-link { flex: none; color: var(--fg); font-size: 13px; }
.project-list-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 12px 0 0; }
.project-list-meta div { min-width: 120px; }
.project-list-meta dt { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.project-list-meta dd { margin: 1px 0 0; color: var(--fg); font-size: 12px; }
.project-list-summary { max-width: 850px; margin: 12px 0 0; color: var(--fg); font-size: 14px; line-height: 1.65; }
.project-tech-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.project-tech-list span { padding: 3px 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.project-list-links { display: flex; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12px; }
.project-list-links a { color: var(--fg); }
.project-empty-state { margin-top: 24px; color: var(--muted); }
.tool-directory-section { margin-top: 28px; }
.tool-section-title { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); color: var(--fg); font-size: 22px; font-weight: 800; }
.tool-list-card { transition: border-color .2s ease, transform .2s ease; }
.tool-list-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.tool-list-card h2 a { color: var(--fg); }
.tool-list-meta { margin-bottom: 0; }
.tool-directory-note { margin: 16px 0 0; }
@media (max-width: 575.98px) {
  .project-directory { padding-top: 96px; }
  .project-directory-header h1 { font-size: 36px; }
  .project-list-card { padding: 17px; }
  .project-list-top { flex-direction: column; gap: 10px; }
  .project-list-card h2 { font-size: 20px; }
  .project-view-link { align-self: flex-start; }
  .tool-section-title { font-size: 19px; }
}

/* ---- Project detail ---- */
.project-detail-page { min-height: 100vh; padding-top: 118px; }
.project-detail-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; padding: 22px 24px; background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; }
.project-detail-heading { min-width: 0; flex: 1; }
.project-detail-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.project-detail-header h1 { margin: 0; color: var(--fg); font-size: 40px; font-weight: 900; line-height: 1.12; }
.project-detail-header p { max-width: 760px; margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.project-detail-header .project-detail-tagline { margin-top: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); color: var(--fg); font-size: 16px; }
.project-status-badge { display: inline-block; padding: 2px 6px; border: 1px solid currentColor; border-radius: 3px; color: var(--fg); font-size: 9px; font-weight: 800; line-height: 1.3; text-transform: uppercase; vertical-align: middle; }
.project-status-badge.status-active { color: #e9b949; }
.project-status-badge.status-deployed { color: #65cf98; }
.project-status-badge.status-completed { color: #8eb8ff; }
.project-info-list dd .project-status-badge { margin-top: 2px; }
.project-detail-actions { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.project-detail-actions .btn, .project-detail-footer .btn { padding: 10px 16px; }
.project-info-list dt { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.project-info-list dd { margin: 2px 0 0; color: var(--fg); font-size: 13px; }
.project-cover-image { margin: 0 0 18px; }
.project-cover-image img { display: block; width: 100%; max-height: 540px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; }
.project-detail-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(230px, .95fr); align-items: start; gap: 14px; }
.project-detail-main, .project-detail-sidebar { display: grid; gap: 14px; min-width: 0; }
.project-panel, .project-side-card { padding: 20px; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; }
.project-panel h2, .project-side-card h2, .project-related h2 { margin: 0 0 12px; color: var(--fg); font-size: 22px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.project-panel p:last-child { margin-bottom: 0; }
.project-panel .rich-text { color: var(--fg); font-size: 14px; }
.project-panel .rich-text p { margin-bottom: 1rem; }
.project-panel .rich-text p:last-child { margin-bottom: 0; }
.project-feature-list, .project-results-list { display: grid; gap: 7px; margin: 0; padding-left: 18px; color: var(--fg); font-size: 13px; }
.project-feature-list li::marker, .project-results-list li::marker { color: var(--accent); }
.project-challenge-list { display: grid; gap: 14px; }
.project-challenge h3 { margin: 0 0 5px; color: var(--fg); font-size: 15px; font-weight: 700; }
.project-challenge p { margin: 0; color: var(--fg); font-size: 13px; }
.project-tech-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }
.project-tech-stack li { min-width: 0; padding: 6px 9px; border: 1px solid var(--line); border-radius: 3px; color: var(--fg); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.project-info-list { display: grid; gap: 10px; margin: 0; }
.project-info-list div { padding-bottom: 9px; border-bottom: 1px dashed var(--line); }
.project-info-list div:last-child { padding-bottom: 0; border-bottom: 0; }
.project-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.project-gallery figure { min-width: 0; margin: 0; }
.project-gallery img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; }
.project-gallery figcaption { margin-top: 6px; color: var(--muted); font-size: 12px; }
.project-related { margin-top: 30px; }
.project-related-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.project-related-item { display: flex; justify-content: space-between; gap: 12px; padding: 14px; background: var(--card-2); border: 1px solid var(--line); border-radius: 5px; color: var(--fg); font-size: 13px; }
.project-related-item:hover { border-color: var(--accent); color: var(--fg); }
.project-detail-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding: 20px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
@media (max-width: 767.98px) {
  .project-detail-page { padding-top: 96px; }
  .project-detail-header { align-items: flex-start; flex-direction: column; padding: 18px; }
  .project-detail-header h1 { font-size: 30px; }
  .project-detail-header { margin-bottom: 18px; }
  .project-detail-actions { justify-content: flex-start; }
  .project-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .project-detail-sidebar { grid-row: auto; }
  .project-related-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .project-gallery { grid-template-columns: minmax(0, 1fr); }
  .project-detail-footer { flex-direction: column; }
  .project-detail-footer .btn { text-align: center; }
}

/* ---- About actions ---- */
.about-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  gap: 12px;
  overflow: visible;
}
.about-actions .btn {
  flex: 0 1 auto;
  min-width: 0;
  padding: 11px 16px;
  text-align: center;
  white-space: nowrap;
  font-size: 10px;
}
.about-actions .story-bridge-cta {
  padding: 5px 12px !important;
  border-radius: 5px !important;
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}
.about-actions .story-bridge-cta:hover,
.about-actions .story-bridge-cta:focus {
  background: transparent !important;
  color: var(--fg) !important;
  border-color: var(--fg) !important;
}
html[data-theme="dark"] .about-actions a.btn.btn-outline-pill.btn-custom-light.about-action-primary,
html[data-theme="dark"] .about-actions a.btn.btn-outline-pill.btn-custom-light.about-action-secondary:hover {
  color: #000;
  background: #fff;
  border-color: #fff;
}
html[data-theme="dark"] .about-actions a.btn.btn-outline-pill.btn-custom-light.about-action-secondary {
  color: #fff;
  background: transparent;
  border-color: rgba(255,255,255,.5);
}
html[data-theme="light"] .about-actions a.btn.btn-outline-pill.btn-custom-light.about-action-primary,
html[data-theme="light"] .about-actions a.btn.btn-outline-pill.btn-custom-light.about-action-secondary:hover {
  color: #fff;
  background: #000;
  border-color: #000;
}
html[data-theme="light"] .about-actions a.btn.btn-outline-pill.btn-custom-light.about-action-secondary {
  color: #000;
  background: transparent;
  border-color: rgba(0,0,0,.5);
}

/* ---- Experience timeline ---- */
.timeline { max-width: 900px; margin: 0 auto; position: relative; }
.timeline:before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline-item { position: relative; padding-left: 34px; margin-bottom: 40px; }
.timeline-item:before {
  content: ""; position: absolute; left: -5px; top: 8px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--card);
}
.timeline-meta { margin-bottom: 10px; }
.timeline-period { display: inline-block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.timeline-kind { margin-left: 12px; font-size: 12px; color: var(--muted); }
.timeline-card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 26px 28px; }
.timeline-role { font-size: 22px; font-weight: 900; margin: 0; }
.timeline-company { color: var(--muted); font-size: 15px; }
.timeline-logo { width: 46px; height: 46px; object-fit: contain; border-radius: 6px; }
.timeline-list { padding-left: 18px; margin: 14px 0 0; }
.timeline-list li { margin-bottom: 8px; line-height: 1.7; }
.cert-card { border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; height: 100%; background: var(--card); }

/* ---- My Story ---- */
.story-label { display: inline-block; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 10px; }
.story-row figure img { width: 100%; }
.story-page { min-height: 100vh; padding: 128px 0 80px; }
.story-page-header { max-width: 760px; margin: 0 auto 58px; text-align: center; }
.story-page-header h1 { margin: 0 0 10px; color: var(--fg); font-size: 44px; font-weight: 900; line-height: 1.1; }
.story-page-header p { margin: 0 auto; color: var(--muted); font-size: 16px; line-height: 1.6; }
.story-chapters { max-width: 900px; margin: 0 auto; }
.story-chapter { margin-bottom: 48px; }
.story-chapter-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.story-chapter-number { flex: none; color: var(--muted); font-size: 10px; }
.story-chapter-rule { height: 1px; flex: 1; background: var(--line); }
.story-chapter-heading h2 { margin: 0; color: var(--fg); font-size: 28px; font-weight: 800; line-height: 1.2; text-align: right; }
.story-chapter-body { max-width: 820px; margin: 0 auto; color: var(--fg); font-size: 14px; line-height: 1.75; }
.story-chapter-body p { margin: 0 0 12px; }
.story-chapter-body p:last-child { margin-bottom: 0; }
.story-chapter-body em { color: var(--muted); }
.story-chapter-body blockquote { margin: 16px 0; padding: 14px 18px; border-left: 2px solid var(--accent); border-radius: 4px; background: var(--card-2); color: var(--fg); font-style: italic; }
.story-chapter-body blockquote p { margin: 0; }
.story-proof-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 820px; margin: 18px auto 0; padding: 0; list-style: none; }
.story-proof-cards li { min-width: 0; padding: 14px; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; }
.story-proof-cards strong, .story-proof-cards span { display: block; }
.story-proof-cards strong { color: var(--accent); font-size: 20px; font-weight: 800; line-height: 1.15; }
.story-proof-cards span { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.story-final-cta { max-width: 820px; margin: 0 auto; padding: 24px; border: 1px dashed var(--line); border-radius: 6px; text-align: center; }
.story-final-cta h2 { margin: 0 0 4px; color: var(--fg); font-size: 20px; font-weight: 700; }
.story-final-cta p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
@media (max-width: 767.98px) {
  .story-page { padding: 96px 0 56px; }
  .story-page-header { margin-bottom: 42px; }
  .story-page-header h1 { font-size: 36px; }
  .story-chapter { margin-bottom: 38px; }
  .story-chapter-heading { gap: 9px; }
  .story-chapter-heading h2 { font-size: 22px; }
  .story-chapter-body { font-size: 13px; }
  .story-proof-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-proof-cards li { padding: 12px; }
}

/* ---- About page ---- */
.about-page { min-height: 100vh; padding: 128px 0 80px; }
.about-page-header { max-width: 760px; margin: 0 auto 42px; text-align: center; }
.about-page-header h1 { margin: 0 0 10px; color: var(--fg); font-size: 44px; font-weight: 900; line-height: 1.1; }
.about-page-header p { margin: 0 auto; color: var(--muted); font-size: 15px; line-height: 1.6; }
.about-hero-image-wrap { max-width: 760px; margin: 0 auto 38px; }
.about-hero-image { margin: 0; }
.about-hero-image img { display: block; width: 100%; max-height: 540px; object-fit: cover; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 18px 32px rgba(0, 0, 0, 0.15); }
.about-page-section { max-width: 900px; margin: 0 auto 48px; }
.about-section-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.about-section-number { flex: none; color: var(--muted); font-size: 10px; }
.about-section-rule { height: 1px; flex: 1; background: var(--line); }
.about-section-heading h2 { margin: 0; color: var(--fg); font-size: 28px; font-weight: 800; line-height: 1.2; text-align: right; }
.about-copy { max-width: 820px; margin: 0 auto; color: var(--fg); font-size: 14px; line-height: 1.75; }
.about-copy p { margin: 0 0 12px; }
.about-copy p:last-child { margin-bottom: 0; }
.about-copy blockquote { margin: 16px 0 0; padding: 13px 16px; border-left: 2px solid var(--accent); border-radius: 4px; background: var(--card-2); color: var(--fg); font-style: italic; }
.about-item-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 820px; margin: 0 auto; }
.about-item-grid article { min-width: 0; padding: 16px; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; }
.about-item-grid h3, .about-fit-grid h3 { margin: 0 0 6px; color: var(--fg); font-size: 14px; font-weight: 700; }
.about-item-grid p, .about-fit-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.about-proof-list { display: grid; gap: 9px; max-width: 820px; margin: 0 auto; padding-left: 20px; color: var(--fg); font-size: 14px; line-height: 1.6; }
.about-fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 820px; margin: 0 auto; }
.about-fit-grid > div { padding: 16px; border: 1px solid var(--line); border-radius: 6px; }
.about-contact-prompt { max-width: 820px; margin: 18px auto 0; color: var(--fg); font-size: 14px; }
.about-page-actions { display: flex; flex-wrap: wrap; gap: 10px; max-width: 820px; margin: 18px auto 0; }
.about-social-links { display: flex; gap: 16px; max-width: 820px; margin: 16px auto 0; font-size: 12px; }
.about-social-links a { color: var(--muted); }
.about-social-links a:hover { color: var(--fg); }
@media (max-width: 767.98px) {
  .about-page { padding: 96px 0 56px; }
  .about-page-header { margin-bottom: 42px; }
  .about-page-header h1 { font-size: 36px; }
  .about-page-section { margin-bottom: 38px; }
  .about-section-heading { gap: 9px; }
  .about-section-heading h2 { font-size: 22px; }
  .about-item-grid, .about-fit-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Experience page ---- */
.experience-page { padding: 132px 0 80px; }
.experience-page-header { max-width: 760px; margin: 0 auto 42px; text-align: center; }
.experience-page-header h1 { margin: 0; color: var(--fg); font-size: 42px; font-weight: 900; line-height: 1.1; }
.experience-page-header > p:last-child { margin: 14px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.experience-page-section { max-width: 1000px; margin: 0 auto 54px; }
.experience-section-heading { display: grid; grid-template-columns: 28px minmax(0, 1fr) max-content; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.experience-section-heading > span:first-child { color: var(--muted); font-size: 10px; }
.experience-heading-rule { height: 1px; background: var(--line); }
.experience-section-heading h2 { margin: 0; color: var(--fg); font-size: 28px; font-weight: 800; line-height: 1.2; text-align: right; }
.experience-role-list, .experience-project-grid { display: grid; gap: 12px; }
.experience-role-card, .experience-project-card, .experience-education-card, .experience-recognition-card, .experience-skills-grid article { min-width: 0; padding: 20px; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; }
.experience-role-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.experience-role-company, .experience-project-role { margin: 0 0 5px; color: var(--muted); font-size: 12px; }
.experience-role-header h3, .experience-project-header h3, .experience-recognition-card h3, .experience-education-card h3 { margin: 0; color: var(--fg); font-size: 19px; font-weight: 700; line-height: 1.3; }
.experience-role-period { flex: none; color: var(--muted); font-size: 12px; text-align: right; }
.experience-role-summary { margin: 12px 0 0; color: var(--fg); font-size: 14px; line-height: 1.6; }
.experience-results { display: grid; gap: 0; margin-top: 12px; }
.experience-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.experience-result p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.experience-result p strong { display: block; margin-bottom: 3px; color: var(--fg); font-size: 10px; text-transform: uppercase; }
.experience-highlights { display: grid; gap: 8px; margin: 14px 0 0; padding-left: 18px; color: var(--fg); font-size: 13px; line-height: 1.6; }
.experience-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.experience-project-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.experience-project-header h3 { font-size: 16px; }
.experience-project-header a { color: var(--fg); }
.experience-project-header > span, .experience-recognition-card > span, .experience-education-card > span { flex: none; color: var(--muted); font-size: 11px; }
.experience-project-role { margin-top: 7px; }
.experience-project-summary { margin: 10px 0 0; color: var(--fg); font-size: 13px; font-weight: 600; line-height: 1.55; }
.experience-project-copy { margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.experience-project-copy p { margin: 0 0 7px; }
.experience-project-copy p:last-child { margin-bottom: 0; }
.experience-project-card .pill-list { gap: 5px; margin-top: 12px; }
.experience-project-card .pill { padding: 3px 8px; font-size: 10px; }
.experience-recognition-grid, .experience-education-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.experience-recognition-card h3, .experience-education-card h3 { margin-top: 7px; font-size: 16px; }
.experience-recognition-card p, .experience-education-card p { margin: 8px 0 0; color: var(--fg); font-size: 13px; line-height: 1.55; }
.experience-recognition-card .experience-role-company, .experience-education-card .experience-muted { color: var(--muted); }
.experience-recognition-result { font-weight: 600; }
.experience-cert-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.experience-cert-list li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--fg); font-size: 12px; }
.experience-cert-list li span:last-child { flex: none; color: var(--muted); text-align: right; }
.experience-skills-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.experience-skills-grid h3 { margin: 0 0 10px; color: var(--fg); font-size: 14px; }
.experience-skills-grid .pill-list { margin: 0; }
.experience-page-cta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; max-width: 1000px; margin: 0 auto; padding: 20px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.experience-page-cta .btn { padding: 10px 16px; }
@media (max-width: 767.98px) {
  .experience-page { padding: 124px 0 56px; }
  .experience-page-header { margin-bottom: 42px; }
  .experience-page-header h1 { font-size: 32px; }
  .experience-page-section { margin-bottom: 42px; }
  .experience-section-heading { grid-template-columns: 24px minmax(0, 1fr) max-content; gap: 8px; }
  .experience-section-heading h2 { font-size: 22px; }
  .experience-project-grid, .experience-recognition-grid, .experience-education-grid,
  .experience-cert-list, .experience-skills-grid { grid-template-columns: minmax(0, 1fr); }
  .experience-role-header { flex-direction: column; gap: 6px; }
  .experience-role-period { text-align: left; }
  .experience-result { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .experience-project-header { flex-direction: column; }
  .experience-project-header > span { align-self: flex-start; }
  .experience-page-cta { flex-direction: column; }
  .experience-page-cta .btn { text-align: center; }
}
.story-bridge { padding: 68px 0; border-top: 1px solid var(--line); }
.story-bridge-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 56px; max-width: 960px; }
.story-bridge-copy h2 { max-width: 440px; margin: 0 0 14px; color: var(--fg); font-size: 38px; font-weight: 800; line-height: 1.12; }
.story-bridge-copy p { max-width: 500px; margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.story-bridge-copy .story-bridge-lead { color: var(--fg); font-size: 16px; font-weight: 600; }
.story-bridge-cta { padding: 5px 12px !important; border-radius: 5px !important; background: #fff !important; color: #000 !important; border-color: #fff !important; font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 1.2; text-transform: none; }
.story-bridge-cta:hover, .story-bridge-cta:focus { background: transparent !important; color: var(--fg) !important; border-color: var(--fg) !important; }
html[data-theme="light"] .story-bridge-cta { background: #000 !important; color: #fff !important; border-color: #000 !important; }
.story-bridge-cta:hover, html[data-theme="light"] .story-bridge-cta:focus { background: transparent !important; color: var(--fg) !important; border-color: var(--fg) !important; }
.story-bridge-facts { margin: 0; }
.story-bridge-facts div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.story-bridge-facts dt { color: var(--fg); font-size: 13px; font-weight: 500; }
.story-bridge-facts dd { max-width: 65%; margin: 0; color: var(--muted); font-size: 13px; text-align: right; }
@media (max-width: 767.98px) {
  .story-bridge { padding: 48px 0; }
  .story-bridge-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .story-bridge-copy h2 { font-size: 32px; }
}

/* ---- Services & expertise ---- */
#services-section { padding-top: 100px; scroll-margin-top: 100px; }
.services-intro { margin: 0 auto 54px; text-align: center; }
.services-intro h2 { margin: 0 0 16px; color: var(--fg); font-size: 34px; font-weight: 800; line-height: 1.15; }
.services-divider { display: block; height: 8px; }
.services-divider img { display: block; width: 76px; height: 8px; margin: 0 auto; }
.services-more-link { margin-top: 40px; text-align: center; }
.service-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 64px; max-width: 1120px; margin: 0 auto; }
.service-detail-card { min-width: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.service-detail-icon { display: block; width: 46px; height: 46px; margin-bottom: 14px; object-fit: contain; }
.service-detail-card h3 { max-width: 230px; margin: 0 0 8px; color: var(--fg); font-size: 22px; font-weight: 700; line-height: 1.2; }
.service-detail-summary { margin: 0; color: var(--fg); font-size: 15px; line-height: 1.7; }
.service-capability-list { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 17px; color: var(--fg); }
.service-capability-list li { padding-left: 1px; font-size: 12px; line-height: 1.4; }
.service-capability-list strong { display: block; font-weight: 600; }
.service-capability-list span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
@media (max-width: 991.98px) {
  .service-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
}
@media (max-width: 575.98px) {
  .services-intro { margin-bottom: 38px; }
  .services-intro h2 { font-size: 30px; }
  .service-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

/* ---- Services page ---- */
.services-page { min-height: 100vh; padding-top: 118px; }
.services-page-header { max-width: 760px; margin: 0 auto 46px; text-align: center; }
.services-page-kicker { margin: 0 0 8px; color: var(--accent); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.services-page-header h1 { margin: 0; color: var(--fg); font-size: 44px; font-weight: 900; line-height: 1.1; }
.services-page-header > p:last-child { margin: 14px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.services-page-section { width: 100%; max-width: 1000px; margin: 0 auto 64px; }
.services-page-section-heading { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.services-page-section-heading > span, .services-process-grid article > span { color: var(--muted); font-size: 11px; }
.services-page-section-heading h2 { margin: 0; color: var(--fg); font-size: 30px; font-weight: 800; }
.services-page-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.services-page-card { min-width: 0; padding: 18px; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; }
.services-page-card h3 { margin: 0 0 7px; color: var(--fg); font-size: 18px; font-weight: 700; }
.services-page-summary { margin: 0 0 12px; color: var(--fg); font-size: 13px; line-height: 1.6; }
.services-page-card ul { display: grid; gap: 8px; margin: 0; padding-left: 17px; }
.services-page-card li { color: var(--fg); font-size: 12px; line-height: 1.4; }
.services-page-proof { margin: 14px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.5; }
.services-systems-grid { display: grid; width: 100%; max-width: 1000px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 34px; margin: 0 auto; }
.services-system-card { min-width: 0; padding: 8px 16px 8px 0; background: transparent; border: 0; border-radius: 0; }
.services-system-card:nth-last-child(-n + 2) { margin-right: 18px; }
.services-system-icon { display: block; width: 40px; height: 40px; margin-bottom: 10px; object-fit: contain; }
.services-system-card h3 { margin: 0 0 4px; color: var(--fg); font-size: 15px; font-weight: 700; }
.services-system-audience { margin: 0 0 9px; color: var(--muted); font-size: 12px; }
.services-system-card ul, .services-package-card ul { display: grid; gap: 4px; margin: 0; padding-left: 17px; color: var(--fg); font-size: 12px; line-height: 1.45; }
.services-item-contact { display: inline-block; margin-top: 12px; color: var(--accent); font-size: 12px; }
.services-item-contact:hover { color: var(--fg); }
.service-enquiry-modal { display: none; position: fixed; inset: 0; z-index: 2100; align-items: center; justify-content: center; padding: 20px; overscroll-behavior: contain; }
.service-enquiry-modal.is-open { display: flex; }
.service-enquiry-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.78); }
.service-enquiry-dialog { position: relative; width: 100%; max-width: 520px; max-height: calc(100dvh - 40px); overflow-y: auto; padding: 28px; background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 20px 70px rgba(0,0,0,.45); }
.service-enquiry-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer; }
.service-enquiry-close:hover { color: var(--fg); }
.service-enquiry-dialog h2 { margin: 0 0 8px; color: var(--fg); font-size: 28px; line-height: 1.2; }
.service-enquiry-selected { margin: 0 0 22px; color: var(--muted); font-size: 13px; }
.service-enquiry-selected strong { color: var(--fg); }
.service-enquiry-dialog label { display: block; margin-bottom: 14px; }
.service-enquiry-dialog label span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.service-enquiry-dialog input, .service-enquiry-dialog textarea { display: block; width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--fg); font: inherit; font-size: 13px; }
.service-enquiry-dialog textarea { resize: vertical; min-height: 94px; }
.service-enquiry-dialog input:focus, .service-enquiry-dialog textarea:focus { border-color: var(--accent); outline: 0; }
.service-enquiry-dialog .btn { margin-top: 2px; }
.service-enquiry-status { min-height: 20px; margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.service-enquiry-status.is-success { color: #72d69a; }
.service-enquiry-status.is-error { color: #ff8e8e; }
body.service-enquiry-open { overflow: hidden; }

@media (min-width: 992px) and (max-width: 1199.98px) {
  .unslate_co--site-nav .site-nav-ul > li > a { padding-right: 4px; padding-left: 4px; font-size: 12px; }
  .unslate_co--site-nav .unslate_co--site-logo { font-size: 1.5rem; }
}

@media (min-width: 992px) and (max-width: 1050px) {
  .unslate_co--site-nav .site-nav-ul > li > a { padding-right: 3px; padding-left: 3px; font-size: 11px; }
  .unslate_co--site-nav .unslate_co--site-logo { font-size: 1.35rem; }
}

.services-process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.services-process-grid article { min-width: 0; padding: 16px; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; }
.services-process-grid h3 { margin: 10px 0 6px; color: var(--fg); font-size: 15px; font-weight: 700; }
.services-process-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.services-packages-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.services-package-card { display: flex; min-width: 0; flex-direction: column; padding: 16px; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; }
.services-package-card h3 { margin: 0 0 5px; color: var(--fg); font-size: 16px; font-weight: 700; }
.services-package-card > p { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.services-package-card ul { margin-bottom: 14px; }
.services-package-price { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); color: var(--accent); font-size: 13px; }
.services-package-contact { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.services-package-contact strong { color: var(--accent); font-size: 14px; }
.services-package-contact span { color: var(--muted); font-size: 11px; }
.services-why-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; max-width: 820px; margin: 0; padding-left: 20px; color: var(--fg); font-size: 13px; line-height: 1.6; }
.services-fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.services-fit-grid article { padding: 16px; border: 1px solid var(--line); border-radius: 6px; }
.services-fit-grid h3 { margin: 0 0 8px; color: var(--fg); font-size: 15px; font-weight: 700; }
.services-fit-grid ul { display: grid; gap: 5px; margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; }
.services-support-terms { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.services-closing-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; max-width: 920px; margin: 0 auto; padding: 20px; border: 1px dashed var(--line); border-radius: 6px; }
.services-closing-cta p { flex: 1 1 100%; margin: 0; color: var(--fg); font-size: 17px; font-weight: 600; }
.services-closing-cta .btn { padding: 10px 16px; }
.technical-proficiency { padding: 86px 0 78px; }
.technical-proficiency-header { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.technical-proficiency-header h2 { margin: 0; color: var(--fg); font-size: 36px; font-weight: 800; line-height: 1.15; }
.technical-proficiency-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 52px; row-gap: 32px; max-width: 1000px; margin: 0 auto; }
.technical-proficiency-card { min-width: 0; padding: 24px; background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; }
.technical-proficiency-card-heading { display: flex; align-items: center; gap: 12px; min-height: 38px; margin-bottom: 18px; }
.technical-proficiency-icon { flex: 0 0 38px; width: 38px; height: 38px; object-fit: contain; }
.technical-proficiency-card h3 { margin: 0; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.technical-proficiency-card ul { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 0; padding: 0; list-style: none; }
.technical-proficiency-card li { color: var(--fg); font-size: 13px; line-height: 1.45; }
.unslate_co--footer .row.justify-content-center > .col-md-7 { flex: 0 0 100%; max-width: 100%; }
.unslate_co--footer .footer-navigation,
.unslate_co--footer .footer-service-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin: 0 auto 16px; }
.unslate_co--footer .footer-navigation { gap: 8px 20px; }
.unslate_co--footer .footer-navigation a { color: rgba(255, 255, 255, .72); font-size: 13px; }
.unslate_co--footer .footer-navigation a:hover,
.unslate_co--footer .footer-navigation a:focus,
.unslate_co--footer .footer-service-links a:hover,
.unslate_co--footer .footer-service-links a:focus { color: var(--fg); }
.unslate_co--footer .footer-service-links { gap: 6px 18px; max-width: 1000px; margin-bottom: 24px; }
.unslate_co--footer .footer-service-links a { color: var(--muted); font-size: 10px; line-height: 1.5; }
.contact-form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.legal-page { min-height: 70vh; padding: 130px 0 80px; }
.legal-content { max-width: 820px; margin: 0 auto; color: var(--fg); }
.legal-content h1 { margin: 0 0 20px; color: var(--fg); font-size: 42px; font-weight: 800; }
.legal-content h2 { margin: 32px 0 10px; color: var(--fg); font-size: 22px; font-weight: 700; }
.legal-content p { color: var(--muted); font-size: 15px; line-height: 1.8; }
.legal-content a { color: var(--accent); }
.legal-content strong { color: var(--fg); }
.cookie-consent { position: fixed; z-index: 1100; right: 24px; bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(760px, calc(100vw - 32px)); padding: 20px 22px; color: var(--fg); background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.cookie-consent[hidden], .cookie-consent [hidden] { display: none !important; }
.cookie-consent-copy { flex: 1 1 auto; }
.cookie-consent-copy strong { color: var(--fg); font-size: 15px; }
.cookie-consent-copy p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.cookie-consent-copy a { color: var(--accent); text-decoration: underline; }
.cookie-consent-settings { margin-top: 10px; color: var(--fg); font-size: 12px; }
.cookie-consent-settings input { width: 18px; height: 18px; margin-right: 6px; vertical-align: middle; accent-color: var(--accent); }
.cookie-consent-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cookie-consent-button { min-width: 76px; min-height: 44px; padding: 8px 12px; color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 12px; cursor: pointer; }
.cookie-consent-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cookie-consent-accept { color: #fff; background: var(--accent); border-color: var(--accent); }
.experience-section-heading { position: relative; }
.experience-section-link { margin-left: 12px; color: var(--accent); font-size: 12px; font-weight: 400; white-space: nowrap; }
.experience-project-links { display: flex; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12px; }
.experience-project-links a { color: var(--accent); }
.research-publication-category { display: inline-flex; align-items: center; height: 30px; margin: 0 0 6px; padding: 4px 9px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
.research-publication-journal { margin: 0 0 6px; color: var(--accent); font-size: 12px; font-weight: 700; }
.research-publication-topic { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.research-publication-links { display: flex; flex: none; gap: 12px; margin: 0; padding: 0; border: 0; }
.research-publication-abstract { margin-top: 18px; color: var(--fg); font-size: 14px; line-height: 1.7; }
.research-publication-card { position: relative; display: flex; height: 175px; flex-direction: column; padding: 16px 20px; }
.research-publication-card .project-list-top h2 { font-size: 20px; line-height: 1.2; }
.research-publication-card .project-list-meta { margin-top: 8px; line-height: 1.2; }
.research-publication-card .project-list-meta dt,
.research-publication-card .project-list-meta dd { line-height: 1.3; }
.research-publication-read { position: absolute; top: 16px; right: 20px; display: block; width: fit-content; color: var(--fg); font-size: 12px; font-weight: 700; text-align: right; }
.research-publication-read span { color: var(--accent); }
.research-detail-card { max-width: 820px; margin: 0 auto; padding: 34px; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; }
.research-detail-card h1 { margin: 0 0 8px; color: var(--fg); font-size: 42px; line-height: 1.15; }
.research-detail-card > .research-publication-journal { margin-bottom: 24px; }
.research-detail-meta { margin: 0; }
.research-detail-section { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.research-detail-section h2 { margin: 0 0 12px; color: var(--fg); font-size: 20px; }
.research-detail-section .rich-text p { color: var(--fg); font-size: 14px; line-height: 1.75; }
.research-detail-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.research-detail-links h2 { flex-basis: 100%; }
.research-detail-links a { color: var(--accent); font-size: 13px; font-weight: 700; }
@media (max-width: 767.98px) {
  .research-publication-card { height: auto; min-height: 200px; }
  .research-detail-card { padding: 24px 20px; }
  .research-detail-card h1 { font-size: 32px; }
}
@media (max-width: 767.98px) {
  .services-page { padding-top: 96px; }
  .services-page-header { margin-bottom: 48px; }
  .services-page-header h1 { font-size: 34px; }
  .services-page-section { margin-bottom: 48px; }
  .services-page-grid, .services-systems-grid, .services-process-grid, .services-packages-grid,
  .services-why-list, .services-fit-grid { grid-template-columns: minmax(0, 1fr); }
  .services-closing-cta { align-items: stretch; flex-direction: column; }
  .services-closing-cta .btn { text-align: center; }
  .service-enquiry-modal { padding: 12px; }
  .service-enquiry-dialog { max-height: calc(100dvh - 24px); padding: 24px 18px 20px; }
  .service-enquiry-dialog h2 { padding-right: 28px; font-size: 24px; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .services-systems-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-packages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Blog ---- */
.blog-page { min-height: 100vh; padding: 118px 0 72px; }
.blog-page-header { max-width: 760px; margin: 0 auto 42px; text-align: center; }
.blog-page-header h1 { margin: 0; color: var(--fg); font-size: 48px; font-weight: 900; line-height: 1.08; }
.blog-page-header > p:last-child { margin: 14px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.blog-filter { max-width: 1000px; margin: 0 auto 20px; color: var(--muted); font-size: 13px; }
.blog-filter strong { color: var(--fg); }
.blog-filter a { margin-left: 10px; color: var(--accent); }
.blog-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; column-gap: 40px; row-gap: 36px; max-width: 1100px; margin: 0 auto; }
.blog-card { display: flex; min-width: 0; height: 100%; flex-direction: column; overflow: hidden; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; }
.blog-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #2a1418, #1a1a1a); }
.blog-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.blog-card:hover .blog-card-media img { transform: scale(1.04); }
.blog-card-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--accent); font-size: 54px; font-weight: 900; }
.blog-card-body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.blog-card-meta { margin: 0 0 9px; color: var(--muted); font-size: 11px; }
.blog-card h2 { margin: 0; font-size: 21px; line-height: 1.25; }
.blog-card h2 a { color: var(--fg); }
.blog-card-excerpt { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.blog-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.blog-card-tags a { color: var(--accent); font-size: 11px; }
.blog-card-link { display: inline-block; align-self: flex-start; margin-top: auto; padding-top: 18px; color: var(--fg); font-size: 12px; font-weight: 700; }
.blog-card-link span { color: var(--accent); }
.blog-empty { grid-column: 1 / -1; color: var(--muted); text-align: center; }
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 42px auto 0; color: var(--muted); font-size: 13px; }
.post-body { max-width: 760px; margin: 0 auto; }
.post-body img { display: block; max-width: 100%; height: auto; margin: 22px auto; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 { color: var(--fg); line-height: 1.25; }
.post-body h1 { font-size: 34px; }
.post-body h2 { font-size: 28px; }
.post-body h3 { font-size: 22px; }
.post-body p, .post-body li { color: var(--fg); font-size: 15px; line-height: 1.8; }
.post-body a { color: var(--accent); }
.post-body pre { overflow-x: auto; }
.post-single-navigation { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 2rem; }
.post-single-navigation a { color: var(--fg); }
.post-single-navigation span { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
@media (max-width: 991.98px) {
  .blog-card-grid { column-gap: 32px; row-gap: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .technical-proficiency-grid { column-gap: 38px; row-gap: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .legal-page { padding: 100px 0 56px; }
  .legal-content h1 { font-size: 34px; }
  .cookie-consent { right: 12px; bottom: 12px; align-items: stretch; flex-direction: column; gap: 14px; width: calc(100vw - 24px); padding: 16px; }
  .cookie-consent-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cookie-consent-button { width: 100%; }
  .blog-page { padding-top: 96px; }
  .blog-page-header h1 { font-size: 36px; }
  .blog-card-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .blog-card-body { padding: 20px; }
  .blog-pagination { margin-top: 30px; }
  .technical-proficiency { padding: 58px 0 52px; }
  .technical-proficiency-header h2 { font-size: 30px; }
  .technical-proficiency-grid { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .technical-proficiency-card { padding: 20px; }
}

/* ---- Tools ---- */
.tool-card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 22px; transition: transform .25s, border-color .25s; }
.tool-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.tool-card h3 { font-size: 18px; font-weight: 900; margin: 0; }
.tool-card h3 a { color: var(--fg); }
.tool-card p { margin: 12px 0 0; font-size: 15px; color: var(--muted); line-height: 1.6; }
.tool-head { display: flex; align-items: center; gap: 14px; }
.tool-icon { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; flex: none; }
.tool-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-weight: 900; font-size: 20px; }
.tool-bar { height: 5px; border-radius: 5px; background: var(--line); margin-top: 16px; overflow: hidden; }
.tool-bar span { display: block; height: 100%; background: var(--accent); border-radius: 5px; }

/* ---- Theme toggle ---- */
.theme-toggle {
  position: fixed; right: 22px; bottom: 22px; z-index: 2000;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--fg); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(0,0,0,.25); transition: transform .2s, background .3s;
}
.theme-toggle:hover { transform: scale(1.08); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
html[data-theme="light"] .theme-toggle .ico-sun { display: none; }

/* smooth colour change when toggling */
html.theme-anim *, html.theme-anim *:before, html.theme-anim *:after { transition: background-color .35s, color .35s, border-color .35s !important; }

/* portfolio-single "Back" label etc. keep readable in light theme */
html[data-theme="light"] .portfolio-single-inner .detail-label { color: var(--muted); }

/* Dark theme: keep the sticky (scrolled) nav bar dark instead of the template's white bar */
html[data-theme="dark"] .unslate_co--site-nav.scrolled { background: #0b0b0b !important; box-shadow: 0 1px 0 var(--line); }
html[data-theme="dark"] .unslate_co--site-nav.scrolled .unslate_co--site-logo,
html[data-theme="dark"] .unslate_co--site-nav.scrolled .site-nav-ul > li > a,
html[data-theme="dark"] .unslate_co--site-nav.scrolled .site-nav-ul-none-onepage > li > a { color: #fff; }
html[data-theme="dark"] .unslate_co--site-nav.scrolled .burger-toggle-menu span { background: #fff; }

/* scroll-mouse indicator readable on light banners */
html[data-theme="light"] .mouse-wrap .mouse { border-color: #000; }
html[data-theme="light"] .mouse-wrap .mouse .scroll { background: #000; }
html[data-theme="light"] .mouse-wrap .mouse-label { color: #000; }
.error-page {
  min-height: min(78vh, 760px);
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
}

.error-card {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px);
  text-align: center;
  border: 1px dashed var(--line-color, rgba(255, 255, 255, .2));
  border-radius: 20px;
  background: var(--card-background, rgba(255, 255, 255, .025));
}

.error-code {
  margin: 0;
  font-size: clamp(6rem, 19vw, 10rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.08em;
}

.error-eyebrow {
  margin: 24px 0 10px;
  font-family: var(--mono-font, monospace);
  font-size: .75rem;
  letter-spacing: .12em;
  opacity: .7;
}

.error-card h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 5vw, 3rem);
}

.error-message {
  max-width: 460px;
  margin: 0 auto 28px;
  opacity: .75;
}

.error-actions,
.error-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.error-links {
  margin-top: 22px;
  gap: 14px;
}

@media (max-width: 480px) {
  .error-page {
    min-height: 65vh;
    padding: 100px 0 56px;
  }

  .error-actions {
    flex-direction: column;
  }

  .error-actions .btn {
    width: 100%;
  }
}