@media (max-width: 768px) {
  header.active .header-brand {
    display: flex;
    height: auto;
  }

  .header-brand {
    display: none;
  }

  .home-subtitle.for-mobile {
    width: auto;
    margin: 0;
  }

  .for-desktop {
    display: none !important;
  }

  .for-mobile {
    display: flex !important;
  }

  section.article-style {
    padding: 16px;
    padding-top: 100px;
  }

  section.article-style h1 {
    font-size: 2.2rem;
  }

  section.article-style h2 {
    font-size: 1.7rem;
  }

  section.article-style .articles-mobile-pre {
    display: flex;
    flex-direction: column;

  }

  section.article-style .articles-mobile-pre img {
    width: 100%;
    padding-bottom: 8px;
    max-width: none;
    max-height: none;
  }

  #home-content {
    margin-top: 3rem;
  }

  #home-content h1 div {
    font-size: 2em;
  }

  #home-content h1 span {
    font-size: 1.2rem;
  }

  #home-content h2 {
    text-align: center;
    margin-top: auto;
    margin-bottom: 2rem;
  }

  section:not(#education):not(.article-style):not(#home):not(#contacts) {
    padding: 16px;
  }

  section#contacts { padding: 0; height: auto; min-height: 0; }
  .contacts-top {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 28px;
  }
  .contacts-content { padding: 40px 16px 0; }
  .contacts-methods { grid-template-columns: 1fr; }
  .contacts-photo {
    min-height: 0;
    height: 58vh;
    /* inset from the bottom, left and right edges */
    margin: 0 16px 16px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
  }
  .contacts-photo img {
    width: 100%;
    height: 100%;
    /* zoom in so the tucked leg at the bottom falls outside the frame */
    transform: scale(1.4);
    transform-origin: 30% 47%;
  }
  .cta-card {
    column-gap: 16px;
    padding: 24px 20px;
  }
  .cta-button {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    justify-content: center;
  }

  section#education {
    grid-template-columns: repeat(1, 1fr);
    padding: 16px;
    padding-bottom: 24px;
  }

  section:not(#home) {
    flex-direction: column;
  }

  .services-grid-block, .contacts-grid-block {
    width: 100%;
    margin: 0;
  }

  .contacts-grid-block {
    padding: 0 !important;
  }

  #services {
    padding: 0 0 48px;
    gap: 28px;
  }

  .services-cards {
    flex-direction: column;
    gap: 16px;
    padding: 0 16px;
  }

  .services-feature-inner {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px 18px 26px;
  }

  /* Pin-and-reveal on mobile too (image inherits position:sticky from the base
     rule). The covering body is promoted to its own compositing layer so mobile
     Safari repaints it cleanly over the pinned image instead of letting it
     bleed through. It keeps the base min-height so it fully covers the image. */
  .services-feature-body {
    display: block;
    transform: translateZ(0);
  }

  .services-feature-quote {
    font-size: clamp(1.15rem, 5.2vw, 1.5rem);
  }

  .services-feature-aside {
    align-items: stretch;
  }

  .services-feature-tags {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 20px;
    text-align: left;
  }

  .services-feature-aside .btn-primary {
    width: 100%;
    justify-content: center;
  }

  .services-grid-block {
    padding: 24px;
  }

  .contacts-grid-block:first-child {
    display: none;
  }

  .contacts-grid-block:nth-child(2n) {
    flex-direction: column;
    align-items: center;
  }

  .photo-image {
    margin-bottom: 24px;
  }

  #google-map {
    margin-top: 1rem;
  }

  /* Header */

  header:before {
    content: '';
    background-color: rgba(85, 107, 115, 0.95);
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    transition: box-shadow 0.7s;
  }

  header.active:before {
    box-shadow: 0 0 0 100vh var(--primary-color);
  }

  .toggle {
    position: absolute;
    top: 24px;
    right: 24px;
  }

  .toggle i {
    font-size: 1.2rem;
  }

  .toggle .fa-xmark {
    display: none;
  }

  #logo { display: none; }

  /* Full-screen mobile nav overlay.
     Uses .header-nav (class) so it can override the redesign's
     `.header-nav { display: none }`, which a bare `header nav`
     selector was too weak to beat. */
  .header-nav {
    display: flex;
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
  }

  header.active .fa-bars {
    display: none;
  }

  header.active #logo {
    display: flex;
  }

  header.active .header-nav {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s 0.35s;
  }

  header.active .header-nav a {
    color: #fff;
    background: transparent;
    font-size: 1.4rem;
    padding: 8px 24px;
    pointer-events: auto;
  }

  header.active .header-nav a.active {
    color: var(--bg-cream-soft);
    text-decoration: underline;
    text-underline-offset: 6px;
  }

  header.active .fa-xmark {
    display: inline-block;
  }

  /* gallery */

  section#gallery.active {
    left: -16px;
    top: -16px;
  }

  #slider {
    width: 100%;
    margin: 8px 0;
  }

  .slider-item:nth-child(1),
  .slider-item:nth-child(2) {
    left: 16px;
    top: 24px;
    width: calc(100% - 32px);
    height: calc(100% - 24px);
    box-shadow: none;
  }

  .line, .circle { display: none; }



  .slider-item {
    width: 100px;
    height: 100px;
    top: calc(100% - 100px);
    opacity: 0.5;
  }

  .slider-item:nth-child(3n) { left: calc(16px); opacity: 0.6; }
  .slider-item:nth-child(4n) { left: calc(16px + 100px * 1 + 20px); }
  .slider-item:nth-child(5n) { left: calc(16px + 100px * 2 + 20px * 2); }
  .slider-item:nth-child(6n) { left: calc(16px + 100px * 3 + 20px * 3); }
  .slider-item:nth-child(7n) { left: calc(16px + 100px * 4 + 20px * 4); }
  .slider-item:nth-child(8n) { left: calc(16px + 100px * 5 + 20px * 5); }
  .slider-item:nth-child(9n) { left: calc(16px + 100px * 6 + 20px * 6); }
  .slider-item:nth-child(10n) { left: calc(16px + 100px * 7 + 20px * 7); }
  .slider-item:nth-child(11n) { left: calc(16px + 100px * 8 + 20px * 8); }
  .slider-item:nth-child(12n) { left: calc(16px + 100px * 9 + 20px * 9); }
  .slider-item:nth-child(n + 13):nth-child(-n + 40) { left: calc(16px + 100px * 10 + 20px * 10); }
}