/* ============================================================================
   INCA base — design tokens + shared primitives
   ----------------------------------------------------------------------------
   Loaded by every hand-written (non-Elementor) page template. Page-specific
   styles live in their own stylesheet alongside this one.

   NOTE: inca-front.css still carries its own copy of these tokens. That
   duplication is deliberate for now: the front page is live and untouched.
   When the migration is further along, trim the duplicated block from
   inca-front.css and let it depend on this file instead.
   ========================================================================== */

:root{
  /* Brand core */
  --inca-navy:#1A1A2E; --inca-indigo:#34357A; --inca-plum:#7E5F82; --inca-orange:#F2A03C;
  /* Indigo (primary) */
  --indigo-50:#ececf4; --indigo-100:#d2d2e6; --indigo-200:#a7a7cd; --indigo-300:#7b7cb3;
  --indigo-400:#54559a; --indigo-500:#34357A; --indigo-600:#2c2d68; --indigo-700:#232452;
  --indigo-800:#1c1c41; --indigo-900:#1A1A2E;
  /* Orange (accent) */
  --orange-50:#fef4e7; --orange-100:#fde3c2; --orange-200:#fac98c; --orange-300:#f6b35f;
  --orange-400:#F2A03C; --orange-500:#e08620; --orange-600:#bd6c14; --orange-700:#92530f;
  /* Plum (secondary) */
  --plum-100:#ece5ed; --plum-200:#cfbfd1; --plum-300:#a98dac; --plum-400:#7E5F82;
  --plum-500:#694d6c; --plum-600:#523c54;
  /* Neutrals */
  --neutral-0:#ffffff; --neutral-50:#f7f7fa; --neutral-100:#eeeef3; --neutral-200:#dededf;
  --neutral-300:#c7c7d2; --neutral-400:#9a9aab; --neutral-500:#6f6f81; --neutral-600:#51515f;
  --neutral-700:#3a3a47; --neutral-800:#26262f; --neutral-900:#1A1A2E;
  /* Status */
  --success:#2e8b6b;
  /* Semantic */
  --text-strong:var(--neutral-900); --text-body:var(--neutral-700); --text-muted:var(--neutral-500);
  --text-on-brand:var(--neutral-0); --text-link:var(--indigo-500);
  --surface-page:var(--neutral-50); --surface-card:var(--neutral-0);
  --border-subtle:var(--neutral-200); --border-default:var(--neutral-300);
  /* Gradients */
  --gradient-brand:linear-gradient(120deg,#34357A 0%,#7E5F82 100%);
  --gradient-ink:linear-gradient(160deg,#26262f 0%,#1A1A2E 100%);
  --gradient-warm:linear-gradient(120deg,#F2A03C 0%,#e08620 100%);
  /* Type */
  --font-display:'Montserrat',system-ui,sans-serif;
  --font-body:'Montserrat',system-ui,sans-serif;
  /* Spacing */
  --space-6:2rem;
  /* Radii */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:28px; --radius-pill:999px;
  /* Shadows */
  --shadow-xs:0 1px 2px rgba(26,26,46,.06); --shadow-sm:0 2px 6px rgba(26,26,46,.08);
  --shadow-md:0 8px 24px rgba(26,26,46,.10); --shadow-lg:0 18px 48px rgba(26,26,46,.14);
  --shadow-accent:0 10px 28px rgba(242,160,60,.35); --shadow-brand:0 12px 30px rgba(52,53,122,.28);
  /* Motion */
  --ease-standard:cubic-bezier(.4,0,.2,1); --dur-fast:120ms; --dur-base:200ms;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
/* The HTML `hidden` attribute is only `display:none` in the user-agent
   stylesheet, so ANY author rule that sets `display` silently defeats it.
   That bit us: JS set `hidden` on filtered-out marketplace cards, but
   `.mp-card{display:flex}` kept them on screen, so search appeared to work
   while showing every supplier. Make `hidden` actually mean hidden. */
[hidden]{display:none !important}

.inca-page *{box-sizing:border-box}
.inca-page{background:var(--surface-page);font-family:var(--font-body);color:var(--text-body);text-wrap:pretty}
.inca-page img{max-width:100%;display:block}
/* Excludes .btn: a bare `.inca-page a` rule outranks the .btn--* colour rules
   on specificity and would silently override every button's text colour. */
.inca-page a:not(.btn){color:var(--text-link);-webkit-tap-highlight-color:transparent}
.inca-page a:not(.btn):hover{color:var(--indigo-700)}
.inca-page a.btn{-webkit-tap-highlight-color:transparent}
.inca-page h1,.inca-page h2,.inca-page h3,.inca-page h4,.inca-page p{margin:0}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.container{max-width:1200px;margin:0 auto;padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px)}
.band{background:var(--surface-card);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:28px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* ── Typography ───────────────────────────────────────────────────────────── */
.eyebrow{font-family:var(--font-body);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.section-title{font-family:var(--font-display);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--text-strong)}
.link-arrow{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--indigo-600);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.link-arrow:hover{color:var(--indigo-700)}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;
  border-radius:var(--radius-md);transition:transform var(--dur-fast) var(--ease-standard),filter var(--dur-fast) var(--ease-standard)}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn svg{display:block}
.btn--sm{padding:8px 14px;font-size:13px;border-radius:var(--radius-sm);gap:6px}
.btn--md{padding:11px 20px;font-size:15px;gap:8px}
.btn--lg{padding:15px 28px;font-size:17px;gap:10px}
.btn--block{display:flex;width:100%}
.btn--primary{background:var(--indigo-500);color:var(--text-on-brand);border-color:var(--indigo-500);box-shadow:var(--shadow-brand)}
.btn--accent{background:var(--orange-400);color:var(--inca-navy);border-color:var(--orange-400);box-shadow:var(--shadow-accent)}
.btn--secondary{background:var(--neutral-0);color:var(--indigo-500);border-color:var(--border-default);box-shadow:var(--shadow-xs)}
.btn--ghost{background:transparent;color:var(--indigo-500)}
.btn--on-dark{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.28)}
.btn--on-dark:hover{background:rgba(255,255,255,.18);color:#fff}

/* ── Pills ────────────────────────────────────────────────────────────────── */
.pill{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);font-weight:800;
  font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;padding:6px 12px;border-radius:var(--radius-pill)}
.pill--brand{color:var(--indigo-600);background:var(--indigo-50)}
.pill--ink{color:var(--orange-300);background:rgba(242,160,60,.14)}
.pill--dot::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--success)}

/* ── Page hero (shared by interior pages) ─────────────────────────────────── */
.page-hero{position:relative;overflow:hidden;background:var(--gradient-ink);color:#fff}
.page-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.20}
.page-hero__glow{position:absolute;inset:0;
  background:radial-gradient(680px 420px at 84% -12%,rgba(242,160,60,.26),transparent 60%),
             radial-gradient(560px 360px at 6% 108%,rgba(126,95,130,.34),transparent 62%)}
.page-hero__inner{position:relative;padding:clamp(44px,6.5vw,84px) 0}
/* Max size is set by the LONGEST hero heading on the site, currently the
   membership hub's "Join the voice of the UK's independent networks" at 46
   characters. The container caps at 1200px, so a heading that needs more than
   that wraps no matter how wide the screen is: going full screen does not help.
   At 3.3rem the Marketplace heading needed 1204px and wrapped by 4px. */
.page-hero__title{font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,3.6vw,2.9rem);
  line-height:1.06;letter-spacing:-.025em;color:#fff;
  /* Balance the wrap so a heading does not end on a single orphan word. */
  text-wrap:balance}
.page-hero__title em{font-style:normal;color:var(--orange-400)}
.page-hero__lead{font-size:18px;line-height:1.6;color:var(--neutral-300);max-width:620px;margin-top:16px;
  text-wrap:balance}

/* ── Closing CTA ──────────────────────────────────────────────────────────── */
.cta{position:relative;overflow:hidden;background:var(--gradient-brand);border-radius:var(--radius-xl);
  padding:clamp(32px,5vw,56px);color:#fff;text-align:center}
.cta__glow{position:absolute;inset:0;background:radial-gradient(500px 320px at 92% 120%,rgba(242,160,60,.32),transparent 60%)}
.cta__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}
.cta__title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.1;letter-spacing:-.02em}
.cta__text{font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.86);max-width:620px}
.cta__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .grid-2,.grid-4{grid-template-columns:1fr}
}