.it-page { max-width: 1440px; margin: auto; padding: 35px 0 60px; --it-warm: #987361; --it-soft: #e8e5dd; }
.it-page .eyebrow { color: var(--it-warm); font-size: 9px; letter-spacing: .11em; line-height: 1.65; }
.it-page h1, .it-page h2, .it-page h3 { overflow-wrap: anywhere; }
.it-page h2 { font-size: clamp(34px, 4.5vw, 66px); font-weight: 450; letter-spacing: -.065em; line-height: 1.05; margin: 0; }
.it-page p { color: #656259; line-height: 1.75; }
.it-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4vw; padding: 30px 0 60px; border-bottom: 1px solid var(--line); }
.it-hero h1 { font-size: clamp(54px, 6.9vw, 98px); font-weight: 450; letter-spacing: -.085em; line-height: .94; margin: 27px 0; }
.it-hero h1 em { color: var(--it-warm); display: block; font-family: Georgia, serif; font-weight: 400; }
.it-intro { max-width: 470px; font-size: 17px; margin: 0 0 27px; }
.it-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.it-button { display: inline-flex; align-items: center; gap: 30px; min-height: 50px; background: #292722; color: #f3efe6; padding: 14px 20px; font: 9px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .035em; transition: background .2s; }
.it-button:hover { background: #735847; }
.it-button span { font-size: 16px; }
.it-text-link { font: 9px 'DM Mono', monospace; text-transform: uppercase; text-underline-offset: 5px; }
.it-page a:focus-visible, .it-page button:focus-visible, .it-page summary:focus-visible { outline: 2px solid var(--it-warm); outline-offset: 5px; }
.it-workspace { aspect-ratio: 1; position: relative; isolation: isolate; perspective: 900px; overflow: clip; }
.it-workspace::before { content: ''; position: absolute; inset: 7%; border-radius: 50%; background: radial-gradient(circle, #c7a38c55, #c7a38c18 50%, transparent 72%); }
.it-workspace-grid { position: absolute; inset: 2%; background-image: linear-gradient(#967f6810 1px, transparent 1px), linear-gradient(90deg, #967f6810 1px, transparent 1px); background-size: 35px 35px; mask-image: radial-gradient(ellipse, black, transparent 72%); transform: rotate(-12deg); }
.it-hub { position: absolute; left: 29%; top: 28%; width: 42%; height: 42%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #f1dbca, #ba8872 43%, #694639); box-shadow: 0 30px 65px #76584426, inset -12px -15px 20px #573b3022; }
.it-hub img { width: 74%; height: 74%; object-fit: contain; }
.it-orbit { position: absolute; inset: 12%; border: 1px solid #98736180; border-radius: 50%; transform: rotate(-25deg) scaleY(.67); }
.it-orbit::before, .it-orbit::after { content: ''; position: absolute; inset: -10%; border: 1px solid #9873614d; border-radius: 50%; transform: rotate(70deg); }
.it-orbit::after { inset: -3%; transform: rotate(125deg); }
.it-window { position: absolute; width: 44%; background: #f6f3ebed; border: 1px solid #75604c26; padding: 13px 16px 18px; box-shadow: 8px 20px 30px #7055411c; border-radius: 9px; animation: it-window-float 7s ease-in-out infinite; }
.it-window-1 { left: 0; top: 11%; transform: rotateY(16deg) rotate(-7deg); }
.it-window-2 { right: -1%; top: 36%; transform: rotateY(-17deg) rotate(7deg); animation-delay: -2s; }
.it-window-3 { left: 10%; bottom: 12%; transform: rotateY(12deg) rotate(-4deg); animation-delay: -4s; }
.it-window-bar { display: flex; gap: 4px; padding-bottom: 13px; border-bottom: 1px solid #a7968226; margin-bottom: 12px; }
.it-window-bar i { width: 4px; height: 4px; background: #a18c77; border-radius: 50%; }
.it-window strong { font-size: clamp(12px, 1.15vw, 17px); font-weight: 500; display: block; letter-spacing: -.035em; }
.it-window-icon { color: var(--it-warm); font-size: 23px; }
.it-window-lines { display: grid; gap: 5px; margin-top: 12px; }
.it-window-lines b { height: 4px; width: 78%; border-radius: 2px; background: #d9d4c9; }
.it-window-lines b:nth-child(2) { width: 95%; }
.it-window-lines b:nth-child(3) { width: 50%; }
.it-visual-caption { position: absolute; bottom: 0; right: 0; color: #8c8171; font: 7px 'DM Mono', monospace; letter-spacing: .1em; }
.it-needs, .it-services { padding: 85px 0 0; }
.it-heading-row { display: grid; grid-template-columns: 1.2fr .8fr; gap: 7vw; align-items: end; margin: 12px 0 32px; }
.it-heading-row > p { font-size: 14px; margin: 0; max-width: 390px; }
.it-need-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.it-need { display: flex; flex-direction: column; align-items: flex-start; position: relative; gap: 26px; padding: 22px; min-height: 170px; text-align: left; font: 500 19px Manrope, sans-serif; letter-spacing: -.03em; background: var(--it-soft); color: var(--ink); border: 1px solid transparent; cursor: pointer; transition: background .2s, border-color .2s; }
.it-need > span { color: var(--it-warm); font: 9px 'DM Mono', monospace; }
.it-need b { position: absolute; right: 17px; top: 19px; font-weight: 400; color: var(--it-warm); }
.it-need:hover, .it-need.is-selected { background: #f7f3eb; border-color: #98736180; }
.it-guidance { display: flex; align-items: center; gap: 30px; padding: 24px 27px; border-left: 2px solid var(--it-warm); margin-top: 14px; background: #d9cbb32b; }
.it-guidance p { flex: 1; margin: 0; font-size: 13px; }
.it-guidance a { color: #735847; font: 9px 'DM Mono', monospace; text-transform: uppercase; flex-shrink: 0; }
.it-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.it-service-card { border: 1px solid var(--line); position: relative; padding: 27px; background: linear-gradient(145deg, #ffffff3b, #e8e4da44); transition: border-color .2s; }
.it-service-card:hover { border-color: #98736180; }
.it-service-icon { display: inline-flex; align-items: center; justify-content: center; height: 46px; width: 46px; border: 1px solid #98736140; border-radius: 12px; font-size: 23px; color: var(--it-warm); background: #f7f3ec; }
.it-card-number { position: absolute; top: 28px; right: 27px; color: #a09483; font: 8px 'DM Mono', monospace; }
.it-service-card h3 { font-size: 23px; font-weight: 500; letter-spacing: -.055em; margin: 24px 0 13px; line-height: 1.2; }
.it-service-card p { font-size: 13px; margin: 0; }
.it-process { margin-top: 85px; padding: 55px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.it-process ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px; list-style: none; padding: 0; margin: 38px 0 0; }
.it-process li > span { color: var(--it-warm); font: 11px 'DM Mono', monospace; }
.it-process h3 { font-size: 20px; letter-spacing: -.04em; font-weight: 500; margin: 18px 0 12px; }
.it-process p { font-size: 13px; margin: 0; }
.it-faq { display: grid; grid-template-columns: .85fr 1.15fr; gap: 7vw; padding: 75px 0; }
.it-faq h2 { font-size: clamp(32px, 3.6vw, 50px); }
.it-faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.it-faq details:first-child { padding-top: 0; }
.it-faq summary { font-size: 16px; font-weight: 500; cursor: pointer; line-height: 1.55; }
.it-faq details p { font-size: 13px; margin: 15px 0 0; }
.it-contact { display: grid; grid-template-columns: .6fr 1.4fr; gap: 5vw; align-items: center; padding: 55px 6vw; background: #292722; color: #f3efe6; }
.it-contact-mark { aspect-ratio: 1; border: 1px solid #bc9b7455; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #73513b33, transparent); position: relative; }
.it-contact-mark::before, .it-contact-mark::after { content: ''; position: absolute; inset: 8%; border: 1px solid #bc9b7440; border-radius: 50%; transform: rotate(-28deg) scaleY(.57); pointer-events: none; }
.it-contact-mark::after { inset: -5%; transform: rotate(47deg) scaleY(.65); }
.it-contact-mark img { width: 83%; height: 83%; object-fit: contain; position: relative; z-index: 1; }
.it-contact h2 { font-size: clamp(34px, 4.4vw, 60px); }
.it-contact p { color: #d2c7b8; font-size: 13px; max-width: 600px; }
.it-contact .eyebrow { color: #c9ac93; }
.it-contact .it-button { background: #ece6db; color: #292722; margin-top: 10px; }
@keyframes it-window-float { 50% { translate: 0 -8px; } }
@media (max-width: 900px) {
  .it-hero h1 { font-size: clamp(50px, 7vw, 70px); }
  .it-need-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .it-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .it-need { min-height: 145px; }
  .it-process ol { gap: 25px; }
}
@media (max-width: 760px) {
  .it-page { padding-top: 15px; }
  .it-hero { grid-template-columns: 1fr; gap: 20px; padding: 20px 0 35px; }
  .it-hero h1 { font-size: clamp(48px, 12vw, 80px); }
  .it-intro { font-size: 16px; }
  .it-workspace { width: min(100%, 460px); justify-self: center; }
  .it-window strong { font-size: 13px; }
  .it-needs, .it-services { padding-top: 50px; }
  .it-heading-row { grid-template-columns: 1fr; gap: 20px; }
  .it-need { font-size: 16px; padding: 17px; gap: 20px; }
  .it-guidance { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
  .it-service-grid { grid-template-columns: 1fr; gap: 12px; }
  .it-process { margin-top: 50px; padding: 40px 0; }
  .it-process ol { grid-template-columns: 1fr; gap: 30px; }
  .it-faq { grid-template-columns: 1fr; gap: 25px; padding: 50px 0; }
  .it-contact { grid-template-columns: 1fr; padding: 32px 24px; gap: 30px; }
  .it-contact-mark { width: 150px; justify-self: center; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { .it-window { animation: none; } }
.motion-disabled .it-window { animation: none; }