/* Spacing rhythm on top of Alison's design (22 Oct 2026, Alan: "section padding,
   the hero to the next section is cut abruptly"). Layout, copy and imagery unchanged.
   Her styles are inline, hence !important. One scale: S = section, B = band. */
:root{ --S: clamp(64px, 8vw, 112px); --B: clamp(56px, 6vw, 88px); }

/* Photo split sections sat flush against the hero and each other. Give them air. */
section[data-screen-label="Belief"]    { margin-top: var(--S) !important; margin-bottom: var(--S) !important; }
section[data-screen-label="Expertise"] { margin-top: var(--S) !important; margin-bottom: 0 !important; }

/* Text sections: one even padding top and bottom. */
section[data-screen-label="Approach"],
section[data-screen-label="When we partner"],
section[data-screen-label="How we partner"],
section[data-screen-label="Opportunity & stakes"],
section[data-screen-label="Book a diagnostic"],
section[data-screen-label="Stay in touch"] { padding-top: var(--S) !important; padding-bottom: var(--S) !important; }

section[data-screen-label="Contact form"] { padding-top: var(--S) !important; padding-bottom: var(--S) !important; }
section[data-screen-label="Meet Craig"]   { padding-top: var(--S) !important; padding-bottom: clamp(32px,4vw,56px) !important; }
section[data-screen-label="Achievements"] { padding-top: clamp(32px,4vw,56px) !important; padding-bottom: var(--S) !important; }

/* Approach page: intro band and the table head had uneven, tight padding. */
section[data-screen-label="Intro"]         { padding-top: var(--S) !important; padding-bottom: clamp(48px,5vw,72px) !important; }
section[data-screen-label="Column titles"] { padding-top: clamp(48px,5vw,72px) !important; }

/* Call-to-action bands: same height above and below on every page. */
section[data-screen-label="CTA"] { padding-top: var(--B) !important; padding-bottom: var(--B) !important; }

/* Footer a touch more room. */
body footer { padding-top: 48px !important; padding-bottom: 48px !important; }


/* Every hero photo now ends on page colour before the next band starts. */
section[data-screen-label="Hero"] + section { margin-top: var(--B) !important; }
section[data-screen-label="Hero"] + section[data-screen-label="Belief"] { margin-top: var(--S) !important; }

/* ------------------------------------------------------------------
   TYPE. Eyebrows were 9.8 / 12 / 13 / 14 / 18px depending on the page.
   One size, one tracking, one rule length. Colours untouched.
   ------------------------------------------------------------------ */
[style*="text-transform: uppercase"][style*="letter-spacing: 0.16em"][style*="font-size: 14px"],
[style*="text-transform: uppercase"][style*="letter-spacing: 0.16em"][style*="font-size: 13px"],
[style*="text-transform: uppercase"][style*="letter-spacing: 0.12em"][style*="font-size: 18px"],
section[data-screen-label="Intro"] > div:first-child {
  font-size: 15px !important; letter-spacing: 0.14em !important; line-height: 1.3 !important;
}
span[style*="height: 2px"][style*="width: 40px"] { width: 44px !important; }
/* Small caps labels (table heads, "The outcome", "Where we start", step numbers) */
[style*="font-size: 12px"], [style*="font-size: 11.3px"] { font-size: 13px !important; }
[data-step-detail] li { font-size: 14px !important; }

/* Headings were set at 1.05: two-line wraps felt tight. */
h1[style*="line-height: 1.05"], h2[style*="line-height: 1.05"] { line-height: 1.12 !important; }
p[style*="line-height: 1.3"], p[style*="line-height: 1.35"] { line-height: 1.42 !important; }
p[style*="font-size: 26px"] { line-height: 1.4 !important; }

/* ------------------------------------------------------------------
   LINKS, BUTTONS, FORMS: hover + focus
   ------------------------------------------------------------------ */
a, button, select, label, summary { cursor: pointer; }
button[disabled] { cursor: default; }
a, button { transition: color .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease, transform .18s ease; }

/* Nav */
header nav a { position: relative; }
header nav a:hover { color: #FF5A00; }
header nav a:not([aria-current]):hover { text-decoration: underline; text-decoration-color: #FF5A00; text-decoration-thickness: 2px; text-underline-offset: 8px; }
header a[aria-label] { transition: opacity .18s ease; }
header a[aria-label]:hover { opacity: .8; }

/* Underlined text links ("Let's Connect →", "About FueledCPG →") */
a[style*="border-bottom: 2px solid rgb(4, 49, 109)"]:hover { border-bottom-color: #FF5A00 !important; color: #04316D; }
a[style*="border-bottom: 2px solid rgb(4, 49, 109)"] span,
a.scp0 span, button.scp0 span { display: inline-block; transition: transform .2s ease; }
a[style*="border-bottom: 2px solid rgb(4, 49, 109)"]:hover span,
a.scp0:hover span, button.scp0:hover span { transform: translateX(4px); }

/* Filled buttons: .scp0 */
a.scp0, button.scp0 { text-decoration: none; }
a.scp0:hover, button.scp0:hover { background: #FF5A00 !important; color: #04316D !important; }
a.scp0:active, button.scp0:active { transform: translateY(1px); }
a.scp0:hover span, button.scp0:hover span { color: inherit; }

/* Calendar day + "View available times" */
button[aria-pressed]:not([disabled]):hover { background: #E8F1FA !important; }
button[type="button"]:not([aria-pressed]):not(.scp0):hover { filter: brightness(1.2); }

/* Form fields */
input, select, textarea { transition: border-color .18s ease, box-shadow .18s ease; border-radius: 0; }
input:hover, select:hover, textarea:hover { border-color: #04316D !important; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #04316D !important; box-shadow: 0 0 0 3px rgba(255, 90, 0, .55); }

/* Keyboard focus ring: orange, with a navy gap so it reads on light, blue and navy */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 3px solid #FF5A00 !important; outline-offset: 3px; border-radius: 2px;
}
a.scp0:focus-visible, button.scp0:focus-visible { outline-color: #FF5A00 !important; box-shadow: 0 0 0 3px #FAF8F4; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ------------------------------------------------------------------
   PHONE (390). Photos stay full bleed; only text blocks change.
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  :root { --S: 56px; --B: 48px; }
  /* Hero lead paragraphs at 26px fill half the screen */
  p[style*="font-size: 26px"] { font-size: 20px !important; }
  [style*="font-size: 18px"][style*="text-transform: uppercase"] { flex-wrap: wrap; }
  /* Nav: comfortable 44px tap targets, items evenly spread */
  header nav { gap: 4px 20px !important; }
  header nav a { padding-top: 12px !important; padding-bottom: 12px !important; display: inline-block; }
  header nav a[aria-current] { padding-bottom: 10px !important; }
  /* Home: Approach section had only 32px top/bottom at this width */
  section[data-screen-label="Approach"] { padding-top: var(--S) !important; padding-bottom: var(--S) !important; }
  /* Approach page: outcome line was 14px orange */
  [data-step-body] > div[style*="color: rgb(255, 90, 0)"] { font-size: 17px !important; line-height: 1.25 !important; }
  [data-step-body] p, [data-step-detail] li { font-size: 16px !important; }
  [data-step-detail] h3 { font-size: 17px !important; }
  /* Partner cards: one column, drop side borders, divide with a rule */
  section[data-screen-label="When we partner"] > div:nth-child(2) > div { padding: 32px 0 0 !important; border-left: 0 !important; }
  section[data-screen-label="When we partner"] > div:nth-child(2) > div + div { margin-top: 32px; border-top: 1px solid #B9CDEB; }
  section[data-screen-label="When we partner"] > div:nth-child(2) > div:first-child { padding-top: 0 !important; }
  /* Footer stacks left, same edge as content */
  body footer > div { text-align: left !important; }
  /* Form: stay on the 24px gutter, bigger tap targets */
  button.scp0[type="submit"] { width: 100%; justify-content: center; }
  [data-two-col] [data-form-aside] { padding-top: 0 !important; }
  button[aria-pressed] { min-height: 44px; }
}
/* Native select text sits ~2px right of input text; match the 16px field inset. */
select { padding-left: 12px !important; }

/* ------------------------------------------------------------------
   PHONE MENU (23 Oct 2026). Burger and panel built by menu.js.
   ------------------------------------------------------------------ */
.burger, .m-panel { display: none; }
@media (max-width: 768px) {
  html.has-burger header { flex-wrap: nowrap !important; height: 88px !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 14px !important; gap: 6px !important; position: relative; z-index: 60; }
  /* Logo keeps its size; only shrinks on phones narrower than it fits */
  html.has-burger header > a[aria-label] img { max-width: calc(100vw - 92px); max-height: 40px; height: auto !important; }
  html.has-burger header > nav { display: none !important; }
  .burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
    width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; flex: none; }
  .burger span { display: block; width: 24px; height: 2px; background: #04316D; border-radius: 1px;
    transition: transform .22s ease, opacity .15s ease; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .m-panel { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 59;
    background: rgb(250, 248, 244); border-top: 1px solid rgb(231, 226, 216);
    padding: 8px clamp(24px, 6vw, 88px) 32px; overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }
  .m-panel[hidden] { display: none; }
  .m-panel.is-open { opacity: 1; transform: none; }
  .m-panel nav { display: flex; flex-direction: column; }
  .m-panel nav a { display: flex; align-items: center; min-height: 56px; font-size: 24px; font-weight: 500;
    color: #04316D; text-decoration: none; border-bottom: 1px solid rgb(231, 226, 216); }
  .m-panel nav a span { padding: 4px 0; border-bottom: 2px solid transparent; }
  .m-panel nav a[aria-current] span { border-bottom-color: rgb(255, 90, 0); font-weight: 600; }
  .m-panel nav a:active span { color: #FF5A00; }
  .m-panel .m-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; margin-top: 32px;
    min-height: 48px; padding: 0 28px; background: rgb(255, 90, 0); color: #04316D; font-size: 17px; font-weight: 600; text-decoration: none; }
  .m-panel .m-cta:active { background: #04316D; color: #fff; }
  html.menu-open, html.menu-open body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .burger span, .m-panel { transition: none !important; } }