/* Inverta theme on top of Bootstrap 5. Same identity as the LinkedIn banner. */
:root {
  --inv-navy: #0B1F3A;
  --inv-navy-2: #12294A;
  --inv-amber: #F5A524;
  --inv-amber-dark: #D98C0B;
  --inv-ink: #0F172A;
  --inv-muted: #5B6B82;
  --inv-line: #E3E8EF;
  --inv-soft: #F5F7FA;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: var(--inv-ink);
  --bs-link-color-rgb: 11, 31, 58;
}

body { font-family: var(--bs-body-font-family); color: var(--inv-ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .display-4 { font-family: 'Inter Display', 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }

/* Nav */
.inv-nav { background: var(--inv-navy); }
.inv-nav .navbar-brand { font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.inv-nav .nav-link { color: #C9D4E3; }
.inv-nav .nav-link:hover { color: #fff; }

/* Buttons */
.btn-amber { background: var(--inv-amber); color: var(--inv-navy); font-weight: 600; border: 0; padding: .8rem 1.4rem; border-radius: .5rem; }
.btn-amber:hover, .btn-amber:focus { background: var(--inv-amber-dark); color: var(--inv-navy); }
.btn-ghost { color: #fff; border: 1px solid rgba(255,255,255,.35); padding: .8rem 1.4rem; border-radius: .5rem; font-weight: 500; }
.btn-ghost:hover { color: #fff; border-color: #fff; }

/* Dark sections with the banner grid */
.inv-dark { background-color: var(--inv-navy); color: #fff; position: relative;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px; }
.inv-dark .lead, .inv-dark p { color: #C9D4E3; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 600; color: var(--inv-amber); }
.inv-hero { padding: 6rem 0 5rem; }
.inv-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.05; }
.inv-hero .lead { font-size: 1.25rem; max-width: 34rem; }

/* Signal card (hero visual) */
.signal-card { background: #fff; color: var(--inv-ink); border-radius: .75rem; padding: 1.5rem; box-shadow: 0 20px 50px rgba(0,0,0,.35); border-left: 5px solid var(--inv-amber); }
.signal-card .k { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--inv-muted); }
.signal-card .v { font-weight: 600; margin-bottom: .75rem; }
.signal-card .pill { display: inline-block; background: #FFF4DF; color: #8A5A00; font-size: .75rem; font-weight: 600; padding: .2rem .6rem; border-radius: 99px; }
.signal-card .note { font-size: .75rem; color: var(--inv-muted); margin: 0; }

/* Proof strip */
.proof { background: var(--inv-navy-2); color: #fff; padding: 2.5rem 0; }
.proof h3 { font-size: 2.25rem; color: var(--inv-amber); line-height: 1.1; margin-bottom: .25rem; }
.proof h4 { font-size: 1.35rem; font-weight: 600; color: #fff; margin-bottom: .25rem; }
.proof p { color: #C9D4E3; font-size: .95rem; margin: 0; }

/* Light sections */
.inv-section { padding: 5.5rem 0; }
.inv-soft { background: var(--inv-soft); }
.text-muted-inv { color: var(--inv-muted); }
.step { border-top: 3px solid var(--inv-amber); padding-top: 1.25rem; }
.step h6 { font-weight: 700; color: var(--inv-amber-dark); font-size: .9rem; letter-spacing: .08em; margin: 0 0 .5rem; }
.step h3 { font-size: 1.5rem; margin-bottom: .75rem; }
.step p { color: var(--inv-muted); }
.step p:last-child { font-size: .9rem; border-top: 1px solid var(--inv-line); padding-top: .75rem; margin: 1rem 0 0; }
.how h2 { margin-bottom: 3rem; }

.case { background: #fff; border: 1px solid var(--inv-line); border-radius: .75rem; padding: 2.5rem; }
.case ol { padding-left: 1.2rem; }
.case li { margin-bottom: .6rem; }
.case .result { background: var(--inv-navy); color: #fff; border-radius: .5rem; padding: 1.25rem 1.5rem; }
.case .result strong { color: var(--inv-amber); }
.case h2 { margin-bottom: 1.5rem; }
.case p, .case li { color: var(--inv-muted); }
.case strong { color: var(--inv-ink); }
.case .result p { color: #fff; margin: 0; }
#case { scroll-margin-top: 6rem; }

.avatar { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }
.fit-card { border: 1px solid var(--inv-line); border-radius: .75rem; padding: 1.75rem; height: 100%; background: #fff; }
.fit-card.yes { border-top: 4px solid var(--inv-amber); }
.fit-card.no { border-top: 4px solid #C3CCD8; }
.fit-card ul { padding-left: 1.1rem; margin: 0; }
.fit-card li { margin-bottom: .5rem; }

/* Kept from the old site.css */
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 700px) { .service-grid { grid-template-columns: 1fr; } }

.inv-dark .signal-card p { color: var(--inv-ink); font-weight: 600; margin-bottom: .75rem; }
.inv-dark .signal-card p:last-child { font-weight: 400; color: var(--inv-muted); font-size: .75rem; margin: 0; }

.signal-card h6 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--inv-muted); margin: 0 0 .15rem; font-weight: 500; }
.signal-card h5 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; }
.signal-card h5 em { font-style: normal; background: #FFF4DF; color: #8A5A00; font-size: .75rem; font-weight: 600; padding: .2rem .6rem; border-radius: 99px; }
.inv-dark h1, .inv-dark h2, .inv-dark h3 { color: #fff; }

.insight h2 { margin-bottom: 1.5rem; }
.insight p { font-size: 1.25rem; color: var(--inv-muted); margin: 0; }

.me h2 { margin-bottom: 1rem; }
.me h2 ~ p { font-size: 1.25rem; color: var(--inv-muted); }
.eyebrow p, .inv-dark .eyebrow p { color: inherit; margin: 0; }

.fit h2 { text-align: center; margin-bottom: 3rem; }
.fit-card h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.fit-card li { color: var(--inv-muted); }

.cta h2 { margin-bottom: 1rem; }
.cta p { font-size: 1.25rem; margin-bottom: 1.5rem; }
.inv-footer { background: var(--inv-navy); color: #8FA3BF; font-size: .9rem; padding: 2rem 0; }
.inv-footer a { color: #C9D4E3; }
.inv-footer p { margin: 0; }

/* ---- Home page (templates/home.html), rework 2026-10 ---- */
.inv-hero h1 { margin-bottom: 1.25rem; }
.inv-hero .lead { max-width: 36rem; }

/* Hero card as a CRM record */
.record { background: #fff; color: var(--inv-ink); border-radius: .75rem; padding: 1.5rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.35); border-left: 5px solid var(--inv-amber); text-align: left; }
.record-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.record-head strong { font-size: 1rem; }
.record-head em { font-style: normal; background: #FFF4DF; color: #8A5A00; font-size: .75rem; font-weight: 600;
  padding: .2rem .6rem; border-radius: 99px; white-space: nowrap; }
.record dl { margin: 0; }
.record dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--inv-muted); font-weight: 500; }
.record dd { font-weight: 600; font-size: .95rem; margin: .1rem 0 .8rem; }
.record .next { border-top: 1px solid var(--inv-line); padding-top: .8rem; display: flex; justify-content: space-between; gap: .75rem; }
.record .next dd { margin-bottom: 0; }
.record .due { font-size: .8rem; font-weight: 600; color: var(--inv-amber-dark); white-space: nowrap; align-self: end; }
.record .note { font-size: .75rem; color: var(--inv-muted); margin: .9rem 0 0; }

/* Proof strip */
.proof .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: #8FA3BF; font-weight: 600; margin-bottom: .5rem; }
.proof .col-md-4 + .col-md-4 { border-left: 1px solid rgba(255,255,255,.1); }
@media (max-width: 767.98px) {
  .proof .col-md-4 + .col-md-4 { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.5rem; }
}

/* Section heads */
.sec-head { max-width: 44rem; margin-bottom: 2.5rem; }
.sec-head p { color: var(--inv-muted); font-size: 1.1rem; margin: .75rem 0 0; }

/* Examples: a table on desktop, cards on mobile */
.ex { border: 1px solid var(--inv-line); border-radius: .75rem; overflow: hidden; background: #fff; }
.ex-row { display: grid; grid-template-columns: 1.1fr 2fr 2fr; gap: 1.5rem; padding: 1.25rem 1.5rem; border-top: 1px solid var(--inv-line); }
.ex-row:first-child { border-top: 0; }
.ex-row.head { background: var(--inv-soft); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--inv-muted); font-weight: 600; padding-top: .9rem; padding-bottom: .9rem; }
.ex-row .who { font-weight: 700; }
.ex-row .sig { color: var(--inv-ink); }
.ex-row .real { color: var(--inv-muted); }
.ex-row .real a { color: var(--inv-amber-dark); font-weight: 600; text-decoration: none; }
    .ex-row .k { display: none; }
@media (max-width: 767.98px) {
  .ex-row { grid-template-columns: 1fr; gap: .6rem; }
  .ex-row.head { display: none; }
  .ex-row:nth-child(2) { border-top: 0; }
  .ex-row .k { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--inv-muted); font-weight: 600; }
  .ex-row .who { font-size: 1.1rem; }
}

/* Menu */
.menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.menu-item { background: #fff; border: 1px solid var(--inv-line); border-top: 3px solid var(--inv-amber); border-radius: .75rem; padding: 1.5rem; display: flex; flex-direction: column; }
.menu-item h3 { font-size: 1.15rem; margin-bottom: .9rem; }
.menu-item .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--inv-muted); font-weight: 600; margin-bottom: .2rem; }
.menu-item p { color: var(--inv-muted); margin-bottom: 1rem; }
.menu-item .after { margin-top: auto; border-top: 1px solid var(--inv-line); padding-top: .9rem; }
.menu-item .after p { color: var(--inv-ink); font-weight: 600; margin: 0; }
@media (max-width: 991.98px) { .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .menu { grid-template-columns: 1fr; } }

/* Build-up timeline */
.build { position: relative; }
.build-step { display: grid; grid-template-columns: 9rem 1fr 1fr; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--inv-line); }
.build-step:first-child { border-top: 0; }
.build-step .when { font-weight: 700; color: var(--inv-amber-dark); letter-spacing: .02em; }
.build-step .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--inv-muted); font-weight: 600; margin-bottom: .25rem; }
.build-step .what { color: var(--inv-ink); margin: 0; }
.build-step .notice { color: var(--inv-ink); font-weight: 600; margin: 0; }
.build-example { display: inline-block; background: #fff; border: 1px solid var(--inv-line); border-radius: .5rem; padding: .6rem 1rem; color: var(--inv-muted); font-size: .95rem; margin-bottom: 1.5rem; }
@media (max-width: 767.98px) {
  .build-step { grid-template-columns: 1fr; gap: .75rem; }
  .build-step .when { font-size: 1.05rem; }
}

/* Case study */
.case h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--inv-amber-dark); margin: 1.75rem 0 .5rem; }
.case ul { padding-left: 1.2rem; }
.case li { margin-bottom: .5rem; }
.case .result { margin-top: 1.75rem; }
@media (max-width: 575.98px) { .case { padding: 1.5rem; } }

/* Who I am */
.me-photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }
@media (max-width: 767.98px) { .me-photo { width: 120px; height: 120px; } }

/* Mobile hero + general tightening */
@media (max-width: 767.98px) {
  .inv-hero { padding: 3.5rem 0 3rem; }
  .inv-section { padding: 3.5rem 0; }
  .inv-hero .lead { font-size: 1.1rem; }
}
  

/* ---- Book-a-call page (enquiries/templates/enquiries/form.html), rework 2026-10 ---- */
.book h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.05; margin-bottom: 1.5rem; }
.book-host { display: flex; align-items: center; gap: 1rem; font-size: 1.1rem; line-height: 1.35; margin-bottom: 1.5rem; }
.book-host img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.book-lead { font-size: 1.25rem; color: var(--inv-muted); margin-bottom: 2.5rem; max-width: 32rem; }
.book-steps-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--inv-muted); font-weight: 600; margin-bottom: 1rem; }
.book-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; max-width: 32rem; }
.book-steps li { counter-increment: step; display: flex; align-items: baseline; gap: .9rem; padding: .85rem 0; border-top: 1px solid var(--inv-line); font-weight: 600; }
.book-steps li::before { content: counter(step); color: var(--inv-amber-dark); font-weight: 700; min-width: 1rem; }
.book-steps li span { margin-left: auto; font-weight: 400; font-size: .85rem; color: var(--inv-muted); white-space: nowrap; }
.book-form { background: #fff; border: 1px solid var(--inv-line); border-top: 3px solid var(--inv-amber); border-radius: .75rem; padding: 2rem; }
.book-form h2 { font-size: 1.5rem; margin-bottom: .35rem; }
.book-form > p { margin-bottom: 1.5rem; }
.book-form .form-label { font-weight: 600; }
.book-form .q { color: var(--inv-amber-dark); font-weight: 700; margin-right: .5rem; }
.book-form fieldset legend { font-size: 1rem; margin-bottom: .25rem; }
.book-checks { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.book-check { display: flex; align-items: flex-start; gap: .55rem; border: 1px solid var(--inv-line); border-radius: .5rem; padding: .6rem .75rem; font-size: .92rem; cursor: pointer; margin: 0; }
.book-check:has(input:checked) { border-color: var(--inv-amber); background: #FFF8EA; }
.book-check input { margin-top: .2rem; accent-color: var(--inv-amber-dark); }
@media (min-width: 992px) { .book-form { position: sticky; top: 1.5rem; } }
@media (max-width: 767.98px) {
  .book-form { padding: 1.25rem; }
  .book-checks { grid-template-columns: 1fr; }
}