/* Boardly site styles shared by every page.
   Colours: Deep Forest Olive #384B2E (headings, buttons, ticks, footer; replaced Boardly green
   #6B7539 for buttons 2026-11-12, which stays only inside the Home illustrations), Midnight Bush #181C14,
   Warm Terracotta #885C42 (accent text; replaced Red Gum #B4482D 2026-11-12), Boardly Cream #F7F5F0 (logo cream; was Warm Stone #EFEBE3), body text #4D5447.
   Fonts: Barlow (headings, buttons, labels), Lato (body, menu). */
:root { color-scheme: light; }
html, body { margin: 0; background: #FFFFFF; }
img { max-width: 100%; }
a { color: #384B2E; }
a:hover { color: #181C14; }
a[style*="border-radius: 8px"] { font-family: Barlow, Arial, sans-serif; }
nav a[style*="background: #384B2E"] { font-weight: 700; font-size: 15px; }
a[style*="background: #384B2E"]:hover { background: #2A3922 !important; color: #FFFFFF !important; }

/* How it works: four cards, two on tablets, one on phones */
@media (max-width: 900px) {
  div[style*="repeat(4, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  div[style*="repeat(4, minmax(0, 1fr))"] { grid-template-columns: 1fr !important; }
}
/* Home, Sound familiar?: five cards on one row, two on tablets, one on phones (Mark, 11 November 2026) */
.familiar-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .familiar-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .familiar-cards { grid-template-columns: 1fr; }
}
/* 16px side gutter on phones */
@media (max-width: 600px) {
  section > div, header > div, footer > div { padding-left: 16px !important; padding-right: 16px !important; }
  /* Footer bottom bar: the divider runs full width, and the bar's own 48px gives way to the 16px gutter */
  .footer-bar { padding-left: 0 !important; padding-right: 0 !important; }
  .footer-bar > div { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Sticky header: keep in-page anchor targets clear of it */
[id]{scroll-margin-top:100px}

/* FAQ accordion: hide the default marker, turn the arrow when open */
details.faq > summary::-webkit-details-marker { display: none; }
details.faq .faq-arrow { transition: transform 0.2s ease; }
details.faq[open] .faq-arrow { transform: rotate(-90deg); }
details.faq > summary:hover { color: #384B2E !important; }

/* Booking form panel: less padding on phones */
@media (max-width: 600px) {
  #enquire > div > div { padding: 24px 16px !important; }
  #enquire form { padding: 20px !important; }
}

/* About, AI team: Prudence on her own row, then six across; three on tablets, two on phones */
@media (max-width: 900px) {
  .ai-team > div:not([aria-hidden]) { flex-basis: calc((100% - 32px) / 3) !important; }
}
@media (max-width: 600px) {
  .ai-team > div:not([aria-hidden]) { flex-basis: calc((100% - 16px) / 2) !important; }
}

/* Book a discovery call: two-step booking panel */
.booking-tab { display: flex; align-items: center; gap: 8px; background: none; border: 0; border-bottom: 2px solid #D8D9C7; padding: 0 2px 12px; cursor: pointer; font-family: Barlow, Arial, sans-serif; font-weight: 700; font-size: 15px; color: #5B675E; text-align: left; }
.booking-tab:disabled { cursor: default; }
.booking-tab.is-active { border-bottom-color: #384B2E; color: #384B2E; }
.booking-num { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: #E9ECDD; color: #384B2E; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.booking-tab.is-active .booking-num { background: #384B2E; color: #FFFFFF; }
.booking-chip { position: relative; cursor: pointer; }
.booking-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.booking-chip span { display: inline-block; padding: 7px 14px; border: 1px solid #D8D9C7; border-radius: 999px; background: #FFFFFF; font-family: Lato, Arial, sans-serif; font-weight: 700; font-size: 13.5px; color: #384B2E; }
.booking-chip input:checked + span { background: #E9ECDD; border-color: #384B2E; }
.booking-chip input:focus-visible + span { outline: 2px solid #384B2E; outline-offset: 2px; }
.booking input:focus { outline: 2px solid #384B2E; outline-offset: 0; border-color: #384B2E; }

/* Home launch video: "Welcome to Boardly" start screen over the video until play is pressed */
.launch-video-start { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: #FFFFFF; cursor: pointer; }
.launch-video-start[hidden] { display: none; }
.launch-video-start img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.launch-video-start:hover img { transform: scale(1.012); }
.launch-video-start:focus-visible { outline: 3px solid #384B2E; outline-offset: -3px; }

/* Trusted partners strip (Home, under the hero) */
.partners-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 64px; }
.partners-row img { display: block; width: auto; }
.partners-row .p-aba { height: 94px; }
.partners-row .p-xero { height: 74px; }
.partners-row .p-eh { height: 56px; }
@media (max-width: 600px) {
  .partners > div { padding: 36px 16px 40px !important; }
  .partners-row { gap: 28px 36px; }
  .partners-row .p-aba { height: 76px; }
  .partners-row .p-xero { height: 62px; }
  .partners-row .p-eh { height: 46px; }
}

/* Footer white card: the logo, then the TPB symbol to its right, the logo vertically centred on the symbol's artwork.
   Everything is sized from the symbol's width, --tpb-w, so the card holds the symbol's clear space
   (half the inner green circle: 100px of the 502px file, 19.9% of its width; the file's own padding is 91px).
   --tpb-w stays at 150px at every viewport, above the 136px floor, and never shrinks on a phone.
   Padding 12% of --tpb-w beyond the file edge (needed: 1.8%), so the card's edge and corners sit outside the clear space.
   Gap 20% of --tpb-w between logo and symbol file, on top of the file's own 18% padding.
   Centring: the symbol file has 91px above its artwork and 121px below it (of 622), so the artwork's centre sits
   15px of 502 above the file's centre. The logo's margin-bottom, 30px of 502 (6% of --tpb-w), lifts its centre by half that,
   onto the artwork's centre. The logo file's ink is already centred in its own box. */
.footer-card { --tpb-w: 150px; flex: 0 0 auto; align-self: flex-start; display: flex; align-items: center; gap: calc(var(--tpb-w) * 0.2); padding: calc(var(--tpb-w) * 0.12); background: #FFFFFF; border-radius: 10px; box-sizing: border-box; max-width: 100%; }
.footer-card .footer-logo { display: block; flex: 0 1 auto; width: 130px; min-width: 0; height: auto; margin-bottom: calc(var(--tpb-w) * 0.06); }
.footer-card .footer-tpb { display: block; flex: 0 0 auto; width: var(--tpb-w); max-width: none; height: auto; }