/* ============================================================================
   Detail Page   reusable template styles (loaded after styles.css)
   Reuses the shared theme; adds a cover variant, breadcrumbs, a rich-text
   body, and a related rail. Intended for any "cover → rich text → related"
   page (advisory focus areas, insights, industries, services).

   Load styles.css + detail.css only. Do NOT also load advisory.css   its
   #perspectives/#value-chain geometry assumes a page shape this template
   doesn't have. (The `main > section` banding conflict that used to be the
   main reason is gone; banding is now global on `.section`/`.section--tint`.)
   ============================================================================ */

/* ---------- PAGE SHELL ----------
   Banding is global now   `.section` / `.section--tint` in styles.css. The
   `.detail-page >` scoped copies that used to live here are gone. */
/* Deep-linked sections clear the fixed 82px nav when jumped to via #anchor */
.detail-page section[id] {
  scroll-margin-top: 96px;
}

/* ---------- ACCENT THEMING ----------
   One brand accent per page drives the cover badge, list markers, links, and
   card hovers. Follows the --accent precedent in advisory.css:47.
   In React this becomes a single `accent` prop. */
/* :where() so the shared .accent-* family in styles.css wins. The overrides
   that used to sit here are gone   they are that family now. */
:where(.detail-page) {
  --accent: var(--blue);
  --accent-deep: var(--blue-dark);
}

/* ============================================================================
   01   COVER (.hero--detail)
   Reuses .hero wholesale: the fixed header is transparent with a white logo
   until JS adds .scrolled past 40px, so a detail page MUST open dark. .hero
   already carries the navy background + photo tint that makes that work.
   This modifier only makes the cover subordinate to the home hero.
   ============================================================================ */
.hero--detail {
  padding: 8.5rem 0 5rem;
}
.hero--detail h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  margin: 1rem 0 1.2rem;
}
.hero--detail .hero-inner > div {
  max-width: 680px;
}
.hero--detail p.lead {
  font-size: 1.12rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 2rem;
}
/* The hero summary now runs to several paragraphs (straight from the content
   doc), so only the last one keeps the 2rem gap that separates it from the
   CTAs   the rest sit at paragraph spacing. */
.hero--detail p.lead:not(:last-of-type) {
  margin-bottom: 0.9rem;
}
/* Cover eyebrow. The shared .eyebrow is var(--blue), unreadable on the dark
   hero photo, so it is lightened here. */
.hero--detail .eyebrow {
  color: rgba(255, 255, 255, 0.75);
}
.hero--detail .detail-icon + .eyebrow {
  margin-top: 0.4rem;
}
@media (max-width: 720px) {
  .hero--detail {
    padding: 7rem 0 3.5rem;
  }
}

/* ---------- BREADCRUMBS (new component) ----------
   The only genuinely new primitive   the site had no breadcrumbs. Light-on-dark,
   sits above the cover icon badge. NOTE: styles.css:103 resets ul but NOT ol, so
   this ol needs its own reset or it renders "1. 2. 3.". */
.crumbs {
  margin-bottom: 1.6rem;
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crumbs li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}
.crumbs li + li::before {
  content: "/";
  color: rgba(255, 255, 255, 0.35);
}
.crumbs a {
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.18s var(--ease);
}
.crumbs a:hover {
  color: #fff;
}
.crumbs [aria-current="page"] {
  color: #fff;
  font-weight: 600;
}

/* ---------- COVER ICON BADGE ----------
   Carries the source card's icon + accent onto the page, so the card you
   clicked and the page you land on read as the same object. Echoes
   .domain-icon (styles.css:410) one size up. */
.detail-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--accent);
  box-shadow: 0 10px 24px -8px rgba(2, 8, 23, 0.6);
}
.detail-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The ic-* sprite symbols are dot patterns (filled circles), not stroked paths.
   The badge carries the nav card's icon, so those need .dd-icon's fill treatment
   (styles.css:295) rather than .domain-icon's stroke. Scoped by the <use> href, so
   every dm-* badge is untouched. */
.detail-icon svg use[href^="#ic-"],
.domain-icon svg use[href^="#ic-"] {
  fill: #fff;
  stroke: none;
}

/* ---------- MEGA-MENU: CURRENT PAGE ----------
   The Advisory Services dropdown lists every focus area, so on a detail page
   one of its items is the page you're already on   mark it.
   Uses --blue-dark, not --accent: the header sits outside .detail-page, where
   the accent custom props are scoped, so var(--accent) would not resolve. */
.dd-item[aria-current="page"] {
  background: var(--mist);
}
.dd-item[aria-current="page"] h5 {
  color: var(--blue-dark);
}

/* ============================================================================
   02   RICH TEXT (.rt)
   Borrows .cp-article's proven scale (styles.css:331) but does NOT reuse it:
   .cp-article's drop cap is `p:not(.vc-lede-light)::first-letter`, which caps
   EVERY paragraph. That only looks right at its one call site (index.html:409)
   because that block holds exactly one paragraph. Here the cap is scoped to
   the first paragraph, and the elements a real body needs are restored.
   ============================================================================ */
.rt {
  max-width: 68ch;
}

.rt p {
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--slate);
  margin: 0 0 1.3rem;
}
.rt > *:last-child {
  margin-bottom: 0;
}

/* Opening statement   serif italic, per .vc-lede-light (styles.css:332).
   Must be scoped under .rt: a bare .rt-lede is (0,1,0) and would lose to
   `.rt p` (0,1,1) above, rendering the lede at body size. */
.rt .rt-lede {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  line-height: 1.32;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 1.8rem;
}

/* Drop cap: the first BODY paragraph   never the lede, which carries its own
   serif-italic emphasis (this is the house look at index.html:410-411).
   Two cases, so both are matched explicitly rather than fought over with
   specificity: a .rt that opens with a lede, and one that doesn't. */
.rt > .rt-lede + p::first-letter,
.rt > p:first-of-type:not(.rt-lede)::first-letter {
  float: left;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 4.2em;
  /* NOT .72 (the value .cp-article uses): at this size a line-height of .72
     gives the first-letter a 52.25px line box while Instrument Serif's cap
     needs ~52.1px of ink plus leading, so Chrome shears ~1.2px off the top of
     the glyph. Measured across .72-1.0: everything >= .78 renders the cap at
     its full 52.1px. .78 keeps the cap within 1px of its original position and
     does not change the paragraph height, so the cap still spans two lines.
     Invisible on a pointed 'A'; obvious on a flat-topped 'E'. */
  line-height: 0.78;
  margin: 0.05em 0.12em 0 0;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.rt.no-dropcap > .rt-lede + p::first-letter,
.rt.no-dropcap > p:first-of-type:not(.rt-lede)::first-letter {
  float: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  background: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

/* Body headings start at h2   the cover owns the h1. Plain ink, no gradient
   clip: that treatment is reserved for .section-head h2 so section titles stay
   visually distinct from in-body subheads. */
.rt h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 2.6rem 0 0.9rem;
  letter-spacing: -0.015em;
}
.rt h3 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--ink);
  margin: 2rem 0 0.7rem;
}
.rt > h2:first-child,
.rt > h3:first-child {
  margin-top: 0;
}

/* Lists   styles.css:103 kills ul markers globally, so both are rebuilt here.
   Bullets match .pillar-card li::before (styles.css:304), tinted per accent. */
.rt ul,
.rt ol {
  margin: 0 0 1.3rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.rt li {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--slate);
}
.rt ul li {
  position: relative;
  padding-left: 1.4rem;
  list-style: none;
}
.rt ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.rt ol {
  counter-reset: rt-ol;
}
.rt ol li {
  position: relative;
  padding-left: 1.9rem;
  list-style: none;
  counter-increment: rt-ol;
}
.rt ol li::before {
  content: counter(rt-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.85;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.rt li > ul,
.rt li > ol {
  margin: 0.6rem 0 0;
}

/* Links   .cp-article's underline treatment (styles.css:337), accent-themed */
.rt a {
  color: var(--accent-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s var(--ease);
}
.rt a:hover {
  text-decoration-color: var(--accent);
}

.rt blockquote {
  margin: 2rem 0;
  padding: 0.2rem 0 0.2rem 1.6rem;
  border-left: 3px solid var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--ink);
}
.rt blockquote p {
  font-family: inherit;
  font-style: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

/* Figures   aspect-ratio is set so the image reserves its box before load
   (Core Web Vitals: CLS). Override per-image if the ratio differs. */
.rt figure {
  margin: 2.2rem 0;
}
.rt img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.rt figcaption {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--slate-light);
  text-align: center;
}

/* Hairline matching .section::before (styles.css:114) */
.rt hr {
  border: none;
  height: 1px;
  margin: 2.6rem 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(15, 37, 71, 0.16),
    transparent
  );
}

.rt code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  border-radius: 5px;
  background: var(--mist);
  color: var(--ink);
}

/* ============================================================================
   03   RELATED RAIL (.related-rail)
   Grid on desktop; a snapping swipe rail under 900px. Deliberately zero JS  
   native CSS scroll-snap keeps every link in the DOM, crawlable, and keyboard
   reachable (tabbing to an off-screen card scrolls it into view for free).
   The JS-built .slider (styles.css:530) stays reserved for long product sets.
   ============================================================================ */
.related-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

@media (max-width: 900px) {
  .related-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    /* bleed past .wrap's 1.5rem padding so cards run to the screen edge.
       body{overflow-x:clip} (styles.css:68) contains this   the page itself
       never scrolls sideways, only this rail does. */
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
    /* Mandatory snap aligns cards to the SNAPPORT, which defaults to the
       padding box   without this the browser scrolls the 1.5rem start padding
       away to satisfy the snap, and card 1 sits flush to the screen edge
       instead of lining up with the section heading. */
    scroll-padding-inline: 1.5rem;
    /* room for .domain-item's -4px hover lift + shadow, else overflow clips it */
    padding-block: 0.75rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .related-rail::-webkit-scrollbar {
    display: none;
  }
  /* 78% leaves a peek of the next card   the affordance that says "swipe" */
  .related-rail > .domain-item {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}
@media (max-width: 520px) {
  .related-rail > .domain-item {
    flex-basis: 84%;
  }
}

/* Stagger the entrance like advisory.css does for .grid-4   via the custom property
   `.reveal` reads, never transition-delay (see the note at styles.css:659; a delay
   set here leaks onto the cards' hover transform) */
.related-rail > .reveal:nth-child(2) {
  --reveal-delay: 0.07s;
}
.related-rail > .reveal:nth-child(3) {
  --reveal-delay: 0.14s;
}

/* Accent the related card hover to match the page it sits on */
.detail-page .related-rail .domain-item:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.detail-page .related-rail .domain-item:hover h4 {
  color: var(--accent-deep);
}

/* ============================================================================
   04   INTAKE FORM (.rt-form)
   Careers and Contact are the only detail pages that ask the reader for
   something. Namespaced .rt-form so it cannot reach the rest of the site, and
   built entirely from existing tokens   no new custom properties to port.
   Sits in a plain .section (white), keeping the page's tint alternation
   intact   so each control needs its own --line-2 border and --shadow-sm to
   read as a field rather than dissolve into the band.
   ============================================================================ */
.rt-form {
  max-width: 68ch;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.4rem;
  align-items: start;
}
/* file, textarea, the select that has no partner, and the submit row all want
   the full measure rather than half of it */
.rt-form-field--wide,
.rt-form-actions {
  grid-column: 1 / -1;
}

.rt-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
.rt-form-field label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
/* the Required / Optional hint rides along with the label, not below it */
.rt-form-field .req {
  margin-left: 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-light);
}

/* .insights-filter rides these same rules rather than restating them   the
   token vocabulary and focus treatment are already right for it. It overrides
   only the radius, further down. */
.rt-form input,
.rt-form select,
.rt-form textarea,
.rt-form .rt-combo-trigger,
.insights-filter select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: 0.7rem 0.9rem;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.rt-form textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.6;
}
/* native file inputs ignore padding on the control itself */
.rt-form input[type="file"] {
  padding: 0.55rem 0.9rem;
  color: var(--slate);
  font-size: 0.94rem;
}

.rt-form input:focus-visible,
.rt-form select:focus-visible,
.rt-form textarea:focus-visible,
.rt-form .rt-combo-trigger:focus-visible,
.insights-filter input:focus-visible,
.insights-filter select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.rt-form ::placeholder,
.insights-filter ::placeholder {
  color: var(--slate-light);
}

.rt-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.2rem;
  margin-top: 0.4rem;
}
.rt-form-note {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--slate-light);
}
/* once the enquiry script writes a sending / sent / failed message it is a
   result, not a hint, so it steps up from --slate-light */
.rt-form-note[data-state] {
  color: var(--ink);
}
.rt-form-note[data-state="error"] {
  font-weight: 600;
}

/* ---- country picker (.rt-combo) ----
   contact.html's script builds this over the native country <select>, which
   stays in the form for FormData / required / reset. Without JS the select
   shows as a normal field and none of this applies. */
.rt-combo {
  position: relative;
}
/* hidden but still rendered, so the form can validate and focus it */
.rt-form .rt-combo-native {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}
.rt-form .rt-combo-trigger {
  display: flex;
  align-items: center;
  text-align: left;
  padding-right: 2.4rem;
  cursor: pointer;
  /* same chevron as .insights-filter select */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234C5B77' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 11px 8px;
}
.rt-form .rt-combo-trigger span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rt-form .rt-combo-trigger:hover {
  border-color: var(--accent);
}
.rt-form .rt-combo-trigger.is-placeholder {
  color: var(--slate-light);
}
.rt-form .rt-combo-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 7l5-5 5 5' stroke='%234C5B77' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.rt-form .rt-combo-trigger[aria-invalid="true"] {
  border-color: var(--orange);
}

.rt-combo-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  padding: 0.5rem;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
/* the script flips it when there is more room above the field than below */
.rt-combo-panel.is-up {
  top: auto;
  bottom: calc(100% + 6px);
}
.rt-combo-panel[hidden],
.rt-combo-empty[hidden] {
  display: none;
}
.rt-form .rt-combo-search {
  margin-bottom: 0.4rem;
  padding: 0.55rem 0.8rem;
  font-size: 0.95rem;
  box-shadow: none;
}
.rt-combo-list {
  position: relative; /* options' offsetTop is measured from here */
  max-height: calc(2.5rem * 6); /* six rows; ROWS in contact.html matches */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rt-combo-list li {
  position: relative;
  height: 2.5rem;
  line-height: 2.5rem;
  padding: 0 2rem 0 0.75rem;
  border-radius: 8px;
  font-size: 0.95rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.rt-combo-list li.is-active {
  background: var(--accent-soft);
}
.rt-combo-list li[aria-selected="true"] {
  color: var(--accent-deep);
  font-weight: 600;
}
.rt-combo-list li[aria-selected="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.75rem;
  width: 12px;
  height: 9px;
  margin-top: -4.5px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5l3.5 3.5L11 1' stroke='%23000' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5l3.5 3.5L11 1' stroke='%23000' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.rt-combo-empty {
  margin: 0;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  color: var(--slate-light);
}

@media (max-width: 700px) {
  .rt-form {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   05   INSIGHTS FILTER (.insights-filter)
   The library on insights.html is browsed, not navigated   so this is the one
   place on the site with a search field and dropdown facets. The controls
   borrow the .rt-form rules above (see the note there); everything below is
   layout, the gradient underline and the states .rt-form has no use for.
   Cards are .insight-card in .grid-3   both already in styles.css.
   ============================================================================ */
.insights-filter {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-bottom: 2.4rem;
}

/* ---- search: a bare field over a --brand-grad rule, per the reference ---- */
.if-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 0.85rem;
}
.if-search::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-grad);
}
.if-search-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--slate);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* not a .rt-form control: no box, no shadow   the rule under it is the affordance */
.insights-filter input[type="search"] {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1.15rem;
  color: var(--ink);
  padding: 0.2rem 0;
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.insights-filter input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.insights-filter input[type="search"]:focus-visible {
  outline: none;
  box-shadow: none;
}
.if-search:focus-within .if-search-icon {
  stroke: var(--accent);
}

/* ---- the toggle row ---- */
.if-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
/* Every filter control that reads as a text action is a <button>: .btn-ghost sets
   colour/padding/flex but never resets the UA's button chrome, so the fill, border
   and default cursor need clearing here or they render as grey boxes. .if-showall
   lives down in the pager row, but it is the same control and shares this reset. */
.if-toggle,
.if-clear,
.if-showall {
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.if-toggle .chev {
  display: inline-flex;
  transition: transform 0.25s var(--ease);
}
.if-toggle[aria-expanded="false"] .chev {
  transform: rotate(180deg);
}

/* ---- the facets ---- */
.if-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}
.if-fields[hidden] {
  display: none;
}
.insights-filter select {
  width: auto;
  min-width: 11rem;
  border-radius: 999px; /* pill, per the reference */
  padding: 0.6rem 2.4rem 0.6rem 1.1rem;
  font-size: 0.9rem;
  color: var(--slate);
  -webkit-appearance: none;
  appearance: none;
  /* same chevron path as the nav .dd-toggle, inlined so it needs no request */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234C5B77' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.05rem center;
  background-size: 11px 8px;
  cursor: pointer;
}
.insights-filter select:hover {
  border-color: var(--accent);
}
/* a facet with a value selected reads as active, like .pill.is-active */
.insights-filter select.is-active {
  border-color: var(--accent);
  color: var(--accent-deep);
  background-color: var(--blue-soft);
  font-weight: 600;
}

/* ---- result count, empty state ---- */
.if-count {
  margin: 0 0 1.4rem;
  font-size: 0.88rem;
  color: var(--slate-light);
}
.if-count strong {
  color: var(--ink);
  font-weight: 700;
}
.if-empty {
  margin: 0;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--slate);
  font-size: 1rem;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
}
.if-empty[hidden] {
  display: none;
}

/* .insight-card is display:flex at author origin, which beats the UA
   [hidden]{display:none} rule   and no stylesheet here defines [hidden].
   So filtering has to hide by class, never by the attribute. */
.insight-card.is-hidden {
  display: none;
}

/* ---- pager + show-all ---- */
.if-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.4rem;
}
.if-foot[hidden] {
  display: none;
}
.if-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.if-pager[hidden] {
  display: none;
}
.if-showall[hidden] {
  display: none;
}

@media (max-width: 700px) {
  .insights-filter select {
    min-width: 0;
    flex: 1 1 100%;
  }
  .if-foot {
    justify-content: center;
  }
}

/* ============================================================================
   06   CASE STUDY FILTER (.cf-*)
   case-studies.html reuses the whole .insights-filter block above   search
   bar, dropdowns (Industry, Business Domain, Technology), count, empty state,
   pager, .is-hidden. Only one thing differs, and it is defined here: the card
   carries a domain + technology tag line under its description.
   ============================================================================ */
/* The card's discovery tags. Not .pill   these are labels inside an already
   bordered card, so a second border reads as a control the reader can press. */
.cf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.cf-tags span {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--slate-light);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
/* separator dot between tags, not before the first */
.cf-tags span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line-2);
}
/* .insight-card pins .cta-row to the bottom via p{flex-grow:1}; the tag line
   must not absorb that growth or the CTAs stop lining up across a row. */
.insight-card .cf-tags {
  flex-grow: 0;
}

/* ============================================================================
   07   COMING SOON (.coming-soon)
   careers.html's placeholder while its real <main> is commented out. Fills
   the first screen and centres one grey heading. The page script keeps the
   header in its solid state whenever a page has no .hero.
   ============================================================================ */
.coming-soon {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 82px 1.5rem 0; /* clears the fixed header */
  background: var(--white);
  text-align: center;
}
.coming-soon h1 {
  font-size: clamp(3rem, 10vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--slate-light);
}