.ph { border-bottom: 1px solid var(--line); position: relative; overflow: hidden; } .ph::before { content: ''; position: absolute; right: -14%; top: -28%; width: 66%; height: 166%; background: radial-gradient(closest-side, rgba(181, 80, 47, 0.055), transparent 70%); } .ph .w { padding: 88px 48px 84px; position: relative; z-index: 2; } .bc { display: flex; gap: 9px; align-items: center; font-size: 12.5px; color: var(--fg-3); margin-bottom: 34px; } .bc a:hover { color: var(--blue); } .ph h1 { font-size: clamp(36px, 4.8vw, 62px); max-width: none; letter-spacing: -0.03em; line-height: 1.06; margin-bottom: 26px; } .ph .ld { font-size: 19px; line-height: 1.6; color: var(--fg-2); max-width: none; margin-bottom: 36px; } .ph .a { display: flex; gap: 16px; flex-wrap: wrap; } .ph .ab { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 28px; max-width: 700px; } .ph .ab .k { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terra); margin-bottom: 10px; } .ph .ab p:last-child { font-size: 16px; line-height: 1.62; color: var(--fg); margin: 0; } .ph .tx { max-width: 58%; position: relative; z-index: 2; } .phf { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); width: 36%; max-width: 400px; z-index: 1; } .phf svg { display: block; width: 100%; height: auto; } @media (max-width: 1000px) { .ph .tx { max-width: 100%; } .phf { display: none; } } .page-template-page-engagements-php .ph h1 { font-size: clamp(28px, 3.4vw, 44px); } .page-template-page-services-php .ph h1 { font-size: clamp(30px, 3.6vw, 56px); } .sec { padding: 88px 0; } .sec.sf { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .sh { display: flex; justify-content: space-between; align-items: start; gap: 40px; flex-wrap: wrap; margin-bottom: 52px; } .sh .k { flex: 0 0 100%; max-width: none; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terra); margin-bottom: 16px; } .sh h2 { font-size: clamp(26px, 3vw, 38px); max-width: 22ch; letter-spacing: -0.03em; margin-bottom: 0; } .sh > p { font-size: 15.5px; color: var(--fg-2); max-width: 34ch; margin: 0; } .blk { border-top: 1px solid var(--ink); } .blk > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; padding: 52px 0 56px; border-bottom: 1px solid var(--line); align-items: start; } .blk > div:last-child { border-bottom: 0; } .blk .lf .n { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 20px; } .blk .lf h3 { font-size: 30px; letter-spacing: -0.028em; margin-bottom: 18px; } .blk .lf .mk { height: 70px; margin-bottom: 8px; } .blk .lf .mk svg { display: block; width: 100%; height: 100%; } .blk .rt p { font-size: 16.5px; line-height: 1.68; color: var(--fg-2); margin-bottom: 16px; max-width: 60ch; } .blk .rt p:last-of-type { margin-bottom: 26px; } .blk .rt p strong { color: var(--ink); font-weight: 600; } .blk .rt .go { font-size: 14px; font-weight: 500; color: var(--blue); display: inline-flex; gap: 8px; align-items: center; } .blk .rt .go i { display: inline-block; transition: 0.24s; } .blk .rt .go:hover i { transform: translateX(5px); } .blk .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; } .blk .tags span { font-size: 12px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 20px; color: var(--fg-2); background: var(--bg); } .buy { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin: 0 -30px; } .buy > div { padding: 30px; border-right: 1px solid var(--line); min-width: 0; } .buy > div:last-child { border-right: 0; } .buy .k { font-size: 11.5px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; } .buy h4 { font-size: 19px; letter-spacing: -0.02em; margin-bottom: 10px; } .buy p { font-size: 14px; line-height: 1.58; color: var(--fg-2); } .faq { border-top: 1px solid var(--ink); } .faq > div { padding: 26px 0 28px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; } .faq > div:last-child { border-bottom: 0; } .faq h4 { font-size: 17.5px; letter-spacing: -0.018em; line-height: 1.3; } .faq p { font-size: 15.5px; line-height: 1.66; color: var(--fg-2); } .cl2 { border-top: 1px solid var(--line); } .cl2 .w { padding: 96px 48px 104px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 76px; align-items: start; } .cl2 h2 { font-size: clamp(28px, 3.4vw, 44px); max-width: 460px; letter-spacing: -0.03em; line-height: 1.1; } .cl2 p { font-size: 16.5px; line-height: 1.66; color: var(--fg-2); margin-bottom: 28px; } @media (max-width: 1000px) { .ph .w { padding: 56px 24px 54px; } .sec { padding: 56px 0; } .sh { gap: 16px; } .blk > div, .faq > div { grid-template-columns: 1fr; gap: 20px; padding: 34px 0 38px; } .buy { grid-template-columns: 1fr; margin: 0; } .buy > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 26px 0 28px; } .buy > div:last-child { border-bottom: 0; } .cl2 .w { grid-template-columns: 1fr; gap: 30px; padding: 58px 24px 64px; } }