/* NO IDEA site styles.
   Values measured off the live HubSpot build (Sep 2026) so spacing, logo, text and buttons match it:
   blue #0600ff on white, Arial 16px / 22.4px, everything left aligned at a 20px gutter.
   Same layout at every screen size, no breakpoints, exactly as the original. */

:root {
  --blue: #0600ff;
  --blue-active: #5650ff;
  --border-blue: #0000ff;
  --white: #ffffff;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--blue);
  font-family: arial, helvetica, sans-serif;
  font-size: 16px;
  line-height: 22.4px;
}

.skip-link {
  position: absolute;
  left: -1000px;
  top: -1000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 20px;
  top: 20px;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: var(--white);
  border: 1px solid var(--border-blue);
}

/* Page frame: logo top edge at 61px, 20px side gutter, same as the live site */
.page {
  padding: 61px 20px 90px;
}

/* Logo: the full 300 x 300 square, then 6px of line box under it (367px to first text line) */
.logo {
  display: block;
  width: 300px;
  height: 306px;
  margin: 0;
}
.logo img {
  display: block;
  width: 300px;
  height: 300px;
}
.logo:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* Text blocks. The original stacks 22.4px lines with 10px spacer rows between blocks */
p { margin: 0; }

.title {
  font-weight: 700;
  margin: 0 0 10px;
}

.smiley,
.stats { margin-top: 20px; }

a {
  color: var(--blue);
  text-decoration: underline;
}
a:hover,
a:focus { text-decoration: none; }
a:active { color: var(--blue-active); }

/* Button: 127px wide, 44px tall, hairline blue border, fills blue on hover, lighter blue on press.
   Two buttons plus the 20px gap equal the width of the "brought to you by bambounou + simon" line (274px) */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
  width: 127px;
  padding: 10px 0;
  border: 0.6667px solid var(--border-blue);
  border-radius: 0;
  background-color: var(--white);
  color: var(--blue);
  font-family: helvetica, arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  text-decoration: none;
  transition: color 0.15s linear;
}
.button:hover,
.button:focus {
  background-color: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  text-decoration: none;
  outline: none;
}
.button:active {
  background-color: var(--blue-active);
  border-color: var(--blue-active);
  color: var(--white);
}

/* Home: 100px gap above the buttons, 20px between them */
.home .buttons { margin-top: 100px; display: flex; flex-wrap: wrap; gap: 20px; }
.home .button { margin-top: 0; }

/* Case studies page: 50px gap above the deck button, 90px below it */
.intro .button { margin-top: 50px; }
.sectors { margin-top: 90px; }

/* Accordion rows, copied from the HubSpot accordion module:
   56px tall rows, 11.2px padding, a 24px plus sign with 22.4px to its right, minus when open */
details { margin: 0; }
summary {
  display: flex;
  align-items: center;
  min-height: 56px;
  cursor: pointer;
  padding: 11.2px;
  line-height: 22.4px;
}
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }
summary::before {
  content: "+";
  flex: none;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  margin-right: 22.4px;
}
details[open] > summary::before { content: "\2212"; }
summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* Sectors and clients both regular weight on the same 56px row */
.sector > summary,
.client > summary { font-weight: 400; }

/* Open content is padded 11.2px like the original accordion content. Sector content is indented
   further (44.8px) so client rows sit clearly inside their sector */
.sector-body { padding: 11.2px 11.2px 11.2px 44.8px; }
.client-body { padding: 11.2px; }
.sector-body.client-body { padding: 11.2px; }

.sector-note { margin: 0 0 22.4px; }

.client-body h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
  margin: 0;
}
.client-body p { margin: 0 0 22.4px; }
.client-body p + h3,
.client-body ul + h3 { margin-top: 0; }
.client-body ul {
  margin: 0 0 22.4px;
  padding-left: 20px;
}
.client-body li { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}