/* Shared four-page site: the blue line, a paper note, and an open corner. */
.p-site { --page-space: 82px; }
.p-not-found { padding-block: 35px; }
.p-not-found > p:not(.p-kicker) { color: var(--muted); margin-block: 25px; }
.p-not-found .p-inline-link { margin-left: 25px; }
.p-footer__bottom > a { min-height: 44px; display: inline-flex; align-items: center; }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-error { display: block; font-size: 13px; color: #a22d2d; }
.contact-error:empty, .contact-status:empty { display: none; }
.contact-status { font-size: 14px; color: var(--ink); margin-block: 14px; }
.contact-status:focus { outline: 2px solid var(--brand); outline-offset: 5px; }
.contact-privacy { font-size: 12px; color: var(--muted); margin-block: 18px; }
.contact-privacy a { text-decoration: underline; text-underline-offset: 3px; }
.contact-security { min-height: 0; }
.contact-retry { min-height: 44px; padding: 8px 14px; border: 1px solid #8290a8; border-radius: 5px; color: var(--brand); background: var(--pale-blue); font-size: 14px; margin-bottom: 15px; cursor: pointer; }
.p-site .p-contact-form [aria-invalid=true] { border-color: #a22d2d; }
.p-privacy-copy { max-width: 680px; margin-top: 45px; }
.p-privacy-copy h2 { font-size: 27px; margin-top: 35px; }
.p-privacy-copy p { margin-top: 16px; font-size: 16px; color: var(--muted); }
.p-privacy-copy a { text-decoration: underline; text-underline-offset: 4px; }
.p-site :is(button, a, summary) { touch-action: manipulation; }
.p-site h2, .p-site h3 { text-wrap: balance; }
.p-site .r-example-switch button { min-height: 44px; }
.p-site .r-demo-caption a, .p-site .p-inline-link, .p-site .p-case__contact { min-height: 44px; display: inline-flex; align-items: center; }
.p-site .p-case__contact { display: flex; width: fit-content; max-width: 100%; }
.p-site .p-detail > summary, .p-site .r-website-field > summary { min-height: 44px; }
.p-site .p-delivery article > .p-detail > summary { align-items: center; }
.p-site .p-contact-form :is(input, textarea) { border-color: #8290a8; }
.p-site .p-contact-form :is(input, textarea)::placeholder { color: #657187; opacity: 1; }
.p-site :is(.r-example-switch button, .p-detail > summary, .r-website-field > summary):hover { color: var(--brand); }
.p-site .r-example-switch button[aria-pressed=true]:hover { color: #fff; background: #183a83; }
.p-site .p-footer nav > a { min-height: 44px; display: inline-flex; align-items: center; }
.p-site .p-footer nav > a:hover, .p-site .r-nav > a:not(.r-nav__contact):hover { color: var(--brand); text-decoration: underline; text-underline-offset: 5px; }
.p-site .r-nav > a { min-height: 44px; display: inline-flex; align-items: center; }
.p-site .menu-toggle { min-width: 64px; min-height: 44px; }
.p-site #werkwijze { scroll-margin-top: 24px; }
.p-site .p-sketch__hero { gap: 12px; }
.p-site .p-sketch__hero > strong { font-size: clamp(23px, 3vw, 37px); }
.p-site .r-location { color: var(--ink); font-size: 14px; line-height: 1.6; }
.p-site .p-contact-form label { font-size: 14px; }
.p-site .p-contact-form .r-website-field summary { font-size: 13px; }
.p-site .p-form-prototype p, .p-site .p-form-after { font-size: 12px; }
.p-site .r-header { border-bottom: 1px solid #e9edf4; padding-block: 26px; }
.p-site .r-header .brand { font-size: 29px; letter-spacing: -1.65px; }
.p-site .r-nav { gap: 30px; }
.p-site .r-nav > a { position: relative; font-size: 13px; }
.p-site .r-nav > a[aria-current=page]:not(.r-nav__contact) { color: var(--brand); font-weight: 650; }
.p-site .r-nav > a[aria-current=page]:not(.r-nav__contact)::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 18px; height: 3px; background: var(--brand); border-radius: 4px; }
.p-site .r-nav__contact { background: var(--brand); color: #fff; padding: 10px 23px; border-color: var(--brand); }
.p-site .r-nav__contact[aria-current=page] { box-shadow: 0 0 0 3px #dce6fb; }
.p-site .r-cta { box-shadow: 0 2px 0 #183a8320; border-radius: 7px; }
.p-site .r-hero { padding-block: 56px 68px; }
.p-site .r-wish { box-shadow: 0 4px 0 #d7cfc04d; }
.p-site .r-website { border: 1px solid #e0e7f7; }
.p-site .r-section-heading h2 { letter-spacing: -.045em; }
.p-offer-link, .p-inline-link { display: inline-flex; align-items: center; gap: 13px; font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 5px; }
.p-offer-link { display: flex; justify-content: center; border-top: 1px solid #d8d1c6; padding-top: 22px; margin-top: 34px; }
.p-offer-link svg, .p-inline-link svg { width: 18px; }
.p-inline-link { margin-top: 30px; }
.p-kicker { color: var(--brand); font-weight: 550; font-size: 14px; margin: 0 0 22px; }
.p-hero { padding-block: 62px 76px; overflow: hidden; }
.p-offer-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.p-hero h1, .p-contact-hero h1 { font-size: clamp(56px, 5.6vw, 80px); line-height: 1.04; letter-spacing: -.06em; }
.p-hero-copy { font-size: 18px; line-height: 1.75; color: var(--muted); margin-block: 27px 29px; max-width: 430px; }
.p-small { font-size: 12px; color: var(--muted); margin-top: 19px; }
.p-sketch { position: relative; padding: 58px 24px 24px; background: var(--pale-blue); border-radius: 16px 16px 80px 16px; margin: 45px 0 0; }
.p-sketch::after { content: ''; position: absolute; right: -22px; top: 85px; height: 100px; width: 100px; border: 21px solid #d3dff8; border-radius: 50%; z-index: 0; }
.p-sketch__wish { position: absolute; left: -30px; top: -28px; padding: 18px 22px; background: var(--sand); border-radius: 12px 12px 12px 0; transform: rotate(-4deg); z-index: 2; }
.p-sketch__wish > span { font-size: 11px; color: var(--muted); }
.p-sketch__wish > p { font-family: Bricolage, DM, sans-serif; font-size: 22px; margin: 4px 0 0; font-weight: 550; }
.p-sketch__paper { border: 1px solid #d8dfeb; border-radius: 6px; background: #fff; padding: 23px; position: relative; z-index: 1; transform: rotate(2deg); box-shadow: 0 14px 26px #20345812; }
.p-sketch__top { display: flex; align-items: center; gap: 12px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.p-sketch__top > span { font-family: Bricolage, DM, sans-serif; font-size: 17px; font-weight: 600; margin-right: auto; }
.p-sketch__top > i { height: 3px; width: 17px; background: #ced7e9; }
.p-sketch__hero { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding-block: 35px 15px; }
.p-sketch__hero > strong { font-family: Bricolage, DM, sans-serif; font-size: 37px; letter-spacing: -.055em; line-height: 1.12; font-weight: 550; }
.p-sketch__hero > div { width: 110px; height: 120px; flex: none; background: var(--sand); border-radius: 7px 7px 30px 7px; color: #aab7d4; display: grid; place-items: center; }
.p-sketch__hero svg { height: 90px; width: 90px; }
.p-sketch__button { font-size: 10px; padding: 8px 13px; background: var(--brand); color: #fff; border-radius: 4px; display: inline-block; }
.p-sketch__blocks { display: flex; gap: 15px; padding-top: 28px; margin-top: 22px; border-top: 1px solid var(--line); }
.p-sketch__blocks > span { font-size: 11px; flex: 1; padding-top: 12px; border-top: 3px solid #d4dff7; }
.p-sketch__caption { font-size: 11px; color: var(--muted); margin: 24px 0 0; }
.p-sketch__arrow { position: absolute; width: 74px; height: 95px; left: -49px; top: 55px; color: var(--brand); z-index: 2; }
.p-delivery { padding-block: var(--page-space); background: #faf9f6; }
.p-delivery__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 85px; }
.p-delivery__grid > article { border-top: 1px solid #dce0e8; padding-block: 30px; position: relative; padding-left: 57px; }
.p-line-icon { width: 34px; height: 34px; position: absolute; left: 0; top: 29px; color: var(--brand); }
.p-delivery h3 { font-size: 27px; max-width: 360px; margin-bottom: 13px; }
.p-delivery article > p { font-size: 15px; color: var(--muted); max-width: 370px; margin-bottom: 18px; }
.p-detail { border-top: 1px solid var(--line); padding-block: 17px; }
.p-detail > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 14px; font-weight: 500; list-style: none; }
.p-detail > summary > span { font-size: 22px; font-weight: 400; line-height: 1; }
.p-detail[open] > summary > span { transform: rotate(45deg); }
.p-detail > div { padding-top: 15px; font-size: 14px; color: var(--muted); }
.p-detail > div > p { margin-bottom: 12px; }
.p-detail > div > p:last-child { margin-bottom: 0; }
.p-delivery article > .p-detail { border-top: 0; padding-block: 0; }
.p-delivery article > .p-detail > summary { font-size: 12px; color: var(--brand); align-items: start; }
.p-delivery article > .p-detail > summary > span { font-size: 18px; }
.p-working { padding-block: var(--page-space); background: var(--sand); }
.p-workflow { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; margin: 45px 0 0; }
.p-workflow li { padding-right: 35px; position: relative; }
.p-workflow li:last-child { padding-right: 0; }
.p-workflow li > span { width: 41px; height: 41px; border: 1px solid #c5bdaf; border-radius: 50%; display: grid; place-items: center; font-family: Bricolage, DM, sans-serif; font-size: 17px; margin-bottom: 25px; color: var(--brand); }
.p-workflow li:not(:last-child)::before { content: ''; position: absolute; top: 20px; left: 57px; right: 18px; height: 1px; background: #d0c9bf; }
.p-workflow h3 { font-size: 25px; line-height: 1.15; margin-bottom: 13px; }
.p-workflow p { color: var(--muted); font-size: 14px; margin: 0; }
.p-extra { padding-block: 65px; }
.p-extra__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 100px; }
.p-extra h2, .p-contact-faq h2 { font-size: 42px; max-width: 400px; }
.p-extra__inner > div > p { font-size: 16px; color: var(--muted); max-width: 520px; }
.p-invite { background: var(--pale-blue); padding-block: 55px; overflow: hidden; }
.p-invite__inner { display: flex; justify-content: space-between; gap: 45px; align-items: center; position: relative; }
.p-invite h2 { font-size: 43px; max-width: 600px; letter-spacing: -.045em; }
.p-invite p { font-size: 15px; color: var(--muted); margin: 15px 0 0; }
.p-invite .button { flex: none; position: relative; z-index: 1; }
.p-invite__line { width: 145px; height: 90px; color: var(--brand); opacity: .35; position: absolute; right: 300px; top: -5px; }
.p-footer { padding: 48px 0 22px; }
.p-footer__main { display: flex; justify-content: space-between; align-items: flex-start; gap: 45px; padding-bottom: 35px; }
.p-footer .brand { font-size: 29px; }
.p-footer p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 17px 0 0; }
.p-footer__main > p { margin-top: 0; }
.p-footer nav { display: flex; flex-wrap: wrap; max-width: 390px; gap: 16px 30px; font-size: 12px; padding: 0; margin: 0; border: 0; width: auto; flex-direction: row; }
.p-footer__bottom { display: flex; gap: 25px; font-size: 10px; color: var(--muted); padding-top: 18px; border-top: 1px solid var(--line); }
.p-footer__bottom > span { margin-right: auto; }
.p-footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }
/* Each example is a small case study, rather than a catalogue card. */
.p-examples-hero { padding-bottom: 38px; }
.p-heading-split { display: grid; grid-template-columns: 1.5fr 1fr; gap: 90px; align-items: end; }
.p-heading-split > p { font-size: 17px; color: var(--muted); max-width: 390px; margin: 0 0 3px; }
.p-fiction-note { font-size: 12px; color: var(--muted); margin: 27px 0 0; }
.p-case { padding-block: 65px 75px; }
.p-case__layout { display: grid; grid-template-columns: 1.45fr 1fr; gap: 90px; align-items: center; }
.p-case__visual { min-width: 0; position: relative; padding-top: 48px; }
.p-case__note { display: inline-block; background: var(--sand); padding: 16px 23px; position: absolute; top: 0; left: 8px; z-index: 3; border-radius: 12px 12px 12px 0; transform: rotate(-3deg); max-width: 255px; }
.p-case__note > span { font-size: 10px; color: var(--muted); }
.p-case__note > p { font-family: Bricolage, DM, sans-serif; font-size: 19px; font-weight: 550; line-height: 1.3; margin: 4px 0 0; }
.p-case__devices { display: block; position: relative; background: var(--pale-blue); padding: 45px 45px 0 28px; border-radius: 12px 12px 65px 12px; margin-right: 26px; }
.p-case__desktop { transform: rotate(1deg) translateY(9px); overflow: hidden; border-radius: 5px; }
.p-case__desktop .browser-shot { box-shadow: 0 10px 25px #20345813; }
.p-case__phone { position: absolute; right: -28px; bottom: -18px; width: 24%; border: 5px solid #26334b; background: #26334b; border-radius: 20px; overflow: hidden; box-shadow: 0 7px 16px #20345820; transform: rotate(4deg); }
.p-case__phone > div { width: 30%; height: 6px; position: absolute; top: 4px; left: 35%; z-index: 1; background: #26334b; border-radius: 6px; }
.p-case__phone > img { width: 100%; height: auto; aspect-ratio: 375/844; object-fit: cover; object-position: top; }
.p-case__device-caption { font-size: 11px; color: var(--muted); margin: 25px 0 0 4px; }
.p-case__copy > .p-kicker { font-size: 11px; margin-bottom: 15px; }
.p-case h2 { font-size: clamp(35px, 3.4vw, 49px); line-height: 1.08; }
.p-case__copy > p:not(.p-kicker) { font-size: 16px; color: var(--muted); margin: 23px 0 22px; max-width: 370px; }
.p-case ul { padding: 0; list-style: none; margin: 0 0 26px; }
.p-case li { font-size: 13px; color: var(--muted); padding: 5px 0 5px 22px; position: relative; }
.p-case li::before { content: '✓'; color: var(--brand); position: absolute; left: 0; }
.p-case__copy .button { font-size: 13px; min-height: 50px; }
.p-case__contact { display: block; font-size: 12px; color: var(--brand); margin-top: 16px; text-decoration: underline; text-underline-offset: 4px; }
.p-case--snackbar { background: #faf9f6; }
.p-case--snackbar .p-case__layout { grid-template-columns: 1fr 1.45fr; }
.p-case--snackbar .p-case__visual { order: 2; }
.p-case--snackbar .p-case__devices { background: #e7dfcf; }
.p-case--snackbar .p-case__note { background: #fff; }
.p-case--snackbar .p-case__copy { padding-left: 10px; }
.p-own-story { padding-block: 65px; }
.p-own-story > div { display: flex; gap: 70px; align-items: center; }
.p-own-story h2 { font-size: 37px; max-width: 580px; }
.p-own-story p { font-size: 16px; color: var(--muted); max-width: 400px; margin: 0; }
/* Contact retains the short form, with room for an actual conversation. */
.p-contact-hero { padding-block: 64px 75px; background: linear-gradient(90deg, #fff 54%, #f3f6fd 54%); }
.p-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: start; }
.p-contact-hero h1 { font-size: clamp(52px, 5.4vw, 75px); }
.p-contact-intro > .p-hero-copy { max-width: 365px; font-size: 17px; }
.p-meeting-note { display: flex; gap: 17px; align-items: flex-start; padding: 20px; background: var(--sand); border-radius: 11px 11px 30px 11px; max-width: 405px; transform: rotate(-1.5deg); margin-top: 35px; }
.p-meeting-note > svg { width: 31px; height: 31px; color: var(--brand); margin-top: 2px; }
.p-meeting-note strong { font-family: Bricolage, DM, sans-serif; font-weight: 550; font-size: 19px; letter-spacing: -.03em; }
.p-meeting-note p { margin: 7px 0 0; font-size: 13px; color: var(--muted); max-width: 260px; }
.p-contact-steps { display: flex; gap: 10px 15px; flex-wrap: wrap; margin-top: 34px; color: var(--muted); font-size: 11px; }
.p-contact-steps > span:not(:last-child)::after { content: '→'; margin-left: 15px; color: #8594b5; }
.p-contact-form { padding: 33px; border: 1px solid #e1e6f0; border-radius: 14px 14px 40px 14px; box-shadow: 0 8px 25px #233e7510; }
.p-contact-form label { font-size: 13px; margin-bottom: 20px; }
.p-contact-form input, .p-contact-form textarea { font-size: 16px; padding: 12px; border-color: #d3dae7; }
.p-contact-form textarea { min-height: 108px; }
.p-contact-form .r-website-field summary { font-size: 12px; }
.p-contact-form .r-cta { font-size: 14px; min-height: 54px; }
.p-form-prototype { display: flex; gap: 10px; align-items: center; padding-block: 6px 20px; color: var(--muted); }
.p-form-prototype > span { width: 19px; height: 19px; flex: none; display: grid; place-items: center; border: 1px solid #95a5c4; border-radius: 50%; font-size: 11px; }
.p-form-prototype p { font-size: 11px; margin: 0; line-height: 1.6; }
.p-form-after { color: var(--muted); font-size: 11px; max-width: 400px; margin: 18px 10px 0; }
.p-contact-faq { padding-block: 68px; }
.p-contact-faq .p-detail:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 1100px) {
  .p-site .r-nav { gap: 20px; }
  .p-site .r-nav > a { font-size: 12px; }
  .p-offer-hero, .p-heading-split { gap: 55px; }
  .p-offer-hero h1 { font-size: 67px; }
  .p-sketch { padding-inline: 20px; }
  .p-sketch__hero > strong { font-size: 30px; }
  .p-sketch__hero > div { width: 85px; height: 110px; }
  .p-sketch__hero svg { width: 70px; height: 70px; }
  .p-sketch__paper { padding: 20px; }
  .p-delivery__grid { gap: 0 50px; }
  .p-extra__inner, .p-contact-grid, .p-case__layout { gap: 60px; }
  .p-workflow li { padding-right: 25px; }
  .p-workflow h3 { font-size: 22px; }
  .p-invite__line { display: none; }
  .p-invite h2 { font-size: 37px; }
  .p-case__devices { padding: 35px 33px 0 23px; }
  .p-case__phone { width: 26%; border-width: 4px; border-radius: 16px; }
  .p-case h2 { font-size: 37px; }
  .p-case__copy > p:not(.p-kicker) { font-size: 15px; }
  .p-contact-grid { grid-template-columns: 1fr 1.1fr; }
  .p-contact-hero h1 { font-size: 59px; }
  .p-contact-form { padding: 25px; }
  .p-footer__main { gap: 35px; }
  .p-footer nav { max-width: 310px; gap: 12px 22px; }
}
@media (max-width: 799px) {
  .p-site { --page-space: 48px; }
  .p-site .r-header { padding-block: 21px; }
  .p-site .r-header .brand { font-size: 26px; }
  .p-site .r-nav { gap: 0; }
  .p-site .r-nav > a { font-size: 14px; padding: 13px 5px; }
  .p-site .r-nav > a[aria-current=page]:not(.r-nav__contact)::after { display: none; }
  .p-site .r-nav__contact { padding-inline: 14px; border-radius: 6px; margin-top: 9px; }
  .p-site .r-hero { padding-block: 30px 42px; }
  .p-hero { padding-block: 35px 47px; }
  .p-offer-hero { grid-template-columns: 1fr; gap: 30px; }
  .p-kicker { font-size: 12px; margin-bottom: 16px; }
  .p-hero h1 { font-size: clamp(49px, 10vw, 69px); }
  .p-hero-copy { font-size: 16px; margin-block: 21px 25px; }
  .p-small { font-size: 11px; margin-top: 17px; }
  .p-sketch { margin-top: 26px; padding: 54px 21px 20px; max-width: 500px; width: calc(100% - 7px); margin-left: 7px; border-radius: 12px 12px 55px 12px; }
  .p-sketch__wish { left: -7px; top: -18px; padding: 14px 19px; }
  .p-sketch__wish > p { font-size: 20px; }
  .p-sketch__hero { padding-top: 27px; }
  .p-sketch__hero > strong { font-size: 31px; }
  .p-sketch__hero > div { width: 85px; height: 95px; }
  .p-sketch__paper { padding: 19px; }
  .p-sketch__top { gap: 10px; }
  .p-sketch__top > span { font-size: 15px; }
  .p-sketch__top > i { width: 10px; }
  .p-sketch__arrow { left: -10px; top: 37px; width: 53px; height: 78px; }
  .p-sketch__blocks { gap: 10px; }
  .p-sketch__blocks > span { font-size: 10px; }
  .p-sketch__caption { font-size: 10px; margin-top: 20px; }
  .p-delivery__grid { grid-template-columns: 1fr; }
  .p-delivery__grid > article { padding-block: 26px; padding-left: 47px; }
  .p-line-icon { width: 29px; height: 29px; top: 25px; }
  .p-delivery h3 { font-size: 25px; }
  .p-delivery article > p { font-size: 14px; }
  .p-delivery article > .p-detail > summary { font-size: 13px; }
  .p-workflow { grid-template-columns: 1fr; gap: 28px; margin-top: 30px; }
  .p-workflow li, .p-workflow li:last-child { padding: 0 0 0 59px; }
  .p-workflow li > span { position: absolute; left: 0; top: 0; width: 36px; height: 36px; margin: 0; font-size: 15px; }
  .p-workflow li:not(:last-child)::before { width: 1px; height: auto; left: 17px; top: 47px; right: auto; bottom: -15px; }
  .p-workflow h3 { font-size: 24px; padding-top: 3px; margin-bottom: 9px; }
  .p-workflow p { font-size: 14px; }
  .p-extra, .p-contact-faq { padding-block: 45px; }
  .p-extra__inner { grid-template-columns: 1fr; gap: 24px; }
  .p-extra h2, .p-contact-faq h2 { font-size: 35px; }
  .p-extra__inner > div > p { font-size: 15px; }
  .p-detail > summary { font-size: 14px; }
  .p-invite { padding-block: 38px; }
  .p-invite__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .p-invite h2 { font-size: 36px; }
  .p-invite p { font-size: 14px; margin-top: 15px; }
  .p-offer-link { justify-content: flex-start; font-size: 12px; gap: 10px; }
  .p-inline-link { font-size: 12px; margin-top: 25px; }
  .p-footer { padding-block: 33px 20px; }
  .p-footer__main { flex-wrap: wrap; gap: 25px; padding-bottom: 25px; }
  .p-footer__main > div { width: 100%; }
  .p-footer .brand { font-size: 27px; }
  .p-footer__main > p { font-size: 11px; }
  .p-footer nav { flex-direction: column; gap: 0; font-size: 12px; flex: 1; min-width: 135px; }
  .p-footer nav > a { padding: 5px 0; }
  .p-footer p { margin-top: 13px; }
  .p-footer__main > p { margin: 4px 0 0; }
  .p-footer__bottom { flex-wrap: wrap; gap: 9px 19px; font-size: 10px; }
  .p-footer__bottom > span { width: 100%; margin-bottom: 4px; }
  .p-examples-hero { padding-bottom: 20px; }
  .p-heading-split { grid-template-columns: 1fr; gap: 23px; }
  .p-heading-split > p { font-size: 15px; max-width: 500px; }
  .p-fiction-note { font-size: 11px; margin-top: 19px; }
  .p-case { padding-block: 38px 43px; }
  .p-case__layout, .p-case--snackbar .p-case__layout { grid-template-columns: 1fr; gap: 38px; }
  .p-case--snackbar .p-case__visual { order: 0; }
  .p-case__visual { padding-top: 45px; }
  .p-case__note { max-width: 235px; padding: 14px 19px; left: 5px; }
  .p-case__note > p { font-size: 17px; }
  .p-case__devices { margin-right: 19px; padding: 37px 30px 0 18px; border-radius: 9px 9px 42px 9px; }
  .p-case__phone { width: 25%; right: -18px; bottom: -14px; border-width: 3px; border-radius: 12px; }
  .p-case__phone > div { height: 4px; top: 3px; }
  .p-case__device-caption { font-size: 10px; margin-top: 23px; }
  .p-case__copy { max-width: 500px; }
  .p-case--snackbar .p-case__copy { padding-left: 0; }
  .p-case h2 { font-size: 39px; }
  .p-case__copy > p:not(.p-kicker) { font-size: 15px; margin-block: 19px; }
  .p-case li { font-size: 14px; }
  .p-case__copy > .p-kicker { margin-bottom: 11px; }
  .p-own-story { padding-block: 42px; }
  .p-own-story > div { flex-direction: column; gap: 20px; align-items: flex-start; }
  .p-own-story h2 { font-size: 35px; }
  .p-own-story p { font-size: 15px; }
  .p-contact-hero { padding-block: 35px 43px; background: #f5f7fd; }
  .p-contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .p-contact-hero h1 { font-size: clamp(48px, 9.8vw, 66px); }
  .p-contact-intro > .p-hero-copy { font-size: 16px; max-width: 490px; margin-bottom: 20px; }
  .p-meeting-note { margin-top: 23px; padding: 17px; max-width: 500px; }
  .p-meeting-note strong { font-size: 19px; }
  .p-meeting-note p { font-size: 13px; }
  .p-contact-steps { margin-top: 23px; gap: 8px 10px; font-size: 10px; }
  .p-contact-steps > span:not(:last-child)::after { margin-left: 10px; }
  .p-contact-form { padding: 24px; border-radius: 12px 12px 32px 12px; }
  .p-contact-form label { font-size: 12px; }
  .p-contact-form input, .p-contact-form textarea { font-size: 16px; padding: 11px; }
  .p-contact-form .r-cta { font-size: 12px; }
  .p-form-after { font-size: 11px; margin-inline: 5px; }
}
@media (max-width: 360px) {
  .p-site .r-nav > a { font-size: 14px; }
  .p-hero h1 { font-size: 47px; }
  .p-hero-copy { font-size: 15px; }
  .p-sketch { padding-inline: 16px; }
  .p-sketch__paper { padding: 15px; }
  .p-sketch__hero > strong { font-size: 28px; }
  .p-sketch__hero > div { width: 65px; height: 85px; }
  .p-sketch__hero svg { width: 60px; height: 60px; }
  .p-sketch__top { gap: 7px; }
  .p-sketch__top > i { width: 8px; }
  .p-sketch__blocks { gap: 7px; }
  .p-sketch__blocks > span { font-size: 9px; }
  .p-delivery__grid > article { padding-left: 40px; }
  .p-delivery h3 { font-size: 24px; }
  .p-line-icon { width: 26px; height: 26px; }
  .p-invite h2 { font-size: 33px; }
  .p-case h2 { font-size: 36px; }
  .p-contact-hero h1 { font-size: 43px; }
  .p-contact-form { padding: 19px; }
  .p-contact-form .r-form-row { grid-template-columns: 1fr; gap: 0; }
  .p-contact-form .r-cta { font-size: 11px; padding-inline: 10px; }
}