/* The final sections continue the service cards' typography and palette. */
.page-section { padding: 64px 0; }
.page-section h2 { margin: 0 0 18px; font: 700 clamp(1.8rem,3vw,2.5rem)/1.2 Inter,sans-serif; color: #f2f5fb; letter-spacing: -.03em; text-wrap: balance; }
.page-section h3, .page-section h4 { font-family: Inter,sans-serif; }
.page-section p { color: #bcc7d8; line-height: 1.75; }
.page-section-heading { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.section-eyebrow { font-size: .8rem; font-weight: 600; color: #7adbd2 !important; letter-spacing: .06em; margin: 0 0 12px; }
.process-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; list-style: none; padding: 0; margin: 0; }
.process-steps li { min-width: 0; border-top: 1px solid #8190aa40; padding-top: 20px; }
.process-number { display: inline-block; color: #7fe2d7; font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.process-steps h3 { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.5; font-weight: 600; color: #eef3fa; }
.process-steps p { margin: 0; font-size: .94rem; }
.studio-section { background: #10151f; border-block: 1px solid #8190aa16; }
.studio-content { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 60px; max-width: 1120px; margin: auto; }
.studio-content h2 { max-width: 350px; }
.studio-content h2 span { display: block; background: linear-gradient(110deg,#61e3d7,#b7a0ef); background-clip: text; -webkit-background-clip: text; color: transparent; }
.studio-description p { margin: 0 0 18px; }
.studio-description p:last-child { margin: 0; }
.studio-lead { color: #d7e0ed !important; font-size: 1.1rem; }
.faq-list { max-width: 850px; margin: auto; border-top: 1px solid #8190aa30; }
.faq-list details { border-bottom: 1px solid #8190aa30; }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 21px 0; list-style: none; cursor: pointer; color: #e5ecf6; font-size: 1rem; font-weight: 500; line-height: 1.6; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: #8be8dd; }
.faq-indicator { width: 18px; height: 18px; position: relative; flex-shrink: 0; color: #8cdbd3; }
.faq-indicator::before, .faq-indicator::after { content: ""; position: absolute; top: 8px; left: 2px; width: 14px; height: 2px; background: currentColor; }
.faq-indicator::after { transform: rotate(90deg); }
.faq-list details[open] .faq-indicator::after { display: none; }
.faq-list details p { margin: 0; padding: 0 36px 22px 0; font-size: .96rem; }
.faq-list summary:focus-visible { outline: 3px solid #78f2e5; outline-offset: 4px; border-radius: 4px; }
.contact-section { background: linear-gradient(110deg,#12212a80,#17142190); border-top: 1px solid #8190aa20; }
.contact-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 64px; max-width: 1120px; margin: auto; }
.contact-intro > p { margin: 0 0 18px; }
.contact-lead { font-size: 1.05rem; color: #d1dbe9 !important; }
.direct-contact-links { display: grid; gap: 10px; margin-top: 28px; }
.direct-contact-links a { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid #8190aa30; color: #e4edf8; overflow-wrap: anywhere; }
.direct-contact-links a > svg { width: 20px; height: 20px; color: #79dfd4; flex-shrink: 0; }
.direct-contact-links a > svg:last-child { width: 16px; height: 16px; margin-left: auto; }
.direct-contact-links a:hover .contact-value { color: #80eadc; }
.contact-channel, .contact-value { display: block; }
.contact-channel { font-size: .75rem; color: #aab7cc; margin-bottom: 3px; }
.contact-value { font-size: 1rem; }
.contact-guidance { padding: 26px 28px; align-self: start; border-radius: 14px; border: 1px solid #8190aa2e; background: #10172290; }
.contact-guidance h3 { margin: 0 0 12px; color: #eff3fb; font-size: 1.2rem; font-weight: 600; }
.contact-guidance > p { margin: 0 0 24px; font-size: .95rem; }
.contact-guidance ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.contact-guidance li { display: flex; gap: 14px; align-items: baseline; }
.contact-guidance li > span { color: #86d7d0; font-size: .75rem; flex-shrink: 0; }
.contact-guidance h4 { color: #dce5f2; font-size: .95rem; font-weight: 500; line-height: 1.5; margin: 0 0 5px; }
.contact-guidance li p { font-size: .9rem; margin: 0; }
@media (max-width: 1100px) { .process-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 36px; } }
@media (max-width: 850px) { .studio-content, .contact-layout { grid-template-columns: 1fr; gap: 28px; } .studio-content h2 { max-width: none; } .studio-content h2 span { display: inline; } }
@media (max-width: 600px) { .page-section { padding: 48px 0; } .page-section-heading { text-align: left; margin-bottom: 28px; } .process-steps { grid-template-columns: 1fr; gap: 24px; } .process-number { margin-bottom: 10px; } .studio-lead { font-size: 1rem; } .faq-list summary { padding-block: 18px; } .contact-guidance { padding: 24px 20px; } }

/* Development contact channels and a clearly disabled request form. */
.contact-layout { gap: 48px; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); align-items: start; }
.contact-channels { display: grid; gap: 4px; margin-top: 24px; }
.contact-channel-item { display: flex; align-items: center; gap: 14px; padding: 13px 0; min-width: 0; }
.contact-channel-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #80ddd2; background: #69e0d512; flex-shrink: 0; }
.contact-channel-icon svg { width: 20px; height: 20px; }
.contact-channel-item .contact-value { color: #e6eef8; font-size: 1.1rem; line-height: 1.5; overflow-wrap: anywhere; }
a.contact-channel-item:hover .contact-value { color: #80eadc; }
.contact-development-note { font-size: .8rem; color: #a5b3c8 !important; margin-top: 18px !important; }
.project-request-form { min-width: 0; padding: 26px; border: 1px solid #8190aa35; border-radius: 14px; background: #10172290; }
.project-request-form h3 { margin: 0 0 10px; font-size: 1.2rem; color: #f0f5fc; font-weight: 600; }
.project-request-form > p { font-size: .94rem; margin: 0 0 22px; }
.request-form-fields { display: grid; gap: 16px; }
.request-field { min-width: 0; }
.request-field label { display: block; font-size: .875rem; line-height: 1.5; color: #dde6f2; margin-bottom: 7px; font-weight: 500; }
.request-field label span { color: #a5b3c8; font-size: .75rem; font-weight: 400; }
.request-field input, .request-field select, .request-field textarea { display: block; width: 100%; min-width: 0; padding: 11px 12px; min-height: 44px; border: 1px solid #8190aa60; border-radius: 8px; background: #0c121e; color: #e5edf8; font: inherit; font-size: 1rem; line-height: 1.5; box-sizing: border-box; color-scheme: dark; }
.request-field textarea { resize: vertical; }
.request-field input:hover, .request-field select:hover, .request-field textarea:hover { border-color: #a2b4ca90; }
.request-field input:focus-visible, .request-field select:focus-visible, .request-field textarea:focus-visible { outline: 3px solid #78f2e5; outline-offset: 3px; border-color: #78f2e5; }
.project-request-form .request-status { display: flex; align-items: flex-start; gap: 9px; margin: 20px 0 14px; padding: 12px; border-radius: 8px; border: 1px solid #ac9ade40; background: #ac9ade12; color: #d5c9f1; font-size: .85rem; line-height: 1.6; }
.request-status[hidden] { display: none; }
.request-status.request-status-ok { border-color: #3ecf8e55; background: #3ecf8e14; color: #8fe8c0; }
.request-status.request-status-error { border-color: #ef7a7a55; background: #ef7a7a14; color: #f0a8a8; }
.hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.request-submit { margin-top: 18px; }
.request-submit:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.request-submit:disabled:hover { background: linear-gradient(110deg,#59e3d5,#b99aef); transform: none; }
@media (max-width: 850px) { .contact-layout { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 600px) { .project-request-form { padding: 22px 18px; } .request-submit { width: 100%; } }