/* AP Architects responsive design system.
 * Loaded last. Mobile rules replace page-by-page coordinate patches with a
 * shared spacing, type and color contract while leaving >=768px untouched.
 */
:root {
  --gutter: 20px;
  --fs-h1: 40px;
  --fs-h1-short: 40px;
  --fs-h2: 30px;
  --fs-h3: 21px;
  --fs-lead: 15px;
  --fs-body: 15px;
  --fs-small: 13px;
  --ink: #1e1e1e;
  --ink-muted: #5a5a5a;
  --paper: #f6f4f1;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .72);
}

@media (max-width: 767px) {
  /* Shared shell */
  body.ap-page .ap-site-header {
    top: 0;
    height: auto;
    padding: 12px var(--gutter) 0;
  }
  body.ap-page .ap-site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 6px 12px;
    width: 100%;
    height: auto;
    padding: 0;
  }
  body.ap-page .ap-site-header .ap-brand {
    display: block;
    flex: 0 0 190px;
    width: 190px;
    max-width: 190px;
    height: auto;
    font-size: 0;
    line-height: 0;
  }
  body.ap-page .ap-site-header .ap-brand__mark,
  body.ap-page .ap-site-header .ap-brand > span { display: none; }
  body.ap-page .ap-site-header .ap-brand__mobile { display: block; width: 190px; height: 24px; margin: 0; }
  body.ap-page .ap-site-header .ap-brand__tagline { position: static; display: block; margin-top: 6px; font-size: 11px; line-height: 1.3; }
  body.ap-page .ap-site-header .ap-phone { display: inline-flex; grid-row: 2; grid-column: 1 / -1; justify-self: start; min-height: 44px; margin: 0; font-size: 15px; gap: 8px; }
  body.ap-page .ap-site-header .ap-phone img { width: 18px; height: 18px; }
  body.ap-page .ap-site-header .ap-phone--reserved { display: none; }
  body .ap-mobile-menu-toggle { grid-row: 1; grid-column: 2; flex: 0 0 44px; width: 44px; height: 44px; }

  .ap-home,
  .ap-about,
  .ap-cases,
  .ap-service-page { --ap-mobile-content-width: calc(100vw - (2 * var(--gutter))); }

  .ap-home h2,
  .ap-about h2,
  .ap-cases h2,
  .ap-service-page h2 { font-size: var(--fs-h2); line-height: 1.15; }
  .ap-home h3,
  .ap-about h3,
  .ap-cases h3,
  .ap-service-page h3 { font-size: var(--fs-h3); line-height: 1.3; }
  .ap-home p,
  .ap-home li,
  .ap-about p,
  .ap-about li,
  .ap-cases p,
  .ap-cases li,
  .ap-service-page p,
  .ap-service-page li { font-size: var(--fs-body); line-height: 1.55; }

  /* Home hero geometry comes only from canonical Figma frame 4202:460
     in home-mobile.css. Do not override it from the shared token layer. */

  .ap-home .ap-about__canvas,
  .ap-home .ap-projects__canvas,
  .ap-home .ap-process__canvas { padding-right: var(--gutter); padding-left: var(--gutter); }
  .ap-home .ap-about__label,
  .ap-home .ap-about__title,
  .ap-home .ap-about__intro,
  .ap-home .ap-service,
  .ap-home .ap-service__image,
  .ap-home .ap-service__copy,
  .ap-home .ap-projects__title,
  .ap-home .ap-projects__intro,
  .ap-home .ap-projects__track,
  .ap-home .ap-project-card,
  .ap-home .ap-project-card:nth-child(n),
  .ap-home .ap-project-card:nth-child(n) .ap-project-card__media,
  .ap-home .ap-process__lead,
  .ap-home .ap-process__steps { width: 100%; }
  .ap-home .ap-about__title,
  .ap-home .ap-approach__title,
  .ap-home .ap-projects__title,
  .ap-home .ap-process__title,
  .ap-home .ap-contact__title { font-size: var(--fs-h2); }
  .ap-home .ap-about__intro,
  .ap-home .ap-approach__intro,
  .ap-home .ap-projects__intro,
  .ap-home .ap-process__intro { font-size: var(--fs-lead); line-height: 1.5; }
  .ap-home .ap-service__title,
  .ap-home .ap-process-step__content strong { font-size: var(--fs-h3); }
  .ap-home .ap-service__copy,
  .ap-home .ap-process-step__content span { color: var(--ink-muted); font-size: var(--fs-body); opacity: 1; }

  .ap-home .ap-approach { height: auto; }
  .ap-home .ap-approach__canvas {
    display: flex;
    height: auto;
    padding: 50px var(--gutter);
    flex-direction: column;
  }
  .ap-home .ap-approach__copy,
  .ap-home .ap-approach__image,
  .ap-home .ap-approach__features {
    position: static;
    inset: auto;
    width: 100%;
  }
  .ap-home .ap-approach__image { height: auto; margin-top: 36px; aspect-ratio: 16 / 10; }
  .ap-home .ap-approach__features { margin-top: 28px; }
  .ap-home .ap-approach-feature p { color: var(--ink); font-size: var(--fs-body); }
  .ap-home .ap-project-card__title { color: var(--on-dark-muted); font-size: var(--fs-small); opacity: 1; }
  .ap-home .ap-project-card__copy { font-size: var(--fs-body); }
  .ap-home .ap-process-step,
  .ap-home .ap-process-step:nth-child(4),
  .ap-home .ap-process-step:nth-child(5) { height: auto; min-height: 0; }

  /* Project catalogue: canonical mobile frame 4214:5459. */
  .ap-cases-hero { height: auto; min-height: 547px; }
  .ap-cases-hero__canvas {
    width: auto;
    min-height: 547px;
    margin: 0;
    padding: 310px var(--gutter) 50px;
    box-sizing: border-box;
  }
  .ap-cases-hero h1,
  .ap-cases-hero p { position: static; inset: auto; width: 100%; max-width: none; }
  .ap-cases-hero h1 { margin: 0; font-size: 40px; line-height: 1.08; letter-spacing: -.5px; text-wrap: balance; }
  .ap-cases-hero p { margin: 14px 0 0; font-size: 15px; line-height: 1.45; letter-spacing: -.03em; }
  .ap-cases-catalogue { padding: 50px var(--gutter) 100px; }
  .ap-cases-count {
    display: block;
    margin: 0;
  }
  .ap-cases-filter {
    width: calc(100vw - var(--gutter));
    margin-top: 20px;
    padding: 0;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ap-cases-filter::-webkit-scrollbar { display: none; }
  .ap-cases-filter__link {
    min-height: 36px;
    padding: 7px 16px;
    flex: 0 0 auto;
    font-size: 12px;
  }
  .ap-cases-project-grid { margin-top: 50px; gap: 40px; }
  .ap-cases-card__media { height: 204px; min-height: 0; }
  .ap-cases-count,
  .ap-cases-card__meta span,
  .ap-cases-card__copy { font-size: var(--fs-body); }
  .ap-cases-card__copy { color: var(--ink-muted); }
  .ap-cases-card__meta strong { font-size: var(--fs-h3); }

  /* About: readable image hero and one mobile type scale. */
  .ap-about-hero {
    min-height: 100svh;
    padding: 0;
  }
  .ap-about-hero__image,
  .ap-about-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
  .ap-about-hero__shade {
    background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.75) 42%, rgba(0,0,0,.9) 100%);
  }
  .ap-about-hero__content { position: relative; inset: auto; z-index: 1; padding: 310px var(--gutter) 79px; }
  .ap-about-hero h1 { margin: 0 0 13px; font-size: 40px; line-height: 1.08; letter-spacing: -.5px; text-wrap: balance; }
  .ap-about-hero__copy,
  .ap-about-hero__side,
  .ap-about-hero__bottom { margin-bottom: 13px; color: var(--on-dark); font-size: 15px; line-height: 1.45; letter-spacing: -.03em; }
  .ap-about-approach,
  .ap-about-why,
  .ap-about-team,
  .ap-about-specialization { padding-right: var(--gutter); padding-left: var(--gutter); }
  .ap-about-approach h2,
  .ap-about-why h2,
  .ap-about-team h2,
  .ap-about-specialization h2 { font-size: var(--fs-h2); line-height: 1.15; }
  .ap-about-approach__lead,
  .ap-about-specialization__lead,
  .ap-about-why__text { font-size: var(--fs-lead); line-height: 1.5; }
  .ap-about-eyebrow,
  .ap-about-why__caption,
  .ap-about-specialization__eyebrow { font-size: var(--fs-small); }
  .ap-about-point,
  .ap-about-member p,
  .ap-about-specialization article p { color: var(--ink-muted); font-size: var(--fs-body); opacity: 1; }
  .ap-about-member h3,
  .ap-about-specialization article h3 { font-size: var(--fs-h3); }

  /* Service detail: canonical Figma mobile frame 4205:502. */
  main.ap-service-page { width: 100%; max-width: none; margin: 0; overflow: clip; }
  .ap-service-page .ap-service-hero { height: auto; min-height: 0; }
  .ap-service-page .ap-service-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; }
  .ap-service-page .ap-service-hero__content {
    position: relative;
    inset: auto;
    display: flex;
    min-height: 0;
    padding: 310px var(--gutter) 79px;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  .ap-service-page .ap-service-hero h1,
  .ap-service-page .ap-service-hero__copy { width: 100%; max-width: none; }
  .ap-service-page .ap-service-hero h1 { font-size: 40px; line-height: 1.08; letter-spacing: -.5px; text-wrap: balance; }
  .ap-service-page .ap-service-hero__copy { color: var(--on-dark); font-size: 15px; line-height: 1.45; letter-spacing: -.03em; opacity: 1; }
  .ap-service-page .ap-service-tasks { padding-top: 50px; padding-bottom: 50px; row-gap: 0; }
  .ap-service-page .ap-service-tasks__label,
  .ap-service-page .ap-service-tasks__title,
  .ap-service-page .ap-service-tasks__intro,
  .ap-service-page .ap-service-features { width: calc(100% - (2 * var(--gutter))); margin-right: var(--gutter); margin-left: var(--gutter); }
  .ap-service-page .ap-service-tasks__title { font-size: var(--fs-h2); }
  .ap-service-page .ap-service-tasks__intro { margin-top: 12px; margin-bottom: 29px; font-size: var(--fs-lead); line-height: 1.5; }
  .ap-service-page .ap-service-feature,
  .ap-service-page .ap-service-feature p { width: 100%; }
  .ap-service-page .ap-service-feature h3 { font-size: var(--fs-h3); }
  .ap-service-page .ap-service-feature p { color: var(--ink-muted); font-size: var(--fs-body); opacity: 1; }

  .ap-service-page .ap-service-included,
  .ap-service-page .ap-projects--service,
  .ap-service-page .ap-projects--service .ap-projects__stage,
  .ap-service-page .ap-projects--service .ap-projects__canvas { height: auto; min-height: 0; overflow: visible; }
  .ap-service-page .ap-service-included { display: flex; padding: 50px var(--gutter); flex-direction: column; }
  .ap-service-page .ap-service-included h2,
  .ap-service-page .ap-service-included__intro,
  .ap-service-page .ap-service-included__items,
  .ap-service-page .ap-service-included__cta { position: static; inset: auto; width: 100%; }
  .ap-service-page .ap-service-included h2 { font-size: var(--fs-h2); }
  .ap-service-page .ap-service-included__intro { margin-top: 12px; font-size: var(--fs-lead); }
  .ap-service-page .ap-service-included__items { margin-top: 36px; }
  .ap-service-page .ap-service-included-item { width: 100%; height: auto; grid-template-columns: 40px minmax(0,1fr); grid-template-rows: auto auto; }
  .ap-service-page .ap-service-included-item h3 { font-size: var(--fs-h3); }
  .ap-service-page .ap-service-included-item p { color: var(--ink-muted); font-size: var(--fs-body); opacity: 1; }
  .ap-service-page .ap-service-included__cta { width: fit-content; margin-top: 38px; }

  .ap-service-page .ap-projects--service .ap-projects__canvas { display: flex; padding: 50px var(--gutter); flex-direction: column; }
  .ap-service-page .ap-projects--service .ap-projects__label,
  .ap-service-page .ap-projects--service .ap-projects__title,
  .ap-service-page .ap-projects--service .ap-projects__intro,
  .ap-service-page .ap-projects--service .ap-projects__track,
  .ap-service-page .ap-projects--service .ap-projects__all { position: static; inset: auto; width: 100%; }
  .ap-service-page .ap-projects--service .ap-projects__title { margin-top: 32px; font-size: var(--fs-h2); }
  .ap-service-page .ap-projects--service .ap-projects__intro { margin-top: 12px; font-size: var(--fs-lead); }
  .ap-service-page .ap-projects--service .ap-projects__track { margin-top: 36px; }
  .ap-service-page .ap-projects--service .ap-project-card { width: 100%; height: auto; }
  .ap-service-page .ap-projects--service .ap-project-card__copy { font-size: var(--fs-body); }
  .ap-service-page .ap-projects--service .ap-projects__all { align-self: flex-end; width: auto; margin-top: 30px; }
  .ap-service-page .ap-process--service .ap-process__title,
  .ap-service-page .ap-service-faq h2 { font-size: var(--fs-h2); }
  .ap-service-page .ap-process--service .ap-process__intro { font-size: var(--fs-lead); }
  .ap-service-page .ap-process--service .ap-process-step,
  .ap-service-page .ap-process--service .ap-process-step:nth-child(4),
  .ap-service-page .ap-process--service .ap-process-step:nth-child(5) { height: auto; min-height: 0; }
  .ap-service-page .ap-process--service .ap-process-step__content strong,
  .ap-service-page .ap-service-faq summary { font-size: var(--fs-h3); }
  .ap-service-page .ap-process--service .ap-process-step__content span,
  .ap-service-page .ap-service-faq details p { color: var(--ink-muted); font-size: var(--fs-body); }

  /* Shared contact and footer: minimum 15px, no overlap, readable contrast. */
  body .ap-contact { height: auto; min-height: 0; }
  body .ap-contact .ap-contact__canvas {
    position: relative;
    inset: auto;
    display: flex;
    height: auto;
    min-height: 0;
    padding: 48px var(--gutter);
    flex-direction: column;
    box-sizing: border-box;
  }
  body .ap-contact .ap-contact__form-column,
  body .ap-contact .ap-contact-form__submit-row .wpcf7-submit,
  body .ap-contact .ap-contact-form__submit-row p { width: 100%; }
  body .ap-contact .ap-contact__title { font-size: var(--fs-h2); }
  body .ap-contact .ap-contact-form__services { height: auto; min-height: 56px; }
  body .ap-contact .ap-contact-form__services .ap-contact-service { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body .ap-contact .ap-contact-form__services .wpcf7-list-item-label { color: var(--on-dark-muted); font-size: var(--fs-small); line-height: 1.45; }
  body .ap-contact .ap-contact-form__submit-row p,
  body .ap-contact .ap-contact-form__submit-row p a { color: #fff; font-size: var(--fs-small); line-height: 1.45; }
  body .ap-contact .ap-contact__promise { position: static; inset: auto; width: 100%; margin: 28px 0 0; }
  body .ap-contact .ap-contact__promise h3 { margin: 0; font-size: var(--fs-h3); }
  body .ap-contact .ap-contact__promise p { margin: 10px 0 0; color: var(--on-dark-muted); font-size: var(--fs-small); }

  body .ap-site-footer {
    width: 100%;
    height: auto;
    min-height: 423px;
    padding: 40px var(--gutter) 30px;
    overflow: visible;
    box-sizing: border-box;
  }
  body .ap-site-footer__grid { display: none; }
  body .ap-site-footer__wordmark-picture { display: block; width: 260px; height: 29px; }
  body .ap-site-footer__wordmark {
    position: static;
    display: block;
    width: 260px;
    height: auto;
    max-width: calc(100vw - 40px);
  }
  body .ap-site-footer__content {
    position: static;
    display: flex;
    width: 100%;
    height: calc(423px - 107px);
    margin-top: 8px;
    flex-direction: column;
  }
  body .ap-site-footer__about,
  body .ap-site-footer__nav,
  body .ap-site-footer__contacts { position: static; inset: auto; width: 100%; }
  body .ap-site-footer__about { display: contents; }
  body .ap-site-footer__about > p { order: 1; margin: 0; }
  body .ap-site-footer__nav,
  body .ap-site-footer__cta,
  body .ap-site-footer__contacts-label--desktop { display: none; }
  body .ap-site-footer__contacts { order: 2; margin-top: 24px; gap: 0; }
  body .ap-site-footer__contacts-label--mobile { display: block; margin-bottom: 8px; color: var(--ap-white); font-size: 12px; opacity: 1; }
  body .ap-site-footer__contacts a:not(.ap-site-footer__cta),
  body .ap-site-footer__contacts p { min-height: 0; margin: 0 0 8px; color: var(--ap-white); font-size: 18px; line-height: 1.25; }
  body .ap-site-footer__legal {
    position: static;
    order: 3;
    display: flex;
    margin-top: auto;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.15);
    gap: 6px;
  }
  body .ap-site-footer__about > p,
  body .ap-site-footer__menu a,
  body .ap-site-footer__contacts a,
  body .ap-site-footer__contacts p,
  body .ap-site-footer__contacts > span,
  body .ap-site-footer__legal a,
  body .ap-site-footer__legal span { color: var(--on-dark-muted); font-size: var(--fs-small); line-height: 1.45; }
  body .ap-site-footer__about > p { width: 100%; color: var(--on-dark-muted); font-size: 11px; line-height: 1.45; }
  body .ap-site-footer__legal a,
  body .ap-site-footer__legal span { min-height: 0; font-size: 11px; line-height: 1.3; }
}

@media (min-width: 1024px) {
  .ap-site-footer__contacts-label--mobile { display: none; }
}