/* Bsmart Consultancy: motion, polish and breakpoints. Loaded in order: base.css, sections.css, responsive.css. Must load last: it overrides the section rules. */

/* ---------- scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}

/* ---------- polish: wrapping, press states, depth ---------- */
.panel h3, .process h3, .cta-band h3, .checker h3, .item h3, .timeline__step strong,
.faq summary, .signs li, .vm p { text-wrap: balance; }
.item p, .panel__intro, .deliverables span, .process p, .timeline__step p, .stat p, .review blockquote,
.feedback__grid p, .faq details p, .bio dd, .values span, .checker__intro p { text-wrap: pretty; }

.btn, .btn-row, .panel__ask, .nav .nav__cta, .services__tabs button, .mobile-cta, .nav-toggle {
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .btn-row:active, .panel__ask:active, .nav .nav__cta:active,
.services__tabs button:active, .nav-toggle:active { transform: var(--press); }
.js .mobile-cta:active { transform: var(--press); }
.services__tabs button, .panel__ask, .nav .nav__cta, .nav-toggle {
  transition-property: background-color, color, border-color, box-shadow, transform;
  transition-duration: .2s;
  transition-timing-function: var(--ease-out);
}

.panel, .pricing, .bio { box-shadow: var(--shadow-card); }
.btn-row:hover { box-shadow: var(--shadow-lift); }

@media (prefers-reduced-motion: no-preference) {
  /* soft focus-in on reveal; removed again once settled (see script.js) */
  .js .reveal { filter: blur(6px); transition-property: opacity, transform, filter; }
  .js .reveal.is-visible { filter: none; }

  /* FAQ answers ease open where the browser can animate to height:auto */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size .4s var(--ease-out), content-visibility .4s allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; }
  }
}

/* catch-all for motion declared outside no-preference blocks (panel fades, hover lifts, CTA slide) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

/* ---------- medium screens ---------- */
@media (max-width: 1080px) {
  .timeline { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
  .reviews:not(.reviews--row) { grid-template-columns: 1fr 1fr; }
  .review--featured { grid-column: 1 / -1; grid-row: auto; }
  .reviews--row { grid-template-columns: 1fr 1fr; }
  /* the short Educator quote spans the row under the two longer ones */
  .reviews--row .review:last-child { grid-column: 1 / -1; }
  .strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  :root { --header-h: 72px; }
  .brand__name { gap: 3px; }
  .hero__grid, .who__grid, .leader, .faq, .js .services, .js .checker { grid-template-columns: minmax(0, 1fr); }
  .faq__head { position: static; }
  .leader__card { position: static; order: 2; width: 100%; max-width: 420px; margin-inline: auto; padding-top: 48px; }

  /* nav collapses into a sheet only when JS can open it */
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--white);
    font: 600 15px/1 var(--sans);
    color: var(--teal);
    cursor: pointer;
  }
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .3s var(--ease-out), background-color .2s;
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -5px; }
  .nav-toggle__bars::after { top: 5px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); }

  .js .nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 20px;
    font: 400 24px/1.2 var(--serif);
  }
  .js .nav.is-open {
    display: flex;
    max-height: calc(100vh - var(--header-h)); /* fallback for iOS before 15.4 */
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: panel-in .3s var(--ease-out);
  }
  .js .nav a { min-height: 56px; border-bottom: 1px solid var(--line); }
  .js .nav a::after { display: none; }
  .js .nav .nav__cta { justify-content: center; margin-top: 16px; border: 0; font: 600 17px/1 var(--sans); min-height: 54px; }
  .js .site-header:has(.nav.is-open) { background: var(--bg); }
  /* the page behind the open menu does not scroll (the sheet itself still can) */
  /* html only: also hiding body's overflow makes body its own scroller and resets the scroll position */
  .js.is-nav-open { overflow: hidden; }

  /* tabs become a horizontal scroller above the panel */
  .js .services__tabs {
    position: sticky;
    top: var(--header-h);
    z-index: 5;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter) 20%;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    padding-block: 6px;
    background: var(--bg-alt); /* sticky, so the long panels can be read with the tab row still in reach */
  }
  .js .services .panel { scroll-margin-top: calc(var(--header-h) + 88px); }
  .js .services__tabs::-webkit-scrollbar { display: none; }
  .js .services__tabs {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
            mask-image: linear-gradient(to right, #000 82%, transparent);
  }
  .services__tabs button { flex: none; width: auto; min-height: 52px; font-size: 17px; scroll-snap-align: start; }
  .services__tabs button[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--accent); }

  html { scroll-padding-bottom: 88px; }

  .js .mobile-cta {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 16px 30px -12px rgb(126 44 27 / .6);
    transition: transform .35s var(--ease-out), opacity .35s, visibility .35s;
  }
  .js .mobile-cta.is-hidden { transform: translateY(140%); opacity: 0; visibility: hidden; transition-duration: .18s; transition-timing-function: ease-in; }
}

/* very short viewports (landscape phones, heavy zoom): don't pin the bar over content */
@media (max-width: 920px) and (max-height: 480px) {
  .js .mobile-cta { position: static; margin: 0 16px 16px; }
  /* static, so a hidden bar would still leave an empty band below the footer */
  .js .mobile-cta.is-hidden { display: none; }
}

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .section { padding-block: 80px; }
  .hero { padding-block: 24px 72px; }
  .who { padding-block: 72px; }
  .signs { padding: 26px 22px 18px; }
  .signs li { font-size: 18px; padding-block: 12px; }
  .panel { padding: 28px 24px; }
  .js .checker { padding: 28px 22px; }
  .panel__ask { width: 100%; justify-content: center; }
  .pricing { padding: 24px 22px; }
  .pricing__cta { width: 100%; justify-content: center; padding-inline: 20px; }
  .pricing__note { margin-top: -8px; }
  .panel__num { font-size: 88px; right: 16px; color: var(--line); }
  .panel h3 { font-size: 28px; padding-right: 64px; }
  .panel__intro { padding-right: 0; }
  .cta-band { padding: 28px 24px; }
  .reviews:not(.reviews--row), .reviews--row { grid-template-columns: minmax(0, 1fr); }
  .reviews--row .review:last-child { grid-column: auto; }
  .strip__grid { grid-template-columns: minmax(0, 1fr); }
  .deliverables li { padding: 10px 0 10px 20px; }
  .deliverables li::before { top: 10px; }
  .deliverables span { font-size: 14px; line-height: 1.45; }
  .btn-row { flex-direction: column; align-items: flex-start; justify-content: center; padding: 12px 22px; }
  .btn-row__label + span { font-weight: 500; opacity: .9; max-width: 100%; overflow-wrap: anywhere; } /* long email address on 320px phones */
  .leader__card { border-radius: 140px 140px var(--radius) var(--radius); padding: 36px 24px 24px; gap: 18px; }
  .leader__years strong { font-size: 56px; }
  .leader__mark { width: 64px; height: 64px; }
  .review, .review--featured { padding: 28px 24px; }
  .contact { padding-bottom: 96px; }
  .contact__panel { padding: 44px 24px; border-radius: 22px; }
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .site-footer__nav { justify-content: flex-start; }

  /* journey curve gives way to a vertical line through the steps */
  .journey { display: none; }
  .process { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .process li {
    position: relative;
    align-items: flex-start;
    text-align: left;
    padding: 0 0 0 44px;
  }
  .process li::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 24px;
    bottom: -28px;
    border-left: 2px dotted var(--teal);
  }
  .process li:last-child::before { display: none; }
  .process__dot { display: block; position: absolute; left: 0; top: 0; }
}

/* small phones and 400% zoom: long headings like "Organisational" need the full width */
@media (max-width: 480px) {
  .delivery li { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
  .bio { padding-inline: 20px; }
  .panel__num { display: none; }
  .panel h3 { padding-right: 0; }
}

/* the header tagline only fits beside the menu button from 380px up */
@media (max-width: 379px) {
  .brand__tagline { display: none; }
  .hero .btn { font-size: 15px; padding-inline: 20px; }
  .hero .eyebrow { letter-spacing: .14em; }
}

@media print {
  /* .js variants listed too: .js .checker and .js .mobile-cta would otherwise win on specificity */
  body::after, .site-header, .skip, .actions, .checker, .js .checker, .panel__ask, .contact__links,
  .mobile-cta, .js .mobile-cta, .js .services__tabs { display: none; }
  .js .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .js .panel[hidden] { display: flex; }
  .js .services { grid-template-columns: minmax(0, 1fr); }
  .section--dark, .strip, .contact__panel, .site-footer, .signs, .review, .cta-band, .leader__card { background: none; box-shadow: none; }
  .section--dark *, .strip *, .contact__panel *, .site-footer *, .signs *, .cta-band *, .leader__card * { color: var(--ink) !important; }
}