/*
Theme Name: TeMetaTech
Theme URI: https://temetatech.com
Author: TeMetaTech
Author URI: https://temetatech.com
Description: Official WordPress theme for TeMetaTech — technology studio site with dynamic Jobs, Products, Blog, secure contact & application handling. Design, navigation and content preserved from the original static site.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: temetatech
*/

/* ==========================================================================
   Original site design below — UNCHANGED from the supplied static styles.css
   ========================================================================== */

 .services-home {
     background: #edf3f9
 }

 .services-section-head {
     margin-bottom: 48px
 }

 .services-hover-layout {
     display: grid;
     grid-template-columns: 1.05fr .95fr;
     gap: 8%;
     align-items: start
 }

 .service-list {
     border-top: 1px solid #cbd7e3
 }

 .service-row {
     display: grid;
     grid-template-columns: 50px 1fr auto 30px;
     gap: 14px;
     align-items: center;
     padding: 24px 18px;
     border-bottom: 1px solid #cbd7e3;
     transition: background .3s, color .3s, padding .3s, transform .3s
 }

 .service-row:hover,
 .service-row:focus-visible,
 .service-row.active {
     background: var(--blue);
     padding-left: 25px;
     padding-right: 25px;
     outline: 0
 }

 .service-no,
 .service-note {
     font: 600 14px var(--sans);
     text-transform: none;
     color: #718297
 }

 .service-row.active .service-no,
 .service-row.active .service-note {
     color: #35649b
 }

 .service-row h3 {
     font-size: 22px;
     letter-spacing: -.05em;
     margin: 0
 }

 .service-note {
     text-align: right
 }

 .service-arrow {
     font-size: 21px;
     color: var(--blue-dark);
     transition: transform .3s
 }

 .service-row:hover .service-arrow,
 .service-row.active .service-arrow {
     transform: translate(3px, -3px)
 }

 .service-preview {
     position: sticky;
     top: 105px;
     aspect-ratio: 1/1;
     min-height: 0;
     background: var(--ink);
     color: #fff;
     overflow: hidden;
     padding: 30px;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     isolation: isolate
 }

 .service-preview:before {
     content: "";
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(108, 167, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 167, 255, .12) 1px, transparent 1px);
     background-size: 42px 42px;
     mask-image: linear-gradient(to bottom, black, transparent);
     opacity: .55;
     z-index: 1
 }

 .preview-image-wrap {
     position: absolute;
     inset: 0;
     z-index: 0;
     overflow: hidden;
     background: #10253e
 }

 .preview-image-wrap:after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(7, 17, 31, .05), rgba(7, 17, 31, .14) 35%, rgba(7, 17, 31, .95) 100%)
 }

 .preview-image {
     height: 100%;
     width: 100%;
     object-fit: cover;
     object-position: center;
     display: block;
     filter: saturate(.75);
     transition: transform .8s ease, filter .5s
 }

 .service-preview:hover .preview-image {
     transform: scale(1.06);
     filter: saturate(1)
 }

 .preview-copy {
     position: relative;
     z-index: 2;
     margin-top: auto
 }

 .preview-copy .eyebrow {
     margin-bottom: 14px
 }

 .preview-title {
     font-size: clamp(26px, 3vw, 40px);
     letter-spacing: -.07em;
     line-height: 1.05;
     margin: 0 0 11px
 }

 .preview-description {
     max-width: 420px;
     color: #d2deeb;
     font-size: 13px;
     margin: 0 0 21px
 }

 .preview-copy .text-link {
     color: var(--blue)
 }

 .preview-refresh .preview-image {
     animation: previewImageIn .55s cubic-bezier(.2, .75, .3, 1)
 }

 .preview-refresh .preview-copy {
     animation: previewCopyIn .45s ease both
 }

 @keyframes previewImageIn {
     from {
         opacity: .15;
         transform: scale(1.12) translateY(10px)
     }

     to {
         opacity: 1;
         transform: scale(1.06)
     }
 }

 @keyframes previewCopyIn {
     from {
         opacity: 0;
         transform: translateY(12px)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 @media(max-width:900px) {
     .services-hover-layout {
         grid-template-columns: 1fr;
         gap: 35px
     }

     .service-preview {
         position: relative;
         top: auto;
         aspect-ratio: 1.4/1
     }

     .service-note {
         display: none
     }
 }

 @media(max-width:650px) {
     .service-row {
         grid-template-columns: 35px 1fr 25px;
         padding: 18px 12px
     }

     .service-row:hover,
     .service-row:focus-visible,
     .service-row.active {
         padding-left: 18px;
         padding-right: 18px
     }

     .service-row h3 {
         font-size: 17px
     }

     .service-preview {
         aspect-ratio: 1/1;
         padding: 22px
     }

     .preview-description {
         font-size: 12px
     }
 }

 :root {
     --blue: #6daafd;
     --blue-dark: #3f83df;
     --ink: #07111f;
     --muted: #708096;
     --line: #dfe7f0;
     --paper: #f6f9fc;
     --white: #fff;
     --mono: "DM Mono", monospace;
    --sans: "Plus Jakarta Sans", sans-serif;
    --display: "Space Grotesk", sans-serif
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     margin: 0;
     background: var(--paper);
     color: var(--ink);
     font-family: var(--sans);
    font-size: 16px;
     line-height: 1.65
 }

 body:before {
     content: "";
     position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 100;
     opacity: .03;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")
 }

 a {
     color: inherit;
     text-decoration: none
 }

 button {
     font: inherit;
     cursor: pointer
 }

 .container {
     width: min(1160px, calc(100% - 64px));
     margin: auto
 }

 .section {
     padding: 130px 0
 }

 .dark-section {
     background: var(--ink);
     color: var(--white)
 }

 .eyebrow {
     font: 600 16px var(--sans);
     letter-spacing: 0;
     text-transform: none;
     color: var(--blue-dark);
     margin: 0 0 25px
 }

 .dark-section .eyebrow,
 .hero .eyebrow {
     color: #a8cdfb
 }

 .eyebrow span {
     margin: 0 7px;
     color: var(--blue)
 }

 h1,
 h2,
 h3,
 p {
     margin-top: 0
 }

 h1,
 h2,
 h3,
 .display {
     font-family: var(--display)
 }

 .display {
     font-size: clamp(46px, 5.5vw, 80px);
     line-height: 1.03;
     letter-spacing: -.065em;
     margin: 0;
     font-weight: 700
 }

 .display em,
 h1 em {
     color: var(--blue);
     font-style: normal
 }

 .text-link {
     display: inline-flex;
     align-items: center;
     gap: 13px;
     color: var(--blue-dark);
     font-size: 13px;
     font-weight: 800
 }

 .dark-section .text-link {
     color: var(--blue)
 }

 .text-link span {
     font-size: 20px;
     line-height: 0;
     transition: transform .25s
 }

 .text-link:hover span {
     transform: translateX(5px)
 }

 .btn {
     display: inline-flex;
     align-items: center;
     gap: 28px;
     padding: 15px 20px;
     font-size: 12px;
     font-weight: 800;
     transition: all .25s
 }

 .btn span {
     font-size: 19px;
     line-height: 0
 }

 .btn-primary {
     background: var(--blue);
     color: var(--ink)
 }

 .btn-primary:hover {
     background: #a8cdfb;
     transform: translateY(-3px)
 }

 .btn-outline {
     border: 1px solid rgba(255, 255, 255, .33);
     color: #fff
 }

 .btn-outline:hover {
     border-color: var(--blue);
     background: var(--blue);
     color: var(--ink)
 }

 .btn-dark {
     background: var(--ink);
     color: #fff
 }

 .btn-dark:hover {
     background: #172b45;
     transform: translateY(-3px)
 }

 .reveal {
     opacity: 0;
     transform: translateY(22px);
     transition: opacity .7s ease, transform .7s ease
 }

 .reveal.visible {
     opacity: 1;
     transform: none
 }

 .delay-1 {
     transition-delay: .1s
 }

 .delay-2 {
     transition-delay: .2s
 }

 .delay-3 {
     transition-delay: .3s
 }

 .cursor-glow {
     position: fixed;
     width: 220px;
     height: 220px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(109, 170, 253, .18), transparent 68%);
     pointer-events: none;
     z-index: 2;
     transform: translate(-50%, -50%);
     opacity: 0;
     transition: opacity .3s
 }

 .site-nav {
     height: 82px;
     display: flex;
     align-items: center;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 20;
     color: #fff;
     transition: background-color .25s ease
 }

 .site-nav.is-scrolled {
     background-color: #6EAAFD
 }

 .site-nav .container {
     display: flex;
     align-items: center;
     justify-content: space-between
 }

 .brand {
     display: flex;
     gap: 11px;
     align-items: center;
     font-size: 21px;
     font-weight: 800;
     letter-spacing: -.06em
 }

 .brand-mark {
     display: grid;
     place-items: center;
     width: 38px;
     height: 38px;
     background: var(--blue);
     color: var(--ink);
     font-size: 21px;
     border-radius: 0;
     font-weight: 800
 }

 .nav-links {
     display: flex;
     gap: 26px;
     align-items: center
 }

 .primary-menu,
 .primary-menu ul {
     display: flex;
     align-items: center;
     gap: 26px;
     list-style: none;
     margin: 0;
     padding: 0
 }

 .primary-menu li {
     position: relative
 }

 .primary-menu li.menu-item-has-children > a::after {
     content: "";
     display: inline-block;
     width: 6px;
     height: 6px;
     margin: 0 0 3px 8px;
     border-right: 1px solid currentColor;
     border-bottom: 1px solid currentColor;
     transform: rotate(45deg);
     transition: transform .2s ease
 }

 .primary-menu li.menu-item-has-children:hover > a::after,
 .primary-menu li.menu-item-has-children:focus-within > a::after,
 .primary-menu li.submenu-open > a::after {
     transform: rotate(180deg)
 }

 .submenu-toggle {
     display: none
 }

 .submenu-toggle::before {
     content: "";
     display: inline-block;
     width: 6px;
     height: 6px;
     margin-bottom: 3px;
     border-right: 1px solid currentColor;
     border-bottom: 1px solid currentColor;
     transform: rotate(45deg);
     transition: transform .2s ease
 }

 .primary-menu .sub-menu {
     display: none;
     position: absolute;
     top: 100%;
     left: -16px;
     min-width: 180px;
     padding: 18px 16px 12px;
     background: var(--ink);
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
     box-shadow: 0 12px 30px rgba(0, 0, 0, .2)
 }

 .primary-menu li:hover > .sub-menu,
 .primary-menu li:focus-within > .sub-menu {
     display: flex
 }

 .nav-links a {
     font-size: 14px;
     color: rgba(255, 255, 255, .76);
     transition: color .2s
 }

 .nav-links a:hover,
 .nav-links a.active {
     color: #fff
 }

 .nav-contact {
     padding: 10px 15px;
     border: 1px solid rgba(255, 255, 255, .35);
     color: #fff !important
 }

 .nav-contact:hover {
     background: var(--blue);
     border-color: var(--blue);
     color: var(--ink) !important
 }

 .menu-toggle {
     display: none;
     background: none;
     border: 0;
     color: #fff;
     font-size: 25px
 }

 .hero {
     height: min(860px, 100vh);
     min-height: 680px;
     background: var(--ink);
     color: #fff;
     position: relative;
     overflow: hidden
 }

 .hero-slide {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     opacity: 0;
     visibility: hidden;
     transition: opacity 1s ease;
     isolation: isolate
 }

 .hero-slide:before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(4, 13, 25, .97) 0%, rgba(4, 13, 25, .74) 42%, rgba(4, 13, 25, .12) 100%), var(--hero-image) center/cover;
     z-index: -2
 }

 .hero-slide:after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(0deg, rgba(4, 13, 25, .7), transparent 40%);
     z-index: -1
 }

 .hero-slide.is-active {
     opacity: 1;
     visibility: visible
 }

 .hero-inner {
     padding-top: 90px
 }

 .hero h1 {
     font-size: clamp(62px, 9vw, 132px);
     line-height: .91;
     letter-spacing: -.09em;
     margin: 0 0 34px;
     max-width: 850px
 }

 .hero-copy {
     max-width: 470px;
     color: rgba(255, 255, 255, .7);
     font-size: 16px
 }

 .hero-actions {
     display: flex;
     align-items: center;
     gap: 28px;
     margin-top: 40px
 }

 .hero-controls {
     position: absolute;
     bottom: 72px;
     left: 0;
     right: 0;
     display: flex;
     justify-content: space-between;
     align-items: center
 }

 .slider-dots {
     display: flex;
     gap: 9px
 }

 .slider-dot {
     width: 35px;
     height: 3px;
     background: rgba(255, 255, 255, .3);
     border: 0;
     padding: 0;
     transition: background .3s;
     width: 34px
 }

 .slider-dot.is-active {
     background: var(--blue)
 }

 .slide-count {
     display: flex;
     align-items: center;
     gap: 13px;
     font: 11px var(--mono);
     color: rgba(255, 255, 255, .55)
 }

 .slide-count span:first-child {
     color: #fff
 }

 .slide-count i {
     width: 70px;
     height: 1px;
     background: rgba(255, 255, 255, .35)
 }

 .scroll-cue {
     position: absolute;
     right: 32px;
     bottom: 74px;
     writing-mode: vertical-rl;
     text-transform: uppercase;
     font: 10px var(--mono);
     letter-spacing: .15em;
     color: rgba(255, 255, 255, .52)
 }

 .scroll-cue span {
     font-size: 17px;
     margin-top: 10px;
     color: var(--blue)
 }

 .split-grid {
     display: grid;
     grid-template-columns: 1.1fr .9fr;
     gap: 100px;
     align-items: end
 }

 .intro-copy {
     font-size: 19px;
     max-width: 390px;
     color: #526277
 }

 .intro-copy p {
     margin-bottom: 30px
 }

 .stats-row {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     border-top: 1px solid var(--line);
     margin-top: 115px;
     padding-top: 28px
 }

 .stat {
     display: flex;
     flex-direction: column;
     gap: 8px
 }

 .stat strong {
     font-size: 48px;
     letter-spacing: -.08em;
     line-height: 1
 }

 .stat strong:after {
     content: "+";
     color: var(--blue)
 }

 .stat span {
     font: 10px var(--mono);
     text-transform: uppercase;
     letter-spacing: .08em;
     color: var(--muted)
 }

 .section-head {
     display: flex;
     justify-content: space-between;
     align-items: end;
     gap: 60px;
     margin-bottom: 60px
 }

 .section-note {
     max-width: 355px;
     color: #8896a7;
     font-size: 14px;
     margin: 0
 }

 .capability-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     border-top: 1px solid rgba(255, 255, 255, .14);
     border-left: 1px solid rgba(255, 255, 255, .14)
 }

 .capability-card {
     min-height: 270px;
     padding: 25px 27px;
     position: relative;
     border-right: 1px solid rgba(255, 255, 255, .14);
     border-bottom: 1px solid rgba(255, 255, 255, .14);
     transition: background .3s, transform .3s
 }

 .capability-card:hover {
     background: #101f33;
     transform: translateY(-5px)
 }

 .card-number {
     font: 10px var(--mono);
     color: #718096
 }

 .capability-icon {
     font-size: 29px;
     color: var(--blue);
     position: absolute;
     right: 25px;
     top: 22px
 }

 .capability-card h3 {
     font-size: 20px;
     letter-spacing: -.04em;
     margin: 82px 0 8px
 }

 .capability-card p {
     color: #8795a8;
     font-size: 13px;
     max-width: 230px;
     margin: 0
 }

 .card-arrow {
     position: absolute;
     bottom: 25px;
     right: 27px;
     color: var(--blue);
     font-size: 20px
 }

 .footprint-section {
     overflow: hidden
 }

 .footprint-controls {
     display: flex;
     gap: 9px
 }

 .icon-button {
     border: 1px solid var(--line);
     background: transparent;
     width: 39px;
     height: 39px;
     color: var(--ink);
     transition: .2s
 }

 .icon-button:hover {
     background: var(--ink);
     color: #fff
 }

 .marquee-wrap {
     overflow: hidden
 }

 .marquee-track {
     display: flex;
     gap: 20px;
     width: max-content;
     transition: transform .5s ease
 }

 .place-card {
     width: 270px;
     height: 330px;
     padding: 18px;
     background: #e9f1fa;
     position: relative;
     overflow: hidden;
     transition: transform .3s
 }

 .place-card:hover {
     transform: translateY(-7px)
 }

 .place-card span {
     font: 10px var(--mono);
     color: #60738c;
     position: relative;
     z-index: 2
 }

 .place-image {
     position: absolute;
     inset: 0;
     background-image: var(--place-image);
     background-size: cover;
     background-position: center;
     opacity: .83;
     mix-blend-mode: multiply;
     transition: transform .5s
 }

 .place-card:hover .place-image {
     transform: scale(1.08)
 }

 .place-card:after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(0deg, rgba(6, 16, 29, .93), transparent 70%)
 }

 .place-card h3,
 .place-card p {
     position: absolute;
     left: 18px;
     z-index: 2;
     color: #fff
 }

 .place-card h3 {
     bottom: 37px;
     margin: 0;
     font-size: 23px;
     letter-spacing: -.05em
 }

 .place-card p {
     bottom: 17px;
     margin: 0;
     color: #bdd0e5;
     font: 10px var(--mono);
     text-transform: uppercase
 }

 .footprint-note {
     display: flex;
     justify-content: space-between;
     margin-top: 27px;
     color: #8492a4;
     font-size: 13px
 }

 .footprint-note p {
     margin: 0
 }

 .footprint-note span {
     font: 10px var(--mono);
     text-transform: uppercase
 }

 .footprint-note i {
     font-style: normal;
     color: var(--blue);
     padding: 0 8px
 }

 .manifesto-section {
     background: linear-gradient(120deg, #07111f, #0c1b2e);
     position: relative;
     overflow: hidden
 }

 .manifesto-section:after {
     content: "TEMT";
     position: absolute;
     font-size: 32vw;
     font-weight: 800;
     letter-spacing: -.16em;
     right: -3vw;
     bottom: -.21em;
     color: rgba(109, 170, 253, .045);
     line-height: 1
 }

 .manifesto {
     position: relative;
     z-index: 1
 }

 .manifesto h2 {
     max-width: 800px
 }

 .manifesto-copy {
     max-width: 410px;
     color: #94a4b7;
     margin: 35px 0
 }

 .story-grid {
     display: grid;
     grid-template-columns: 1.3fr .85fr .85fr;
     gap: 18px
 }

 .story-card {
     display: block;
     background: #e9f1fa;
     overflow: hidden
 }

 .story-image {
     height: 270px;
     background-position: center;
     background-size: cover;
     filter: saturate(.65);
     transition: transform .6s, filter .4s
 }

 .story-large .story-image {
     height: 350px
 }

 .story-card:hover .story-image {
     transform: scale(1.05);
     filter: saturate(1)
 }

 .story-meta {
     padding: 23px 24px;
     position: relative
 }

 .story-meta span {
     font: 10px var(--mono);
     text-transform: uppercase;
     color: #617389
 }

 .story-meta h3 {
     font-size: 18px;
     line-height: 1.25;
     letter-spacing: -.045em;
     max-width: 230px;
     margin: 13px 0 3px
 }

 .story-large .story-meta h3 {
     font-size: 23px;
     max-width: 420px
 }

 .story-meta b {
     position: absolute;
     right: 24px;
     bottom: 25px;
     color: var(--blue-dark);
     font-size: 24px
 }

 .faq-section {
     background: #edf3f9
 }

 .faq-layout {
     display: grid;
     grid-template-columns: .8fr 1.2fr;
     gap: 120px
 }

 .faq-list details {
     border-top: 1px solid #cbd7e3;
     padding: 22px 0
 }

 .faq-list details:last-child {
     border-bottom: 1px solid #cbd7e3
 }

 .faq-list summary {
     list-style: none;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     font-size: 16px;
     font-weight: 700;
     letter-spacing: -.02em
 }

 .faq-list summary::-webkit-details-marker {
     display: none
 }

 .faq-list summary span {
     font-size: 23px;
     font-weight: 400;
     color: var(--blue-dark);
     transition: transform .2s
 }

 .faq-list details[open] summary span {
     transform: rotate(45deg)
 }

 .faq-list p {
     color: #6a7a8d;
     max-width: 560px;
     margin: 14px 30px 0 0;
     font-size: 14px
 }

 .cta-section {
     background: var(--blue);
     padding: 115px 0
 }

 .cta-inner {
     position: relative
 }

 .cta-section .eyebrow {
     color: #2d65ae
 }

 .cta-section .display {
     max-width: 650px
 }

 .cta-section .btn {
     position: absolute;
     right: 0;
     bottom: 8px
 }

 .site-footer {
     background: var(--ink);
     color: #fff;
     padding: 72px 0 30px
 }

 .footer-top {
     display: flex;
     justify-content: space-between;
     gap: 50px
 }

 .footer-tagline {
     font-size: 25px;
     letter-spacing: -.05em;
     max-width: 250px;
     margin: 24px 0
 }

 .footer-grid {
     display: grid;
     grid-template-columns: repeat(3, 130px);
     gap: 30px
 }

 .footer-grid h4 {
     font: 10px var(--mono);
     color: var(--blue);
     text-transform: uppercase;
     margin: 0 0 18px
 }

 .footer-grid a {
     display: block;
     font-size: 12px;
     color: #8292a6;
     margin: 9px 0
 }

 .footer-grid a:hover {
     color: #fff
 }

 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, .13);
     margin-top: 70px;
     padding-top: 20px;
     display: flex;
     justify-content: space-between;
     color: #66778d;
     font: 14px var(--sans);
     letter-spacing: 0;
     text-transform: none
 }

 .footer-bottom span {
     color: var(--blue)
 }

 .page-hero {
     background: var(--ink);
     color: #fff;
     padding: 180px 0 100px;
     position: relative;
     overflow: hidden
 }

 .page-hero:after {
     content: "";
     position: absolute;
     width: 500px;
     height: 500px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(109, 170, 253, .22), transparent 67%);
     right: 5%;
     top: 0
 }

 .page-hero .container {
     position: relative;
     z-index: 1
 }

 .page-hero h1 {
     font-size: clamp(58px, 9vw, 130px);
     line-height: .9;
     letter-spacing: -.09em;
     margin: 0;
     max-width: 800px
 }

 .page-hero p:not(.eyebrow) {
     max-width: 480px;
     margin: 34px 0 0;
     color: #9baabc;
     font-size: 17px
 }

 .page-content {
     padding: 110px 0
 }

 .long-copy {
     max-width: 720px;
     font-size: 20px;
     line-height: 1.6;
     color: #53657a
 }

 .quote-block {
     border-left: 2px solid var(--blue);
     padding: 10px 0 10px 30px;
     font-size: 29px;
     line-height: 1.25;
     letter-spacing: -.05em;
     max-width: 700px;
     margin: 70px 0
 }

 .about-grid,
 .mission-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: start
 }

 .image-panel {
     min-height: 480px;
     background-size: cover;
     background-position: center
 }

 .pill-list {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-top: 30px
 }

 .pill {
     padding: 7px 11px;
     border: 1px solid #d6e0ea;
     color: #65768a;
     font: 10px var(--mono);
     text-transform: uppercase
 }

 .timeline {
     border-top: 1px solid var(--line);
     margin-top: 80px
 }

 .timeline-row {
     display: grid;
     grid-template-columns: 130px 1fr 2fr;
     gap: 30px;
     padding: 25px 0;
     border-bottom: 1px solid var(--line)
 }

 .timeline-row span {
     font: 11px var(--mono);
     color: var(--blue-dark)
 }

 .timeline-row h3 {
     font-size: 20px;
     margin: 0
 }

 .timeline-row p {
     margin: 0;
     color: #6e7e91;
     font-size: 14px
 }

 .tech-filter {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-bottom: 45px
 }

 .filter-btn {
     border: 1px solid var(--line);
     background: transparent;
     padding: 10px 15px;
     font: 10px var(--mono);
     text-transform: uppercase;
     color: #67778a
 }

 .filter-btn.active,
 .filter-btn:hover {
     background: var(--ink);
     color: #fff;
     border-color: var(--ink)
 }

 .tech-stack {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px
 }

 .tech-card {
     border: 1px solid var(--line);
     padding: 25px;
     min-height: 220px;
     transition: .3s
 }

 .tech-card:hover {
     border-color: var(--blue);
     box-shadow: 0 15px 40px rgba(33, 74, 117, .09);
     transform: translateY(-4px)
 }

 .tech-card .tech-icon {
     font-size: 24px;
     color: var(--blue-dark);
     margin-bottom: 30px
 }

 .tech-card h3 {
     margin: 0 0 8px;
     font-size: 18px
 }

 .tech-card p {
     color: #78889a;
     font-size: 13px;
     margin: 0
 }

 .tech-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     margin-top: 18px
 }

 .tech-tags span {
     background: #edf3f9;
     padding: 4px 7px;
     font: 9px var(--mono);
     color: #66778a
 }

 .product-grid,
 .blog-grid,
 .event-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px
 }

 .product-card {
     border: 1px solid var(--line);
     background: #fff
 }

 .product-card .product-image,
 .blog-card .blog-image {
     height: 230px;
     background-size: cover;
     background-position: center
 }

 .product-info {
     padding: 25px
 }

 .product-info span,
 .blog-card span {
     font: 600 14px var(--sans);
     color: var(--blue-dark);
     text-transform: none
 }

 .product-info h3,
 .blog-card h3 {
     font-size: 23px;
     line-height: 1.1;
     letter-spacing: -.05em;
     margin: 15px 0
 }

 .product-info p,
 .blog-card p {
     color: #738397;
     font-size: 13px
 }

 .product-result {
     display: flex;
     gap: 20px;
     margin-top: 23px;
     font: 10px var(--mono);
     color: #6b7b8f
 }

 .partner-logos {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1px;
     background: var(--line);
     margin-top: 70px
 }

 .partner-logo {
     background: var(--paper);
     min-height: 130px;
     display: grid;
     place-items: center;
     font-size: 18px;
     font-weight: 800;
     letter-spacing: -.06em;
     color: #6b7c91
 }

 .partner-logo span {
     font-size: 10px;
     color: var(--blue-dark);
     margin-right: 5px
 }

 .job-list {
     border-top: 1px solid var(--line)
 }

 .job-row {
     display: grid;
     grid-template-columns: 1.5fr 1fr 1fr auto;
     align-items: center;
     gap: 25px;
     padding: 22px 0;
     border-bottom: 1px solid var(--line)
 }

 .job-row h3 {
     font-size: 17px;
     margin: 0
 }

 .job-row span {
     font: 10px var(--mono);
     text-transform: uppercase;
     color: #738397
 }

 .job-row a {
     color: var(--blue-dark);
     font-size: 20px
 }

 .contact-grid {
     display: grid;
     grid-template-columns: .85fr 1.15fr;
     gap: 100px
 }

 .contact-details {
     border-top: 1px solid var(--line)
 }

 .contact-item {
     padding: 21px 0;
     border-bottom: 1px solid var(--line)
 }

 .contact-item span {
     display: block;
     font: 10px var(--mono);
     text-transform: uppercase;
     color: var(--blue-dark);
     margin-bottom: 8px
 }

 .contact-item a,
 .contact-item p {
     font-size: 17px;
     margin: 0
 }

 .contact-form {
     background: #edf3f9;
     padding: 35px
 }

 .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 15px
 }

 .field {
     margin-bottom: 17px
 }

 .field label {
     display: block;
     font: 10px var(--mono);
     text-transform: uppercase;
     color: #62748a;
     margin-bottom: 7px
 }

 .field input,
 .field textarea,
 .field select {
     width: 100%;
     padding: 13px 14px;
     border: 1px solid #d1dce7;
     background: #fff;
     font: 13px var(--sans);
     color: var(--ink);
     outline: none
 }

 .field textarea {
     min-height: 130px;
     resize: vertical
 }

 .field input:focus,
 .field textarea:focus,
 .field select:focus {
     border-color: var(--blue-dark)
 }

 .form-message {
     display: none;
     color: #2b6a46;
     font-size: 13px;
     margin-top: 15px
 }

 .blog-card {
     background: #fff;
     border: 1px solid var(--line)
 }

 .blog-card .blog-info {
     padding: 23px
 }

 .blog-card h3 {
     font-size: 20px
 }

 .blog-card:hover .blog-image {
     filter: saturate(1.2)
 }

 .article-head {
     max-width: 820px;
     margin-bottom: 55px
 }

 .article-head h1 {
     font-size: clamp(46px, 7vw, 92px);
     line-height: .95;
     letter-spacing: -.08em;
     margin: 0
 }

 .article-meta {
     display: flex;
     gap: 25px;
     font: 10px var(--mono);
     text-transform: uppercase;
     color: #708096;
     margin: 27px 0
 }

 .article-image {
     height: 500px;
     background-size: cover;
     background-position: center;
     margin-bottom: 60px
 }

 .article-body {
     max-width: 700px;
     margin: auto;
     font-size: 17px;
     color: #53657a
 }

 .article-body h2 {
     font-size: 32px;
     line-height: 1.1;
     color: var(--ink);
     letter-spacing: -.06em;
     margin-top: 55px
 }

 .article-body p {
     margin-bottom: 23px
 }

 .event-card {
     background: var(--ink);
     color: #fff;
     padding: 25px;
     min-height: 300px;
     display: flex;
     flex-direction: column;
     justify-content: space-between
 }

 .event-card.is-highlight {
     background: var(--blue);
     color: var(--ink)
 }

 .event-date {
     font: 10px var(--mono);
     color: var(--blue);
     text-transform: uppercase
 }

 .is-highlight .event-date {
     color: #305e9e
 }

 .event-card h3 {
     font-size: 27px;
     line-height: 1.05;
     letter-spacing: -.06em;
     margin: 20px 0 10px
 }

 .event-card p {
     font-size: 13px;
     color: #91a1b4;
     margin: 0
 }

 .is-highlight p {
     color: #305e77
 }

 .event-card b {
     align-self: end;
     font-size: 25px;
     color: var(--blue)
 }

 .is-highlight b {
     color: var(--ink)
 }

 .tmt-event-gallery-field { margin: 20px 0; }
 #tmt-event-gallery-preview { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 12px; }
 .tmt-event-gallery-item { position: relative; width: 100px; padding: 4px; border: 1px solid #ccd6e0; background: #fff; }
 .tmt-event-gallery-item img { display: block; width: 90px; height: 70px; object-fit: cover; }
 .tmt-event-gallery-item .tmt-remove-gallery-image { display: block; margin-top: 4px; color: #b3261e; font-size: 11px; }

 @media(max-width:900px) {
     .nav-links {
         gap: 14px
     }

     .container {
         width: min(100% - 40px, 700px)
     }

     .section {
         padding: 90px 0
     }

     .split-grid,
     .faq-layout,
     .contact-grid,
     .about-grid,
     .mission-grid {
         grid-template-columns: 1fr;
         gap: 45px
     }

     .stats-row {
         margin-top: 75px
     }

     .capability-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .story-grid {
         grid-template-columns: 1fr 1fr
     }

     .story-large {
         grid-column: span 2
     }

     .section-head {
         align-items: start;
         flex-direction: column;
         gap: 25px
     }

     .tech-stack,
     .product-grid,
     .blog-grid,
     .event-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .cta-section .btn {
         position: static;
         margin-top: 35px
     }

     .footer-top {
         flex-direction: column
     }

     .footer-grid {
         grid-template-columns: repeat(3, 1fr)
     }
 }

 @media(max-width:650px) {
     .container {
         width: calc(100% - 36px)
     }

     .site-nav {
         height: 72px
     }

     .menu-toggle {
         display: block
     }

     .nav-links {
         display: none;
         position: absolute;
         top: 72px;
         left: 0;
         right: 0;
         padding: 25px 18px;
         background: var(--ink);
         flex-direction: column;
         align-items: flex-start
     }

     .primary-menu,
     .primary-menu ul {
         width: 100%;
         flex-direction: column;
         align-items: flex-start;
         gap: 17px
     }

     .primary-menu .sub-menu {
         display: none;
         position: static;
         min-width: 0;
         padding: 10px 0 0 18px;
         background: transparent;
         box-shadow: none;
         gap: 12px
     }

     .primary-menu li.submenu-open > .sub-menu {
         display: flex
     }

     .primary-menu li.menu-item-has-children {
         width: 100%;
         display: flex;
         flex-wrap: wrap;
         align-items: center
     }

     .primary-menu li.menu-item-has-children > a {
         flex: 1
     }

     .primary-menu li.menu-item-has-children > a::after {
         display: none
     }

     .submenu-toggle {
         display: block;
         width: 32px;
         height: 32px;
         border: 1px solid rgba(255, 255, 255, .35);
         background: transparent;
         color: #fff;
         font-size: 16px;
         line-height: 1
     }

     .submenu-toggle[aria-expanded="true"] {
         transform: none
     }

     .submenu-toggle[aria-expanded="true"]::before {
         transform: rotate(225deg);
         margin-bottom: -3px
     }

     .nav-links.open {
         display: flex
     }

     .hero {
         min-height: 650px
     }

     .hero h1 {
         font-size: 64px
     }

     .hero-copy {
         font-size: 14px
     }

     .hero-actions {
         align-items: flex-start;
         flex-direction: column;
         gap: 20px
     }

     .scroll-cue {
         display: none
     }

     .hero-controls {
         bottom: 35px
     }

     .stats-row {
         grid-template-columns: 1fr 1fr;
         gap: 30px
     }

     .stat strong {
         font-size: 38px
     }

     .capability-grid {
         grid-template-columns: 1fr
     }

     .capability-card {
         min-height: 220px
     }

     .story-grid,
     .tech-stack,
     .product-grid,
     .blog-grid,
     .event-grid {
         grid-template-columns: 1fr
     }

     .story-large {
         grid-column: auto
     }

     .story-large .story-image,
     .story-image {
         height: 240px
     }

     .footprint-note {
         display: block
     }

     .footprint-note span {
         display: block;
         margin-top: 10px
     }

     .page-hero {
         padding: 140px 0 75px
     }

     .page-hero h1 {
         font-size: 64px
     }

     .timeline-row {
         grid-template-columns: 70px 1fr;
         gap: 10px
     }

     .timeline-row p {
         grid-column: 2
     }

     .partner-logos {
         grid-template-columns: 1fr 1fr
     }

     .job-row {
         grid-template-columns: 1fr auto;
         gap: 7px
     }

     .job-row span {
         font-size: 9px
     }

     .job-row span:nth-child(3) {
         grid-column: 1
     }

     .form-row {
         grid-template-columns: 1fr
     }

     .article-image {
         height: 300px
     }

     .footer-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .footer-bottom {
         display: block;
         line-height: 2
     }

     .footer-bottom span {
         display: block;
         margin-top: 9px
     }
 }
 /* Partnership Page */
.partnership-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(109, 170, 253, 0.18),
      transparent 28%
    ),
    linear-gradient(
      120deg,
      transparent 45%,
      rgba(109, 170, 253, 0.06) 45%,
      transparent 46%
    );
}

.partner-stories {
  background: #edf3f9;
}

.partner-story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.partner-story-card {
  background: #fff;
  border: 1px solid #dbe5ee;
  overflow: hidden;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.partner-story-card:hover {
  transform: translateY(-8px);
  border-color: var(--blue);
  box-shadow: 0 22px 50px rgba(38, 82, 124, 0.14);
}

.partner-story-image {
  height: 260px;
  position: relative;
  overflow: hidden;
  background: #10253e;
}

.partner-story-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 17, 31, 0) 35%,
    rgba(7, 17, 31, 0.7) 100%
  );
}

.partner-story-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.7);
  transition:
    transform 0.7s ease,
    filter 0.45s ease;
}

.partner-story-card:hover .partner-story-image img {
  transform: scale(1.08);
  filter: saturate(1);
}

.partner-badge {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 1;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.06em;
}

.partner-story-content {
  padding: 26px 25px 25px;
}

.partner-kicker {
  margin: 0 0 14px;
  color: var(--blue-dark);
  font: 10px var(--mono);
  text-transform: uppercase;
}

.partner-story-content h3 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -0.06em;
}

.partner-story-content h4 {
  margin: 0 0 15px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.3;
}

.partner-story-content > p:not(.partner-kicker) {
  margin: 0;
  color: #708096;
  font-size: 13px;
  line-height: 1.65;
}

.partner-benefit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 23px;
}

.partner-benefit-row span {
  padding: 5px 8px;
  background: #edf3f9;
  color: #60738a;
  font: 9px var(--mono);
  text-transform: uppercase;
}

.partnership-principles {
  background: linear-gradient(120deg, #07111f, #0c1b2e);
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.principle {
  padding: 23px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.principle span {
  color: var(--blue);
  font: 10px var(--mono);
}

.principle h3 {
  margin: 48px 0 10px;
  font-size: 22px;
  letter-spacing: -0.05em;
}

.principle p {
  max-width: 260px;
  margin: 0;
  color: #8495a9;
  font-size: 13px;
}

/* Tablet */
@media (max-width: 900px) {
  .partner-story-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .partner-story-card:last-child {
    grid-column: span 2;
  }

  .principle-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 650px) {
  .partner-story-grid {
    grid-template-columns: 1fr;
  }

  .partner-story-card:last-child {
    grid-column: auto;
  }

  .principle-grid {
    grid-template-columns: 1fr;
  }

  .partner-story-image {
    height: 230px;
  }
}