/* ==========================================================================
   INNER PAGES
   --------------------------------------------------------------------------
   1. Page hero + breadcrumb        7. Case studies
   2. Prose (legal pages)           8. Team & offices
   3. Accordion (FAQ)               9. Capability rows
   4. Job cards                    10. Skill tag groups
   5. Pill / category nav          11. Thank-you panel
   6. Feature split rows
   ========================================================================== */

/* 1. PAGE HERO ============================================================= */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--header-h) + 38px + 4rem) clamp(3rem, 6vw, 5rem);
}
.page-hero::after {                         /* fade into the page background */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 140px;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--c-bg));
  pointer-events: none;
}
.page-hero__bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.page-hero__bg .hero__blob { opacity: .85; }
.page-hero__inner { max-width: 760px; }
.page-hero__inner--wide { max-width: 900px; }

.page-hero h1 {
  margin-top: 1.1rem;
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.04em;
}
.page-hero .lead { margin-top: 1.1rem; }
.page-hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .9rem; }

/* Entrance: the page hero's children rise in on load */
.js [data-page-in] {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(5px);
  transition:
    opacity .8s var(--ease-out),
    transform .8s var(--ease-out),
    filter .8s var(--ease-out);
  transition-delay: calc(100ms + var(--i, 0) * 90ms);
}
.js .is-loaded [data-page-in] { opacity: 1; transform: none; filter: none; }

/* --- Breadcrumb ---------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--c-text-subtle);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
.breadcrumb a { transition: color var(--dur); }
.breadcrumb a:hover { color: var(--c-primary-2); }
.breadcrumb [aria-current] { color: var(--c-text); }

/* 2. PROSE ================================================================= */
.prose {
  max-width: 76ch;
  font-size: 1rem;
  color: var(--c-text-muted);
}
.prose > * + * { margin-top: 1.1rem; }
.prose h2 {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--c-border);
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  color: var(--c-text);
}
.prose h3 { margin-top: 2rem; font-size: 1.1rem; color: var(--c-text); }
.prose ul, .prose ol { padding-left: 1.2rem; display: grid; gap: .5rem; }
.prose li::marker { color: var(--c-primary-2); }
.prose a { color: var(--c-primary-2); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--c-accent); }
.prose strong { color: var(--c-text); }

/* Sticky table of contents beside long legal copy */
.legal-grid { display: grid; grid-template-columns: 240px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.toc h2 {
  margin-bottom: .9rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-subtle);
}
.toc ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.toc a {
  display: block;
  padding: .35rem .7rem;
  border-left: 2px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  transition: color var(--dur), border-color var(--dur), background-color var(--dur);
}
.toc a:hover { color: var(--c-text); border-left-color: var(--c-primary); background: var(--c-surface); }
@media (max-width: 860px) { .legal-grid { grid-template-columns: 1fr; } .toc { position: static; } }

/* 3. ACCORDION ============================================================= */
.accordion { display: grid; gap: .75rem; max-width: 860px; }
.accordion__item {
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  border: 1px solid var(--c-border);
  overflow: hidden;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.accordion__item:has([aria-expanded="true"]) {
  border-color: rgb(43 163 207 / .35);
  box-shadow: var(--shadow-md);
}
.accordion__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  transition: color var(--dur), background-color var(--dur);
}
.accordion__btn:hover { background: var(--c-surface); color: var(--c-primary-2); }
.accordion__btn .icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--c-primary-2);
  transition: transform var(--dur) var(--ease-out);
}
.accordion__btn[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* Height is animated by JS writing --h; falls back to auto without JS */
.accordion__panel {
  overflow: hidden;
  height: 0;
  transition: height var(--dur) var(--ease-out);
}
html:not(.js) .accordion__panel { height: auto; }
.accordion__panel > div {
  padding: 0 1.25rem 1.25rem;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* 4. JOB CARDS ============================================================= */
.jobs { display: grid; gap: 1rem; }
.job-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: var(--r-xl);
  background: var(--glass-bg);
  border: 1px solid var(--c-border);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur);
}
.job-card:hover {
  transform: translateY(-3px);
  border-color: rgb(43 163 207 / .35);
  box-shadow: var(--shadow-lg);
}
.job-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .6rem;
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
}
.job-card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.job-card p  { font-size: var(--fs-sm); color: var(--c-text-muted); max-width: 62ch; }
.job-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .9rem; }
.chip {
  padding: .22rem .6rem;
  border-radius: var(--r-full);
  font-size: .72rem;
  font-weight: 500;
  color: var(--c-text-subtle);
  background: rgb(255 255 255 / .04);
  box-shadow: inset 0 0 0 1px var(--c-border);
}
.chip--open {
  color: var(--c-success);
  background: rgb(52 211 153 / .12);
  box-shadow: inset 0 0 0 1px rgb(52 211 153 / .25);
}
.chip--brand {
  color: var(--c-primary-2);
  background: rgb(43 163 207 / .12);
  box-shadow: inset 0 0 0 1px rgb(43 163 207 / .25);
}
@media (max-width: 720px) {
  .job-card { grid-template-columns: 1fr; }
  .job-card .btn { justify-self: start; }
}

/* 5. PILL NAV (service categories, case-study list) ======================== */
.pill-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.5rem;
}
.pill-nav a {
  padding: .5rem 1rem;
  border-radius: var(--r-full);
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-text-muted);
  background: rgb(255 255 255 / .04);
  box-shadow: inset 0 0 0 1px var(--c-border);
  transition: color var(--dur), background-color var(--dur), transform var(--dur) var(--ease-spring), box-shadow var(--dur);
}
.pill-nav a:hover,
.pill-nav a:focus-visible {
  transform: translateY(-2px);
  color: var(--c-text);
  background: rgb(43 163 207 / .14);
  box-shadow: inset 0 0 0 1px rgb(43 163 207 / .4);
}
.pill-nav a[aria-current] {
  color: var(--c-ink);
  background: var(--grad-brand);
  box-shadow: 0 8px 22px -8px rgb(43 163 207 / .7);
}

/* 6. FEATURE SPLIT ROWS ==================================================== */
.rows { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.row:nth-child(even) .row__media { order: -1; }
.row__media {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--c-border);
}
.row__media img { width: 100%; height: 100%; object-fit: cover; }
.row h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); margin-bottom: .9rem; }
.row p  { color: var(--c-text-muted); }
.row p + p { margin-top: .9rem; }
@media (max-width: 860px) {
  .row { grid-template-columns: 1fr; }
  .row:nth-child(even) .row__media { order: 0; }
}

/* 7. CASE STUDIES ========================================================== */
.case-grid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
.case-list {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: grid;
  gap: .35rem;
  max-height: calc(100svh - var(--header-h) - 3rem);
  overflow-y: auto;
  padding-right: .25rem;
}
.case-list button {
  display: grid;
  gap: .2rem;
  width: 100%;
  padding: .75rem .9rem;
  border-radius: var(--r-md);
  text-align: left;
  font-size: .85rem;
  color: var(--c-text-muted);
  border-left: 2px solid transparent;
  transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
.case-list button:hover { background: var(--c-surface); color: var(--c-text); }
.case-list button[aria-selected="true"] {
  background: rgb(43 163 207 / .12);
  border-left-color: var(--c-primary);
  color: var(--c-text);
}
.case-list small { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-subtle); }

.case-panel {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-xl);
  background: var(--glass-bg);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
}
.case-panel[hidden] { display: none; }
.js .case-panel:not([hidden]) { animation: tab-in .45s var(--ease-out); }
.case-panel h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); }
.case-panel__client {
  margin-top: .6rem;
  font-size: var(--fs-sm);
  color: var(--c-primary-2);
}
.case-block { margin-top: 1.75rem; }
.case-block h3 {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .6rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-subtle);
}
.case-block h3 .icon { width: 15px; height: 15px; color: var(--c-primary-2); }
.case-block p { color: var(--c-text-muted); font-size: .95rem; }
.case-block ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.case-block li { display: flex; gap: .6rem; font-size: .95rem; color: var(--c-text-muted); }
.case-block li .icon { width: 1rem; height: 1rem; margin-top: .32rem; flex: none; color: var(--c-success); }

@media (max-width: 900px) {
  .case-grid { grid-template-columns: 1fr; }
  .case-list {
    position: static;
    max-height: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 1fr);
    overflow-x: auto;
    padding-bottom: .5rem;
  }
  .case-list button { border-left: 0; border-bottom: 2px solid transparent; }
  .case-list button[aria-selected="true"] { border-left: 0; border-bottom-color: var(--c-primary); }
}

/* 8. TEAM & OFFICES ======================================================== */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 860px; }
.team-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: center;
  padding: 1.25rem;
  border-radius: var(--r-xl);
  background: var(--glass-bg);
  border: 1px solid var(--c-border);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur);
}
.team-card:hover { transform: translateY(-3px); border-color: rgb(43 163 207 / .35); box-shadow: var(--shadow-lg); }
.team-card img {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgb(43 163 207 / .4), 0 0 24px -6px rgb(43 163 207 / .6);
}
.team-card h3 { font-size: 1.1rem; }
.team-card .role {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-primary-2);
}
@media (max-width: 720px) { .team { grid-template-columns: 1fr; } }

.offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.office {
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--glass-bg);
  border: 1px solid var(--c-border);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur);
}
.office:hover { transform: translateY(-4px); border-color: rgb(43 163 207 / .35); box-shadow: var(--shadow-lg); }
.office__media { aspect-ratio: 16 / 10; overflow: hidden; }
.office__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.office:hover .office__media img { transform: scale(1.06); }
.office__body { padding: 1.25rem; }
.office__body h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.office__body address { font-style: normal; font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.6; }
.office__links { display: grid; gap: .4rem; margin-top: .9rem; font-size: var(--fs-sm); }
.office__links a { display: inline-flex; align-items: center; gap: .45rem; color: var(--c-text-muted); transition: color var(--dur); }
.office__links a:hover { color: var(--c-primary-2); }
.office__links .icon { width: 15px; height: 15px; color: var(--c-primary); }
@media (max-width: 900px) { .offices { grid-template-columns: 1fr; } }

/* 9. CAPABILITY ROWS (service detail pages) ================================ */
.caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.cap {
  padding: 1.5rem;
  border-radius: var(--r-xl);
  background: var(--glass-bg);
  border: 1px solid var(--c-border);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur);
}
.cap:hover { transform: translateY(-3px); border-color: rgb(43 163 207 / .35); box-shadow: var(--shadow-lg); }
.cap__head { display: flex; align-items: center; gap: .85rem; margin-bottom: .85rem; }
.cap__head h3 { font-size: 1.05rem; }
.cap > p { font-size: var(--fs-sm); color: var(--c-text-muted); }
.cap ul { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0 0; padding: 0; list-style: none; }
@media (max-width: 760px) { .caps { grid-template-columns: 1fr; } }

/* 10. SKILL TAG GROUPS ===================================================== */
.tag-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.tag-group {
  padding: 1.5rem;
  border-radius: var(--r-xl);
  background: var(--glass-bg);
  border: 1px solid var(--c-border);
}
.tag-group h3 {
  margin-bottom: 1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-primary-2);
}
.tag-group ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.tag-group li {
  padding: .3rem .7rem;
  border-radius: var(--r-full);
  font-size: .8rem;
  color: var(--c-text-muted);
  background: rgb(255 255 255 / .04);
  box-shadow: inset 0 0 0 1px var(--c-border);
  transition: color var(--dur), background-color var(--dur), transform var(--dur) var(--ease-spring);
}
.tag-group li:hover {
  transform: translateY(-2px);
  color: var(--c-text);
  background: rgb(43 163 207 / .14);
}
@media (max-width: 760px) { .tag-groups { grid-template-columns: 1fr; } }

/* --- Equal-column card grids --------------------------------------------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 620px)  { .grid-4, .grid-2 { grid-template-columns: 1fr; } }

/* 11. THANK YOU ============================================================ */
.thanks {
  position: relative;      /* clips the mesh blobs, which overflow otherwise */
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding-block: calc(var(--header-h) + 38px + 3rem) 4rem;
  text-align: center;
}
.thanks__inner { max-width: 560px; }
.thanks__icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 1.75rem;
  border-radius: 50%;
  color: var(--c-ink);
  background: var(--grad-brand);
  box-shadow: 0 0 60px -10px rgb(43 163 207 / .9);
  animation: pop .7s var(--ease-spring) both;
}
.thanks__icon .icon { width: 38px; height: 38px; stroke-width: 2.5; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.thanks h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.thanks p { margin-top: 1rem; }
.thanks__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* Job-detail fallback title: carries the h1 role without a second <h1> */
.page-hero__fallback-title {
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.04em;
  color: var(--c-text);
}

/* The page hero is much shorter than the homepage hero, so the mesh blobs
   need their own placement to stay visible, and the following section can
   sit closer without the two runs of padding stacking up. */
.page-hero__bg .hero__blob--1 { left: -12%; top: -55%; width: min(700px, 90vw); }
.page-hero__bg .hero__blob--2 { right: -8%;  top: -25%; width: min(560px, 75vw); }
.page-hero + .section { padding-top: clamp(1.5rem, 3vw, 3rem); }

/* 12. CONSENT BANNER ======================================================= */
.consent {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 60;
  width: min(100% - 2rem, 640px);
  translate: -50% 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-lg);
  background: rgb(14 26 43 / .92);
  -webkit-backdrop-filter: var(--glass-blur);
          backdrop-filter: var(--glass-blur);
  border: 1px solid var(--c-border-strong);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.consent.is-in { opacity: 1; transform: none; }
.consent__text {
  flex: 1 1 260px;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.consent__text a { color: var(--c-primary-2); text-decoration: underline; text-underline-offset: 3px; }
.consent__actions { display: flex; gap: .5rem; margin-left: auto; }
@media (max-width: 520px) {
  .consent__actions { width: 100%; }
  .consent__actions .btn { flex: 1; }
}