/* Shared rails keep full-width sections and inset panels on the same axis. */
:root {
  --layout-max: 1280px;
  --layout-gutter: clamp(20px, 5vw, 64px);
  --panel-inset: 24px;
  --layout-rail: max(var(--layout-gutter), calc((100vw - var(--layout-max)) / 2));
}

/* Expanded project content can grow without changing adjacent card baselines. */
.home-page .case-grid { align-items: stretch; }
.home-page .case-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}
.home-page .case-photo { flex: none; }
.home-page .case-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.home-page .case-body > p:not(.case-company) { flex: 1; }
.home-page .case-body > .case-systems { flex: none; }
.home-page .case-card details { margin-top: auto; }
.home-page .contact-inline > div,
.home-page .footer-grid > div,
.detail-page .footer-grid > div { min-width: 0; }

@media (min-width: 701px) {
  .home-page .container,
  .detail-page main,
  .detail-page .footer .container {
    width: min(var(--layout-max), calc(100% - 2 * var(--layout-gutter)));
    margin-inline: auto;
  }

  .home-page .page-panel {
    width: min(1600px, calc(100% - 2 * var(--panel-inset)));
    margin-inline: auto;
  }
  .home-page .page-panel .container {
    width: min(var(--layout-max), calc(100vw - 2 * var(--layout-gutter)));
    max-width: 100%;
    margin-inline: auto;
  }

  .home-page .integration-showcase .integration-topline,
  .home-page .integration-showcase .integration-directory,
  .home-page .integration-showcase > .integration-note,
  .home-page .integration-showcase > .integration-directory-note {
    width: min(var(--layout-max), calc(100% - 2 * var(--layout-gutter)));
    margin-inline: auto;
  }

  .home-page .hero.hero-selected {
    min-height: clamp(650px, 52vw, 760px);
    padding: clamp(154px, 12vw, 190px) 0 130px;
  }
  .home-page .hero-selected .hero-content {
    width: min(var(--layout-max), calc(100% - 2 * var(--layout-gutter)));
    max-width: none;
    margin-inline: auto;
    padding: 0;
  }
  .home-page .hero-selected h1 {
    max-width: 940px;
    font-size: clamp(46px, 3.8vw, 60px);
    line-height: 1.09;
    letter-spacing: -.038em;
  }
  .home-page .hero-selected .hero-content > p {
    max-width: min(640px, 60%);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.5;
    letter-spacing: -.01em;
  }
  .home-page .hero-selected .hero-actions {
    max-width: min(740px, 62%);
    gap: 18px 28px;
  }
  .home-page .hero-selected .hero-actions .pill {
    min-height: 54px;
    padding: 15px 26px;
    font-size: 16px;
  }
  .home-page .hero-selected .hero-secondary { font-size: 16px; }
  .home-page .hero-selected .glass-stage.hero-glass {
    right: calc(var(--layout-rail) - 40px);
    bottom: 60px;
    width: clamp(420px, 40vw, 560px);
    height: clamp(330px, 31vw, 430px);
  }
  .home-page .hero-selected .hero-flow-labels {
    left: var(--layout-rail);
    right: var(--layout-rail);
    font-size: 13px;
  }

  .home-page .task-banner-copy {
    margin-left: max(calc(var(--layout-gutter) - var(--panel-inset)), calc((100% - var(--layout-max)) / 2));
    padding-left: 0;
  }

  .home-page .result-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
  }
  .home-page .result-card {
    min-width: 0;
    min-height: 290px;
    padding: 24px;
  }
  .home-page .result-card h3 {
    font-size: 30px;
    line-height: 1.18;
  }
  .home-page .process-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
  }
  .home-page .process-card { min-width: 0; }
  .home-page .case-body h3 { min-height: 2.44em; }
  .home-page .delivery-grid { align-items: stretch; }
  .home-page .delivery-card { min-width: 0; }
  .home-page .delivery-card h3 { min-height: 2.46em; }

  .home-page .contact-inline {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
  }
  .home-page .contact-inline .lead-form { width: 100%; }

  /* Homepage legacy footer rules must not create implicit detail-page tracks. */
  .home-page .footer-grid,
  .detail-page .footer-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.15fr);
    gap: 40px;
  }
  .home-page .footer-grid > div,
  .detail-page .footer-grid > div { grid-column: auto; }
  .home-page .footer-contacts,
  .detail-page .footer-contacts {
    grid-column: auto;
    display: block;
  }
  .home-page .footer-contacts > a,
  .detail-page .footer-contacts > a { margin-bottom: 12px !important; }
}

@media (min-width: 701px) and (max-width: 1200px) {
  .home-page .result-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .result-card { min-height: 250px; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .home-page .process-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 40px;
  }
  .home-page .process-card { min-height: 260px; }
  .home-page .process-card h3 {
    min-height: 2.46em;
    font-size: 24px;
    line-height: 1.23;
  }
  .home-page .process-card p { max-width: none; font-size: 15px; }
  .home-page .fit-diagram { gap: 32px; }
  .home-page .fit-node { padding-inline: 18px; }
  .home-page .footer-grid,
  .detail-page .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 40px;
  }
  .home-page .footer-grid > div,
  .detail-page .footer-grid > div { grid-column: auto; }
}

@media (min-width: 701px) and (max-width: 1000px) {
  .home-page .hero.hero-selected {
    min-height: 0;
    padding: 132px 0 0;
  }
  .home-page .hero-selected h1 { max-width: 100%; font-size: clamp(38px, 5.5vw, 48px); }
  .home-page .hero-selected .hero-content > p {
    max-width: 640px;
    margin-top: 25px;
    font-size: 18px;
  }
  .home-page .hero-selected .hero-content > p > span { display: inline; }
  .home-page .hero-selected .hero-actions { max-width: 100%; margin-top: 26px; }
  .home-page .hero-selected .hero-visual {
    position: relative;
    inset: auto;
    width: 100%;
    height: 320px;
    margin: 18px 0 0;
  }
  .home-page .hero-selected .glass-stage.hero-glass {
    right: var(--layout-rail);
    bottom: 28px;
    width: 430px;
    height: 310px;
  }
  .home-page .hero-selected .hero-visual .hero-guide { bottom: 16px; height: 100px; }
  .home-page .hero-selected .hero-flow-labels { bottom: 57px; font-size: 12px; }
}

@media (min-width: 701px) and (max-width: 960px) {
  .home-page .contact-inline,
  .home-page .security-layout,
  .home-page .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .home-page .contact-inline > div > p { max-width: 680px; }
}

@media (min-width: 961px) and (max-width: 1100px) {
  .home-page .contact-inline .lead-form-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* Mobile layout uses the same content edge in full-width and inset sections. */
@media (max-width: 700px) {
  :root {
    --layout-gutter: 20px;
    --panel-inset: 12px;
    --layout-rail: var(--layout-gutter);
  }

  html { scroll-padding-top: 100px; }
  .home-page { font-size: 16px; line-height: 1.6; }
  .home-page .container,
  .home-page .integration-showcase .integration-topline,
  .home-page .integration-showcase .integration-directory,
  .home-page .integration-showcase > .integration-note,
  .home-page .integration-showcase > .integration-directory-note,
  .detail-page main,
  .detail-page .footer .container {
    width: calc(100% - 2 * var(--layout-gutter));
    max-width: var(--layout-max);
    margin-inline: auto;
  }
  .home-page .page-panel {
    width: calc(100% - 2 * var(--panel-inset));
    max-width: none;
    margin-inline: auto;
    border-radius: 18px;
  }
  .home-page .page-panel .container {
    width: calc(100% - 2 * (var(--layout-gutter) - var(--panel-inset)));
    margin-inline: auto;
  }

  /* Keep header controls reachable without compressing the logo. */
  .home-page .site-nav {
    top: 12px;
    right: var(--panel-inset);
    left: var(--panel-inset);
    display: flex;
    height: 68px;
    padding-inline: calc(var(--layout-gutter) - var(--panel-inset));
    gap: 12px;
    border-radius: 14px;
  }
  .home-page .site-nav .brand-original img { width: 112px; height: auto; }
  .home-page .site-nav .desktop-nav,
  .home-page .site-nav .nav-contact { display: none; }
  .home-page .site-nav .nav-actions { gap: 8px; margin-left: auto; }
  .home-page .nav-actions .round-button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 12px;
    flex: 0 0 44px;
  }
  .home-page .menu-toggle { display: flex; }
  .home-page .mobile-menu,
  .detail-page .mobile-menu {
    top: 88px;
    right: var(--panel-inset);
    left: var(--panel-inset);
    max-height: calc(100dvh - 112px);
    overflow-y: auto;
    padding: 16px;
    border-radius: 14px;
  }
  .home-page .mobile-menu a,
  .detail-page .mobile-menu a { min-height: 44px; font-size: 16px; line-height: 1.45; }
  .home-page .mobile-menu .pill,
  .detail-page .mobile-menu .pill { width: 100%; min-height: 48px; }

  /* The selected hero stays in document flow on a phone. */
  .home-page .hero.hero-selected {
    min-height: 0;
    padding: 112px var(--layout-gutter) 0;
  }
  .home-page .hero-selected .hero-content { width: 100%; padding: 0; }
  .home-page .hero-selected h1 {
    max-width: none;
    font-size: clamp(32px, 8.5vw, 42px);
    line-height: 1.12;
    letter-spacing: -.035em;
  }
  .home-page .hero-selected .hero-content > p {
    max-width: 40rem;
    margin: 22px 0 0;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: 0;
  }
  .home-page .hero-selected .hero-content > p > span { display: inline; }
  .home-page .hero-selected .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px 20px;
    margin-top: 24px;
  }
  .home-page .hero-selected .hero-actions .pill {
    min-height: 52px;
    max-width: 100%;
    padding: 14px 20px;
    gap: 12px;
    font-size: 15px;
    line-height: 1.4;
    white-space: normal;
  }
  .home-page .hero-selected .hero-secondary {
    min-height: 44px;
    padding: 10px 0;
    gap: 10px;
    font-size: 15px;
    line-height: 1.4;
  }
  .home-page .hero-selected .hero-visual {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    width: calc(100% + 2 * var(--layout-gutter));
    height: auto;
    margin: 12px calc(-1 * var(--layout-gutter)) 0;
  }
  .home-page .hero-selected .glass-stage.hero-glass {
    position: relative;
    inset: auto;
    flex: none;
    width: min(430px, 100%);
    height: clamp(220px, 65vw, 290px);
    margin: 0 auto;
    transform: none;
  }
  .home-page .hero-selected .hero-visual .hero-guide {
    inset: auto 0 24px;
    width: 100%;
    height: 70px;
  }
  .home-page .hero-selected .hero-flow-labels {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: calc(100% - 2 * var(--layout-gutter));
    margin: 0 auto;
    padding: 0 0 22px;
    gap: 20px;
    font-size: 11px;
    line-height: 1.5;
  }
  .home-page .hero-selected .hero-flow-labels > span,
  .home-page .hero-selected .hero-flow-labels > span:last-child {
    max-width: none;
    transform: none;
  }

  /* Mobile reading rhythm and headings. */
  .home-page .about,
  .home-page .capabilities,
  .home-page .engagement-section,
  .home-page .system-fit,
  .home-page .client-cases,
  .home-page .deliverables,
  .home-page .faq { padding-block: 52px; }
  .home-page .about { padding-top: 30px; }
  .home-page .client-cases { margin-top: 28px; }
  .home-page .data-security { padding: 0 0 52px; }
  .home-page .final-cta { padding-top: 52px; }
  .home-page .center-title,
  .home-page .cases-heading .center-title,
  .home-page .formats-heading h2,
  .home-page .security-intro h2,
  .home-page .studio-audience-heading h2,
  .home-page .faq h2,
  .home-page .final-cta .contact-inline h2 {
    max-width: none;
    font-size: clamp(29px, 7.4vw, 36px);
    line-height: 1.17;
    letter-spacing: -.03em;
    text-wrap: balance;
  }
  .home-page .center-title > span { display: inline; }
  .home-page .center-title > span + span::before { content: " "; }
  .home-page .section-copy,
  .home-page .company-definition,
  .home-page .about-copy,
  .home-page .formats-heading p,
  .home-page .cases-heading > p,
  .home-page .security-intro > p:not(.section-label),
  .home-page .studio-audience-heading > p,
  .home-page .final-cta .contact-inline > div:first-child > p {
    max-width: none;
    font-size: 16px;
    line-height: 1.6;
  }
  .home-page .about .center-title { margin-bottom: 24px; }
  .home-page .company-definition { margin: 0 0 28px; text-align: left; }
  .home-page .section-copy { margin-top: 22px; }
  .home-page .about-copy { margin-top: 24px; }

  /* Present the demo at readable sizes instead of shrinking a desktop panel. */
  .home-page .browser-demo {
    width: 100%;
    margin-inline: 0;
    padding: 12px;
    border: 1px solid #d5dfed;
    border-radius: 16px;
  }
  .home-page .browser-chrome { min-height: 30px; height: auto; font-size: 11px; }
  .home-page .demo-scenarios {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding: 4px 0 16px;
  }
  .home-page .demo-scenarios button {
    width: 100%;
    min-height: 44px;
    padding: 10px 8px;
    font-size: 13px;
    line-height: 1.4;
  }
  .home-page .workflow-app { display: block; min-height: 0; }
  .home-page .app-sidebar { display: none; }
  .home-page .app-main { padding: 16px 12px; }
  .home-page .app-heading { align-items: flex-start; gap: 12px; }
  .home-page .app-heading > div { min-width: 0; }
  .home-page .app-heading p { font-size: 12px; line-height: 1.4; }
  .home-page .app-heading h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
  .home-page .demo-start {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 11px;
    border-radius: 8px;
    font-size: 0;
  }
  .home-page .demo-start span { display: none; }
  .home-page .demo-start .icon { width: 20px; height: 20px; }
  .home-page .workflow-rail { margin: 24px 0; }
  .home-page .workflow-node { flex: 1; min-width: 0; gap: 8px; font-size: 11px; }
  .home-page .workflow-node > span { width: 28px; height: 28px; font-size: 12px; }
  .home-page .workflow-rail-base,
  .home-page .workflow-rail-fill { top: 14px; right: 14px; left: 14px; }
  .home-page .work-panels { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .home-page .work-panels > article,
  .home-page .work-panels > article:first-child {
    min-width: 0;
    padding: 17px;
    border-right: 0;
    border-bottom: 1px solid #dce4ef;
  }
  .home-page .work-panels > article:last-child { border-bottom: 0; }
  .home-page .agent-panel { display: block; }
  .home-page .panel-caption { margin-bottom: 12px; font-size: 12px; line-height: 1.4; }
  .home-page .panel-caption .icon { width: 14px; height: 14px; }
  .home-page .work-panels h4 { margin-bottom: 10px; font-size: 16px; line-height: 1.35; }
  .home-page .work-panels p,
  .home-page .agent-log { font-size: 14px; line-height: 1.6; }
  .home-page .agent-log li { margin-bottom: 8px; }
  .home-page .agent-log li:last-child { margin-bottom: 0; }
  .home-page .file-chip { font-size: 12px; line-height: 1.45; }
  .home-page .file-chip .icon { width: 14px; height: 14px; }
  .home-page .approval-state { max-width: 100%; padding: 6px 8px; font-size: 12px; line-height: 1.4; }
  .home-page .workflow-bottom { min-height: 0; padding-top: 14px; font-size: 12px; line-height: 1.5; }

  .home-page .capability-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
  .home-page .capability-grid > article,
  .home-page .format-grid > article { padding: 24px; min-height: 0; border-radius: 16px; }
  .home-page .capability-grid > article > h3,
  .home-page .format-grid > article > h3 {
    min-height: 0;
    margin-bottom: 16px;
    font-size: 24px;
    line-height: 1.25;
  }
  .home-page .capability-grid > article > p,
  .home-page .capability-grid > article > ul > li,
  .home-page .format-grid > article > p {
    min-height: 0;
    font-size: 16px;
    line-height: 1.6;
  }
  .home-page .capability-grid > article > .direction-link { min-height: 48px; padding-top: 20px; font-size: 15px; }
  .home-page .task-scope-note { margin-top: 24px; font-size: 14px; line-height: 1.6; }
  .home-page .all-directions-link { min-height: 44px; font-size: 15px; }
  .home-page .formats-heading { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 28px; }
  .home-page .format-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .home-page .format-grid > article > .format-fit { min-height: 0; margin-bottom: 20px; }
  .home-page .format-grid > article > h4 { margin-bottom: 12px; font-size: 15px; }
  .home-page .format-grid > article > .pill { min-height: 48px; margin-top: 4px; font-size: 15px; white-space: normal; }

  .home-page .task-banner { display: block; height: auto; min-height: 0; margin-bottom: 24px; }
  .home-page .task-banner-copy {
    max-width: none;
    padding: 30px calc(var(--layout-gutter) - var(--panel-inset));
  }
  .home-page .task-banner h2 { font-size: 30px; line-height: 1.18; letter-spacing: -.025em; }
  .home-page .task-banner p { max-width: none; font-size: 16px; line-height: 1.55; }
  .home-page .task-banner .pill { min-height: 48px; margin-top: 22px; font-size: 15px; }
  .home-page .keyboard-scene {
    position: relative;
    inset: auto;
    width: 100%;
    height: 160px;
    overflow: hidden;
    mask-image: linear-gradient(#000 60%, transparent);
  }
  .home-page .keyboard { position: absolute; top: 10px; left: 50%; width: 420px; margin-left: -210px; padding: 24px; gap: 10px; }

  .home-page .process { padding-block: 48px 36px; }
  .home-page .process-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; margin-top: 32px; }
  .home-page .process-card { min-width: 0; min-height: 0; padding: 0; }
  .home-page .process-visual { height: 56px; margin-bottom: 20px; }
  .home-page .process-visual > svg { width: 54px; height: 54px; }
  .home-page .process-card h3 { font-size: 22px; line-height: 1.25; margin-bottom: 16px; }
  .home-page .process-card p { max-width: none; margin-bottom: 22px; font-size: 16px; line-height: 1.6; }
  .home-page .step-line { margin-top: auto; }

  .home-page .fit-diagram { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: none; min-height: 0; gap: 28px; margin-top: 32px; padding: 0; }
  .home-page .fit-node { width: 100%; min-height: 0; padding: 24px; align-items: flex-start; text-align: left; }
  .home-page .fit-node h3 { margin-bottom: 12px; font-size: 24px; line-height: 1.25; }
  .home-page .fit-node p { font-size: 16px; line-height: 1.55; }
  .home-page .fit-core .fit-core-mark { margin: 0 0 16px; }
  .home-page .fit-paths { display: none; }
  .home-page .fit-node:not(:last-child)::after { height: 28px; bottom: -29px; }
  .home-page .connection-catalogue { margin-top: 32px; padding-top: 28px; }
  .home-page .connection-heading { display: block; margin-bottom: 24px; }
  .home-page .connection-heading h3 { font-size: 25px; line-height: 1.25; }
  .home-page .connection-heading p { max-width: none; margin-top: 14px; font-size: 16px; line-height: 1.6; }
  .home-page .connection-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .home-page .connection-groups article { min-width: 0; padding: 18px 0 0; border: 0; border-top: 1px solid #d5dfed; }
  .home-page .connection-groups h4 { max-width: none; font-size: 20px; line-height: 1.3; }
  .home-page .connection-groups p { font-size: 16px; line-height: 1.6; }
  .home-page .connection-foot { align-items: flex-start; flex-direction: column; gap: 16px; margin-top: 28px; }
  .home-page .connection-foot p { font-size: 15px; line-height: 1.6; }
  .home-page .connection-action { max-width: none; min-height: 44px; font-size: 15px; white-space: normal; }
  .home-page .security-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 32px; }
  .home-page .security-list { gap: 24px; }
  .home-page .security-list h3 { font-size: 22px; line-height: 1.25; }
  .home-page .security-list p { font-size: 16px; line-height: 1.6; }

  .home-page .results { padding: 48px 0 28px; }
  .home-page .result-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
  .home-page .result-card { min-width: 0; min-height: 0; padding: 24px 22px; border-radius: 14px; }
  .home-page .result-card > div { min-height: 0; font-size: 14px; line-height: 1.4; }
  .home-page .result-card h3 { margin: 22px 0; font-size: 26px; line-height: 1.2; text-align: left; letter-spacing: -.025em; }
  .home-page .result-card > p { max-width: none; font-size: 16px; line-height: 1.6; }
  .home-page .case-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 28px; }
  .home-page .case-photo { height: auto; aspect-ratio: 4 / 3; }
  .home-page .case-body { padding: 20px 0 0; }
  .home-page .case-body h3 { min-height: 0; font-size: 25px; line-height: 1.25; }
  .home-page .case-body > p:not(.case-company),
  .home-page .project-detail { min-height: 0; font-size: 16px; line-height: 1.6; }
  .home-page .case-systems { min-height: 0; margin-bottom: 20px; }
  .home-page .case-card summary { min-height: 48px; font-size: 15px; }
  .home-page .project-list { grid-template-columns: minmax(0, 1fr); }
  .home-page .project-entry summary { min-height: 0; padding: 22px 0; gap: 16px; }
  .home-page .project-company { font-size: 24px; line-height: 1.25; }
  .home-page .project-purpose { font-size: 16px; line-height: 1.55; }

  .home-page .audience-studio { padding-top: 52px; padding-bottom: 0; }
  .home-page .studio-audience-heading { display: block; }
  .home-page .audience-studio .studio-workflow {
    width: calc(100% - 2 * var(--layout-gutter));
    max-width: none;
    height: auto;
    aspect-ratio: 1672 / 940;
    margin: 24px auto 0;
    border-radius: 12px;
  }
  .home-page .audience-studio .studio-flow-caption {
    width: calc(100% - 2 * var(--layout-gutter));
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 20px auto 0;
    padding-bottom: 32px;
  }
  .home-page .audience-studio .studio-flow-caption span { justify-content: flex-start; min-height: 24px; font-size: 13px; line-height: 1.5; }
  .home-page .studio-audience-band { padding: 32px 0 40px; }
  .home-page .studio-audiences { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .home-page .studio-audiences article { padding: 0; }
  .home-page .studio-audiences article + article { padding: 28px 0 0; border-left: 0; border-top: 1px solid #a9c2ff80; }
  .home-page .studio-audiences h3 { margin-bottom: 16px; font-size: 26px; line-height: 1.25; }
  .home-page .studio-audiences p { max-width: none; font-size: 16px; line-height: 1.6; }
  .home-page .delivery-grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; }
  .home-page .delivery-card { min-height: 0; padding: 24px 0; border: 0; border-top: 1px solid #d5dfed; }
  .home-page .delivery-card:first-child { border-top: 0; }
  .home-page .delivery-drawing { display: block; width: min(320px, 100%); height: auto; margin-inline: auto; }
  .home-page .delivery-number { top: 24px; right: 0; }
  .home-page .delivery-card h3 { font-size: 24px; line-height: 1.25; margin: 16px auto 12px; }
  .home-page .delivery-card p { max-width: 34ch; margin: 0 auto; font-size: 16px; line-height: 1.6; }

  .home-page .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .home-page .faq-grid > div > p:last-child { font-size: 16px; line-height: 1.6; }
  .home-page .faq summary { min-height: 44px; gap: 12px; font-size: 16px; line-height: 1.5; }
  .home-page .faq details > p { margin: 16px 0 4px; font-size: 16px; line-height: 1.65; }
  .home-page .contact-inline { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 0 0 48px; }
  .home-page .contact-inline .lead-form { min-width: 0; padding: 24px; border-radius: 16px; }
  .home-page .contact-inline .lead-form h3 { font-size: 24px; line-height: 1.25; }
  .home-page .contact-inline .lead-form .lead-form-intro { font-size: 15px; line-height: 1.6; }
  .home-page .lead-form .lead-form-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .home-page .lead-form .lead-form-field > label { font-size: 14px; line-height: 1.45; }
  .home-page .lead-form label > span { font-size: 12px; }
  .home-page .lead-form .lead-form-field > input,
  .home-page .lead-form .lead-form-field > textarea { min-height: 52px; font-size: 16px; }
  .home-page .lead-form .lead-form-field > textarea { min-height: 132px; }
  .home-page .contact-inline .lead-form .lead-form-consent > label { font-size: 13px; line-height: 1.6; }
  .home-page .lead-form .lead-form-submit { width: 100%; min-height: 52px; font-size: 15px; }
  .home-page .contact-inline .contact-channels a { min-height: 48px; font-size: 15px; }
  .home-page .contact-inline .contact-direct { font-size: 17px; }

  .home-page .footer { padding: 40px 0 24px; }
  .home-page .footer-grid,
  .detail-page .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 24px; }
  .home-page .footer-grid > div,
  .detail-page .footer-grid > div { min-width: 0; }
  .home-page .footer-grid > div:first-child,
  .detail-page .footer-grid > div:first-child { grid-column: 1 / -1; }
  .home-page .footer-grid .footer-contacts,
  .detail-page .footer-grid .footer-contacts { grid-column: 1 / -1; display: block; }
  .home-page .footer-brand img { width: 138px; height: auto; }
  .home-page .footer-grid h3,
  .detail-page .footer-grid h3 { margin-bottom: 14px; font-size: 14px; }
  .home-page .footer-grid > div > a:not(.brand),
  .detail-page .footer-grid > div > a:not(.brand) { font-size: 14px; line-height: 1.5; }
  .home-page .footer-documents,
  .detail-page .footer-documents { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 30px; }
  .home-page .footer-documents > a,
  .detail-page .footer-documents > a { max-width: 100%; min-height: 44px; font-size: 13px; }
  .home-page .footer-bottom,
  .detail-page .footer-bottom { display: flex; flex-direction: column; gap: 20px; margin-top: 26px; }
  .home-page .footer-bottom > a,
  .detail-page .footer-bottom > a { margin: 0; min-height: 44px; }

  /* Detail pages share the mobile frame and readable single-column content. */
  .detail-page .site-nav {
    width: calc(100% - 2 * var(--panel-inset));
    min-height: 68px;
    height: 68px;
    margin-top: 12px;
    padding-inline: calc(var(--layout-gutter) - var(--panel-inset));
    gap: 12px;
    border-radius: 14px;
  }
  .detail-page .site-nav .brand img { width: 112px; height: auto; }
  .detail-page .site-nav .nav-contact,
  .detail-page .desktop-nav { display: none; }
  .detail-page .nav-actions { gap: 8px; }
  .detail-page .round-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .detail-page .page-breadcrumbs { padding-top: 24px; font-size: 12px; }
  .detail-page .page-hero { padding: 32px 0 40px; }
  .detail-page .page-hero h1 { font-size: clamp(30px, 7.6vw, 40px); line-height: 1.16; margin-bottom: 22px; }
  .detail-page .page-hero .page-lead { font-size: 19px; line-height: 1.5; }
  .detail-page .page-hero .page-intro,
  .detail-page .page-hero > p { font-size: 16px; line-height: 1.65; }
  .detail-page .page-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 32px; }
  .detail-page .page-contents { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 16px; padding-bottom: 24px; }
  .detail-page .page-contents p { grid-column: 1 / -1; }
  .detail-page .page-contents a { min-height: 44px; font-size: 14px; line-height: 1.5; }
  .detail-page .page-article h2,
  .detail-page .case-article h2 { max-width: none; font-size: 28px; line-height: 1.22; }
  .detail-page .page-article section,
  .detail-page .case-article > section { padding-top: 48px; }
  .detail-page .page-article section:first-child { padding-top: 0; }
  .detail-page .scenario-details,
  .detail-page .connection-entry,
  .detail-page .related-grid,
  .detail-page .directory-entry,
  .detail-page .case-connections,
  .detail-page .case-agent-grid,
  .detail-page .project-directory-entry:has(.case-list-photo) { grid-template-columns: minmax(0, 1fr); }
  .detail-page .scenario-details { gap: 18px; }
  .detail-page .connection-entry { gap: 12px; }
  .detail-page .directory-entry { gap: 22px; padding-block: 32px; }
  .detail-page .project-directory-entry:has(.case-list-photo) { gap: 22px; }
  .detail-page .case-list-photo { max-height: 320px; aspect-ratio: 1.6; }
  .detail-page .case-cover img { aspect-ratio: 1.6; }
  .detail-page .page-contact { flex-direction: column; align-items: flex-start; gap: 24px; margin: 56px 0 48px; padding: 26px 24px; }
  .detail-page .page-contact h2 { font-size: 28px; line-height: 1.22; }
  .detail-page .page-contact .pill { width: 100%; min-height: 48px; font-size: 15px; }
  .detail-page .legal-document .page-hero h1 { font-size: clamp(28px, 7.2vw, 36px); line-height: 1.18; }
  .detail-page .legal-summary p,
  .detail-page .legal-body { font-size: 16px; line-height: 1.7; }
  .detail-page .legal-operator,
  .detail-page .legal-purpose { padding: 20px; }
}

@media (max-width: 560px) {
  .home-page .hero-selected .hero-actions { flex-direction: column; align-items: flex-start; }
  .home-page .hero-selected .hero-actions .pill { width: 100%; }
  .home-page .result-cards,
  .home-page .connection-groups { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 559px) {
  .home-page .process-cards { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home-page .process-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px 18px; }
  .home-page .process-visual { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; justify-content: flex-start; gap: 8px; height: auto; margin: 0; }
  .home-page .process-visual > span { align-self: center; margin: 0; font-size: 12px; }
  .home-page .process-card h3 { grid-column: 2; margin: 0; }
  .home-page .process-card p { grid-column: 2; margin: 0 0 12px; }
  .home-page .process-card .step-line { grid-column: 1 / -1; margin: 0; }
}

@media (max-width: 360px) {
  :root { --layout-gutter: 16px; }
  .home-page .hero.hero-selected { padding-top: 106px; }
  .home-page .site-nav .brand-original img,
  .detail-page .site-nav .brand img { width: 104px; }
  .home-page .capability-grid > article,
  .home-page .format-grid > article,
  .home-page .contact-inline .lead-form { padding: 22px 20px; }
  .home-page .capability-grid > article > h3,
  .home-page .format-grid > article > h3 { font-size: 23px; }
  .home-page .process-card { grid-template-columns: 48px minmax(0, 1fr); gap: 12px 16px; }
  .home-page .process-visual > svg { width: 46px; height: 46px; }
  .home-page .studio-audiences h3 { font-size: 24px; }
}

/* A single decision area pairs the enquiry with answers to common questions. */
.conversation-section { padding: 88px 0; }
.home-page .conversation-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.conversation-contact, .conversation-faq { min-width: 0; padding: 0; }
.home-page .conversation-contact .contact-inline,
.home-page .conversation-faq .faq-grid {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
.home-page .conversation-contact .lead-form {
  width: 100%;
  margin: 0;
  padding: 32px;
  border-radius: 20px;
  box-shadow: none;
}
.home-page .conversation-contact .lead-form h2,
.home-page .conversation-faq h2 {
  margin: 0 0 22px;
  font-size: clamp(30px, 2.7vw, 38px);
  line-height: 1.15;
  letter-spacing: -.035em;
  text-align: left;
  text-wrap: balance;
}
.home-page .conversation-faq .faq-list { margin-top: 28px; }
.home-page .conversation-faq summary {
  min-height: 64px;
  padding: 20px 0;
  gap: 18px;
  font-size: 17px;
  line-height: 1.45;
}
.home-page .conversation-faq details > p {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.65;
}
.home-page .conversation-contact .contact-direct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  font-size: 15px;
}
.conversation-contact .contact-direct a { display: inline-flex; align-items: center; min-height: 44px; }
.conversation-contact .contact-topic { margin: 0 0 16px; font-size: 16px; }
@media (min-width: 701px) {
  .home-page .site-nav, .detail-page .site-nav {
    width: min(1600px, calc(100% - 48px));
    left: 0;
    right: 0;
    margin-inline: auto;
  }
}
@media (max-width: 1000px) {
  .home-page .conversation-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 700px) {
  .conversation-section { padding: 52px 0; }
  .home-page .conversation-contact .lead-form { padding: 24px 20px; border-radius: 16px; }
  .home-page .conversation-contact .lead-form h2,
  .home-page .conversation-faq h2 { font-size: 30px; }
  .home-page .conversation-faq summary { font-size: 16px; min-height: 64px; }
  .home-page .conversation-contact .contact-direct { justify-content: flex-start; font-size: 15px; }
}

/* Comparable results share title and copy baselines. */
.home-page .result-cards::before { display: none; }
.home-page .result-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.home-page .result-card > div { min-height: 2.8em; }
.home-page .result-card h3 {
  min-height: 2.4em;
  margin: 24px 0;
  text-align: left;
}
.home-page .result-card > p { margin-top: auto; }
.home-page .conversation-faq { padding-top: 32px; }
.home-page .conversation-faq details { padding: 0; }
@media (max-width: 1000px) {
  .home-page .conversation-faq { padding-top: 0; }
}
@media (max-width: 560px) {
  .home-page .result-card > div, .home-page .result-card h3 { min-height: 0; }
}
.home-page .conversation-contact .contact-direct a {
  width: auto;
  margin: 0;
  text-align: left;
  justify-content: flex-start;
}

/* Подписи под линией первого экрана (владелец 06.11: «криво, текст под чертой»). Линия растянута
   на всю ширину (viewBox 1440×150, preserveAspectRatio none), а подписи стояли по краям текста, и
   изгиб на одних ширинах проходил через слова. Теперь подписи живут в той же коробке, что и линия,
   и встают под её верхние прямые участки у изгиба: левая под левым до изгиба (x 0…296, y 34), правая
   под правым сразу после изгиба (x 1170…1440, y 56) — владелец 06.11: «верхний в каждой стороне». Координаты ниже — из пути в index.html; поменяется путь — поменять и их. */
@media (min-width: 701px) {
  .home-page .hero-selected .hero-visual { --guide-b: clamp(30px, 3.4vw, 64px); --guide-h: clamp(120px, 9.5vw, 170px); }
  .home-page .hero-selected .hero-visual .hero-guide { bottom: var(--guide-b); height: var(--guide-h); }
  .home-page .hero-selected .hero-flow-labels { inset: auto 0 var(--guide-b) 0; height: var(--guide-h); display: block; gap: 0; }
  .home-page .hero-selected .hero-flow-labels > span,
  .home-page .hero-selected .hero-flow-labels > span:last-child { position: absolute; max-width: none; transform: none; text-align: left; }
  .home-page .hero-selected .hero-flow-labels > span:first-child { top: calc(34 / 150 * 100% + 10px); left: var(--layout-gutter); right: calc(100% - 296 / 1440 * 100% + 14px); text-align: right; }
  .home-page .hero-selected .hero-flow-labels > span:last-child { top: calc(56 / 150 * 100% + 10px); left: calc(1170 / 1440 * 100% + 14px); right: var(--layout-gutter); }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .home-page .hero-selected .hero-visual { --guide-b: 16px; --guide-h: 100px; }
}
/* Телефон: подписи двумя колонками под линией целиком; линия идёт в потоке над ними и заходит
   под знак, поэтому сколько бы строк ни заняла подпись, черта её не пересечёт. */
@media (max-width: 700px) {
  .home-page .hero-selected .hero-visual .hero-guide { position: relative; inset: auto; order: 1; flex: none; margin-top: -40px; }
  .home-page .hero-selected .hero-flow-labels { order: 2; margin-top: -19px; }
}