/* ==========================================================================
   Blak Rice shared styles (loaded on every page, after the page's own CSS)
   Nov 2026 update. Served with "must-revalidate" (see _headers).
   ========================================================================== */

/* ---------- Header: 9 tabs ---------- */
nav.main-nav { gap: 5px; }
nav.main-nav a { padding: 7px 11px; white-space: nowrap; }
@media (max-width: 1180px) {
  nav.main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
}
/* long mobile menu must scroll inside the sticky header, never be cut off */
.mobile-nav.open { max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mobile-nav a[aria-current="page"] { color: var(--bronze); }
.mobile-nav a:hover, .mobile-nav a:focus-visible { background: rgba(242,237,231,0.06); }
@media (min-width: 1181px) { .mobile-nav { display: none !important; } }

/* ---------- Footer bottom banner ---------- */
/* left: copyright. right: two tidy lines, never broken mid-sentence on desktop */
.site-footer .f-bottom { align-items: flex-start; }
.site-footer .f-bottom .fb-note { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 4px; line-height: 1.6; }
.site-footer .f-bottom .fb-line { display: block; }
@media (max-width: 860px) {
  .site-footer .f-bottom { flex-direction: column; gap: 12px; }
  .site-footer .f-bottom .fb-note { align-items: flex-start; text-align: left; }
}
/* keep the floating "Back to top" button from covering the last footer line */
.site-footer { padding-bottom: 88px; }

/* ---------- Clickable, maximisable map ---------- */
.map-photo.map-zoomable { position: relative; }
.map-zoom-btn { display: block; position: relative; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; color: inherit; font: inherit; }
.map-zoom-btn img { width: 100%; height: auto; display: block; transition: filter .25s ease; }
.map-zoom-btn:hover img, .map-zoom-btn:focus-visible img { filter: brightness(1.12); }
.map-zoom-btn:focus-visible { outline: 2px solid var(--bronze, #C9A876); outline-offset: -2px; }
.map-zoom-hint { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; line-height: 1; padding: 8px 12px; border-radius: 999px; background: rgba(12,13,14,.78); border: 1px solid rgba(201,168,118,.55); color: #E8D5B0; font: 500 12px/1 'Inter', sans-serif; letter-spacing: .02em; pointer-events: none; }
.map-zoom-hint svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.map-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; flex-direction: column; background: #050506; color: #F2EDE7; }
.map-lightbox.open { display: flex; }
.map-lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid rgba(201,168,118,.35); flex: 0 0 auto; }
.map-lb-title { font: 500 12px/1.4 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #C9A876; }
.map-lb-actions { display: flex; gap: 8px; }
.map-lb-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; background: rgba(242,237,231,.08); border: 1px solid rgba(201,168,118,.55); color: #F2EDE7; font: 500 13px/1 'Inter', sans-serif; cursor: pointer; }
.map-lb-btn:hover, .map-lb-btn:focus-visible { background: #C9A876; color: #0E0F10; }
.map-lb-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.map-lb-scroll { flex: 1 1 auto; overflow: auto; padding: 14px 18px 8px; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; display: flex; }
.map-lb-scroll img { margin: auto; max-width: none; width: 100%; height: auto; max-height: 100%; object-fit: contain; display: block; }
@media (min-width: 900px) { .map-lb-scroll img { width: auto; max-width: 100%; max-height: 100%; } }
@media (max-width: 899px) { .map-lb-scroll { align-items: center; padding: 10px 8px; } .map-lb-scroll img { width: 100%; max-width: 100%; height: auto; max-height: none; margin: 0 auto; } }
.map-lb-list { flex: 0 0 auto; margin: 0; padding: 12px 18px 18px; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; border-top: 1px solid rgba(201,168,118,.25); font: 400 14px/1.4 'Inter', sans-serif; color: #D9C9AA; }
.map-lb-list li::before { content: "\25E6\00a0"; color: #C9A876; }
body.map-lb-open { overflow: hidden; }
body.map-lb-open #backToTop, body.map-lb-open .cookie-bar { display: none !important; }

/* ---------- Government: aligned "Typical work" + example links ---------- */
.feature .typical-label { flex-grow: 0; }
.feature .typical { flex-grow: 0; }
.feature-grid.gov-features { grid-template-columns: repeat(3, 1fr); }
.feature .feature-example { display: block; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-gov, rgba(43,43,43,.12)); font-size: 13.5px; line-height: 1.5; font-weight: 500; }
.feature .feature-example .fe-label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin-bottom: 4px; font-weight: 400; }
.feature .feature-example:hover .fe-title, .feature .feature-example:focus-visible .fe-title { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .feature-grid.gov-features .feature { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    .feature-grid.gov-features .feature > p { flex-grow: 0; }
  }
}
@media (max-width: 900px) { .feature-grid.gov-features { grid-template-columns: 1fr; } }
.case-card[id], .case-study[id] { scroll-margin-top: 96px; }
.case-card[id]:target { outline: 2px solid rgba(201,168,118,.85); outline-offset: -2px; }
.on-fog .case-card[id]:target { outline-color: var(--petrol, #2F6F73); }

/* ---------- Contact: route cards ---------- */
.route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0 0 64px; align-items: stretch; }
@media (max-width: 860px) { .route-grid { grid-template-columns: 1fr; } }
.route-grid .route { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 30px 28px 26px; border-radius: 16px; border: 1px solid var(--line-greige, rgba(58,46,34,.14)); background: #FBF8F4; box-shadow: 0 1px 2px rgba(58,46,34,.06), 0 10px 26px rgba(58,46,34,.07); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.route-grid .route::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; border-radius: 16px 16px 0 0; background: var(--amber-2, #B37A1F); }
.route-grid .route:hover, .route-grid .route:focus-visible { transform: translateY(-3px); border-color: var(--amber-2, #B37A1F); box-shadow: 0 2px 4px rgba(58,46,34,.08), 0 16px 34px rgba(58,46,34,.13); }
.route-grid .route .route-icon { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(179,122,31,.12); color: var(--amber-2, #B37A1F); margin-bottom: 6px; }
.route-grid .route .route-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.route-grid .route h3 { font-size: 19px; margin: 0; color: var(--greige-ink, #3A2E22); }
.route-grid .route p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted-greige, #6B5748); flex-grow: 1; }
.route-grid .route .go { align-self: flex-start; margin-top: 10px; display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; background: var(--amber-2, #B37A1F); color: #fff; font-size: 14px; font-weight: 500; transition: background .2s ease; }
.route-grid .route:hover .go, .route-grid .route:focus-visible .go { background: #8F5F10; }

/* ---------- Insights: 2 x 2 articles ---------- */
.case-grid.insight-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .case-grid.insight-grid { grid-template-columns: 1fr; } }

/* ---------- AI automation: speaker call to action in the last section ---------- */
.closing.closing-split .wrap { flex-direction: row; align-items: stretch; justify-content: space-between; gap: 48px; flex-wrap: nowrap; }
.closing.closing-split .closing-part { flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.closing.closing-split .closing-part + .closing-part { padding-left: 48px; border-left: 1px solid var(--line-mint, rgba(29,71,69,.18)); }
.closing.closing-split .closing-part p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted-mint, #3F5958); max-width: 460px; }
.closing.closing-split .closing-part .btn { margin-top: auto; }
@media (max-width: 860px) {
  .closing.closing-split .wrap { flex-direction: column; gap: 36px; }
  .closing.closing-split .closing-part + .closing-part { padding-left: 0; border-left: 0; padding-top: 36px; border-top: 1px solid var(--line-mint, rgba(29,71,69,.18)); width: 100%; }
}

/* ---------- Company facts: award logos row ---------- */
.facts-awards { display: flex; align-items: flex-end; gap: 36px; flex-wrap: wrap; margin-top: 36px; }
.facts-awards a { display: inline-block; }
.facts-awards .apac-logo { width: 120px; height: 120px; border-radius: 50%; display: block; }

/* ---------- Case studies page: all case studies on one page ---------- */
.cs-section-title { font-size: 26px; margin: 0 0 8px; }
.cs-section-title:not(:first-child) { margin-top: 64px; }
.cs-section-note { margin: 0 0 18px; font-size: 14.5px; color: var(--muted-gov, #5C5C5C); }
.case-grid.case-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .case-grid.case-grid-2 { grid-template-columns: 1fr; } }

.case-spotlight-grid { display: flex; flex-direction: column; gap: 28px; margin-top: 8px; }
.case-spotlight { border: 1px solid var(--line-gov); border-radius: 16px; background: var(--gov-bg); padding: 36px 34px; display: flex; flex-direction: column; gap: 20px; }
.case-spotlight .case-sector { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--royal-2); }
.case-spotlight h3 { font-size: 21px; line-height: 1.28; color: var(--gov-ink); font-weight: 500; margin-top: 8px; }
.case-spotlight .case-boxes { display: flex; flex-direction: column; gap: 14px; }
.case-spotlight .case-box { border-radius: 12px; padding: 20px 22px; background: rgba(31,92,158,.06); }
.case-spotlight .case-box-label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--royal-2); margin: 0 0 8px; display: block; }
.case-spotlight .case-box p { font-size: 13.6px; line-height: 1.72; color: var(--muted-gov); margin: 0; }

.case-study-list { display: flex; flex-direction: column; gap: 1px; background: var(--line-gov); border: 1px solid var(--line-gov); margin-top: 8px; }
.case-study { background: var(--gov-bg); padding: 44px 40px; }
.case-study .cs-tag { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--royal-2); display: block; margin: 0 0 12px; }
.case-study h3 { font-size: 22px; line-height: 1.3; margin-bottom: 14px; max-width: 780px; color: var(--gov-ink); }
.case-study .cs-label { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--royal-2); margin: 26px 0 10px; }
.case-study p.cs-body { font-size: 15px; line-height: 1.75; color: var(--muted-gov); margin: 0; max-width: 760px; }
.case-study ul.cs-list { margin: 0; padding-left: 20px; max-width: 760px; display: flex; flex-direction: column; gap: 11px; }
.case-study ul.cs-list li { font-size: 15px; line-height: 1.7; color: var(--muted-gov); }
.case-study .cs-cta { margin-top: 26px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--royal-2); }
.case-study .cs-cta:hover, .case-study .cs-cta:focus-visible { text-decoration: underline; }
.cs-cr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0 8px; }
.cs-cr-box { background: #F3F6F9; border: 1px solid var(--line-gov); border-radius: 18px; padding: 24px 26px; }
.cs-cr-label { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--royal-2); margin: 0 0 10px; }
.cs-cr-body { font-size: 14.5px; line-height: 1.7; color: var(--muted-gov); margin: 0; }
.cs-cta-shared { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line-gov); display: block; }
@media (max-width: 760px) {
  .cs-cr-grid { grid-template-columns: 1fr; }
  .case-study { padding: 32px 22px; }
  .case-spotlight { padding: 26px 20px; }
}

/* ---------- Home: sector chips wrap instead of overflowing on tablets ---------- */
.chip-list { display: flex; flex-wrap: wrap; }

/* ---------- Government: first feature icon was drawn as a solid shape ---------- */
.feature .mark rect { fill: none; stroke: var(--bronze); stroke-width: 1.1; }
.on-white .feature .mark rect { stroke: var(--royal); }
.facts-awards { align-items: center; }
.facts-awards .apac-logo { box-shadow: 0 0 0 1px rgba(0,0,0,.14), 0 6px 18px rgba(0,0,0,.10); }

/* ---------- Insight articles: wide tables may extend beyond the text column ---------- */
@media (min-width: 1000px) {
  .prose .table-wrap.table-wide { width: min(1040px, calc(100vw - 96px)); max-width: none; }
}
.prose .table-wrap.table-wide td, .prose .table-wrap.table-wide th { vertical-align: top; }

/* ---------- AI automation: 3 rows instead of a 2 x 2 table ---------- */
.feature-grid.feature-grid-rows { grid-template-columns: 1fr; }

/* ---------- AI automation: common questions as a dropdown ---------- */
.faq-list { border: 1px solid var(--line-mint, rgba(29,71,69,.18)); background: var(--line-mint, rgba(29,71,69,.18)); display: grid; gap: 1px; }
.faq-item { background: var(--mint, #DAE8E8); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 30px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 17px; line-height: 1.4; margin: 0; color: var(--mint-ink, #16302F); }
.faq-item summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid var(--jade-2, #1D4745); border-bottom: 2px solid var(--jade-2, #1D4745); transform: rotate(45deg); margin-top: -4px; transition: transform .2s ease, margin .2s ease; }
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq-item summary:hover h3, .faq-item summary:focus-visible h3 { color: var(--jade, #2F6B68); }
.faq-item summary:focus-visible { outline: 2px solid var(--jade, #2F6B68); outline-offset: -2px; }
.faq-item .faq-a { padding: 0 30px 24px; max-width: 760px; }
.faq-item .faq-a p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted-mint, #37524F); }
@media (max-width: 560px) {
  .faq-item summary { padding: 18px 20px; }
  .faq-item .faq-a { padding: 0 20px 20px; }
}

/* ---------- Case studies: jump buttons in the hero ---------- */
.hero-cta.cs-jump { margin-top: 28px; gap: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 480px; }
.hero-cta.cs-jump .btn { text-align: center; }
@media (max-width: 480px) {
  .hero-cta.cs-jump { grid-template-columns: 1fr; }
}
.cs-section-title, h2[id], .case-study[id] { scroll-margin-top: 96px; }