/* ==========================================================================
   Promptful Consulting — layout refinements
   --------------------------------------------------------------------------
   Visual-only overrides. No copy changes, no markup changes.

   Loaded after the Tailwind bundle. Tailwind v4 emits every utility inside
   `@layer utilities`, and unlayered rules always beat layered ones regardless
   of selector specificity — so nothing here needs `!important` and nothing
   here can be cancelled out by a longer utility chain further down the
   bundle. Responsive utilities (md:py-32 etc.) lose to these rules too,
   because layer order outranks media queries.
   ========================================================================== */

:root {
  /* One vertical rhythm token for every major section. */
  --section-pad: 52px;
  /* Full-bleed image/colour bands need a little more room to breathe. */
  --section-pad-band: 64px;

  /* One content column, used by every section, the header and the footer. */
  --container-max: 1100px;
  --container-pad: 24px;

  /* Comfortable reading measure for running prose inside the wider column. */
  --measure: 46rem;

  /* Surfaces: white cards sit lightly above a quiet grey section panel. */
  --surface-page: #ffffff;
  --surface-panel: #f4f6f8;
  --hairline: #e7ebf0;
  --card-radius: 8px;
  --card-shadow: 0 10px 30px rgb(30 42 57 / 7%);
}

@media (min-width: 768px) {
  :root {
    --section-pad: 80px;
    --section-pad-band: 88px;
  }
}

/* --------------------------------------------------------------------------
   2. Section padding — one token, applied everywhere
   -------------------------------------------------------------------------- */

main section[class*="py-"],
main section[class*="pt-"],
main section[class*="pb-"],
main article[class*="py-"] {
  padding-block: var(--section-pad);
}

/* Full-bleed dark bands keep a slightly taller rhythm. */
main section[class*="bg-[#1E2A39]"] {
  padding-block: var(--section-pad-band);
}

/* Footers read better with a touch more room than a body section. */
footer[class*="py-"] {
  padding-block: calc(var(--section-pad) * 1.4);
}

/* --------------------------------------------------------------------------
   3. One container width for every section, on every page
   -------------------------------------------------------------------------- */

main section > div[class*="mx-auto"],
main article[class*="py-"] > div[class*="mx-auto"],
main > div[class*="mx-auto"],
header > nav,
footer > div[class*="mx-auto"] {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* The wrapper is wider than the old max-w-4xl column, so running prose is
   capped to a readable measure. It stays flush to the wrapper's left edge,
   which is what keeps the content column from jogging between sections. */
main section > div[class*="mx-auto"] > h2,
main section > div[class*="mx-auto"] > h3,
main section > div[class*="mx-auto"] > p,
main section > div[class*="mx-auto"] > ul,
main section > div[class*="mx-auto"] > ol,
main section > div[class*="mx-auto"] > div[class*="space-y-4"] > p,
main article[class*="py-"] > div[class*="mx-auto"] > h1,
main article[class*="py-"] > div[class*="mx-auto"] > p,
main .prose {
  max-width: var(--measure);
}

/* Blocks that were centred stay centred inside the wider wrapper. */
main section > div[class*="mx-auto"] > [class~="text-center"],
main article[class*="py-"] > div[class*="mx-auto"] > [class~="text-center"] {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   6. Card fills: quiet grouping on one continuous page surface
   -------------------------------------------------------------------------- */

main
  :is(article, div, a, li)[class~="border"]:is(
    [class~="border-gray-200"],
    [class~="border-gray-100"]
  )[class*="rounded-"],
main
  :is(article, div, a, li)[class~="bg-white"][class*="rounded-"]:is(
    [class~="border"],
    [class*="shadow-"]
  ),
main [data-slot="card"] {
  background-color: var(--surface-page);
  border-width: 0;
  border-color: transparent;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

/* Card groups sit on a quiet panel so cards do not need visible borders. */
main section:has([data-slot="card"]),
main section:has(.grid > [class*="rounded-"][class~="border"]),
main
  section:has(
    :is(article, div, a, li)[class~="bg-white"][class*="rounded-"]:is(
      [class~="border"],
      [class*="shadow-"]
    )
  ),
main section[class*="bg-[#F5F7FA]"],
main section[class*="bg-[#F9FAFB]"],
main section[class*="bg-[#F0F4F8]"] {
  background-color: var(--surface-panel);
}

/* --------------------------------------------------------------------------
   5. Type scale — card titles drop so section headings clearly parent them
   -------------------------------------------------------------------------- */

main
  :is(article, div, a, li)[class~="border"]:is(
    [class~="border-gray-200"],
    [class~="border-gray-100"]
  )[class*="rounded-"]
  :is(h3, h4),
main
  :is(article, div, a, li)[class~="bg-white"][class*="rounded-"]:is(
    [class~="border"],
    [class*="shadow-"]
  )
  :is(h3, h4),
main [data-slot="card"] :is(h3, h4) {
  /* Size only. Every heading on the site renders at weight 400 (the bundle's
     bold rule for h1–h6 is gated behind a :where(:not(:has([class*=" text-"])))
     guard that a `text-3xl` heading always fails), so adding weight here would
     make card titles out-shout the section heading above them. */
  font-size: 22px;
  line-height: 1.35;
}

main [data-slot="card"],
main
  :is(article, div, a, li)[class~="border"]:is(
    [class~="border-gray-200"],
    [class~="border-gray-100"]
  )[class*="rounded-"],
main
  :is(article, div, a, li)[class~="bg-white"][class*="rounded-"]:is(
    [class~="border"],
    [class*="shadow-"]
  ) {
  padding: 20px;
}

main [data-slot="card"][class*="gap-"],
main
  :is(article, div, a, li)[class~="border"]:is(
    [class~="border-gray-200"],
    [class~="border-gray-100"]
  )[class*="rounded-"][class*="gap-"],
main
  :is(article, div, a, li)[class~="bg-white"][class*="rounded-"][class*="gap-"]:is(
    [class~="border"],
    [class*="shadow-"]
  ) {
  gap: 14px;
}

main section > div[class*="mx-auto"] > header[class*="mb-"],
main section > div[class*="mx-auto"] > h2[class*="mb-"] {
  margin-bottom: 24px;
}

main section [class~="grid"][class*="gap-"] {
  gap: 20px;
}

main :is(a, button)[class*="h-16"],
header :is(a, button)[class*="h-16"] {
  min-height: 48px;
  height: 48px;
  padding-inline: 24px;
  font-size: 16px;
}

main :is(a, button)[class*="rounded-xl"],
main :is(a, button)[class*="rounded-lg"] {
  border-radius: 8px;
}

main [data-slot="card"]:hover,
main
  :is(article, div, a, li)[class~="border"]:is(
    [class~="border-gray-200"],
    [class~="border-gray-100"]
  )[class*="rounded-"]:hover,
main
  :is(article, div, a, li)[class~="bg-white"][class*="rounded-"]:is(
    [class~="border"],
    [class*="shadow-"]
  ):hover {
  box-shadow: var(--card-shadow);
}

/* --------------------------------------------------------------------------
   1. FAQ — an open text list, not a stack of cards
   These rules come after the card rules on purpose: FAQ items share the card
   class signature, and this undoes the card treatment for them. Each selector
   below is kept at the same specificity as the card rules above (0,3,2) so
   that source order decides, not selector length.

   The site ships four different FAQ markup shapes, all of which read as a
   boxed stack and all of which are handled here:
     .space-y-6 > article   home, /services, /pricing
     .space-y-8 > div       /ai-efficiency-audit, /ai-roadmap-audit,
                            /automation-blueprint, /chatgpt-consultant-birmingham
     .space-y-4 > div       /ai-agent-developer-birmingham — already a real
                            accordion, so it keeps its expand/collapse
                            behaviour and simply loses the box around it.
   Blog index cards also use `article` with a question-shaped title, but they
   sit in a `.grid`, not a `space-y-*` stack, so they stay cards.
   -------------------------------------------------------------------------- */

main [class~="space-y-6"] > article[class~="border"][class*="rounded-"],
main [class~="space-y-8"] > div[class*="rounded-"][class*="bg-"],
main [class~="space-y-4"] > div[class*="rounded-"][class*="border-b"] {
  background: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 24px 0;
  margin-block-end: 0;
}

main [class~="space-y-6"]:has(> article[class~="border"][class*="rounded-"]),
main [class~="space-y-8"]:has(> div[class*="rounded-"][class*="bg-"]),
main [class~="space-y-4"]:has(> div[class*="rounded-"][class*="border-b"]) {
  border-block: 0;
}

main [class~="space-y-6"] > article[class~="border"][class*="rounded-"]:not(:last-child),
main [class~="space-y-8"] > div[class*="rounded-"][class*="bg-"]:not(:last-child),
main [class~="space-y-4"] > div[class*="rounded-"][class*="border-b"]:not(:last-child) {
  border-bottom: 1px solid var(--hairline);
}

/* The item padding replaces the stacks' utility gap so the rhythm stays even. */
main [class~="space-y-6"] > article[class~="border"][class*="rounded-"] + *,
main [class~="space-y-8"] > div[class*="rounded-"][class*="bg-"] + *,
main [class~="space-y-4"] > div[class*="rounded-"][class*="border-b"] + * {
  margin-top: 0;
}

main [class~="space-y-6"] > article[class~="border"][class*="rounded-"] > :is(h3, h4),
main [class~="space-y-8"] > div[class*="rounded-"][class*="bg-"] > :is(h3, h4),
main [class~="space-y-4"] > div[class*="rounded-"][class*="border-b"] > :is(h3, h4) {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
  margin-bottom: 6px;
  max-width: var(--measure);
}

main [class~="space-y-6"] > article[class~="border"][class*="rounded-"] > p,
main [class~="space-y-8"] > div[class*="rounded-"][class*="bg-"] > p,
main [class~="space-y-4"] > div[class*="rounded-"][class*="border-b"] p {
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   4. Headshot — square crop, vertically centred against its text
   -------------------------------------------------------------------------- */

#about-section [class~="grid"] {
  align-items: center;
}

#about-section [class*="aspect-"] {
  aspect-ratio: 1 / 1;
  max-width: 400px;
}

/* Name and title under the headshot. The photo's box is set by the rules above
   rather than by its utility classes, so the caption mirrors those constraints
   to stay flush with the image at every breakpoint. */

#about-section .pc-headshot-caption {
  max-width: 400px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  #about-section .pc-headshot-caption {
    margin-inline: 0;
  }
}

@media (max-width: 480px) {
  #about-section .pc-headshot-caption {
    max-width: 320px;
  }
}

/* Two-up on desktop: the photo sits on the content column's left edge rather
   than being centred inside its grid cell, so the section lines up with the
   rest of the page. It stays centred in the single-column mobile layout. */
@media (min-width: 768px) {
  #about-section [class*="aspect-"] {
    margin-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   7. Header — flat surface, no plate behind the logo
   The header used a to-white gradient, which read as a light rectangle
   sitting under the logo and over the section below it. A flat fill plus an
   explicitly transparent logo wrapper removes it.
   -------------------------------------------------------------------------- */

header[class*="sticky"] {
  background-image: none;
  background-color: var(--surface-page);
}

header a[href="/"],
header a[href="/"] img {
  background: transparent;
  background-color: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
}

header a[href="/"] {
  overflow: hidden;
  line-height: 0;
}

header a[href="/"] img {
  display: block;
}

/* --------------------------------------------------------------------------
   8. Hero email — a secondary link, not a stray element beside the button
   -------------------------------------------------------------------------- */

main section header > div[class*="mt-8"][class~="flex"] {
  gap: 12px 24px;
}

main section header > div[class*="mt-8"] > a[href^="mailto:"] {
  font-size: 15px;
  font-weight: 400;
  color: #6b7280;
}

main section header > div[class*="mt-8"] > a[href^="mailto:"]:hover {
  color: #2563eb;
}

/* --------------------------------------------------------------------------
   Small-screen safety: nothing should overflow at 390px
   -------------------------------------------------------------------------- */

/* A grid item defaults to `min-width: auto`, so a single unbreakable string is
   enough to force its track wider than the grid. The contact page's email
   address (one 290px token) did exactly that, pushing the whole column past
   the viewport at 390px. Letting the item shrink and letting long mail/tel
   strings wrap keeps the content column where the rest of the page has it. */
main [class~="grid"] > * {
  min-width: 0;
}

main a[href^="mailto:"],
main a[href^="tel:"] {
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  main section > div[class*="mx-auto"],
  main article[class*="py-"] > div[class*="mx-auto"],
  header > nav,
  footer > div[class*="mx-auto"] {
    padding-inline: 20px;
  }

  #about-section [class*="aspect-"] {
    max-width: 320px;
  }

  /* Long CTA labels carry `whitespace-nowrap`, which pushes the button past a
     390px viewport. Let the label wrap onto two lines instead. */
  main a > button[class*="whitespace-nowrap"] {
    white-space: normal;
  }

  /* Two blog posts embed content with a fixed intrinsic width — a data table
     and a three-step flow diagram built from `w-32` boxes. Neither can shrink,
     so at 390px one was clipped and the other scrolled the whole page sideways.
     Scrolling inside the panel keeps the layout intact and the content legible. */
  main table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }

  main [class~="flex"][class*="justify-between"]:has([class~="w-32"]) {
    overflow-x: auto;
    gap: 8px;
  }
}
.pc-section-inner {
  width: min(100% - 3rem, 80rem);
  margin-inline: auto;
}

.pc-trust-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 56rem);
  margin: 2rem auto 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #fff;
  overflow: hidden;
}

.pc-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1.25rem 1rem;
  text-align: center;
}

.pc-trust-item + .pc-trust-item { border-left: 1px solid #e5e7eb; }
.pc-trust-item strong { color: #1e2a39; font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.1; }
.pc-trust-item span { color: #6b7280; font-size: 0.875rem; line-height: 1.4; }
.pc-direct-email { display: inline-block; text-decoration: underline; text-underline-offset: 0.25rem; }

.pc-testimonials { padding: 4rem 0; background: #f8fafc; }
.pc-testimonials h2, .pc-pricing-faq h2 { margin: 0 0 3rem; color: #1e2a39; font-size: 1.875rem; text-align: center; }
.pc-testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.pc-testimonial-card { position: relative; padding: 2rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; }
.pc-stars, .pc-review-summary span { color: #d4a017; letter-spacing: 0.12em; }
.pc-quote-mark { height: 2.5rem; margin-top: 0.5rem; color: #0369a1; font-family: Georgia, serif; font-size: 4.5rem; line-height: 1; }
.pc-testimonial-card blockquote { margin: 0; color: #2e2e2e; font-size: 1rem; line-height: 1.7; }
.pc-reviewer { margin: 1.25rem 0 0; color: #6b7280; font-size: 0.9rem; }
.pc-review-summary { margin: 2rem 0 0; color: #1e2a39; text-align: center; }

.pc-process-list { display: block !important; max-width: 56rem; margin-inline: auto; }
.pc-process-step { display: grid !important; grid-template-columns: 4rem 1fr; gap: 1.25rem !important; padding: 1.75rem 0 !important; border: 0 !important; border-bottom: 1px solid #dbe2ea !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.pc-process-step:last-child { border-bottom: 0 !important; }
.pc-process-step > div { align-self: center; }
.pc-process-step h3 { margin-bottom: 0.5rem !important; }
.pc-process-number { color: #0369a1; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }

.pc-popular-badge { display: table; margin: 0 auto 0.75rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: #0369a1; color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; }
.pc-tier-example { margin-top: 0.75rem !important; color: #6b7280 !important; font-size: 0.9rem !important; font-style: italic; line-height: 1.55 !important; }
.pc-pricing-faq { padding: 4rem 0; background: #f8fafc; }
.pc-faq-inner { max-width: 56rem; }
.pc-faq-list { display: grid; gap: 1rem; }
.pc-faq-list article { padding: 1.5rem 0; border: 0; border-bottom: 1px solid #dbe2ea; border-radius: 0; background: transparent; }
.pc-faq-list article:last-child { border-bottom: 0; }
.pc-faq-list h3 { margin: 0 0 0.5rem; color: #1e2a39; font-size: 1.125rem; }
.pc-faq-list p { margin: 0; color: #2e2e2e; line-height: 1.65; }

.pc-contact-trust { width: 100%; margin: 0 0 2rem; }
.pc-blog-subtitle { max-width: 48rem; margin: 1rem auto 0; color: #6b7280; font-size: 1.25rem; line-height: 1.6; text-align: center; }
.pc-normal-case { text-transform: none !important; }
.pc-location-intro { max-width: none; margin: 0; padding: 2rem max(1.5rem, calc((100% - 48rem) / 2)); background: #fff; color: #2e2e2e; font-size: 1.0625rem; line-height: 1.7; }
.pc-service-card-light { padding: 1rem !important; border-color: #e5e7eb !important; box-shadow: none !important; }
.pc-service-card-light:hover { box-shadow: none !important; }
.pc-contact-hero-cta { display: inline-flex; margin-top: 1.75rem; padding: 0.8rem 1.25rem; border-radius: 0.375rem; background: #1e2a39; color: #fff; font-weight: 600; text-decoration: none; }
.pc-contact-hero-cta:hover { background: #2563eb; color: #fff; }

.pc-site-footer { margin-top: auto; padding: 3rem 0 calc(3rem + env(safe-area-inset-bottom)); background: #1e2a39; color: #fff; }
.pc-footer-inner { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 2rem; align-items: start; width: min(100% - 3rem, 80rem); margin-inline: auto; }
.pc-footer-inner > div { display: flex; flex-direction: column; gap: 0.45rem; }
.pc-footer-inner > div:last-child { text-align: right; align-items: flex-end; }
.pc-footer-inner strong { font-size: 1.05rem; }
.pc-footer-inner span, .pc-footer-inner a { color: #fff; font-size: 0.9rem; line-height: 1.5; text-decoration: none; }
.pc-footer-inner a:hover { color: #7dd3fc; }
.pc-footer-inner nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 0; }
.pc-footer-inner nav a { display: inline-flex; align-items: center; }
.pc-footer-inner nav a:not(:last-child)::after { content: "|"; margin: 0 0.6rem; color: #64748b; }

@media (max-width: 767px) {
  .pc-trust-row, .pc-testimonial-grid, .pc-footer-inner { grid-template-columns: 1fr; }
  .pc-trust-item + .pc-trust-item { border-left: 0; border-top: 1px solid #e5e7eb; }
  .pc-testimonial-card { padding: 1.5rem; }
  .pc-process-step { grid-template-columns: 3rem 1fr; gap: 0.75rem !important; }
  .pc-footer-inner { text-align: center; }
  .pc-footer-inner > div:last-child { align-items: center; text-align: center; }
  .pc-footer-inner nav { order: 3; }
  .pc-site-footer { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}