/* Page-specific styles for Our Work. Uses shared tokens and components from assets/css/styles.css. */
.our-work-page { color: #10213d; }
.ow-hero { overflow: hidden; position: relative; background: radial-gradient(ellipse at 78% 45%, #edf6ff 0, #f6faff 32%, #fff 73%); border-bottom: 1px solid #e8eff8; }
.ow-hero-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(24px, 3.4vw, 58px); padding-top: clamp(54px, 6vw, 88px); padding-bottom: clamp(46px, 5vw, 72px); }
.ow-hero-copy { position: relative; z-index: 1; }
.ow-hero-copy h1 { max-width: 760px; margin: 18px 0 22px; color: #0c1d38; font-size: clamp(2.7rem, 5.1vw, 4.65rem); line-height: .99; letter-spacing: -.055em; }
.ow-hero-copy h1 span { color: #2878d0; }
.ow-lede { max-width: 650px; color: #536985; font-size: clamp(1rem, 1.22vw, 1.18rem); line-height: 1.75; }
.ow-hero-visual { min-width: 0; }
.ow-hero-visual img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 28px rgba(39, 100, 166, .08)); }
.ow-hero-visual p { margin: 8px 10px 0; color: #73849a; font-size: .75rem; text-align: right; }
.ow-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 28px; color: #566b84; font-size: .86rem; font-weight: 650; }
.ow-proof i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #08a49b; }
.ow-projects { background: #fff; }
.ow-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 28px; }
.ow-section-heading h2, .ow-workflow h2, .ow-cta h2 { max-width: 680px; margin: 10px 0 0; color: #10213d; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -.04em; }
.ow-section-heading > p { max-width: 440px; margin: 0 0 4px; color: #60738c; line-height: 1.7; }
.ow-project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ow-project-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(210px, .9fr); align-items: center; gap: 14px; min-width: 0; padding: clamp(20px, 2vw, 28px); border: 1px solid #e5edf7; border-radius: 22px; background: linear-gradient(145deg, #fff 40%, #f7fbff); box-shadow: 0 12px 34px rgba(24, 62, 105, .055); }
.ow-latest { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; color: #087f7c; background: #dcf8f3; font-size: .72rem; font-weight: 800; letter-spacing: .06em; }
.ow-latest span { font-size: .62rem; }
.ow-project-copy h3 { margin: 14px 0 9px; color: #10213d; font-size: clamp(1.35rem, 1.7vw, 1.8rem); line-height: 1.16; letter-spacing: -.035em; }
.ow-project-type { margin: 0 0 10px; color: #2476c7; font-size: .72rem; font-weight: 800; letter-spacing: .065em; }
.ow-meta { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; color: #5d718b; font-size: .8rem; font-weight: 650; }
.ow-project-copy > p:not(.ow-meta):not(.ow-project-type) { color: #5b6e86; font-size: .94rem; line-height: 1.65; }
.ow-project-image { min-width: 0; padding: 8px; border-radius: 18px; background: radial-gradient(ellipse at center, #e9f5ff 0, #f6fbff 70%); }
.ow-project-image img { display: block; width: 100%; height: auto; border-radius: 12px; }
.ow-project-image small { display: block; margin: 4px 4px 0; color: #7b8ca1; font-size: .68rem; text-align: right; }
.ow-workflow { background: #f5f9fe; }
.ow-workflow-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 7vw, 100px); align-items: start; }
.ow-workflow-layout > div > p:not(.eyebrow) { max-width: 490px; margin: 18px 0 26px; color: #5b6e86; line-height: 1.75; }
.ow-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ow-steps li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border: 1px solid #e2ebf6; border-radius: 15px; background: #fff; }
.ow-steps li > span { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; color: #1f70c5; background: #e8f3ff; font-size: .8rem; font-weight: 800; }
.ow-steps strong { display: block; margin: 1px 0 5px; color: #142744; }
.ow-steps small { display: block; color: #667992; font-size: .9rem; line-height: 1.55; }
.ow-cta { padding: clamp(48px, 6vw, 78px) 0; background: #fff; }
.ow-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: clamp(26px, 4vw, 48px); border: 1px solid #e0ebf8; border-radius: 24px; background: linear-gradient(110deg, #f5faff, #fff 68%); }
.ow-cta h2 { font-size: clamp(1.9rem, 3vw, 2.65rem); }
.ow-cta-inner > div > p:not(.eyebrow) { max-width: 680px; color: #60738c; line-height: 1.65; }
@media (max-width: 1000px) { .ow-hero-grid { grid-template-columns: 1fr; } .ow-hero-copy { max-width: 780px; } .ow-hero-visual { max-width: 850px; margin: 0 auto; } .ow-project-grid { grid-template-columns: 1fr; } .ow-project-card { grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr); } }
@media (max-width: 680px) { .ow-hero-grid { padding-top: 42px; padding-bottom: 36px; gap: 22px; } .ow-hero-copy h1 { font-size: clamp(2.5rem, 11vw, 3.6rem); } .ow-proof { gap: 8px; font-size: .76rem; } .ow-hero-visual p { text-align: left; } .ow-section-heading { display: block; } .ow-section-heading > p { margin-top: 14px; } .ow-project-card { grid-template-columns: 1fr; padding: 20px; } .ow-project-image { order: -1; } .ow-project-copy h3 { font-size: 1.55rem; } .ow-workflow-layout { grid-template-columns: 1fr; gap: 28px; } .ow-cta-inner { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .our-work-page * { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }