/* Mobile art direction. The approved desktop layout is untouched. */
.cognisance-home .hero-phone { display: none; }

@media (max-width: 800px) {
  .cognisance-home { font-size: 16px; line-height: 1.6; }
  .cognisance-home .section-wrap,
  .cognisance-home .site-header { padding-left: 22px; padding-right: 22px; }
  .cognisance-home .site-header { height: 90px; }
  .cognisance-home .site-header .brand img { width: 70px; height: 73px; }
  .cognisance-home .menu-toggle {
    display: flex; align-items: center; gap: 11px; justify-content: center;
    border: 1px solid #ded5ed; border-radius: 24px; padding: 8px 16px;
    font-size: 15px; min-height: 44px;
  }
  .menu-toggle::after { content: '+'; font-size: 20px; line-height: 1; }
  .menu-toggle[aria-expanded='true']::after { content: '−'; }
  .cognisance-home .site-nav {
    top: 89px; gap: 5px; padding: 14px 22px 22px;
    box-shadow: 0 12px 22px #1910520a; border-bottom: 1px solid var(--line);
  }
  .cognisance-home .site-nav a { min-height: 48px; width: 100%; display: flex; align-items: center; }
  .cognisance-home .site-nav .nav-cta { justify-content: center; margin-top: 6px; }

  /* Headline and portrait share a row; copy and contact actions follow together. */
  .cognisance-home .hero {
    display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    grid-template-areas: 'promise promise' 'headline portrait' 'intro intro' 'actions actions' 'note note';
    gap: 16px; padding-top: 22px; padding-bottom: 26px; min-height: 0;
    align-items: center;
  }
  .cognisance-home .hero-copy { display: contents; }
  .cognisance-home .hero-copy > .eyebrow { display: none; }
  .cognisance-home .brand-promise {
    grid-area: promise; font-size: 15px; line-height: 1.45; font-weight: 600;
    max-width: 320px; margin: 0 0 1px;
  }
  .cognisance-home .hero h1 {
    grid-area: headline; font-size: clamp(29px, 8vw, 40px); line-height: 1.14;
    letter-spacing: -.035em; margin: 0; position: relative; z-index: 2;
  }
  .cognisance-home .hero-art {
    grid-area: portrait; width: 100%; height: 220px; margin: 0;
    justify-self: stretch; align-self: center;
  }
  .cognisance-home .portrait-frame { border-radius: 90px 90px 16px 16px; }
  .cognisance-home .portrait-frame img { object-position: 86% center; }
  .cognisance-home .orb-one { width: 37px; height: 37px; left: -8px; top: 2px; }
  .cognisance-home .orb-two { width: 20px; height: 20px; right: -7px; bottom: 25px; }
  .cognisance-home .hero-art::before { width: 10px; height: 10px; left: -5px; top: 49px; }
  .cognisance-home .hero-art::after { width: 13px; height: 13px; right: 3px; bottom: 6px; }
  .cognisance-home .hero-note { display: none; }
  .cognisance-home .hero-intro { grid-area: intro; font-size: 16px; line-height: 1.55; margin: 0; max-width: none; }
  .cognisance-home .hero-actions {
    grid-area: actions; display: grid; grid-template-columns: 1fr 1fr;
    gap: 6px 10px; margin: 0; align-items: center;
  }
  .cognisance-home .hero-actions .button { font-size: 15px; margin: 0; padding: 12px 16px; min-height: 48px; gap: 16px; }
  .cognisance-home .hero-phone { display: inline-flex; }
  .cognisance-home .hero-actions .text-link { grid-column: 1 / -1; justify-content: center; min-height: 44px; }
  .cognisance-home .appointment-note { grid-area: note; margin: -5px 0 0; font-size: 13px; text-align: center; line-height: 1.5; }

  .cognisance-home h2 { font-size: 28px; line-height: 1.2; letter-spacing: -.03em; }
  .cognisance-home .eyebrow { font-size: 11px; margin-bottom: 11px; }
  .cognisance-home .support-section,
  .cognisance-home .about-section,
  .cognisance-home .contact-section { padding-top: 34px; padding-bottom: 34px; }
  .cognisance-home .support-section .section-heading { display: block; margin-bottom: 23px; }
  .cognisance-home .support-section .section-heading > p { display: none; }
  .cognisance-home .support-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .cognisance-home .support-card { display: block; padding: 0; min-height: 0; border-radius: 12px; }
  .support-card summary {
    list-style: none; display: grid; grid-template-columns: 25px minmax(0, 1fr) 20px;
    gap: 13px; align-items: center; min-height: 78px; padding: 15px 17px; cursor: pointer;
    border-radius: 12px;
  }
  .support-card summary::-webkit-details-marker { display: none; }
  .support-card summary::after { content: '+'; color: var(--purple); font-size: 23px; text-align: center; line-height: 1; }
  .support-card details[open] > summary::after { content: '−'; }
  .support-card summary:focus-visible { outline: 3px solid #0086bd; outline-offset: 3px; }
  .cognisance-home .support-card .service-bubbles { width: 23px; height: 23px; }
  .support-card .service-bubbles::after { width: 10px; height: 10px; right: -4px; bottom: -2px; }
  .cognisance-home .support-card h3 { font-size: 18px; line-height: 1.3; margin: 0; font-weight: 600; }
  .support-card .service-content { padding: 0 17px 12px; }
  .cognisance-home .support-card p { margin: 0 0 12px; font-size: 16px; line-height: 1.55; }
  .cognisance-home .support-card a { min-height: 48px; padding-top: 8px; }

  .cognisance-home .intro,
  .cognisance-home .professions,
  .cognisance-home .clinic-section { padding-top: 34px; padding-bottom: 34px; gap: 20px; }
  .cognisance-home .intro { border-top: 0; }
  .cognisance-home .intro h2 br { display: none; }
  .cognisance-home .body-copy p { margin-bottom: 15px; }
  .cognisance-home .body-copy .text-link,
  .cognisance-home .clinic-section .text-link { min-height: 44px; }
  .cognisance-home .profession-visual { display: none; }
  .cognisance-home .professions { display: block; border-top: 1px solid var(--line); }
  .cognisance-home .professions h2 { margin-bottom: 22px; }
  .cognisance-home .profession-row { grid-template-columns: 1fr; gap: 5px; padding: 16px 0; }
  .cognisance-home .small-note { margin-top: 12px; margin-bottom: 0; }

  /* A compact introduction to Louise, with the portrait beside her name. */
  .cognisance-home .about-grid { grid-template-columns: minmax(0, 1fr) 102px; gap: 8px 16px; align-items: start; }
  .cognisance-home .about-grid > div:last-child { display: contents; }
  .cognisance-home .about-photo { grid-column: 2; grid-row: 1 / 4; width: 102px; height: 133px; border-radius: 50px 50px 12px 12px; margin: 0; }
  .cognisance-home .about-photo img { width: auto; height: 280%; right: -9%; top: -21%; }
  .cognisance-home .about-grid .eyebrow { grid-column: 1; grid-row: 1; margin: 3px 0 0; }
  .cognisance-home .about-grid h2 { grid-column: 1; grid-row: 2; }
  .cognisance-home .about-grid .founder { grid-column: 1; grid-row: 3; font-size: 14px; margin: 0 0 17px; }
  .cognisance-home .about-grid p { grid-column: 1 / -1; margin: 9px 0 0; }
  .cognisance-home .about-grid .credentials { margin-top: 12px!important; font-size: 14px; }
  .cognisance-home .about-grid .button { grid-column: 1 / -1; justify-self: start; margin-top: 16px; }
  .cognisance-home .clinic-section { gap: 22px; }
  .cognisance-home .clinic-photo { aspect-ratio: 1.75; }
  .cognisance-home .clinic-photo img { width: 159%; object-fit: cover; }
  .cognisance-home .clinic-section h2 br { display: none; }
  .cognisance-home .clinic-section p { margin-top: 13px; margin-bottom: 9px; }
  .cognisance-home .contact-grid { gap: 27px; position: relative; z-index: 1; }
  .cognisance-home .contact-actions { margin-top: 22px; gap: 10px; }
  .cognisance-home .contact-details { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; padding-top: 21px; }
  .cognisance-home .contact-details p { margin: 0; font-size: 14px; }
  .cognisance-home .contact-details p:first-child { grid-row: span 2; }
  .cognisance-home .contact-details strong { font-size: 11px; letter-spacing: .07em; }
  .cognisance-home .footer-inner { gap: 16px; grid-template-columns: 65px 1fr; }
  .cognisance-home .brand-footer img { width: 61px; height: 63px; }
  .cognisance-home .footer-inner > div a { display: inline-flex; min-height: 44px; align-items: center; }
}

@media (min-width: 481px) and (max-width: 800px) {
  .cognisance-home .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 28px; }
  .cognisance-home .hero-art { height: 280px; }
  .cognisance-home .brand-promise { max-width: none; }
  .cognisance-home .hero h1 { font-size: 40px; }
}