/* Responsive layouts for Quettio. Component demos own their internal layouts. */
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 72px); }
  .header-inner { gap: 24px; }
  .nav-desktop { gap: 24px; }
  .header-contact { gap: 10px; font-size: 12px; }
  .home-hero { padding-top: 0; }
  .hero-content { padding-top: 150px; padding-bottom: 0; }
  .home-hero h1 { font-size: clamp(76px, 8.7vw, 100px); }
  .hero-bottom { gap: 28px; }
  .hero-bottom > p { font-size: 14px; }
  .hero-side-note { font-size: 11px; }
  .hero-footline { gap: 24px; font-size: 8px; }
  .section { padding-block: 96px; }
  .section-top h2, .split-section h2, .home-method h2, .closing h2,
  .method-process h2, .method-roles h2, .dna-faq h2, .dna-uses h2 { font-size: 58px; }
  .manifesto { grid-template-columns: 180px minmax(0, 1fr); gap: 40px; }
  .manifesto h2, .dna-statement h2 { font-size: 45px; }
  .manifesto-bottom { gap: 30px; }
  .doors-grid { gap: 18px; }
  .door { padding: 30px 25px; }
  .door h3 { font-size: 54px; }
  .door > p { font-size: 13px; }
  .door > div { gap: 12px; font-size: 10px; }
  .showcase-grid { gap: 25px; }
  .showcase-caption h3 { font-size: 24px; }
  .split-section { gap: 55px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-dna-copy > p { font-size: 14px; }
  .home-method { gap: 70px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-intro h1 { font-size: clamp(76px, 8.5vw, 104px); }
  .page-intro-bottom > p { font-size: 16px; }
  .solution-jumps > .wrap { gap: 18px; }
  .solution-jumps a { font-size: 11px; gap: 8px; }
  .service-grid { gap: 55px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .service-copy h2 { font-size: 57px; }
  .service-copy > h3 { font-size: 18px; }
  .service-copy > p, .deliverables { font-size: 13px; }
  .service-routine { font-size: 12px; }
  .service-copy, .service-visual, .showcase-item { min-width: 0; }
  .scope-band { gap: 28px; }
  .scope-band p { font-size: 15px; }
  .dna-hero-grid { gap: 45px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dna-hero h1 { font-size: 80px; }
  .dna-hero-grid > div:first-child > p { font-size: 15px; }
  .dna-statement { grid-template-columns: 180px minmax(0, 1fr); gap: 40px; }
  .delivery-grid { gap: 34px; }
  .delivery-grid h3 { font-size: 24px; }
  .dna-uses > .wrap { gap: 55px; }
  .uses-list h3 { font-size: 20px; }
  .uses-list p { font-size: 13px; }
  .dna-faq { gap: 65px; }
  .method-process { gap: 70px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .process-steps h3 { font-size: 40px; }
  .method-roles { gap: 70px; }
  .contact-grid { gap: 55px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .contact-intro h1 { font-size: 67px; }
  .brief-panel { padding: 32px; }
  .need-options { gap: 10px; }
  .need-options label { padding: 15px 12px; }
  .need-options label > span:nth-child(2) { font-size: 11px; }
  .need-options small { font-size: 10px; }
  .closing { gap: 40px; }
  .circle-link { width: 112px; height: 112px; flex-shrink: 0; }
  .circle-link-small { width: 66px; height: 66px; }
  .footer-top { gap: 50px; }
  .footer-top > p { font-size: 23px; }
  .footer-wordmark { margin-top: 65px; }
}

@media (max-width: 900px) {
  :root { --nav-height: 78px; }
  html { scroll-padding-top: calc(var(--nav-height) + 64px); }
  .wrap { width: calc(100% - 56px); }
  .nav-desktop { display: none; }
  .header-inner { gap: 24px; }
  .header-contact { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
  .hero-content { min-height: 820px; padding-top: 150px; padding-bottom: 28px; }
  .home-hero h1 { font-size: clamp(65px, 8.5vw, 84px); max-width: 100%; }
  .hero-sculpture { object-position: 65% center; opacity: .82; }
  .hero-shade { background: linear-gradient(90deg, rgb(13 13 13 / .55), rgb(13 13 13 / .12)), linear-gradient(0deg, #161616 0%, transparent 38%); }
  .hero-side-note { display: none; }
  .hero-bottom { flex-wrap: wrap; gap: 28px; align-items: center; }
  .hero-bottom > p { flex-basis: 100%; max-width: 420px; font-size: 15px; }
  .hero-bottom > .button { margin-left: 0; }
  .hero-bottom .explore-down { margin-left: auto; }
  .hero-footline { margin-top: 48px; }
  .hero-footline > span:last-child { max-width: 230px; text-align: right; }
  .section { padding-block: 80px; }
  .manifesto, .dna-statement { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .manifesto h2, .dna-statement h2 { font-size: clamp(35px, 5.4vw, 46px); }
  .manifesto-bottom { margin-top: 30px; align-items: flex-start; }
  .manifesto-bottom > p { font-size: 15px; }
  .section-top h2, .split-section h2, .home-method h2, .closing h2,
  .method-process h2, .method-roles h2, .dna-faq h2, .dna-uses h2 { font-size: clamp(43px, 6vw, 56px); }
  .doors-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .door { padding: 32px; min-height: 280px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 35px; }
  .door + .door { border-left: 0; border-top: 1px solid var(--line); padding: 32px; }
  .door:hover, .door + .door:hover { padding: 32px; }
  .door-num { grid-column: 1 / -1; }
  .door h3 { grid-row: 2 / 4; font-size: 58px; margin: 24px 0 0; }
  .door > p { align-self: end; margin-top: 24px; font-size: 14px; max-width: 280px; }
  .door > div { align-self: end; margin-top: 26px; font-size: 11px; }
  .all-solutions-link { margin-top: 30px; }
  .showcase-grid { grid-template-columns: minmax(0, 1fr); gap: 50px; }
  .section-top-split { gap: 35px; }
  .section-top-split > p { font-size: 13px; }
  .showcase-caption h3 { font-size: 29px; }
  .split-section, .home-method { grid-template-columns: minmax(0, 1fr); gap: 55px; }
  .home-dna { padding-block: 80px; }
  .home-dna-copy { max-width: 600px; }
  .home-dna-copy > p { max-width: 470px; }
  .dossier-scene { justify-self: center; }
  .method-mini { max-width: 100%; }
  .method-mini h3 { font-size: 25px; }
  .method-mini p { font-size: 14px; }
  .page-intro { padding-top: calc(var(--nav-height) + 48px); padding-bottom: 60px; }
  .page-intro h1 { font-size: clamp(67px, 8.6vw, 84px); }
  .breadcrumb { margin-bottom: 40px; }
  .solution-jumps > .wrap { width: 100%; padding-inline: 28px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; gap: 27px; }
  .solution-jumps > .wrap::-webkit-scrollbar { display: none; }
  .solution-jumps a { white-space: nowrap; flex: 0 0 auto; font-size: 12px; }
  .service-section { padding-block: 76px; }
  .service-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .service-copy { order: 0; max-width: 650px; }
  .service-visual { order: 1; width: 100%; }
  .service-copy h2 { font-size: clamp(49px, 6.9vw, 64px); }
  .service-copy > h3 { font-size: 21px; }
  .service-copy > p { max-width: 580px; font-size: 15px; }
  .deliverables { font-size: 14px; }
  .service-routine { font-size: 13px; }
  .scope-band { padding-block: 40px; flex-wrap: wrap; gap: 22px; }
  .scope-band .text-link { margin-left: auto; }
  .dna-hero { padding-top: calc(var(--nav-height) + 35px); }
  .dna-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 55px; }
  .dna-hero h1 { font-size: clamp(80px, 11vw, 105px); }
  .dna-hero-grid > div:first-child > p { max-width: 500px; font-size: 16px; }
  .dna-hero-bottom { margin-top: 40px; gap: 22px; flex-wrap: wrap; font-size: 11px; justify-content: space-between; }
  .dna-statement > div:last-child > p { font-size: 15px; max-width: 600px; }
  .dna-example { padding-block: 80px; }
  .dna-example .split-section > div:first-child { max-width: 600px; }
  .dna-example .split-section > div:first-child > p { font-size: 15px; }
  .delivery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .delivery-grid h3 { font-size: 25px; }
  .delivery-grid p { font-size: 14px; }
  .dna-uses { padding-block: 80px; }
  .dna-uses > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 45px; }
  .uses-list { width: 100%; }
  .uses-list h3 { font-size: 24px; }
  .uses-list p { font-size: 14px; }
  .dna-faq { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .faq-list summary { font-size: 15px; }
  .faq-list details > p { font-size: 14px; }
  .method-image { height: 420px; }
  .method-image > img { object-position: 58% 58%; }
  .method-process { grid-template-columns: minmax(0, 1fr); gap: 50px; }
  .method-process-intro { position: static; }
  .process-steps h3 { font-size: 44px; }
  .process-steps p { font-size: 15px; }
  .principles { padding-block: 80px; }
  .principles-grid { gap: 25px; }
  .principles-grid h3 { font-size: 23px; }
  .principles-grid p { font-size: 13px; }
  .method-roles { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .method-roles > div:last-child { max-width: 620px; }
  .method-roles > div:last-child > p { font-size: 15px; }
  .contact-page { padding-top: calc(var(--nav-height) + 44px); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 55px; }
  .contact-intro { position: static; max-width: 650px; }
  .contact-intro h1 { font-size: clamp(64px, 8.8vw, 83px); }
  .contact-expectation { max-width: 450px; }
  .brief-panel { width: 100%; max-width: 650px; justify-self: center; padding: 40px; }
  .need-options label { padding: 18px; }
  .need-options label > span:nth-child(2) { font-size: 13px; }
  .need-options small { font-size: 11px; }
  .field-label { font-size: 13px; }
  .field-label input, .field-label textarea { font-size: 16px; }
  .closing { padding-block: 80px; }
  .circle-link { width: 98px; height: 98px; }
  .closing > .circle-link { width: 98px; height: 98px; }
  .circle-link-small { width: 63px; height: 63px; }
  .footer { padding-top: 60px; }
  .footer-top { grid-template-columns: 1.3fr 1fr 1fr; gap: 30px; }
  .footer-top > p { font-size: 22px; }
  .footer-nav > a, .footer-contact > a { font-size: 12px; }
  .footer-contact > p { font-size: 11px; }
  .footer-bottom { gap: 20px; font-size: 9px; }
  .overlay-links a { font-size: clamp(40px, 6vw, 58px); }
  .menu-bottom { gap: 35px; }
}

@media (max-width: 650px) {
  :root { --nav-height: 73px; }
  html { scroll-padding-top: calc(var(--nav-height) + 64px); }
  body { overflow-x: clip; }
  .wrap { width: calc(100% - 40px); }
  .header-inner { height: var(--nav-height); gap: 20px; }
  .logo-link img { width: 122px; height: auto; }
  .header-contact { display: none; }
  .menu-toggle { margin-left: auto; font-size: 11px; }
  .menu-toggle > span { display: inline; }
  .menu-dialog { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; overflow-y: auto; }
  .menu-top { min-height: 73px; }
  .menu-top img { width: 122px; height: auto; }
  .menu-close { font-size: 11px; }
  .overlay-links { padding-block: 40px 32px; }
  .overlay-links a { font-size: clamp(31px, 8vw, 48px); padding-block: 20px; gap: 16px; }
  .overlay-links a > small { min-width: 18px; font-size: 9px; }
  .overlay-links a > span { min-width: 0; }
  .overlay-links svg { width: 22px; height: 22px; flex-shrink: 0; }
  .menu-bottom { flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 35px; }
  .menu-bottom > p { font-size: 22px; }
  .menu-bottom > a { font-size: 12px; }
  .home-hero { min-height: 800px; }
  .hero-content { min-height: 800px; padding-top: 122px; padding-bottom: 22px; }
  .hero-eyebrow { gap: 12px; }
  .hero-eyebrow .label { font-size: 8px; letter-spacing: .1em; }
  .hero-eyebrow .asterisk { font-size: 26px; }
  .home-hero h1 { font-size: clamp(43px, 11.5vw, 70px); line-height: 1.08; letter-spacing: -.065em; margin-top: 38px; position: relative; z-index: 1; }
  .home-hero h1 > span { white-space: normal; }
  .hero-sculpture { width: 135%; right: -23%; height: 68%; top: 25%; bottom: auto; object-position: 62% center; opacity: .72; }
  .hero-shade { background: linear-gradient(180deg, #161616 0%, rgb(22 22 22 / .5) 23%, rgb(22 22 22 / .05) 43%, rgb(22 22 22 / .68) 66%, #161616 95%); }
  .hero-bottom { margin-top: auto; padding-top: 210px; gap: 23px; align-items: center; }
  .hero-bottom > p { font-size: 13px; line-height: 1.8; max-width: 340px; flex-basis: 100%; }
  .hero-bottom > p br { display: none; }
  .hero-bottom .button { min-height: 50px; padding: 15px 17px; gap: 23px; font-size: 11px; }
  .explore-down { gap: 9px; }
  .explore-down > svg { width: 17px; height: 24px; }
  .explore-down > span { font-size: 7px; }
  .hero-footline { margin-top: 34px; padding-top: 18px; font-size: 7px; line-height: 1.6; }
  .hero-footline > span:last-child { display: none; }
  .ticker { padding-block: 17px; }
  .ticker-track { gap: 25px; }
  .ticker-track > span { font-size: 23px; }
  .ticker-track > i { font-size: 25px; }
  .section { padding-block: 64px; }
  .section-index { font-size: 9px; }
  .label { font-size: 9px; letter-spacing: .1em; }
  .manifesto, .dna-statement { gap: 27px; }
  .manifesto h2, .dna-statement h2 { font-size: clamp(29px, 7.5vw, 43px); line-height: 1.18; }
  .manifesto h2 br { display: none; }
  .manifesto h2 span { display: block; }
  .manifesto-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; margin-top: 25px; }
  .manifesto-bottom > p { font-size: 14px; max-width: none; line-height: 1.9; }
  .text-link { font-size: 12px; gap: 19px; }
  .text-link > svg { width: 19px; height: 19px; }
  .section-top h2, .split-section h2, .home-method h2, .closing h2,
  .method-process h2, .method-roles h2, .dna-faq h2, .dna-uses h2 { font-size: clamp(36px, 9vw, 53px); line-height: 1.12; }
  .section-top { margin-bottom: 32px; }
  .section-top h2 { margin-top: 21px; }
  .section-top-split { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
  .section-top-split > p { font-size: 13px; line-height: 1.85; }
  .section-top-split > p > span { display: block; font-size: 10px; margin-top: 10px; }
  .section-top-split > p br { display: none; }
  .door { display: flex; flex-direction: column; padding: 28px 24px; min-height: 350px; gap: 0; }
  .door + .door, .door:hover, .door + .door:hover { padding: 28px 24px; }
  .door-num { font-size: 9px; }
  .door h3 { margin-top: 31px; font-size: 61px; line-height: 1.03; }
  .door > p { margin-top: 20px; max-width: 280px; font-size: 14px; line-height: 1.8; align-self: auto; }
  .door > div { align-self: stretch; margin-top: 26px; padding-top: 20px; font-size: 11px; gap: 18px; }
  .door > div > svg { width: 23px; height: 23px; flex-shrink: 0; }
  .all-solutions-link { margin-top: 27px; justify-content: flex-start; }
  .showcase-grid { gap: 38px; }
  .showcase-caption { gap: 18px; margin-top: 22px; align-items: flex-end; }
  .showcase-caption .label { font-size: 8px; }
  .showcase-caption h3 { font-size: 25px; line-height: 1.18; margin-top: 10px; }
  .round-arrow { width: 40px; height: 40px; flex-shrink: 0; }
  .round-arrow > svg { width: 18px; height: 18px; }
  .home-dna { padding-block: 65px 40px; }
  .split-section, .home-method { gap: 36px; }
  .home-dna-copy h2 { margin-top: 24px; }
  .home-dna-copy > p { font-size: 14px; line-height: 1.85; margin-top: 23px; }
  .home-dna-copy .button { margin-top: 27px; font-size: 11px; padding: 15px 17px; gap: 21px; }
  .dossier-scene { max-width: 100%; justify-self: center; min-height: 420px; }
  .dna-hero .dossier-scene { transform: none; min-height: 430px; }
  .dossier-cover { width: 250px; height: 340px; padding: 22px 20px; }
  .dossier-back { width: 250px; height: 335px; transform: rotate(7deg) translate(13px, -3px); }
  .dossier-cover > strong { font-size: 26px; margin-top: 35px; }
  .dossier-star { font-size: 62px; margin-block: 21px 10px; }
  .dossier-caption { font-size: 10px; }
  .home-method { grid-template-columns: minmax(0, 1fr); gap: 43px; }
  .home-method h2 { margin-top: 20px; }
  .home-method > div:first-child .text-link { margin-top: 26px; }
  .method-mini > div { gap: 18px; padding-block: 24px; }
  .method-mini h3 { font-size: 23px; }
  .method-mini p { font-size: 13px; line-height: 1.8; }
  .method-mini > div > span { font-size: 11px; }
  .page-intro { padding-top: calc(var(--nav-height) + 32px); padding-bottom: 42px; }
  .breadcrumb { font-size: 10px; gap: 12px; margin-bottom: 38px; }
  .page-intro-top { align-items: flex-start; gap: 20px; }
  .index-note { font-size: 8px; line-height: 1.7; }
  .page-intro h1 { font-size: clamp(49px, 11.8vw, 72px); line-height: 1.06; margin-top: 26px; letter-spacing: -.065em; }
  .page-intro-bottom { margin-top: 32px; gap: 25px; align-items: flex-start; }
  .page-intro-bottom > p { font-size: 13px; line-height: 1.85; }
  .page-intro-bottom > p br { display: none; }
  .circle-link-small { width: 48px; height: 48px; flex-shrink: 0; }
  .circle-link-small > svg { width: 22px; height: 22px; }
  .solution-jumps { top: var(--nav-height); }
  .solution-jumps > .wrap { padding-inline: 20px; gap: 24px; }
  .solution-jumps a { padding-block: 20px; font-size: 11px; gap: 8px; }
  .solution-jumps a > span { font-size: 8px; }
  .service-section { padding-block: 57px; scroll-margin-top: 0; }
  .service-grid { gap: 34px; }
  .service-kicker { gap: 14px; }
  .service-kicker > span:first-child { font-size: 11px; }
  .service-kicker .label { font-size: 8px; }
  .service-copy h2 { font-size: clamp(41px, 10vw, 59px); margin-top: 23px; line-height: 1.07; }
  .service-copy > h3 { font-size: 18px; margin-top: 24px; line-height: 1.4; }
  .service-copy > p { font-size: 14px; line-height: 1.85; margin-top: 15px; }
  .deliverables { font-size: 12px; line-height: 1.8; margin-block: 24px; }
  .deliverables li { padding-block: 10px; }
  .service-routine { display: block; margin-top: 17px; font-size: 12px; line-height: 1.8; }
  .service-routine > span { font-size: 8px; display: block; margin-bottom: 8px; }
  .scope-band { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 18px; padding-block: 38px; }
  .scope-band > .asterisk { font-size: 32px; }
  .scope-band > p { font-size: 13px; line-height: 1.8; }
  .scope-band > p > br { display: none; }
  .scope-band .text-link { grid-column: 2; margin: 0; justify-self: start; }
  .dna-hero { padding-top: calc(var(--nav-height) + 28px); padding-bottom: 35px; }
  .dna-hero .breadcrumb { margin-bottom: 35px; }
  .dna-hero-grid { gap: 38px; }
  .dna-hero h1 { font-size: clamp(63px, 16vw, 92px); line-height: 1.01; margin-top: 28px; }
  .dna-hero-grid > div:first-child > p { font-size: 14px; line-height: 1.85; max-width: 350px; margin-top: 26px; }
  .dna-hero-grid .button { font-size: 11px; padding: 15px 17px; gap: 18px; }
  .dna-hero-bottom { display: grid; grid-template-columns: 1fr 16px 1fr; gap: 15px; margin-top: 25px; padding-top: 25px; font-size: 9px; }
  .dna-hero-bottom > i:nth-of-type(2) { display: none; }
  .dna-statement h2 { font-size: clamp(31px, 8vw, 45px); }
  .dna-statement > div:last-child > p { font-size: 14px; line-height: 1.85; margin-top: 24px; }
  .dna-example { padding-block: 62px; }
  .dna-example .split-section > div:first-child > p { font-size: 14px; line-height: 1.85; }
  .dna-example .illustration-note { font-size: 10px !important; line-height: 1.75; }
  .delivery-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .delivery-grid article { padding-block: 26px; }
  .delivery-grid article > span { font-size: 11px; }
  .delivery-grid h3 { font-size: 25px; margin-top: 18px; }
  .delivery-grid p { font-size: 14px; line-height: 1.85; margin-top: 13px; max-width: 410px; }
  .dna-uses { padding-block: 63px; }
  .dna-uses > .wrap { gap: 32px; }
  .dna-uses h2 { margin-top: 21px; }
  .uses-list > div { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 13px; padding: 22px 0; }
  .uses-list > div > span { position: static; font-size: 10px; }
  .uses-list h3 { font-size: 22px; line-height: 1.2; }
  .uses-list p { grid-column: 2; font-size: 13px; line-height: 1.8; }
  .dna-faq { gap: 30px; }
  .dna-faq h2 { margin-top: 20px; }
  .faq-list summary { gap: 16px; padding-block: 23px; font-size: 13px; line-height: 1.6; }
  .faq-list summary > svg { width: 18px; height: 18px; flex-shrink: 0; }
  .faq-list details > p { padding-right: 20px; padding-bottom: 23px; font-size: 13px; line-height: 1.85; }
  .method-intro h1 { font-size: clamp(46px, 11vw, 66px); }
  .method-intro .page-intro-bottom { flex-direction: column; gap: 23px; }
  .method-image { height: 310px; }
  .method-image > img { object-position: 58% center; }
  .method-image > span { left: 20px; bottom: 20px; max-width: 250px; font-size: 8px; line-height: 1.8; }
  .method-process { gap: 35px; }
  .method-process-intro h2 { margin-top: 21px; }
  .process-steps article { display: grid; gap: 23px; padding-block: 27px; grid-template-columns: 32px minmax(0, 1fr); }
  .process-index { font-size: 13px; }
  .process-steps h3 { font-size: 37px; line-height: 1.1; }
  .process-steps p { font-size: 14px; line-height: 1.85; margin-top: 16px; }
  .process-steps small { font-size: 11px; line-height: 1.8; margin-top: 17px; display: block; }
  .principles { padding-block: 64px; }
  .principles-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .principles-grid article { padding-top: 23px; }
  .principles-grid .asterisk { font-size: 35px; }
  .principles-grid h3 { margin-top: 20px; font-size: 26px; }
  .principles-grid p { font-size: 14px; line-height: 1.85; margin-top: 15px; }
  .method-roles { gap: 30px; }
  .method-roles h2 { margin-top: 21px; }
  .method-roles > div:last-child > p { font-size: 14px; line-height: 1.85; }
  .method-roles > div:last-child .text-link { margin-top: 26px; }
  .contact-page { padding-top: calc(var(--nav-height) + 30px); padding-bottom: 64px; }
  .contact-grid { gap: 43px; }
  .contact-intro h1 { font-size: clamp(51px, 12.5vw, 76px); line-height: 1.04; margin-top: 27px; }
  .contact-intro > p { font-size: 14px; line-height: 1.85; margin-top: 25px; }
  .contact-intro > p > br { display: none; }
  .contact-intro .button { margin-top: 27px; font-size: 11px; gap: 19px; padding: 16px 18px; }
  .contact-number { font-size: 12px; margin-top: 16px; }
  .contact-expectation { margin-top: 30px; padding-top: 22px; }
  .contact-expectation > span { font-size: 8px; }
  .contact-expectation > p { font-size: 13px; line-height: 1.85; margin-top: 12px; }
  .brief-panel { padding: 25px 21px; max-width: 100%; min-width: 0; }
  .brief-panel-heading { gap: 8px; }
  .brief-panel-heading .label { font-size: 11px; line-height: 1.6; letter-spacing: .04em; }
  .brief-stepper { gap: 9px; margin-block: 24px 31px; }
  .brief-stepper > span { font-size: 11px; gap: 7px; }
  .brief-stepper i { width: 22px; height: 22px; font-size: 11px; }
  .form-step h2 { font-size: 35px; line-height: 1.12; }
  .form-step > p { font-size: 12px; line-height: 1.8; margin-top: 15px; }
  .need-options { grid-template-columns: minmax(0, 1fr); gap: 9px; margin-top: 24px; }
  .need-options label { min-height: 73px; padding: 16px; gap: 12px; }
  .need-options label > span:nth-child(2) { font-size: 12px; line-height: 1.45; }
  .need-options small { font-size: 11px; margin-top: 5px; line-height: 1.5; }
  .need-options input { width: 15px; height: 15px; flex-shrink: 0; }
  .need-options label > span:last-child { font-size: 19px; }
  .form-step .button { min-height: 51px; padding: 15px 16px; font-size: 11px; gap: 17px; }
  .form-step .step-next, .send-whatsapp { width: 100%; }
  .field-label { font-size: 12px; line-height: 1.7; margin-top: 22px; gap: 8px; }
  .field-label input, .field-label textarea { font-size: 16px; min-width: 0; width: 100%; padding: 13px; line-height: 1.7; }
  .form-step .privacy-note { font-size: 11px; line-height: 1.75; margin-top: 16px; }
  .form-actions { gap: 14px; margin-top: 25px; }
  .back-step, .summary-tools > button { font-size: 11px; }
  .summary-tools { gap: 17px; flex-wrap: wrap; margin-top: 24px; }
  .summary-status, .form-step .form-error { font-size: 11px !important; line-height: 1.75; }
  .send-whatsapp { margin-top: 22px; }
  .closing { padding-block: 64px; display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
  .closing h2 { margin-top: 22px; font-size: clamp(35px, 8.4vw, 50px); }
  .circle-link { width: 78px; height: 78px; }
  .closing > .circle-link { width: 78px; height: 78px; }
  .closing > .circle-link > svg { width: 29px; height: 29px; }
  .circle-link > svg { width: 29px; height: 29px; }
  .circle-link-small { width: 48px; height: 48px; }
  .circle-link-small > svg { width: 22px; height: 22px; }
  .footer { padding-top: 46px; }
  .footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 25px; }
  .footer-top > p { grid-column: 1 / -1; font-size: 25px; line-height: 1.35; }
  .footer-nav, .footer-contact { min-width: 0; }
  .footer-nav > span, .footer-contact > span { font-size: 8px; line-height: 1.6; }
  .footer-nav > a { font-size: 13px; line-height: 1.7; }
  .footer-contact > a { font-size: 12px; white-space: nowrap; }
  .footer-contact > p { font-size: 11px; line-height: 1.8; }
  .footer-wordmark { width: 100%; margin-top: 46px; }
  .footer-wordmark > img { width: 100%; height: auto; }
  .footer-bottom { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 14px; font-size: 9px; padding-block: 22px; }
  .footer-bottom > span:nth-child(2) { grid-row: 2; grid-column: 1 / -1; }
  .footer-bottom .back-top { justify-self: end; grid-column: 2; grid-row: 1; font-size: 9px; }
  .not-found h1 { font-size: clamp(43px, 10vw, 63px); }
  .not-found .button { margin-top: 30px; font-size: 12px; }
}

@media (max-width: 360px) {
  .wrap { width: calc(100% - 40px); }
  .home-hero h1 { font-size: clamp(36px, 11.4vw, 42px); }
  .hero-eyebrow .label { font-size: 7px; }
  .hero-bottom .button { gap: 15px; padding-inline: 14px; font-size: 10px; }
  .explore-down > span { font-size: 6px; }
  .hero-bottom > p { font-size: 12px; }
  .hero-footline { font-size: 6px; }
  .section-top h2, .split-section h2, .home-method h2,
  .method-process h2, .method-roles h2, .dna-faq h2, .dna-uses h2 { font-size: 33px; }
  .manifesto h2, .dna-statement h2 { font-size: 29px; }
  .door { padding: 26px 21px; }
  .door + .door, .door:hover, .door + .door:hover { padding: 26px 21px; }
  .door h3 { font-size: 54px; }
  .page-intro h1 { font-size: 44px; }
  .page-intro-top .index-note { max-width: 70px; text-align: right; }
  .service-copy h2 { font-size: 38px; }
  .dna-hero h1 { font-size: 61px; }
  .dossier-cover { width: 220px; height: 302px; padding: 18px; }
  .dossier-back { width: 220px; height: 300px; }
  .dossier-scene { min-height: 375px; }
  .dna-hero .dossier-scene { min-height: 385px; }
  .dossier-cover > strong { font-size: 23px; margin-top: 26px; }
  .dossier-top > img { width: 76px; }
  .dossier-top > span { font-size: 5px; }
  .dossier-star { font-size: 54px; margin-block: 18px 7px; }
  .dna-hero-bottom { font-size: 8px; gap: 12px; }
  .contact-intro h1 { font-size: 47px; }
  .brief-panel { padding-inline: 17px; }
  .brief-stepper { gap: 6px; }
  .brief-stepper > span { font-size: 11px; gap: 5px; }
  .brief-stepper i { width: 20px; height: 20px; font-size: 11px; }
  .form-step h2 { font-size: 31px; }
  .need-options label { padding-inline: 13px; }
  .form-actions { gap: 10px; }
  .form-actions .button { font-size: 10px; gap: 12px; padding-inline: 12px; }
  .closing h2 { font-size: 32px; }
  .footer-top { gap: 30px 15px; }
  .footer-contact > a { font-size: 10px; }
  .footer-contact > p { font-size: 10px; }
  .overlay-links a { font-size: 29px; gap: 12px; }
}

@media (max-width: 320px) {
  .home-hero h1 { font-size: 36px; }
  .hero-bottom { gap: 16px; }
  .hero-bottom .button { padding-inline: 12px; gap: 10px; }
  .hero-bottom .button > svg { width: 16px; height: 16px; }
  .explore-down { padding-left: 0; gap: 6px; }
  .hero-eyebrow .label { letter-spacing: .04em; }
  .service-copy h2 { font-size: 36px; }
  .contact-intro h1 { font-size: 43px; }
  .contact-intro .button { padding-inline: 14px; gap: 12px; }
  .form-actions { flex-wrap: wrap; }
  .form-actions > .button { margin-left: auto; }
}