/* =========================================================================
   ExcelBids — Public Site Stylesheet
   Brand Identity: Vibrant Orange (#F97316), Trust Navy (#1E3A5F),
   Success Gold (#FBBF24), Growth Green (#10B981), Warm Ivory (#FFF9F2).
   ========================================================================= */

:root {
  /* Core Brand Colors */
  --orange: #F97316;
  --orange-hover: #EA580C;
  --orange-wash: #FFF7ED;
  --navy: #1E3A5F;
  --navy-deep: #0F172A;
  --navy-line: #1E293B;
  --gold: #FBBF24;
  --green: #10B981;
  --green-wash: #ECFDF5;

  /* Neutrals & Surfaces */
  --paper: #FFF9F2;
  --paper-line: #F3EADE;
  --ink: #1F2937;
  --ink-soft: #4B5563;
  --ink-faint: #9CA3AF;
  --line: #E5E7EB;
  --soft-grey: #F3F4F6;
  --white: #FFFFFF;

  /* Aliases for system compatibility */
  --red: var(--orange);
  --red-wash: var(--orange-wash);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.02em;
}

h1, h2, h3, h4, p, li, td { overflow-wrap: break-word; }

.hero-grid > *, .sector-row > *, .cta-inner > *, .strip-inner > *,
.case-study > *, .form-shell > *, .foot-grid > * { min-width: 0; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0.02em; }
.hand { font-family: 'Caveat', cursive; font-weight: 600; }

.eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  display: inline-block;
}

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 10px 18px; z-index: 200; }
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* --- Header --------------------------------------------------------------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 249, 242, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.8);
}

.header-strip { background: var(--navy); color: #E2E8F0; font-size: 12.5px; }
.header-strip .wrap { display: flex; justify-content: space-between; align-items: center; padding: 7px 32px; }
.header-strip a { color: var(--gold); font-weight: 500; }
.header-strip a:hover { text-decoration: underline; }

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  max-width: 1120px;
  margin: 0 auto;
  gap: 24px;
  flex-wrap: wrap;
}

.logo {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 21px;
  color: var(--navy);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.logo span.logo-bids { color: var(--orange); }
.logo-img { max-width: 220px; width: auto; display: block; }
.foot-logo .logo-img { max-height: 34px; max-width: 180px; }

.navlinks { display: flex; gap: 28px; font-size: 15px; font-weight: 600; color: var(--ink); }
.navlinks a { padding: 6px 0; border-bottom: 2.5px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; }
.navlinks a:hover { color: var(--orange); border-bottom-color: var(--orange); }
.navcta { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 15px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 9999px;
  font-size: 14.5px;
  font-weight: 600;
  border: 1.5px solid transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.btn-primary, .btn-red { background: var(--orange); color: #FFF; border-color: var(--orange); box-shadow: 0 4px 14px rgba(249, 115, 22, 0.25); }
.btn-primary:hover, .btn-red:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: #FFF; }

.btn-ghost { background: #FFF; color: var(--ink); border-color: var(--navy); }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-wash); }

.btn-ghost-light { background: transparent; color: #FFF; border-color: rgba(255, 255, 255, 0.4); }
.btn-ghost-light:hover { border-color: #FFF; background: rgba(255, 255, 255, 0.1); }
.btn-block { width: 100%; }

section { padding: 64px 0; position: relative; overflow: hidden; }
.ghost-num {
  position: absolute; top: -10px; right: 24px; font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: 220px; line-height: 1; color: var(--ink); opacity: 0.03; pointer-events: none; z-index: 0;
  user-select: none;
}

section > .wrap { position: relative; z-index: 1; }
.section-head { max-width: 620px; margin-bottom: 36px; }
.section-head .file-num { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ink-soft); margin-bottom: 4px; }
.section-head h2 { font-size: 32px; margin-top: 6px; line-height: 1.2; color: var(--ink); }
.section-head p { margin-top: 10px; color: var(--ink-soft); font-size: 16px; }
.tint { background: var(--soft-grey); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* --- Hero ----------------------------------------------------------------- */
.hero { padding: 48px 0 60px; background: var(--paper); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }

.case-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--orange);
  background: var(--orange-wash);
  border: 1px solid rgba(249, 115, 22, 0.25);
  padding: 5px 12px;
  border-radius: 9999px;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero h1 { font-size: 46px; line-height: 1.15; color: var(--ink); font-weight: 700; }
.circled {
  display: inline-block;
  color: var(--orange);
  position: relative;
}

.hero p.lead { margin-top: 18px; font-size: 18px; color: var(--ink-soft); max-width: 480px; line-height: 1.6; }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-trust { margin-top: 32px; display: flex; gap: 32px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 20px; }
.hero-trust div { font-size: 13px; color: var(--ink-soft); }
.hero-trust strong { display: block; font-family: 'Poppins', sans-serif; font-size: 24px; color: var(--navy); font-weight: 700; }

/* Hero Right Visual Graphic & Illustration */
.hero-graphic-wrap { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; }
.hero-backdrop-shape {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.22) 0%, rgba(254, 215, 170, 0.12) 70%, transparent 100%);
  z-index: 0;
}

.hero-illustration-card {
  position: relative;
  z-index: 1;
  width: 320px;
  background: #FFFFFF;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 20px 45px -15px rgba(30, 58, 95, 0.18);
  padding: 24px;
  transform: rotate(-1deg);
  transition: transform 0.3s ease;
}

.hero-illustration-card:hover { transform: rotate(0deg) scale(1.02); }

.clipboard-top {
  width: 90px; height: 18px; background: var(--navy); border-radius: 6px 6px 0 0; margin: -24px auto 16px;
  display: flex; justify-content: center; align-items: center; position: relative;
}
.clipboard-clip { width: 36px; height: 8px; background: var(--gold); border-radius: 4px; }

.winning-bid-badge {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--orange);
  background: var(--orange-wash);
  border: 1px dashed rgba(249, 115, 22, 0.4);
  padding: 8px;
  border-radius: 8px;
  margin-bottom: 18px;
}

.checklist-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.check-row { display: flex; align-items: center; gap: 12px; }
.check-icon {
  width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #FFF;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.check-bar { height: 8px; background: var(--soft-grey); border-radius: 4px; flex-grow: 1; }

.signature-line { font-family: 'Caveat', cursive; font-size: 22px; color: var(--navy); text-align: right; margin-top: 10px; }

.hero-pie-chart {
  position: absolute; right: -28px; top: -20px;
  background: #FFF; border: 1.5px solid var(--line); border-radius: 50%;
  padding: 6px; box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.sticky {
  position: absolute; left: -24px; bottom: -20px; width: 140px;
  background: #FEF08A; padding: 12px 14px; border-radius: 8px;
  box-shadow: 0 10px 20px -5px rgba(0,0,0,0.15); transform: rotate(-5deg);
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #713F12;
}
.sticky span { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #1E293B; }

/* --- Proof strip ---------------------------------------------------------- */
.proof-strip { background: var(--navy); padding: 36px 0 24px; color: #FFF; }
.proof-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.proof-stat { border-left: 3px solid var(--gold); padding-left: 18px; }
.proof-stat strong { display: block; font-family: 'Poppins', sans-serif; font-size: 36px; color: #FFF; font-weight: 700; line-height: 1; }
.proof-stat span { display: block; margin-top: 6px; font-size: 13px; color: #CBD5E1; }
.proof-note { font-size: 11.5px; color: #94A3B8; margin: 16px 0 0; }

/* --- Case study & testimonials -------------------------------------------- */
.case-study {
  background: #FFF;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.06);
}

.case-study .cs-label { color: var(--orange); font-weight: 700; }
.case-study h3 { font-size: 24px; margin-top: 8px; line-height: 1.3; }
.case-study .cs-before { font-size: 14px; color: var(--ink-soft); margin-top: 12px; }
.cs-results { display: flex; flex-direction: column; gap: 0; }
.cs-result { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cs-result:last-child { border-bottom: none; }
.cs-result strong { font-family: 'Poppins', sans-serif; font-size: 28px; color: var(--navy); font-weight: 700; white-space: nowrap; }
.cs-result span { font-size: 14px; color: var(--ink-soft); }

.strip { padding: 24px 0; border-bottom: 1px solid var(--line); }
.strip-inner { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: space-between; }
.strip-label { font-size: 12px; color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.stamp-row { display: flex; gap: 20px; flex-wrap: wrap; }

.mini-stamp {
  border: 1.5px solid var(--navy); color: var(--navy);
  border-radius: 50%; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 600; text-align: center; line-height: 1.2; padding: 4px;
}

/* --- Services Tiles ------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.svc-tile {
  background: #FFF;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 24px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
}

.svc-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -12px rgba(249, 115, 22, 0.2);
  border-color: var(--orange);
}

.svc-tile .idx {
  width: 34px; height: 34px; border-radius: 8px; background: var(--orange); color: #FFF;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 700; flex-shrink: 0;
}

.svc-tile small { font-weight: 400; font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-top: -2px; }

/* --- Sectors -------------------------------------------------------------- */
.sector-row { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 40px; align-items: center; }
.sector-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sector-tags span {
  border: 1px solid var(--line);
  background: #FFF;
  border-radius: 9999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: all 0.15s ease;
}

.sector-tags span.core { background: var(--navy); color: #FFF; border-color: var(--navy); }
.folder { background: var(--navy); color: #FFF; border-radius: 16px; padding: 36px; position: relative; }
.folder::before {
  content: attr(data-flag);
  position: absolute; top: -13px; left: 24px;
  background: var(--orange); color: #FFF;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; padding: 5px 12px; border-radius: 9999px;
}
.folder h4 { color: #FFF; font-size: 20px; margin-top: 8px; }
.folder p { color: #CBD5E1; font-size: 14.5px; margin-top: 12px; }
.folder .kw { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.folder .kw span {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--gold);
  border: 1px solid rgba(251, 191, 36, 0.4); padding: 4px 10px; border-radius: 6px;
}

/* --- Process -------------------------------------------------------------- */
.stepper { display: flex; gap: 0; flex-wrap: wrap; position: relative; padding-top: 8px; }
.stepper::before { content: ""; position: absolute; top: 23px; left: 24px; right: 24px; height: 2px; background: var(--line); z-index: 0; }
.step {
  flex: 1 1 130px; padding: 0 14px; position: relative; z-index: 1;
  font-size: 13.5px; font-weight: 600; color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.step .step-num {
  width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #FFF;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.step small { font-weight: 400; font-size: 12px; color: var(--ink-soft); line-height: 1.5; }

/* QA Checklist */
.so-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); align-items: flex-start; }
.so-row:last-of-type { border-bottom: none; }
.box { width: 22px; height: 22px; border: 2px solid var(--navy); border-radius: 4px; flex-shrink: 0; position: relative; margin-top: 2px; }
.box::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--green); }

/* --- Why us --------------------------------------------------------------- */
.why-section { background: var(--navy); background-image: radial-gradient(circle at 88% 0%, rgba(251, 191, 36, 0.15), transparent 45%); color: #FFF; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.seal { width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: var(--navy-deep); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; box-shadow: 0 8px 18px -4px rgba(0,0,0,0.3); }
.why-card h4 { margin-top: 16px; font-size: 16px; color: #FFF; }
.why-card p { margin-top: 6px; font-size: 13.5px; color: #CBD5E1; }

/* --- Testimonials --------------------------------------------------------- */
.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 6px; }
.t-card {
  background: #FFF;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
  position: relative;
  box-shadow: 0 10px 30px -15px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
}
.t-card:hover { transform: translateY(-4px); }
.t-card .qmark { font-family: 'Poppins', sans-serif; font-size: 44px; color: var(--orange); line-height: 0.5; opacity: 0.4; }
.t-card p.quote { margin-top: 10px; font-size: 14.5px; color: var(--ink); line-height: 1.65; }
.t-card .who { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.t-card .who strong { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.t-card .who span { color: var(--ink-soft); }

/* --- FAQ ------------------------------------------------------------------ */
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; padding: 18px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 600; color: var(--ink);
}
.faq-q .idx { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--orange); margin-right: 14px; }
.faq-q .plus { font-size: 20px; color: var(--orange); transition: transform 0.2s ease; flex-shrink: 0; }
.faq-item.open .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-a p { padding: 0 0 22px 30px; margin: 0; font-size: 14.5px; color: var(--ink-soft); }

/* --- Closing CTA ---------------------------------------------------------- */
.cta-wrap { background: var(--navy); border-radius: 20px; padding: 48px 52px; position: relative; overflow: hidden; color: #FFF; }
.cta-inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; position: relative; z-index: 2; }
.cta-wrap h2 { color: #FFF; font-size: 32px; line-height: 1.25; }
.cta-wrap p.sub { color: #CBD5E1; margin-top: 14px; font-size: 15px; }

.approved {
  position: absolute; right: 60px; top: 50%; transform: translateY(-50%) rotate(-8deg);
  width: 140px; height: 140px; border-radius: 50%; border: 3px double var(--orange);
  color: var(--orange); display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.04em; opacity: 0.9;
}

.cta-actions { display: flex; flex-direction: column; gap: 12px; position: relative; }
.point-note { font-family: 'Caveat', cursive; color: var(--gold); font-size: 20px; text-align: right; margin-bottom: -4px; }
.cta-email { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--gold); margin-top: 18px; display: block; }

/* --- Brand Promise Bar ---------------------------------------------------- */
.brand-promise-bar {
  background: var(--navy);
  color: #FFF;
  padding: 16px 0;
  border-top: 1px solid var(--navy-line);
  font-size: 14px;
}

.brand-promise-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
}

.brand-promise-inner .sep { color: var(--orange); font-weight: 700; }
.brand-promise-inner .promise-tag strong { color: var(--orange); }

/* --- Footer --------------------------------------------------------------- */
footer { background: var(--paper); border-top: 1px solid var(--line); padding: 48px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.foot-logo { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; color: var(--navy); }
.foot-grid p { font-size: 13.5px; color: var(--ink-soft); margin-top: 12px; max-width: 270px; }
.foot-col h5 { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 16px; }
.foot-col a { display: block; font-size: 14px; color: var(--ink); margin-bottom: 10px; transition: color 0.15s ease; }
.foot-col a:hover { color: var(--orange); }
.foot-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-soft); flex-wrap: wrap; gap: 12px; }

/* --- Forms & Cards -------------------------------------------------------- */
.form-card { background: #FFF; border: 1.5px solid var(--line); border-radius: 16px; padding: 36px; box-shadow: 0 20px 50px -30px rgba(30, 58, 95, 0.15); }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.field .req { color: var(--orange); }
.field .help { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; }

.input, .select, .textarea {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px; transition: all 0.15s ease;
}

.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--orange); background: #FFF; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15); }
.textarea { min-height: 130px; resize: vertical; }

.alert { padding: 14px 18px; border-radius: 8px; font-size: 14px; margin-bottom: 20px; border: 1px solid; line-height: 1.55; }
.alert-success { background: var(--green-wash); border-color: rgba(16, 185, 129, 0.3); color: #065F46; }
.alert-error { background: var(--orange-wash); border-color: rgba(249, 115, 22, 0.3); color: #9A3412; }
.alert-info { background: #F0F9FF; border-color: #BAE6FD; color: #0369A1; }

/* Page Builder Dynamic Blocks System Styling */
.pb-bg-paper { background: var(--paper); }
.pb-bg-white { background: #FFF; }
.pb-bg-tint { background: var(--soft-grey); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pb-bg-navy { background: var(--navy); color: #FFF; }
.pb-bg-navy-glow { background: var(--navy); color: #FFF; background-image: radial-gradient(circle at 88% 0%, rgba(251, 191, 36, 0.16), transparent 45%); }

.pb-bg-navy h1, .pb-bg-navy h2, .pb-bg-navy h3, .pb-bg-navy h4,
.pb-bg-navy-glow h1, .pb-bg-navy-glow h2, .pb-bg-navy-glow h3, .pb-bg-navy-glow h4 { color: #FFF; }
.pb-bg-navy p, .pb-bg-navy li, .pb-bg-navy-glow p, .pb-bg-navy-glow li { color: #CBD5E1; }
.pb-bg-navy a:not(.btn), .pb-bg-navy-glow a:not(.btn) { color: var(--gold); }

/* Grid columns & blocks */
.pb-cols { display: grid; gap: 40px; position: relative; z-index: 1; }
.pb-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pb-cols-wide-narrow { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.pb-cols-narrow-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.pb-align-start { align-items: start; }
.pb-align-center { align-items: center; }
.pb-align-stretch { align-items: stretch; }
.pb-col { min-width: 0; position: relative; z-index: 1; }

.pb-card {
  background: #FFF; border: 1.5px solid var(--line); border-radius: 12px; padding: 24px 20px;
  display: flex; flex-direction: column; gap: 12px; color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.pb-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -14px rgba(249, 115, 22, 0.25); border-color: var(--orange); }
.pb-card-idx { width: 32px; height: 32px; border-radius: 8px; background: var(--orange); color: #FFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 700; }
.pb-card-seal { width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: var(--navy-deep); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0; box-shadow: 0 8px 18px -6px rgba(0,0,0,0.4); }
.pb-card-title { font-size: 16.5px; font-weight: 700; line-height: 1.35; }
.pb-card-text { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
.pb-card-more { font-size: 13px; font-weight: 700; color: var(--orange); margin-top: auto; }

/* Responsive adjustments */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
  .hero-graphic-wrap { margin-top: 24px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-inner { grid-template-columns: repeat(2, 1fr); }
  .case-study { grid-template-columns: 1fr; }
  .sector-row { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .t-grid { grid-template-columns: 1fr; }
  .cta-inner { grid-template-columns: 1fr; }
  .approved { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .pb-cols-3, .pb-cols-4, .pb-cols-wide-narrow, .pb-cols-narrow-wide { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .hero h1 { font-size: 28px; }
  .svc-grid, .proof-inner, .why-grid, .foot-grid, .pb-cols-2 { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Document panel & sign-off sheet (page builder)

   Self-contained on purpose. These previously borrowed the home page hero's
   .doc-page / .signoff rules; when the hero was redesigned those rules went
   away and the blocks rendered unstyled — including a full-width paperclip.
   ------------------------------------------------------------------------- */

/* The right gutter is where the handwritten note sits. Without it the note
   overlaps the document text, because the panel is narrower here than in the
   hero it was originally designed for. */
.pb-doc{position:relative; padding-top:10px; padding-right:40px; margin-bottom:22px;}
.pb-doc-page{
  background:#fff; border:1px solid var(--line); border-radius:2px;
  /* Keep it document-shaped. Stretched across a full-width section the panel
     goes short and wide, which collides the stamp with the handwritten note. */
  max-width:620px;
  padding:30px 30px 40px; position:relative;
  background-image:repeating-linear-gradient(to bottom, transparent, transparent 26px, var(--paper-line, #E7E2D2) 27px);
  box-shadow:0 24px 60px -24px rgba(20,20,15,0.28);
  transform:rotate(0.6deg);
}
/* Belt and braces alongside the width/height attributes on the SVG itself. */
/* The stamp is absolutely positioned, so short documents need the space
   reserved or it lands on the last line of text. */
.pb-doc-page.has-stamp{padding-bottom:130px; min-height:220px;}
.pb-doc-clip{position:absolute; top:-16px; left:26px; width:34px; height:50px; opacity:.55;}
.pb-doc-topline{
  font-family:'IBM Plex Mono', ui-monospace, monospace; letter-spacing:.02em;
  font-size:10.5px; color:var(--ink-soft); margin-bottom:16px;
}
.pb-doc-text{font-size:13.5px; color:var(--ink); margin:0 0 14px; line-height:1.9;}
.pb-doc-text .mark{background:var(--red-wash); padding:0 3px; border-bottom:2px solid var(--red);}
.pb-doc-note{
  position:absolute; right:-34px; top:52px; width:112px; text-align:left;
  font-family:'Caveat', cursive; font-weight:600; font-size:18px;
  color:var(--red); line-height:1.15; transform:rotate(-2deg);
}
.pb-doc-stamp{
  position:absolute; right:26px; bottom:22px;
  width:104px; height:104px; border-radius:50%;
  border:3px double var(--red); color:var(--red);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:12px; letter-spacing:.06em;
  transform:rotate(-11deg); opacity:.88;
}
.pb-doc-sticky{
  position:absolute; left:-22px; bottom:-26px; width:120px;
  background:#F2E08F; padding:14px 14px 16px; box-shadow:0 10px 20px -8px rgba(0,0,0,.25);
  transform:rotate(-4deg); font-family:'IBM Plex Mono', monospace;
  font-size:9.5px; color:#4A431C; letter-spacing:.06em;
}
.pb-doc-sticky span{display:block; margin-top:6px; font-size:11px; font-weight:600; color:#2E2810;}

.pb-signoff{
  background:#fff; border:1px solid var(--line); border-radius:3px;
  padding:28px 32px; max-width:640px; margin-bottom:22px;
}
.pb-signoff-row{display:flex; gap:14px; padding:12px 0; border-bottom:1px dashed var(--line); align-items:flex-start;}
.pb-signoff-row:last-of-type{border-bottom:none;}
.pb-signoff-box{
  width:22px; height:22px; border:2px solid var(--ink); border-radius:2px;
  flex-shrink:0; position:relative; margin-top:2px;
}
.pb-signoff-box::after{
  content:"✓"; position:absolute; inset:-3px 0 0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Caveat', cursive; font-weight:700; font-size:20px; color:var(--red);
}
.pb-signoff-row h4{font-size:15px; font-weight:600;}
.pb-signoff-row p{font-size:13px; color:var(--ink-soft); margin:3px 0 0;}
.pb-signoff-sign{
  margin-top:22px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
}
.pb-signoff-sig{font-family:'Caveat', cursive; font-weight:600; font-size:30px; color:var(--ink);}
.pb-signoff-meta{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px;
  color:var(--ink-soft); text-align:right;
}

/* The annotations crowd the text on narrow screens. */
@media (max-width:720px){
  .pb-doc-note,.pb-doc-sticky{display:none;}
  /* The note is hidden here, so reclaim its gutter. */
  .pb-doc{padding-right:0;}
  .pb-doc-page{padding:22px 20px 30px; transform:none;}
  .pb-doc-stamp{width:82px; height:82px; font-size:10px; right:14px; bottom:14px;}
  .pb-signoff{padding:22px 20px;}
}

/* -------------------------------------------------------------------------
   Public form primitives

   Used by the consultation page and by every `form` block. Kept here rather
   than alongside a specific page's styles so a redesign cannot strip them —
   losing .honeypot in particular would expose the spam-trap field to real
   visitors and stop the trap working.
   ------------------------------------------------------------------------- */

.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field-error{display:block; font-size:12.5px; color:var(--red); margin-top:5px; font-weight:500;}
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea{border-color:var(--red); background:#FDF6F5;}

.checkline{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); line-height:1.55; cursor:pointer;}
.checkline input{margin-top:3px; accent-color:var(--red); width:16px; height:16px; flex-shrink:0;}

.confirm-stamp{
  width:120px; height:120px; margin:0 auto 24px; border-radius:50%;
  border:3px double var(--green); color:var(--green);
  display:flex; align-items:center; justify-content:center; text-align:center;
  transform:rotate(-8deg);
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:12px; letter-spacing:.05em;
}

@media (max-width:600px){
  .field-row{grid-template-columns:1fr;}
}

/* -------------------------------------------------------------------------
   Standalone page header

   Used by CMS pages written as HTML and by the Outcome Letters page. The
   block-builder pages use .pb-page-head and are left alone.
   ------------------------------------------------------------------------- */

.page-head { background: var(--paper); border-bottom: 1px solid var(--paper-line); padding: 48px 0 40px; }
.page-head h1 { font-size: 38px; line-height: 1.15; margin-top: 8px; }
.page-head p { margin-top: 14px; max-width: 720px; color: var(--ink-soft); font-size: 16px; }

/* -------------------------------------------------------------------------
   Outcome letters

   Each entry is a case file: the redacted scan on the left, the context and
   the client's words on the right. The scan sits slightly off-square to match
   the document motif used across the site.
   ------------------------------------------------------------------------- */

.ol-grid { display: grid; gap: 32px; }

.ol-card {
  background: #FFF;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.08);
}

.ol-scan {
  position: relative;
  display: block;
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  background: var(--paper);
  padding: 12px;
  transform: rotate(-1deg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ol-scan:hover { transform: rotate(0deg); box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.28); }
.ol-scan img { width: 100%; border-radius: 6px; }

.ol-scan-empty {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none;
}
.ol-scan-empty:hover { box-shadow: none; }

.ol-stamp {
  position: absolute;
  right: -10px;
  bottom: 14px;
  transform: rotate(-8deg);
  background: var(--green-wash);
  border: 2px solid var(--green);
  color: var(--green);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  max-width: 90%;
}
.ol-scan-empty .ol-stamp { position: static; transform: rotate(-4deg); }

.ol-meta { font-size: 11.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; }
.ol-title { font-size: 21px; line-height: 1.3; margin-top: 6px; }

.ol-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ol-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  background: var(--soft-grey);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
}

.ol-summary { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; }

.ol-quote {
  margin: 20px 0 0;
  padding: 16px 20px;
  border-left: 3px solid var(--orange);
  background: var(--orange-wash);
  border-radius: 0 10px 10px 0;
}
.ol-quote p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink); }
.ol-quote footer { margin-top: 12px; font-size: 13px; }
.ol-quote footer strong { display: block; font-weight: 600; color: var(--ink); }
.ol-quote footer span { color: var(--ink-soft); }

.ol-note { margin-top: 32px; font-size: 12.5px; color: var(--ink-soft); max-width: 720px; }

.ol-empty {
  text-align: center;
  padding: 56px 24px;
  border: 1.5px dashed var(--line);
  border-radius: 16px;
  background: #FFF;
}
.ol-empty .mark { font-size: 34px; color: var(--ink-faint); display: block; }
.ol-empty p { margin-top: 12px; color: var(--ink-soft); }

@media (max-width: 900px) {
  .ol-card { grid-template-columns: 1fr; }
  .ol-scan { max-width: 420px; }
}

@media (max-width: 600px) {
  .page-head { padding: 36px 0 30px; }
  .page-head h1 { font-size: 28px; }
  .ol-card { padding: 20px; }
  .ol-stamp { right: 0; }
}