/* Generated from the prototype page "Homepage" by scripts/george/build.mjs */

  a:focus-visible, button:focus-visible { outline: 2px solid var(--bigg-blue) !important; outline-offset: 3px; }

  * { box-sizing: border-box; }
  @supports (-webkit-touch-callout: none) { [data-hp-cta] { position: relative !important; bottom: auto !important; max-height: none !important; } }
  body { --hp-card-r: var(--radius-2xl); }
  @media (max-width: 1024px) { body { --hp-card-r: 24px; } }
  @media (max-width: 640px) { body { --hp-card-r: 16px; } }
  @keyframes logo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .hp-marquee { animation: none !important; } }
  html, body { margin: 0; padding: 0; background: var(--surface-page); }
  a { -webkit-tap-highlight-color: transparent; }

  .nav-dd { position: relative; display: inline-flex; align-items: center; }
  .nav-dd-menu { position: absolute; top: 100%; left: 50%; z-index: 80; padding-top: 14px; opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity 200ms ease, transform 240ms var(--ease-out); }
  .nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .nav-dd-card { display: flex; flex-direction: column; gap: 2px; min-width: 216px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px rgba(1,16,56,.2); }
  .nav-dd-card a { display: block; padding: 11px 14px; border-radius: 12px; font-family: var(--font-ui); font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; color: var(--bigg-ink); text-decoration: none; transition: background-color 180ms ease; }
  .nav-dd-card a:hover { background: var(--surface-muted); color: var(--bigg-ink); }
  .nav-dd-caret { width: 0; height: 0; margin-left: 6px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 200ms ease; }
  .nav-dd:hover .nav-dd-caret { transform: translateY(2px); }

  @media (max-width: 900px) { .hp-hero-img { left: 0 !important; width: 100% !important; } }

/* ---- home page on phones (≤767px): George's desktop markup restyled to match his phone layout ---- */
@media (max-width: 767px) {
  #top > section:first-of-type { overflow: hidden; }
  #main-content > div:first-child > div:nth-child(2) > section > div:nth-child(2) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }         /* services */
  #main-content > div:first-child > div:nth-child(3) > section > div > div:nth-child(2) { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }           /* selected work */
  #main-content > div:first-child > div:nth-child(4) > section > div > div:nth-child(2) { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }           /* process */
  #main-content > div:first-child > div:nth-child(5) > section > div:first-child { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }                 /* work / team / approach tiles */
  #main-content > div:first-child > div:nth-child(6) > section > div:first-child { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }                 /* partnerships */
  #main-content > div:first-child > div:nth-child(7) > section > div:first-child { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }                 /* team */
  #main-content > div:first-child > div:nth-child(7) > section > div:first-child > div:first-child { width: 100% !important; }
  #main-content > div:first-child > div:nth-child(8) > section > div > div:nth-child(2) { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }           /* testimonials */
  #top footer > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px 28px !important; }
  #top footer > div:first-child > div:first-child { grid-column: 1 / -1; }

  /* Hero (snagging round 1): left-aligned on phones, headline wraps, both buttons full width. */
  #top > section:first-of-type div:has(> h1) { align-items: flex-start !important; text-align: left !important; justify-content: flex-end; padding-top: 7rem !important; padding-bottom: calc(5rem + 12vh) !important; }
  #top > section:first-of-type h1 { font-size: clamp(2.6rem, 14vw, 3.6rem) !important; white-space: normal !important; }
  #top > section:first-of-type h1 + p { font-size: 16px !important; margin: 18px 0 22px !important; }
  #top > section:first-of-type h1 + p + div { width: 100%; flex-direction: column; align-items: stretch !important; gap: 12px !important; }
  #top > section:first-of-type h1 + p + div a { display: flex !important; justify-content: center; }

  /* S1: services cards fill their row, so each pair is equal; arrow top, title and line pinned to the bottom. */
  #main-content > div:first-child > div:nth-child(2) > section > div:nth-child(2) { align-items: stretch !important; }
  #main-content > div:first-child > div:nth-child(2) > section > div:nth-child(2) > div,
  #main-content > div:first-child > div:nth-child(2) > section > div:nth-child(2) > div > a { height: 100%; }
  #main-content > div:first-child > div:nth-child(2) > section > div:nth-child(2) > div > a > div { height: 100%; min-height: 0 !important; gap: 28px !important; padding: 22px 18px !important; border-radius: var(--radius-tile, 22px) !important; }
  #main-content > div:first-child > div:nth-child(2) > section > div:nth-child(2) > div > a > div > div { margin-top: auto; }
  #main-content > div:first-child > div:nth-child(2) > section > div:nth-child(2) h3 { font-size: 22px !important; line-height: 1.05 !important; letter-spacing: -0.025em !important; }
  #main-content > div:first-child > div:nth-child(2) > section > div:nth-child(2) p { font-size: 14px !important; line-height: 1.45 !important; }

  /* S2: process timeline runs down the left: numbered circles on a vertical coral line (home.js scrubs it),
     title and copy beside each step. */
  #main-content > div:first-child > div:nth-child(4) h2 { font-size: var(--fs-section-m, 2.6rem) !important; }
  #main-content > div:first-child > div:nth-child(4) > section > div > div:nth-child(2) { display: flex !important; flex-direction: column; gap: 32px !important; }
  #main-content > div:first-child > div:nth-child(4) > section > div > div:nth-child(2) > div[aria-hidden]:nth-child(-n+2) { top: 22px !important; bottom: 22px !important; left: 21px !important; right: auto !important; width: 2px !important; height: auto !important; transform-origin: center top !important; }
  #main-content > div:first-child > div:nth-child(4) > section > div > div:nth-child(2) > div[aria-hidden]:nth-child(3) { display: none !important; }
  #main-content > div:first-child > div:nth-child(4) > section > div > div:nth-child(2) > div:not([aria-hidden]) { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  #main-content > div:first-child > div:nth-child(4) > section > div > div:nth-child(2) > div:not([aria-hidden]) > div { grid-row: 1 / span 2; width: 44px !important; height: 44px !important; margin: 0 !important; font-size: 15px !important; }
  #main-content > div:first-child > div:nth-child(4) > section > div > div:nth-child(2) h3 { grid-column: 2; font-size: 22px !important; margin: 8px 0 8px !important; }
  #main-content > div:first-child > div:nth-child(4) > section > div > div:nth-child(2) p { grid-column: 2; font-size: 15.5px !important; max-width: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #main-content > div:first-child > div:nth-child(5) > section > div:first-child,
  #main-content > div:first-child > div:nth-child(8) > section > div > div:nth-child(2) { grid-template-columns: minmax(0, 1fr) !important; }
  #top footer > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px 28px !important; }
  #top footer > div:first-child > div:first-child { grid-column: 1 / -1; }
}

/* hover / focus / active states */
[data-sf="x0"]:focus-visible{transform: none !important; opacity: 1 !important}