/* Clobe (Pvt) Ltd — static site
   Type:  Montserrat (headings) / Exo (UI + body)
   Brand: #B8161A red on near-black, matching the Webflow original. */

:root {
  --red: #b8161a;
  --red-2: #ba181b;
  --red-deep: #7d0f12;
  --black: #000;
  --surface: #0b0b0d;
  --surface-2: #121215;
  --dark: #1a1b1f;
  --line: rgba(255, 255, 255, 0.09);
  --text: #fff;
  --muted: rgba(255, 255, 255, 0.62);
  --muted-2: rgba(255, 255, 255, 0.45);
  --radius: 14px;
  --radius-lg: 20px;
  --container: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: Exo, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* The Clobe mark used inline inside headings. */
.inline-mark {
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  object-fit: contain;
  vertical-align: baseline;
  transform: translateY(0.04em);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 0;
  border-radius: 8px;
  font-family: Exo, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: #cf1a1f; box-shadow: 0 8px 24px rgba(184, 22, 26, 0.35); }
.btn-dark { background: var(--dark); color: #fff; border: 1px solid var(--line); }
.btn-dark:hover { background: #26272c; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 100px;
}
.brand img { width: 128px; }

.nav { display: flex; align-items: center; gap: 34px; }
.nav a {
  font-size: 16px;
  color: #fff;
  opacity: 0.92;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.nav a:hover { color: var(--red); opacity: 1; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; }

/* Red bleed from the top-left corner, as on the original. */
.hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38rem 32rem at -6% -12%, rgba(184, 22, 26, 0.85), transparent 62%),
    radial-gradient(30rem 26rem at 4% 6%, rgba(125, 15, 18, 0.55), transparent 60%);
  pointer-events: none;
}

/* Outlined Clobe marks scattered across the right half. */
.hero-marks {
  position: absolute;
  inset: 0;
  background-image: url("../img/mark-25.png");
  background-repeat: repeat;
  background-size: 190px 190px;
  opacity: 0.045;
  mask-image: linear-gradient(to left, #000 0%, #000 42%, transparent 78%);
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 42%, transparent 78%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  min-height: 560px;
  padding-block: 56px 32px;
}
.hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); }
.hero-copy p {
  margin-top: 24px;
  max-width: 40rem;
  color: rgba(255, 255, 255, 0.86);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-art { justify-self: end; }
.hero-art img { width: min(100%, 540px); }

/* ── Red band ─────────────────────────────────────────────────────────────── */
.band-red { background: var(--red); }
.band-inner { padding-block: 48px; text-align: center; }
.band-title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.band-title span { display: block; margin-top: 10px; font-size: 0.86em; }
.band-title .inline-mark { filter: brightness(0) invert(1); }
.band-text {
  margin: 22px auto 0;
  max-width: 62rem;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
}

/* ── Section scaffolding ──────────────────────────────────────────────────── */
.section { padding-block: 60px; }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }
/* Two plain sections in a row shouldn't stack their full padding. */
.section + .section { padding-top: 0; }
.section + .section-alt, .section-alt + .section { padding-top: 60px; }

.section-title { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.section-sub { margin-top: 14px; color: var(--muted); font-size: 15px; }
.center { text-align: center; }
.center.section-sub { margin-inline: auto; max-width: 46rem; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 42px;
}
.section-head .section-sub { max-width: 46rem; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

/* ── Testimonials ─────────────────────────────────────────────────────────── */
.testimonials { margin-top: 34px; }
.testimonial {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px;
}
.testimonial:hover { border-color: rgba(184, 22, 26, 0.5); }
.avatar {
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  border-radius: 10px;
  object-fit: cover;
}
.testimonial blockquote { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, 0.8); }
.testimonial figcaption { margin-top: 10px; font-weight: 600; color: #fff; }

/* ── Eyebrow + about ──────────────────────────────────────────────────────── */
.eyebrow {
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.about-copy {
  max-width: 62rem;
  margin: 26px auto 0;
  display: grid;
  gap: 18px;
  color: var(--muted);
  font-size: 15.5px;
  text-align: center;
}
.about-copy strong { color: #fff; font-weight: 600; }

/* ── We guarantee ─────────────────────────────────────────────────────────── */
.guarantee-grid { margin-top: 34px; }
.guarantee { padding: 32px 28px; }
.guarantee:hover { border-color: rgba(184, 22, 26, 0.5); transform: translateY(-3px); }
/* Circular badge holding the inline SVG icons. */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(184, 22, 26, 0.12);
  border: 1px solid rgba(184, 22, 26, 0.35);
  color: var(--red);
}
.icon-badge .icon { width: 26px; height: 26px; }
.card:hover .icon-badge { background: rgba(184, 22, 26, 0.2); }
.guarantee h3 { margin-top: 18px; font-size: 1.15rem; }
.guarantee p { margin-top: 10px; font-size: 14px; color: var(--muted); }

/* ── What we do ───────────────────────────────────────────────────────────── */
.what-grid { margin-top: 34px; }
.what-item { overflow: hidden; display: flex; flex-direction: column; }
.what-shot { width: 100%; height: 170px; object-fit: cover; background: #0f1013; }
.what-body { padding: 26px 24px 28px; }
.what-item:hover { border-color: rgba(184, 22, 26, 0.5); transform: translateY(-3px); }
.what-num {
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--red);
}
.what-item h3 { margin-top: 10px; font-size: 1.12rem; }
.what-item p { margin-top: 10px; font-size: 14px; color: var(--muted); }
.what-list { margin: 16px 0 0; padding: 0; list-style: none; }
.what-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.9;
}
.what-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

/* ── Services ─────────────────────────────────────────────────────────────── */
.services { margin-top: 34px; }
.service { overflow: hidden; }
.service:hover { border-color: rgba(184, 22, 26, 0.5); transform: translateY(-3px); }
.service img { width: 100%; height: 190px; object-fit: cover; }
.service h3 { margin: 18px 20px 0; font-size: 1rem; }
.service p { margin: 8px 20px 22px; font-size: 13px; color: var(--muted); }

/* ── Projects ─────────────────────────────────────────────────────────────── */
.project { overflow: hidden; }
.project:hover { border-color: rgba(184, 22, 26, 0.5); }
.project-shot { width: 100%; height: 240px; object-fit: cover; background: #0f1013; }
.project-body { padding: 20px 22px 22px; }
.tag {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  letter-spacing: 1px;
}
.project h3 { margin-top: 14px; font-size: 1.02rem; line-height: 1.4; }
.project-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.date { display: inline-flex; align-items: center; gap: 8px; }
.link { color: #fff; font-weight: 600; }
.link:hover { color: var(--red); }

/* ── Team ─────────────────────────────────────────────────────────────────── */
.team-grid { margin-top: 34px; }
/* Two founders read better as a centred pair than a full-width row. */
.team-founders { margin-inline: auto; }
.member { padding: 32px 20px; text-align: center; }
.member:hover { border-color: rgba(184, 22, 26, 0.5); transform: translateY(-3px); }
.member-photo {
  width: 96px;
  height: 96px;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(184, 22, 26, 0.55);
}
/* Initials stand-in, swapped in by main.js when a headshot file is absent. */
.member-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--red), var(--red-deep));
  font-family: Montserrat, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
}
.member h3 { margin-top: 18px; font-size: 1.05rem; }
.member .role {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--red);
  text-transform: uppercase;
}
.member p { margin-top: 12px; font-size: 13.5px; color: var(--muted); }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq-card { margin-top: 34px; padding: 34px; }
.faq-grid { gap: 34px 44px; }
.faq-item h3 { font-size: 1.05rem; }
.faq-item p { margin-top: 10px; font-size: 14px; color: var(--muted); }

/* ── CTA band ─────────────────────────────────────────────────────────────── */
.cta-band {
  padding: 52px 40px;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--red) 0%, #a01317 100%);
  text-align: center;
}
.cta-band h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.cta-band h2 span { display: block; margin-top: 8px; }
.cta-band .inline-mark { filter: brightness(0) invert(1); }
.cta-btn { margin-top: 26px; }
.cta-band p {
  margin: 18px auto 0;
  max-width: 44rem;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.9);
}

/* ── Contact ──────────────────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: start;
}
.contact-line { margin-top: 14px; color: var(--muted); }
.contact-line a:hover { color: var(--red); }
.office-title { margin-top: 34px; font-size: 1.25rem; }
address { margin-top: 12px; font-style: normal; color: var(--muted); line-height: 1.9; }

.contact-card { padding: 32px; }
.contact-card-title { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; }
.contact-form { margin-top: 24px; display: grid; gap: 14px; }
.field-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

input, select, textarea {
  width: 100%;
  padding: 13px 15px;
  background: #0a0a0c;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #fff;
  font-family: Exo, sans-serif;
  font-size: 14px;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(184, 22, 26, 0.18);
}
textarea { resize: vertical; }
.contact-form .btn { justify-self: end; padding-inline: 40px; }
.form-note { margin-top: 10px; font-size: 13px; color: #4ade80; }
.form-note[data-state="error"] { color: #f87171; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); padding-block: 44px 24px; background: var(--surface); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}
.footer-brand img { width: 132px; }
.footer-brand h4, .footer-col h4 {
  margin-top: 22px;
  font-size: 15px;
  font-family: Montserrat, sans-serif;
}
.footer-col { display: flex; flex-direction: column; }
.footer-col h4 { margin-top: 0; margin-bottom: 14px; }
.footer-col a { font-size: 14px; color: var(--muted); line-height: 2.1; }
.footer-col a:hover { color: var(--red); }

.subscribe { display: flex; gap: 8px; margin-top: 12px; max-width: 320px; }
.subscribe input { flex: 1; }
.subscribe button {
  width: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--dark);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.subscribe button:hover { background: var(--red); border-color: var(--red); }

.footer-bottom {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted-2);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-inner { min-height: 0; }
}

@media (max-width: 860px) {
  .nav {
    position: absolute;
    inset: 100px 0 auto;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 20px;
    background: rgba(0, 0, 0, 0.97);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }

  .hero-inner { grid-template-columns: 1fr; padding-block: 48px 32px; }
  .hero-art { justify-self: center; margin-top: 24px; }
  .hero-marks { opacity: 0.03; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .about-copy { text-align: left; }
  .section { padding-block: 46px; }
  .section + .section-alt, .section-alt + .section { padding-top: 46px; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .contact-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .faq-card { padding: 26px; }
  .testimonial { flex-direction: column; text-align: center; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ══ Inner pages (terms / careers / blog) ═══════════════════════════════════ */

/* Compact hero for pages that aren't the home page. */
.page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.page-hero .hero-glow { opacity: 0.75; }
.page-hero-inner { position: relative; padding-block: 64px 56px; text-align: center; }
.page-hero h1 { font-size: clamp(2rem, 3.8vw, 3rem); }
.page-hero p {
  margin: 16px auto 0;
  max-width: 46rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 15.5px;
}
.breadcrumb {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--muted-2);
}
.breadcrumb a:hover { color: var(--red); }

/* ── Long-form / legal copy ───────────────────────────────────────────────── */
.prose { max-width: 60rem; margin-inline: auto; }
.prose h2 {
  margin-top: 40px;
  font-size: 1.3rem;
  scroll-margin-top: 120px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 24px; font-size: 1.05rem; }
.prose p, .prose li { color: var(--muted); font-size: 15px; }
.prose p { margin-top: 12px; }
.prose ul { margin: 12px 0 0; padding-left: 20px; }
.prose li { margin-top: 8px; }
.prose a { color: #fff; border-bottom: 1px solid rgba(184, 22, 26, 0.6); }
.prose a:hover { color: var(--red); }
.prose strong { color: #fff; font-weight: 600; }

.doc-meta {
  padding: 16px 20px;
  margin-bottom: 34px;
  border-left: 3px solid var(--red);
  background: var(--surface-2);
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  color: var(--muted);
}

/* Sticky table of contents beside the legal copy. */
.legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
.toc { position: sticky; top: 120px; }
.toc h4 { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--red); }
.toc ol { margin: 14px 0 0; padding-left: 18px; }
.toc li { margin-top: 8px; }
.toc a { font-size: 13.5px; color: var(--muted); }
.toc a:hover { color: #fff; }

/* ── Careers ──────────────────────────────────────────────────────────────── */
.perks-grid { margin-top: 34px; }
.perk { padding: 26px 24px; }
.perk h3 { margin-top: 16px; font-size: 1.05rem; }
.perk p { margin-top: 8px; font-size: 14px; color: var(--muted); }


.jobs { margin-top: 34px; display: grid; gap: 16px; }
.job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px;
}
.job:hover { border-color: rgba(184, 22, 26, 0.5); }
.job h3 { font-size: 1.1rem; }
.job-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.job-tag {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 11.5px;
  color: var(--muted);
}
.job p { margin-top: 12px; font-size: 14px; color: var(--muted); max-width: 46rem; }

.empty-state {
  margin-top: 34px;
  padding: 44px 32px;
  text-align: center;
}
.empty-state h3 { font-size: 1.15rem; }
.empty-state p { margin: 10px auto 0; max-width: 40rem; font-size: 14.5px; color: var(--muted); }
.empty-state .btn { margin-top: 22px; }

/* ── Blog ─────────────────────────────────────────────────────────────────── */
.posts { margin-top: 34px; }
.post { overflow: hidden; display: flex; flex-direction: column; }
.post:hover { border-color: rgba(184, 22, 26, 0.5); transform: translateY(-3px); }
.post-shot { width: 100%; height: 190px; object-fit: cover; background: #0f1013; }
.post-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.post h3 { margin-top: 14px; font-size: 1.05rem; line-height: 1.4; }
.post p { margin-top: 10px; font-size: 14px; color: var(--muted); }
.post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 13px;
  color: var(--muted-2);
}
.post-featured { grid-column: 1 / -1; }
.post-featured .post-shot { height: 300px; }

@media (max-width: 1024px) {
  .legal-layout { grid-template-columns: 1fr; gap: 28px; }
  .toc { position: static; }
}
@media (max-width: 860px) {
  .job { flex-direction: column; align-items: flex-start; }
  .page-hero-inner { padding-block: 44px 38px; }
}

/* ══ Job cards + modal ══════════════════════════════════════════════════════ */
.job-main { flex: 1; }
.job-actions { display: flex; gap: 10px; flex-shrink: 0; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
}
.modal-panel {
  position: relative;
  width: min(100%, 720px);
  max-height: min(86vh, 900px);
  overflow-y: auto;
  padding: 38px 40px 34px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
  animation: modal-in 0.18s ease-out;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: none; }
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { background: var(--red); border-color: var(--red); }

.modal-panel h2 { font-size: 1.6rem; }
.modal-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.modal-tags .job-tag { font-size: 11.5px; }
.modal-body { margin-top: 22px; max-width: none; }
.modal-body .job-lede { color: rgba(255, 255, 255, 0.82); font-size: 15px; }
.modal-body h4 {
  margin-top: 24px;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red);
}
.modal-body ul { margin: 10px 0 0; padding-left: 20px; }
.modal-body li { margin-top: 7px; color: var(--muted); font-size: 14.5px; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.apply-form { margin-top: 24px; }
.apply-form .modal-actions { margin-top: 6px; }

.file-field { display: grid; gap: 8px; font-size: 13.5px; color: var(--muted); }
.file-field small { color: var(--muted-2); }
.file-field input[type="file"] { padding: 11px 14px; cursor: pointer; }
.file-field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  background: var(--dark);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #fff;
  font-family: Exo, sans-serif;
  font-size: 12px;
  cursor: pointer;
}
.file-field input[type="file"]::file-selector-button:hover { background: var(--red); border-color: var(--red); }

body.modal-open { overflow: hidden; }

@media (max-width: 860px) {
  .job-actions { width: 100%; }
  .job-actions .btn { flex: 1; }
  .modal { padding: 12px; }
  .modal-panel { padding: 30px 22px 26px; max-height: 92vh; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
}

/* ══ Article + role detail pages ════════════════════════════════════════════ */
.container.narrow { max-width: 820px; }

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--muted);
}

.article-shot {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  margin-bottom: 34px;
}

.prose.article { max-width: none; }
.prose.article h2 {
  margin-top: 40px;
  font-family: Montserrat, sans-serif;
  font-size: 1.35rem;
  line-height: 1.3;
}
.prose.article p { margin-top: 16px; font-size: 16px; line-height: 1.75; color: var(--muted); }
.prose.article ul { margin-top: 16px; padding-left: 20px; }
.prose.article li { margin-top: 9px; color: var(--muted); line-height: 1.65; }
.prose.article blockquote {
  margin: 30px 0 0;
  padding: 20px 26px;
  border-left: 3px solid var(--red);
  background: var(--surface-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 17px;
  line-height: 1.6;
  color: #fff;
}

.article-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 42px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.related-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.related-card:hover { border-color: rgba(184, 22, 26, 0.55); transform: translateY(-3px); }
.related-card h3 { font-size: 1.05rem; line-height: 1.35; }
.related-card .link { margin-top: auto; color: var(--red); font-size: 13px; }

.post h3 a,
.job h3 a { color: inherit; text-decoration: none; }
.post h3 a:hover,
.job h3 a:hover { color: var(--red); }
.post-shot-link { display: block; }

.role-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 38px;
}
.role-facts div { display: grid; gap: 5px; }
.role-facts span {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted-2);
}
.role-facts strong { font-size: 14.5px; font-weight: 500; color: #fff; }

@media (max-width: 700px) {
  .role-facts { grid-template-columns: repeat(2, 1fr); }
  .article-shot { max-height: 220px; margin-bottom: 26px; }
  .article-foot .btn { width: 100%; }
}

/* Role hero: keep the tag row on the same centre line as the rest of the hero. */
.page-hero-inner .job-tags { justify-content: center; margin-top: 18px; }
.page-hero-inner > p { margin-top: 16px; }

/* ══ Cookie consent ═════════════════════════════════════════════════════════ */
.cookie-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 120;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}
.cookie-bar.show { opacity: 1; transform: none; pointer-events: auto; }

.cookie-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 20px 24px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.cookie-copy h4 {
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  margin-bottom: 5px;
}
.cookie-copy p { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.cookie-copy a { color: var(--red); }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-actions .btn { white-space: nowrap; }

@media (max-width: 760px) {
  .cookie-bar { left: 10px; right: 10px; bottom: 10px; }
  .cookie-inner { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; }
  .cookie-actions .btn { flex: 1; }
}

/* ══ Partners carousel ══════════════════════════════════════════════════════ */
.partners-section { padding-bottom: 40px; }
.eyebrow.center,
.section-title.center { text-align: center; }

.partner-strip {
  margin-top: 34px;
  overflow: hidden;
  /* Fade the logos out at both edges so the loop has no visible seam. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.partner-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: partner-scroll 34s linear infinite;
}
.partner-strip:hover .partner-track,
.partner-strip:focus-within .partner-track { animation-play-state: paused; }

/* The track holds two identical runs, so shifting by half loops seamlessly. */
@keyframes partner-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.partner {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 176px;
  height: 84px;
  padding: 14px 20px;
  /* Partner logos are supplied full-colour on white, so give them a light tile
     rather than trying to recolour them for the dark background. */
  background: #fff;
  border-radius: 14px;
  opacity: 0.82;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.partner:hover { opacity: 1; transform: translateY(-3px); }
.partner img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .partner-track { animation: none; }
  .partner-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 700px) {
  .partner-track { gap: 28px; animation-duration: 26s; }
  .partner { width: 140px; height: 68px; padding: 11px 15px; }
}

/* ══ Footer contact block (replaces the old subscribe form) ═════════════════ */
.footer-tagline {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 330px;
}
.footer-contact { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px; }
.footer-contact li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.footer-contact svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--red); }
.footer-contact a { color: var(--muted); text-decoration: none; }
.footer-contact a:hover { color: #fff; }

.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.footer-social a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.footer-social svg { width: 17px; height: 17px; }

/* Partner without a logo file yet — show the name instead of a broken image. */
.partner-name {
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #1a1b1f;
  text-align: center;
}

/* ══ Hero product mockup ════════════════════════════════════════════════════ */
.mock {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin-left: auto;
  padding: 74px 0 12px;
  perspective: 1400px;
}

.mock-card {
  background: linear-gradient(160deg, rgba(28, 28, 33, 0.96), rgba(16, 16, 19, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

.mock-main {
  padding: 24px 26px 22px;
  transform: rotateY(-8deg) rotateX(3deg);
  animation: mock-float 7s ease-in-out infinite;
}

.mock-head { display: flex; align-items: center; gap: 10px; }
.mock-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(184, 22, 26, 0.2);
}
.mock-title {
  font-size: 12.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--muted-2);
}
.mock-pill {
  margin-left: auto;
  padding: 4px 11px;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ff8f92;
  background: rgba(184, 22, 26, 0.16);
  border: 1px solid rgba(184, 22, 26, 0.4);
  border-radius: 999px;
}

.mock-amount { display: flex; align-items: baseline; gap: 9px; margin-top: 20px; }
.mock-cur { font-size: 13px; letter-spacing: 1.5px; color: var(--muted-2); }
.mock-amount strong {
  font-family: Montserrat, sans-serif;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #fff;
}
.mock-amount strong span { font-size: 20px; color: var(--muted); }

.mock-rows { margin-top: 22px; display: grid; gap: 1px; background: rgba(255, 255, 255, 0.07); border-radius: 12px; overflow: hidden; }
.mock-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.4);
  font-size: 12.5px;
}
.mock-row span { color: var(--muted-2); }
.mock-row strong { font-weight: 500; color: rgba(255, 255, 255, 0.9); }

.mock-bar {
  margin-top: 20px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.mock-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7d0f12, var(--red), #ff4b50);
  animation: mock-fill 4.5s ease-in-out infinite;
}

.mock-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--muted);
}
.mock-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(184, 22, 26, 0.18);
  color: #ff5a5f;
}
.mock-check svg { width: 12px; height: 12px; }

/* Floating chips */
.mock-id { position: absolute; z-index: 3; }

.mock-id {
  top: 0;
  left: -46px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px 13px 14px;
  animation: mock-float 6s ease-in-out infinite 0.6s;
}
.mock-id-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(184, 22, 26, 0.16);
  border: 1px solid rgba(184, 22, 26, 0.35);
  color: var(--red);
  flex-shrink: 0;
}
.mock-id-icon svg { width: 18px; height: 18px; }
.mock-id strong { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.mock-id span { font-size: 11.5px; color: var(--muted-2); }

.mock-chart {
  position: relative;
  right: auto;
  bottom: auto;
  width: 190px;
  margin: -34px -22px 0 auto;
  z-index: 2;
  padding: 14px 16px 10px;
  animation: mock-float 8s ease-in-out infinite 1.2s;
}
.mock-chart-head { display: flex; justify-content: space-between; align-items: baseline; }
.mock-chart-head span { font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted-2); }
.mock-chart-head strong { font-family: Montserrat, sans-serif; font-size: 15px; color: #ff5a5f; }
.mock-spark { display: block; width: 100%; height: 52px; margin-top: 8px; }

@keyframes mock-float {
  0%, 100% { transform: translateY(0) rotateY(-8deg) rotateX(3deg); }
  50% { transform: translateY(-11px) rotateY(-8deg) rotateX(3deg); }
}
@keyframes mock-fill {
  0%, 100% { width: 62%; }
  50% { width: 92%; }
}
@media (prefers-reduced-motion: reduce) {
  .mock-main, .mock-id, .mock-chart { animation: none; }
  .mock-bar span { animation: none; width: 78%; }
}

@media (max-width: 980px) {
  .mock { max-width: 400px; margin: 0 auto; }
  .mock-id { left: -10px; }
  .mock-chart { margin-right: -6px; }
}
@media (max-width: 560px) {
  .mock { max-width: 320px; padding: 30px 0 44px; }
  .mock-main { padding: 20px; transform: none; }
  .mock-amount strong { font-size: 29px; }
  .mock-id { left: 0; padding: 10px 14px 10px 11px; }
  .mock-chart { width: 150px; margin-right: 0; }
  @keyframes mock-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
}


/* Service pills under the payment card — what the platform is actually for. */
.mock-services {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  max-width: 300px;
}
.mock-svc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(28, 28, 33, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.mock-svc svg { width: 14px; height: 14px; color: var(--red); }

@media (max-width: 560px) {
  .mock-services { max-width: none; }
  .mock-svc { font-size: 10.5px; padding: 7px 11px; }
}

.mock-chart-head { gap: 10px; }

/* ══ Scroll animations ══════════════════════════════════════════════════════
   Elements start hidden only while <html class="anim"> is present. animate.js
   removes that class when the browser can't observe scrolling or the visitor
   prefers reduced motion, so the site is always readable without JS.
   Keep this selector list in sync with SELECTOR in animate.js.            */
.anim .reveal,
.anim .section > .container > .eyebrow,
.anim .section-title,
.anim .section-sub,
.anim .section-lead,
.anim .about-copy,
.anim .card,
.anim .member,
.anim .faq-item,
.anim .band-inner,
.anim .cta-inner,
.anim .contact-grid > *,
.anim .footer-grid > *,
.anim .article-shot,
.anim .prose.article > *,
.anim .article-foot,
.anim .partner-strip,
.anim .page-hero-inner > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms),
    transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.anim .is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Cards lift in with a touch of scale; the strip slides rather than rises. */
.anim .card { transform: translateY(26px) scale(0.985); }
.anim .card.is-visible { transform: none; }
.anim .partner-strip { transform: translateX(34px); }
.anim .partner-strip.is-visible { transform: none; }

/* The modal animates itself — never let the reveal state hide its contents. */
.modal .card,
.modal .prose.article > * { opacity: 1; transform: none; }

/* ── Hero entrance ─────────────────────────────────────────────────────────
   Runs on load rather than on scroll, since the hero is already in view.  */
.anim .hero-copy > *,
.anim .hero-art {
  animation: hero-in 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.anim .hero-copy > h1 { animation-delay: 0.05s; }
.anim .hero-copy > p { animation-delay: 0.16s; }
.anim .hero-copy > .hero-actions { animation-delay: 0.27s; }
.anim .hero-art { animation-delay: 0.34s; animation-duration: 1s; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* ── Header state ──────────────────────────────────────────────────────────*/
.site-header {
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header.scrolled {
  background: rgba(8, 8, 10, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}

/* ── Interaction polish ────────────────────────────────────────────────────*/
.btn { transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.18s ease; }
.btn:active { transform: translateY(1px); }
.card { transition: border-color 0.25s ease, transform 0.35s ease, box-shadow 0.35s ease; }
.service-card:hover,
.post:hover,
.job:hover,
.perk:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 22, 26, 0.45);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
}
.nav a { transition: color 0.2s ease; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim * { animation: none !important; transition: none !important; }
}

/* Anchor targets must clear the sticky header when jumped to. */
section[id],
[id]:target { scroll-margin-top: 96px; }