/* ============================================================================ Mindrops ad landing pages (/lp/*) and the /delhi/ pages built with the same kit — one stylesheet. 2026 design system: tokens from css/mindrops-tokens.css (inlined in ), IBM Plex Sans / JetBrains Mono (the homepage theme), components matching css/mindrops-2026.css (.mr-card, .mr-kicker, .mr-faq, .mr-cta-band, .mr-footer …). Above-the-fold rules (header, hero, form, trust strip) are in lp-critical.css, inlined by includes/landing/head.php; this file is loaded without blocking render. Content sections keep their class names (shared by the declarative partials in includes/landing/ and the hand-written page sections), so one vocabulary is styled once. Class names added by JS: .lp-quiet and .lp-quiet-cookie (body), .phone-invalid (.contact-phone-group), .iti* (the intl-tel-input widget, loaded on first interaction). ========================================================================== */ /* ---- Font Awesome subset (self-hosted, only the glyphs the pages use) ---- */ @font-face{font-family:"fa-solid-subset";font-style:normal;font-weight:900;font-display:block;src:url("../fonts/fa-solid-subset.woff2?v=3") format("woff2")} @font-face{font-family:"fa-brands-subset";font-style:normal;font-weight:400;font-display:block;src:url("../fonts/fa-brands-subset.woff2?v=3") format("woff2")} .fa,.fas,.fab,.fa-solid,.fa-brands{display:inline-block;width:1.25em;text-align:center;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto;-webkit-font-smoothing:antialiased} .fa,.fas,.fa-solid{font-family:"fa-solid-subset";font-weight:900} .fab,.fa-brands{font-family:"fa-brands-subset";font-weight:400} /*FA-GLYPHS*/.fa-address-book::before{content:""}.fa-android::before{content:""}.fa-apple::before{content:""}.fa-arrow-trend-up::before{content:""}.fa-arrows-rotate::before{content:""}.fa-arrows-spin::before{content:""}.fa-award::before{content:""}.fa-bag-shopping::before{content:""}.fa-bell::before{content:""}.fa-bolt::before{content:""}.fa-box::before{content:""}.fa-boxes-stacked::before{content:""}.fa-brain::before{content:""}.fa-briefcase::before{content:""}.fa-building::before{content:""}.fa-building-columns::before{content:""}.fa-bullhorn::before{content:""}.fa-bullseye::before{content:""}.fa-calculator::before{content:""}.fa-calendar-check::before{content:""}.fa-car::before{content:""}.fa-cart-arrow-down::before{content:""}.fa-cart-shopping::before{content:""}.fa-certificate::before{content:""}.fa-chart-bar::before{content:""}.fa-chart-column::before{content:""}.fa-chart-line::before{content:""}.fa-chart-pie::before{content:""}.fa-check::before{content:""}.fa-circle-check::before{content:""}.fa-circle-minus::before{content:""}.fa-circle-nodes::before{content:""}.fa-city::before{content:""}.fa-clipboard-check::before{content:""}.fa-clipboard-list::before{content:""}.fa-cloud-arrow-up::before{content:""}.fa-code::before{content:""}.fa-cogs::before{content:""}.fa-coins::before{content:""}.fa-comment::before{content:""}.fa-comments::before{content:""}.fa-credit-card::before{content:""}.fa-cubes::before{content:""}.fa-database::before{content:""}.fa-diagram-project::before{content:""}.fa-earth-asia::before{content:""}.fa-envelope::before{content:""}.fa-expand-arrows-alt::before{content:""}.fa-eye::before{content:""}.fa-file-alt::before{content:""}.fa-file-code::before{content:""}.fa-file-contract::before{content:""}.fa-file-invoice-dollar::before{content:""}.fa-file-lines::before{content:""}.fa-file-signature::before{content:""}.fa-flask::before{content:""}.fa-gauge-high::before{content:""}.fa-gears::before{content:""}.fa-globe::before{content:""}.fa-graduation-cap::before{content:""}.fa-hamburger::before{content:""}.fa-handshake::before{content:""}.fa-headset::before{content:""}.fa-heart::before{content:""}.fa-heart-pulse::before{content:""}.fa-home::before{content:""}.fa-hospital::before{content:""}.fa-hourglass-half::before{content:""}.fa-house::before{content:""}.fa-industry::before{content:""}.fa-js::before{content:""}.fa-key::before{content:""}.fa-keyboard::before{content:""}.fa-landmark::before{content:""}.fa-language::before{content:""}.fa-laptop::before{content:""}.fa-laptop-code::before{content:""}.fa-layer-group::before{content:""}.fa-lightbulb::before{content:""}.fa-link::before{content:""}.fa-link-slash::before{content:""}.fa-list-check::before{content:""}.fa-location-dot::before{content:""}.fa-lock::before{content:""}.fa-magento::before{content:""}.fa-magnifying-glass::before{content:""}.fa-magnifying-glass-chart::before{content:""}.fa-map-location-dot::before{content:""}.fa-map-marker-alt::before{content:""}.fa-message::before{content:""}.fa-microchip::before{content:""}.fa-microphone::before{content:""}.fa-mobile-alt::before{content:""}.fa-mobile-screen::before{content:""}.fa-mobile-screen-button::before{content:""}.fa-money-bill-wave::before{content:""}.fa-motorcycle::before{content:""}.fa-network-wired::before{content:""}.fa-newspaper::before{content:""}.fa-paint-brush::before{content:""}.fa-paintbrush::before{content:""}.fa-palette::before{content:""}.fa-pen::before{content:""}.fa-pen-ruler::before{content:""}.fa-pencil-ruler::before{content:""}.fa-people-arrows::before{content:""}.fa-php::before{content:""}.fa-plane-departure::before{content:""}.fa-play-circle::before{content:""}.fa-plug::before{content:""}.fa-prescription-bottle::before{content:""}.fa-puzzle-piece::before{content:""}.fa-right-left::before{content:""}.fa-robot::before{content:""}.fa-rocket::before{content:""}.fa-rotate::before{content:""}.fa-sack-dollar::before{content:""}.fa-screwdriver-wrench::before{content:""}.fa-search::before{content:""}.fa-server::before{content:""}.fa-shield-alt::before{content:""}.fa-shield-halved::before{content:""}.fa-shopify::before{content:""}.fa-shopping-bag::before{content:""}.fa-shopping-cart::before{content:""}.fa-sitemap::before{content:""}.fa-snowflake::before{content:""}.fa-store::before{content:""}.fa-sync-alt::before{content:""}.fa-table::before{content:""}.fa-table-cells-large::before{content:""}.fa-table-columns::before{content:""}.fa-tags::before{content:""}.fa-taxi::before{content:""}.fa-thumbs-up::before{content:""}.fa-timeline::before{content:""}.fa-tools::before{content:""}.fa-truck::before{content:""}.fa-truck-fast::before{content:""}.fa-user::before{content:""}.fa-user-check::before{content:""}.fa-user-md::before{content:""}.fa-users::before{content:""}.fa-users-gear::before{content:""}.fa-utensils::before{content:""}.fa-vial::before{content:""}.fa-vials::before{content:""}.fa-whatsapp::before{content:""}.fa-window-maximize::before{content:""}.fa-wordpress::before{content:""}.fa-xmark::before{content:""}/*/FA-GLYPHS*/ /* ---- page atmosphere (as the main site, minus the film grain) ---------- */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(58vw 58vw at 8% -8%,color-mix(in srgb,var(--text-primary) 7%,transparent),transparent 60%),radial-gradient(52vw 52vw at 100% 0%,color-mix(in srgb,var(--text-secondary) 5%,transparent),transparent 60%)} /* ---- section frame ------------------------------------------------------ */ .lp-main{display:block} .lp-main>section:not(.lp-hero):not(.lp-trust){position:relative;padding:var(--section-pad) var(--lp-gut);scroll-margin-top:var(--lp-head-h)} .lp-main>section:not(.lp-hero):not(.lp-trust),.lp-footer{visibility:visible;animation:none} .lp-main>section:not(.lp-hero) h2{margin:0 0 16px;max-width:860px;font-size:clamp(28px,3.4vw,40px);font-weight:500;line-height:1.14;letter-spacing:-.025em;text-wrap:balance} .lp-main>section:not(.lp-hero) h3{font-size:20px;line-height:1.3;letter-spacing:-.01em;margin:0 0 8px} .lp-main>section:not(.lp-hero) h2+p,.section-intro,.section-intro-light,.services-intro,.why-choose-intro,.testimonials-subtitle{max-width:740px;margin:0 0 40px;font-size:17px;line-height:1.65;color:var(--text-2)} .lp-main>section:not(.lp-hero) p{color:var(--text-2)} .lp-main section p strong,.lp-main section li strong{color:var(--text);font-weight:600} .lp-main section p a:not([class]),.lp-main section li a:not([class]),.lp-main section address a,.faq-answer a{color:var(--text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--a) 70%,transparent);text-underline-offset:3px;transition:color var(--dur-fast)} .lp-main section p a:not([class]):hover,.lp-main section li a:not([class]):hover,.faq-answer a:hover{color:var(--a)} .clients-content{max-width:860px} .lp-main>section:not(.lp-hero) h2:last-child,.lp-main>section:not(.lp-hero) h2+:is(div,ul,ol){margin-bottom:0} .lp-main>section:not(.lp-hero) :is(.clients-content)>h2:last-child{margin-bottom:36px} .lp-main>section:not(.lp-hero) h2+:is(div,ul,ol){margin-top:36px} /* ---- lists used as layout ------------------------------------------------- */ .process-steps,.logos-track,.lp-foot-col ul{list-style:none;margin:0;padding:0} /* ---- grids --------------------------------------------------------------- */ .lp-quotes:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} .features-grid,.services-list,.lp-quotes,.slides{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))} :is(.features-grid,.services-list,.lp-quotes,.slides):has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} :is(.features-grid,.services-list,.lp-quotes,.slides):has(>:nth-child(1):last-child){grid-template-columns:minmax(0,1fr);max-width:760px} @media (min-width:1101px){ :is(.features-grid,.services-list,.slides):is(:has(>:nth-child(4):last-child),:has(>:nth-child(8):last-child)){grid-template-columns:repeat(4,minmax(0,1fr))} /* 7 cards: a row of 4, then a row of 3 that fills the width */ :is(.features-grid,.services-list,.slides):has(>:nth-child(7):last-child){grid-template-columns:repeat(12,minmax(0,1fr))} :is(.features-grid,.services-list,.slides):has(>:nth-child(7):last-child)>*{grid-column:span 3} :is(.features-grid,.services-list,.slides):has(>:nth-child(7):last-child)>:nth-last-child(-n +3){grid-column:span 4} } @media (min-width:1001px){ /* 3-up grid whose last row holds 2 (5, 11 …): split that row instead of leaving a hole */ :is(.features-grid,.services-list,.lp-quotes):has(>:nth-child(3n +2):last-child):not(:has(>:nth-child(2):last-child)):not(:has(>:nth-child(8):last-child)){grid-template-columns:repeat(6,minmax(0,1fr))} :is(.features-grid,.services-list,.lp-quotes):has(>:nth-child(3n +2):last-child):not(:has(>:nth-child(2):last-child)):not(:has(>:nth-child(8):last-child))>*{grid-column:span 2} :is(.features-grid,.services-list,.lp-quotes):has(>:nth-child(3n +2):last-child):not(:has(>:nth-child(2):last-child)):not(:has(>:nth-child(8):last-child))>:nth-last-child(-n +2){grid-column:span 3} } @media (min-width:1001px){ /* 3-up grid with one card left over (10, 13 …): let the last card take the row */ :is(.features-grid,.services-list,.lp-quotes):has(>:nth-child(3n +1):last-child):not(:has(>:nth-child(1):last-child)):not(:has(>:nth-child(4):last-child)):not(:has(>:nth-child(7):last-child))>:last-child{grid-column:1/-1} } @media (max-width:1000px){ .features-grid,.services-list,.lp-quotes,.slides{grid-template-columns:repeat(2,minmax(0,1fr))!important} :is(.features-grid,.services-list,.lp-quotes,.slides)>*{grid-column:auto!important} } @media (max-width:640px){ .features-grid,.services-list,.lp-quotes,.slides{grid-template-columns:minmax(0,1fr)!important} } /* ---- cards (.mr-card) ------------------------------------------------- */ .feature-card,.service-item,.step,.lp-quote{position:relative;min-width:0;padding:26px;border:1px solid transparent;border-radius:var(--r);background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(140deg,color-mix(in srgb,var(--i) 45%,transparent),color-mix(in srgb,var(--m) 16%,transparent) 44%,color-mix(in srgb,var(--text-primary) 5%,transparent) 72%) border-box;color:var(--text);transition:transform .35s var(--ease),box-shadow .35s var(--ease)} @media (hover:hover){ .feature-card:hover,.service-item:hover,.step:hover,.lp-quote:hover{transform:translateY(-4px);box-shadow:0 18px 44px color-mix(in srgb,var(--black) 45%,transparent),0 8px 30px color-mix(in srgb,var(--i) 14%,transparent)} } .card-title{margin:0 0 8px!important;font-size:18px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--text)!important} .card-title i{margin-right:6px;color:var(--a)} :is(.feature-card,.service-item,.step) p{margin:0 0 10px;font-size:15px;line-height:1.65;color:var(--text-2)} :is(.feature-card,.service-item,.step) p:last-child{margin-bottom:0} :is(.feature-card,.service-item) ul{margin:10px 0 0;padding-left:18px;font-size:15px;line-height:1.6;color:var(--text-2)} :is(.feature-card,.service-item) li+li{margin-top:6px} .feature-icon,.service-icon,.step-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:0 0 16px;border-radius:var(--radius-md);background:var(--surface-2);color:var(--text);font-size:18px;transition:background .35s var(--ease)} @media (hover:hover){:is(.feature-card,.service-item,.step):hover :is(.feature-icon,.service-icon,.step-icon){background:linear-gradient(135deg,color-mix(in srgb,var(--i) 30%,transparent),color-mix(in srgb,var(--m) 22%,transparent))}} .service-item{display:flex;flex-direction:column} /* ---- process steps ------------------------------------------------------ */ .process-steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));counter-reset:lp-step} @media (min-width:1001px){ .process-steps:is(:has(>:nth-child(4):last-child),:has(>:nth-child(8):last-child)){grid-template-columns:repeat(4,minmax(0,1fr))} .process-steps:is(:has(>:nth-child(6):last-child),:has(>:nth-child(3):last-child)){grid-template-columns:repeat(3,minmax(0,1fr))} .process-steps:has(>:nth-child(7):last-child){grid-template-columns:repeat(12,minmax(0,1fr))} .process-steps:has(>:nth-child(7):last-child)>*{grid-column:span 3} .process-steps:has(>:nth-child(7):last-child)>:nth-last-child(-n +3){grid-column:span 4} } .step{counter-increment:lp-step} .step::before{content:counter(lp-step,decimal-leading-zero);position:absolute;top:24px;right:24px;font-family:var(--lp-mono);font-size:12px;letter-spacing:.16em;color:var(--text-2)} /* ---- case studies --------------------------------------------------------- */ .pill{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--border-soft);border-radius:var(--r-pill);background:var(--surface-2);font-family:var(--lp-mono);font-size:12px;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--text-2)} /* The website's case-study card (LandingPage::workCards; source styles: css/mindrops-2026.css, "Homepage Selected work" and "Grid of cards"): 16:9 photo with headline figure and client logo, then the copy. .lp-main lifts the copy rules over the section type rules above. */ .mr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .mr-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .mr-work-grid:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} .mh-project{display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);background:var(--surface)} .mh-project-media{position:relative;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;background:#14161a;color:#fff} .mh-project-media>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:var(--photo-pos,50% 50%)} .mh-project-media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.66) 32%,rgba(0,0,0,.22) 62%,rgba(0,0,0,0) 82%),linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,0) 70%)} .mh-project-media:not(:has(.mh-project-stat))::before{display:none} .mh-project-media.is-panel{background:radial-gradient(120% 90% at 85% 100%,color-mix(in srgb,var(--primary-cobalt) 55%,#14161a) 0%,#14161a 62%)} .mh-project-media.is-diagram>img{object-fit:contain;background:#0b0d12} .mh-project-stat{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:18px 20px 0;text-shadow:0 2px 16px rgba(0,0,0,.55)} .mh-project-stat-label{font:500 10.5px/1.4 var(--lp-mono);letter-spacing:.16em;text-transform:uppercase} .mh-project-stat strong{font-size:clamp(30px,12cqi,52px);line-height:.95;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .mh-project-stat-note{max-width:70%;font-size:14px;line-height:1.35;font-weight:500} .mh-project-stat-2{max-width:70%;margin-top:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.4);font-size:13px;line-height:1.35;font-weight:500} .mh-project-stat-2 b{display:block;margin-bottom:2px;font-size:clamp(22px,8cqi,32px);line-height:1;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .mh-project-stat-tag{margin-top:6px;padding:4px 9px;border:1px solid rgba(255,255,255,.75);background:rgba(0,0,0,.35);font:500 10px/1.4 var(--lp-mono);letter-spacing:.1em;text-transform:uppercase;text-shadow:none} .mh-project-logo{position:absolute;right:14px;bottom:14px;z-index:2;display:block;line-height:0;padding:6px 10px;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.28)} .mh-project-logo img{display:block;width:auto;height:34px;max-width:110px;object-fit:contain} .mh-project-logo img+img{margin-left:12px} .mh-project-body{display:flex;flex-direction:column;flex:1;align-items:flex-start;padding:28px} .lp-main .mh-project-body .mh-eyebrow{margin:0 0 12px;font:400 10px/1.5 var(--lp-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)} .lp-main .mh-project .mh-project-body h3{margin:0 0 16px;font-size:clamp(21px,1.7vw,24px);line-height:1.2} .lp-main .mh-project-body>p:not(.mh-eyebrow){margin:0 0 12px;font-size:14px;color:var(--text-2)} .mh-project-foot{width:100%;margin-top:auto} .mh-project .mh-text-link{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:var(--fs-btn);font-weight:var(--fw-btn);color:var(--text);text-decoration:none} .mh-project .mh-text-link>span[aria-hidden]{display:inline-flex;transition:transform var(--dur-fast)} .mh-project .mh-text-link:hover>span[aria-hidden]{transform:translateX(3px)} .mh-project .mh-text-link:is(:hover,:focus-visible) .mh-tl{text-decoration:underline;text-underline-offset:5px} @media (max-width:1000px){.mr-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.mr-work-grid{grid-template-columns:minmax(0,1fr)!important;gap:20px}.mh-project-body{padding:22px 20px}} /* Carousels (js/mindrops-rail.js adds .is-ready; without it the grid stays): case-study cards in one row with the next card peeking and arrows on the photo centre; quotes in two rows, arrows under the track. */ .mr-work-rail,.lp-quote-rail{position:relative;min-width:0;--rail-gap:24px} .mr-work-rail{display:flex;flex-direction:column}.mr-work-rail .mh-rail-controls{order:2} /* markup puts the arrows first */ :is(.mr-work-rail,.lp-quote-rail).is-ready [data-rail-track]{display:flex;align-items:stretch;gap:var(--rail-gap);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px 2px 8px;margin:0 -2px} :is(.mr-work-rail,.lp-quote-rail).is-ready [data-rail-track]::-webkit-scrollbar{display:none} :is(.mr-work-rail,.lp-quote-rail).is-ready [data-rail-item]{flex:0 0 calc((100% - 3 * var(--rail-gap)) / 3.2);scroll-snap-align:start} :is(.mr-work-rail,.lp-quote-rail) .mh-rail-controls{display:flex;justify-content:flex-end;gap:10px;margin-top:20px} .mh-rail-controls[hidden]{display:none!important} .mh-control{pointer-events:auto;display:inline-grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:#fff;color:#0a0a0a;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 10px 30px rgba(0,0,0,.3);cursor:pointer;transition:transform var(--dur-fast),opacity var(--dur-fast)} .mh-control svg{width:20px;height:20px} .mh-control:hover:not(:disabled){transform:scale(1.06)} .mh-control:disabled{opacity:.35;cursor:default} .mh-rail-controls:not(:has(.mh-control:not(:disabled))){display:none} /* everything already in view */ .lp-quote-rail.is-ready [data-rail-track]{display:grid;grid-auto-flow:column;grid-template-columns:none!important;grid-template-rows:auto auto;grid-auto-columns:calc((100% - 2 * var(--rail-gap)) / 3);column-gap:var(--rail-gap);row-gap:18px} .lp-quote-rail.is-ready [data-rail-item]{display:grid;grid-column:auto!important;grid-row:span 2;grid-template-rows:subgrid;row-gap:18px;min-width:0} .lp-quote-col{min-width:0} .lp-quote-rail:not(.is-ready) .lp-quote-col{display:contents} @media (max-width:1000px){:is(.mr-work-rail,.lp-quote-rail).is-ready [data-rail-item]{flex-basis:calc((100% - var(--rail-gap)) / 2.2)}.lp-quote-rail.is-ready [data-rail-track]{grid-auto-columns:calc((100% - var(--rail-gap)) / 2.15)}} @media (max-width:640px){.mr-work-rail,.lp-quote-rail{--rail-gap:16px}.lp-quote-rail.is-ready [data-rail-track]{grid-auto-columns:88%}:is(.mr-work-rail,.lp-quote-rail).is-ready [data-rail-item]{flex-basis:88%}.mh-control{width:44px;height:44px}.mh-control svg{width:18px;height:18px}} /* ---- chips / pills rows -------------------------------------------------- */ .pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0} .pill{text-transform:none;font-family:var(--lp-font);font-size:14px;font-weight:500;letter-spacing:0;color:var(--text);padding:8px 14px} .lp-main>section :is(.features-grid,.services-list)+:is(h3,p.card-title){margin-top:40px!important} /* phones: each row becomes a small card (header row kept for assistive tech; multi-column cells carry their column name in data-label) */ /* ---- clients marquee (.mr-marquee) ------------------------------------- */ .clients{overflow:hidden} .clients-content p{max-width:740px;color:var(--text-2)} /* The website's client logo wall (homepage sizes): colour logos straight on the white band, two rows drifting in opposite directions. LandingPage::bands() always makes this section white. */ .lp-logos{display:grid;gap:14px;margin-top:8px} .logos-marquee{position:relative;overflow:hidden;margin:0 calc(-1 * var(--lp-gut));padding:6px 0} .logos-marquee::before,.logos-marquee::after{content:"";position:absolute;top:0;bottom:0;z-index:2;width:10%;pointer-events:none} .logos-marquee::before{left:0;background:linear-gradient(90deg,var(--bg),color-mix(in srgb,var(--bg) 0%,transparent))} .logos-marquee::after{right:0;background:linear-gradient(270deg,var(--bg),color-mix(in srgb,var(--bg) 0%,transparent))} .logos-track{--logo-gap:56px;display:flex;align-items:center;gap:var(--logo-gap);width:max-content;animation:lp-scroll 50s linear infinite;will-change:transform} .logos-marquee--rtl .logos-track{animation-duration:55s;animation-direction:reverse} .logos-marquee:hover .logos-track{animation-play-state:paused} .logo-item{display:flex;align-items:center;justify-content:center;flex:none;height:56px} .logo-item img{display:block;width:auto;height:28px;max-width:170px;object-fit:contain} .logo-item img.mh-logo--mono{filter:brightness(0);opacity:.85} .logo-item img:is(.mh-logo--undp,.mh-logo--crest){height:48px} .logo-item img.mh-logo--original{height:40px;max-width:150px} .logo-item img.mh-logo--india{height:46px} .logo-item img:is(.mh-logo--becil,.mh-logo--sardar){height:42px} .logo-item img:is(.mh-logo--akshaya,.mh-logo--barbeque){height:36px} .logo-item img.mh-logo--dlf{height:26px} .logo-item img:is(.mh-logo--unilever,.mh-logo--round){height:46px} .logo-item img.mh-logo--hracuity{height:22px;max-width:none} .logo-item img.mh-logo--pacific{height:28px;max-width:none} .logo-item img.mh-logo--wfp{height:32px} .logo-item img.mh-logo--bicci{height:44px} @media (max-width:640px){ .lp-logos{gap:10px} .logos-track{--logo-gap:36px} .logo-item{height:48px} .logo-item img{max-height:42px;max-width:136px} } @keyframes lp-scroll{to{transform:translateX(calc(-50% - var(--logo-gap) / 2))}} /* Two dark sections can meet (the reviews band is always dark): a hairline marks the boundary. */ .lp-main>section:not(.mr-light):not(.lp-hero):not(.lp-trust)+section:not(.mr-light){border-top:1px solid var(--border-soft)} /* CTA strip between sections (includes/landing/page.php): the form, WhatsApp and a direct line. */ .lp-banner{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-top:40px;padding:24px 28px;border:1px solid var(--border-soft);border-radius:var(--r);background:linear-gradient(120deg,color-mix(in srgb,var(--primary-cobalt) 10%,var(--surface)),var(--surface))} .lp-banner-copy{display:flex;align-items:center;gap:16px;flex:1 1 360px;min-width:0} .lp-banner-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--radius-md);background:var(--surface-2);color:var(--text)} .lp-main>section:not(.lp-hero) .lp-banner p{margin:0;font-size:17px;line-height:1.5;font-weight:500;color:var(--text)} .lp-banner-actions{display:flex;flex-wrap:wrap;gap:10px} .lp-banner .lp-btn{min-height:46px;padding:11px 18px} @media (max-width:560px){.lp-banner{padding:20px 18px}.lp-banner-icon{display:none}.lp-banner-actions,.lp-banner .lp-btn{width:100%}} /* Phones: service, reason and step cards go compact — icon beside the title — so a section is a quick scan rather than six tall boxes. */ @media (max-width:560px){ :is(.services-list .service-item,.features-grid .feature-card,.process-steps .step){display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:start;padding:18px 18px 18px 16px} :is(.service-icon,.feature-icon,.step-icon){grid-row:span 2;width:40px;height:40px;margin:0} :is(.services-list .service-item,.features-grid .feature-card,.process-steps .step) .card-title{margin:2px 0 6px;padding-right:28px} .step::before{top:20px;right:16px} } /* Chip rows: industries under the services, technology under the process. */ .lp-main>section:not(.lp-hero) .lp-chips-label{margin:36px 0 12px;font:500 11px/1.5 var(--lp-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)} .lp-chips{list-style:none;padding:0;margin:0} /* A single quote sits centred rather than against the left edge. */ .lp-quotes:has(>:nth-child(1):last-child){margin-inline:auto} /* ---- reviews ------------------------------------------------------------- */ /* Review-platform badge strip (includes/landing/review-badges.php): the platforms' own artwork is drawn for a light background, so the strip is a white panel on either band. */ .lp-badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 32px;margin:0 0 40px;padding:22px 28px;border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;color:#0a0a0a} .lp-badge{display:flex;align-items:center;gap:10px;min-width:0} .lp-badge[hidden]{display:none} .lp-main>section:not(.lp-hero) .lp-badges p{margin:0;color:#0a0a0a} .lp-badge--clutch{flex-direction:column;align-items:flex-start;gap:2px} .lp-badge-score{display:flex;align-items:center;gap:10px} .lp-badge-score b{font-size:30px;line-height:1;font-weight:700;letter-spacing:-.02em} .lp-badge-score .lp-stars{margin:0} .lp-main>section:not(.lp-hero) .lp-badges .lp-badge-note{font-size:13px;color:#4a4f57} .lp-badges .mr-clutch-badge{display:block;flex:none;overflow:hidden;width:60px;height:60px} .lp-badges .mr-clutch-badge iframe{display:block;width:360px;height:360px;border:0;transform-origin:0 0;transform:scale(.1667)} .lp-badge--goodfirms{width:260px;min-height:61px} .lp-badge--goodfirms .goodfirm-widget{width:100%} .lp-badge--img img{display:block;width:auto;height:56px} .lp-badge--tb{padding:8px 12px;border-radius:var(--radius-sm);background:#0a0a0a} /* the badge's lettering is white */ .lp-badge--tb img{height:36px} @media (max-width:640px){.lp-badges{gap:16px 20px;padding:18px 16px}.lp-badge--img img{height:46px}.lp-badge--tb img{height:30px}} .lp-quote{display:flex;flex-direction:column;gap:18px;margin:0} .lp-quote{padding-top:58px} .lp-quote::before{content:"“";position:absolute;top:14px;left:24px;font-family:Georgia,serif;font-size:64px;line-height:1;color:color-mix(in srgb,var(--a) 35%,transparent)} .lp-quote blockquote{margin:0} .lp-quote blockquote p{margin:0;font-size:17px;line-height:1.65;color:var(--text)} .lp-quote figcaption{margin-top:auto;padding-top:16px;border-top:1px solid var(--border);font-size:14px;line-height:1.5;color:var(--text-2)} .lp-quote cite{display:block;font-style:normal;font-weight:500;font-size:15px;color:var(--text)} /* ---- FAQ (.mr-faq: native details/summary) ----------------------------- */ .faq-grid{display:grid;gap:12px;max-width:960px} .faq-item{border:1px solid var(--border-soft);border-radius:var(--r);background:var(--surface);overflow:hidden;transition:border-color var(--dur-base)} .faq-item[open]{border-color:var(--border-highlight)} .faq-question{display:flex;align-items:baseline;gap:14px;min-height:60px;padding:18px 24px;list-style:none;cursor:pointer;color:var(--text);font-size:16px;font-weight:500;line-height:1.45} .faq-question::-webkit-details-marker{display:none} .faq-question:hover{background:color-mix(in srgb,var(--surface-2) 70%,transparent)} .faq-question-text{flex:1 1 auto;min-width:0} .faq-number{flex:none;font-family:var(--lp-mono);font-size:12px;font-weight:400;letter-spacing:.12em;color:var(--text-2)} .faq-toggle{flex:none;align-self:center;display:grid;place-items:center;width:28px;height:28px;color:var(--text-2)} .faq-toggle::before{content:"+";font-size:24px;font-weight:400;line-height:1;transition:transform var(--dur-base) var(--ease)} .faq-item[open] .faq-toggle::before{transform:rotate(45deg)} .faq-answer{padding:0 24px 22px 62px;font-size:15px;line-height:1.7;color:var(--text-2)} .faq-answer p{margin:0 0 10px;color:var(--text-2)} .faq-answer p:last-child{margin-bottom:0} @media (max-width:640px){.faq-question{padding:16px 18px;gap:10px}.faq-answer{padding:0 18px 20px}} /* ---- final CTA band (.mr-cta-band) -------------------------------------- */ .lp-main>section.lp-cta-band{padding-top:var(--space-12);padding-bottom:var(--space-12)} .lp-cta-band .in{position:relative;overflow:hidden;padding:clamp(36px,5vw,58px) clamp(22px,4vw,48px);border:1px solid var(--border-soft);border-radius:var(--r-lg);background:linear-gradient(120deg,var(--surface-2),var(--bg-2));text-align:center} .lp-cta-band .in::before{content:"";position:absolute;left:50%;top:-34%;width:72%;height:96%;transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--m) 20%,transparent),color-mix(in srgb,var(--i) 12%,transparent) 55%,transparent 75%);filter:blur(36px)} .lp-cta-band .in>*{position:relative} .lp-cta-band h2{margin:0 auto 12px!important} .lp-main>section.lp-cta-band .in p{max-width:620px;margin:0 auto 26px;font-size:17px;color:var(--text-2)} .lp-cta-band .lp-cta-row{justify-content:center;margin:0} /* ---- footer (.mr-footer) --------------------------------------------- */ .lp-footer{position:relative;margin-top:var(--space-12);border-top:1px solid var(--border-soft);background:linear-gradient(180deg,var(--bg-2),var(--bg));color:var(--text-2)} .lp-footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--i) 55%,transparent),color-mix(in srgb,var(--m) 45%,transparent),transparent)} .lp-footer-in{max-width:var(--maxw);margin:0 auto;padding:64px 20px 28px} .lp-foot-grid{display:grid;grid-template-columns:2fr 1fr;gap:40px 32px} @media (min-width:901px){.lp-foot-grid:has(>:nth-child(4)){grid-template-columns:1.4fr repeat(3,1fr)}} /* the Delhi pages' four-column footer */ .lp-foot-brand img{display:block;width:auto;height:32px;margin:0 0 16px} .lp-foot-brand p{max-width:330px;margin:0 0 20px;font-size:14px;line-height:1.7;color:var(--text-2)} .lp-foot-h{margin:0 0 14px!important;font-family:var(--lp-mono);font-size:12px!important;font-weight:400!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--text-2)!important} .lp-foot-col ul{list-style:none;margin:0;padding:0} .lp-foot-col a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;color:var(--text-2);transition:color var(--dur-fast)} .lp-foot-col a:hover{color:var(--text)} .lp-foot-col svg{width:16px;height:16px;color:var(--a)} .lp-foot-col .lp-foot-wa svg{color:var(--brand-whatsapp)} :is(.feature-icon,.service-icon) .fa-whatsapp{color:var(--brand-whatsapp)} .lp-offices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:44px;padding-top:32px;border-top:1px solid var(--border-soft)} .lp-office{position:relative;margin:0;padding-left:15px;font-style:normal;font-size:13.5px;line-height:1.7;color:var(--text-2)} .lp-office::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:var(--radius-xs);background:var(--grad-brand);opacity:.6} .lp-office b{display:block;margin-bottom:4px;font-family:var(--lp-mono);font-size:12px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--text)} .lp-foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-top:40px;padding:22px 0 8px;border-top:1px solid var(--border-soft);font-size:13.5px;color:var(--text-2)} .lp-foot-bottom p{margin:0;color:var(--text-2)} .lp-foot-legal{display:flex;flex-wrap:wrap;gap:4px 20px} .lp-foot-legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-2)} .lp-foot-legal a:hover,.lp-foot-bottom a:hover{color:var(--text)} @media (max-width:900px){.lp-foot-grid{grid-template-columns:1fr 1fr}.lp-offices{grid-template-columns:1fr 1fr}} @media (max-width:560px){.lp-foot-grid,.lp-offices{grid-template-columns:minmax(0,1fr)}.lp-footer-in{padding-top:48px;padding-bottom:96px}} /* ---- floating call / WhatsApp ------------------------------------------- */ .lp-float{position:fixed;right:16px;bottom:16px;z-index:900;display:flex;flex-direction:column;gap:10px;transition:opacity var(--dur-base),transform var(--dur-base) var(--ease),visibility 0s} .lp-float a{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:var(--white);box-shadow:0 10px 28px color-mix(in srgb,var(--black) 55%,transparent);transition:transform var(--dur-fast) var(--ease)} .lp-float a:hover{transform:scale(1.06)} .lp-float svg{width:24px;height:24px} .lp-float-call{background:var(--grad)} .lp-float-wa{background:var(--brand-whatsapp)} .lp-quiet .lp-float{opacity:0;transform:translateY(14px);visibility:hidden;pointer-events:none;transition:opacity var(--dur-base),transform var(--dur-base) var(--ease),visibility 0s var(--dur-base)} /* ---- cookie notice (shares storage keys with the main-site banner) ----- */ .lp-cookie{position:fixed;left:16px;bottom:16px;z-index:899;display:flex;align-items:center;gap:10px 14px;max-width:470px;padding:12px 8px 12px 16px;border:1px solid var(--border-highlight);border-radius:var(--radius-md);background:var(--surface-2);box-shadow:var(--shadow-md);font-size:13.5px;line-height:1.5;color:var(--text-2);transition:opacity var(--dur-base),visibility 0s} .lp-cookie[hidden]{display:none} .lp-cookie p{margin:0;flex:1 1 auto;color:var(--text-2)} .lp-cookie a{color:var(--text);text-decoration:underline;text-underline-offset:2px} .lp-cookie .lp-btn{min-height:44px;padding:8px 18px;font-size:var(--fs-btn-sm)} .lp-cookie-x{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:var(--radius-btn);background:none;color:var(--text-2);font-size:22px;line-height:1;cursor:pointer} .lp-cookie-x:hover{color:var(--text);background:var(--surface-3)} .lp-quiet-cookie .lp-cookie{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base),visibility 0s var(--dur-base)} @media (max-width:640px){.lp-cookie{right:84px;max-width:none;flex-wrap:wrap;padding:10px 6px 10px 12px;font-size:13px}.lp-cookie p{flex-basis:100%}.lp-cookie .lp-btn{flex:1 1 auto}} /* ---- intl-tel-input (loaded on first interaction with the form) ---------- */ .lp-form .iti__selected-country{min-height:44px;border-radius:var(--radius-btn) 0 0 var(--radius-btn)} .lp-form .iti__selected-dial-code{color:var(--text-2)} .iti__dropdown-content{border:1px solid var(--border-highlight)!important;border-radius:var(--radius-btn);background:var(--surface-2)!important;color:var(--text);box-shadow:var(--shadow-md)} .iti__search-input{background:var(--surface)!important;color:var(--text)!important;border:0!important;border-bottom:1px solid var(--border)!important;border-radius:0!important;min-height:44px!important} .iti__country{color:var(--text)} .iti__country.iti__highlight{background:var(--surface-3)!important} .iti__dial-code{color:var(--text-2)!important} /* ---- motion preferences --------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important} .logos-track{animation:none} } /* Published reviews from the website's library: project label above, source link below. */ .lp-quote-project{margin:0;font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)} .lp-quote-source{display:block;margin-top:10px;font-size:13px;color:var(--text-2)} /* Restored for the /delhi/* pages, which still use the section partials (section-*.php, related-services.php) and their hand-written sections; the /lp/ pages no longer do. */ .lp-main .container,.lp-main .services-wrapper,.lp-main .seo-about-container{max-width:none;margin:0;padding:0;width:auto} .dark-intro,.industries-intro,.workflow-intro,.proof-intro,.related-services-intro{max-width:740px;margin:0 0 40px;font-size:17px;line-height:1.65;color:var(--text-2)} .section-header,.services-header,.services-title-block{max-width:860px} .lp-main>section:not(.lp-hero) :is(.section-header,.services-header,.services-title-block)>h2:last-child{margin-bottom:36px} .section-header p:last-child,.services-title-block p:last-child{margin-bottom:40px} .stack-items,.related-services-list{list-style:none;margin:0;padding:0} .related-services h2{font-size:clamp(24px,2.6vw,30px)!important} .related-services-list:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} .industries-grid,.int-grid,.reasons-grid,.workflow-grid,.office-grid,.related-services-list{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))} :is(.industries-grid,.int-grid,.reasons-grid,.workflow-grid,.office-grid,.related-services-list):has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} :is(.industries-grid,.int-grid,.reasons-grid,.workflow-grid,.office-grid,.related-services-list):has(>:nth-child(1):last-child){grid-template-columns:minmax(0,1fr);max-width:760px} .industry-card,.int-card,.reason-card,.workflow-card,.stack-category,.office-card,.stat-box,.slide{position:relative;min-width:0;padding:26px;border:1px solid transparent;border-radius:var(--r);background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(140deg,color-mix(in srgb,var(--i) 45%,transparent),color-mix(in srgb,var(--m) 16%,transparent) 44%,color-mix(in srgb,var(--text-primary) 5%,transparent) 72%) border-box;color:var(--text);transition:transform .35s var(--ease),box-shadow .35s var(--ease)} :is(.industry-card,.int-card,.reason-card,.workflow-card,.stack-category,.office-card,.stat-box,.slide) p{margin:0 0 10px;font-size:15px;line-height:1.65;color:var(--text-2)} :is(.industry-card,.int-card,.reason-card,.workflow-card,.stack-category,.office-card,.stat-box,.slide) p:last-child{margin-bottom:0} :is(.industry-card,.int-card,.reason-card,.workflow-card,.office-card) ul{margin:10px 0 0;padding-left:18px;font-size:15px;line-height:1.6;color:var(--text-2)} :is(.industry-card,.int-card,.reason-card,.workflow-card,.office-card) li+li{margin-top:6px} .industry-icon,.reason-icon,.banner-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:0 0 16px;border-radius:var(--radius-md);background:var(--surface-2);color:var(--text);font-size:18px;transition:background .35s var(--ease)} .reason-card{display:flex;flex-direction:column} .why-choose-banner,.industries-banner{display:flex;align-items:center;justify-content:space-between;gap:20px 28px;flex-wrap:wrap;margin-top:28px;padding:22px 26px;border:1px solid var(--border-soft);border-radius:var(--r);background:linear-gradient(120deg,var(--surface-2),var(--bg-2))} .banner-content{display:flex;align-items:center;gap:16px;flex:1 1 380px;min-width:0} .banner-content .banner-icon{margin:0} .banner-title,.banner-text p{margin:0!important;font-size:17px;font-weight:500;line-height:1.45;color:var(--text)!important} .services-cta{margin-top:0} .banner-btn,.contact-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:14px 22px;border-radius:var(--radius-btn);background:var(--grad);color:var(--on-primary)!important;font-size:var(--fs-btn);font-weight:var(--fw-btn);line-height:1.2;text-decoration:none!important;transition:transform var(--dur-base) var(--ease),background-color var(--dur-base),box-shadow var(--dur-base)} .banner-btn:hover,.contact-btn:hover{background:var(--primary-cobalt-hover)} .workflow-card{padding-top:52px} .workflow-number{position:absolute;top:22px;left:26px;font-family:var(--lp-mono);font-size:12px;letter-spacing:.16em;color:var(--text-2)} .workflow-number::after{content:"";display:inline-block;width:22px;height:2px;margin-left:10px;vertical-align:middle;border-radius:var(--radius-xs);background:var(--grad-brand)} .stack-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .stack-header{display:flex;align-items:center;gap:12px;margin:0 0 18px} .stack-header .card-title{margin:0!important} .stack-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--radius-md);background:var(--surface-2)} .stack-icon img{width:24px;height:24px;object-fit:contain} .stack-items{display:flex;flex-wrap:wrap;gap:8px} .tech-item{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:5px 12px 5px 6px;border:1px solid var(--border-soft);border-radius:var(--r-pill);background:var(--surface-2);font-size:13px;font-weight:600;line-height:1.3;color:var(--text)} .tech-item:not(:has(.tech-logo)){padding-left:12px} .tech-logo{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--white);overflow:hidden} .tech-logo img{width:18px;height:18px;object-fit:contain} .tech-logo:has(img[src$="/py.webp"]){background:#092e20} .tech-logo>i{font-size:13px;color:#1f2937} .tech-logo>.fa-wordpress{color:#21759b} .tech-logo>.fa-php{color:#4f5b93} .chip{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--border-soft);border-radius:var(--r-pill);background:var(--surface-2);font-family:var(--lp-mono);font-size:12px;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--text-2)} .chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0} .pill-subhead{margin:36px 0 14px!important} .lp-main>section :is(.int-grid,.industries-grid,.reasons-grid,.stack-grid)+:is(h3,p.card-title){margin-top:40px!important} .related-services-list{list-style:none;margin:0;padding:0} .related-services-list li{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--border-soft);border-radius:var(--r);background:var(--surface);transition:border-color var(--dur-base),transform var(--dur-base) var(--ease)} .related-services-list li:hover{border-color:var(--ac-border)} .related-services-list a{display:block;min-height:44px;padding:10px 0 6px;font-size:17px;font-weight:500;color:var(--text)} .related-services-list a::after{content:"\2192";display:inline-block;margin-left:8px;color:var(--a);transition:transform var(--dur-fast) var(--ease)} .related-services-list li:hover a::after{transform:translateX(3px)} .related-services-list span{font-size:14.5px;line-height:1.55;color:var(--text-2)} .dark-intro{margin-bottom:32px} .slide{display:flex;flex-direction:column;gap:16px;padding:0;overflow:hidden} .slide .industry-content{order:2;padding:0 24px 24px} .slide .industry-image{order:1;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)} .slide .industry-image a{display:block;height:100%} .slide .industry-image img{width:100%;height:100%;object-fit:cover} .seo-about-container{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:center} .seo-about-visual img,.visual-element img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--border-soft)} .visual-element:has(>.stat-box){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .stat-box{text-align:center} .stat-number{display:block;font-size:var(--fs-h1);font-weight:700;line-height:1.1;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .stat-label{display:block;margin-top:8px;font-size:14px;color:var(--text-2)} .local-office address,.office-card address{margin:0 0 10px;font-style:normal;line-height:1.7;color:var(--text)} .lp-social{display:flex;gap:10px} .lp-social a{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border-soft);border-radius:50%;color:var(--text-2);transition:border-color var(--dur-fast),background-color var(--dur-fast),color var(--dur-fast)} .lp-social a:hover{border-color:var(--ac-border);background:var(--surface-2);color:var(--text)} .lp-social svg{width:18px;height:18px} @media (min-width:1101px){:is(.industries-grid,.int-grid,.reasons-grid,.workflow-grid,.office-grid):is(:has(>:nth-child(4):last-child),:has(>:nth-child(8):last-child)){grid-template-columns:repeat(4,minmax(0,1fr))}:is(.industries-grid,.int-grid,.reasons-grid,.workflow-grid,.office-grid):has(>:nth-child(7):last-child){grid-template-columns:repeat(12,minmax(0,1fr))}:is(.industries-grid,.int-grid,.reasons-grid,.workflow-grid,.office-grid):has(>:nth-child(7):last-child)>*{grid-column:span 3}:is(.industries-grid,.int-grid,.reasons-grid,.workflow-grid,.office-grid):has(>:nth-child(7):last-child)>:nth-last-child(-n+3){grid-column:span 4}} @media (min-width:1001px){:is(.industries-grid,.int-grid,.reasons-grid,.workflow-grid,.related-services-list):has(>:nth-child(3n+2):last-child):not(:has(>:nth-child(2):last-child)):not(:has(>:nth-child(8):last-child)){grid-template-columns:repeat(6,minmax(0,1fr))}:is(.industries-grid,.int-grid,.reasons-grid,.workflow-grid,.related-services-list):has(>:nth-child(3n+2):last-child):not(:has(>:nth-child(2):last-child)):not(:has(>:nth-child(8):last-child))>*{grid-column:span 2}:is(.industries-grid,.int-grid,.reasons-grid,.workflow-grid,.related-services-list):has(>:nth-child(3n+2):last-child):not(:has(>:nth-child(2):last-child)):not(:has(>:nth-child(8):last-child))>:nth-last-child(-n+2){grid-column:span 3}:is(.industries-grid,.int-grid,.reasons-grid,.workflow-grid):has(>:nth-child(3n+1):last-child):not(:has(>:nth-child(1):last-child)):not(:has(>:nth-child(4):last-child)):not(:has(>:nth-child(7):last-child))>:last-child{grid-column:1/-1}.stack-grid:has(>:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}.stack-grid:has(>:nth-child(5):last-child)>*{grid-column:span 2}.stack-grid:has(>:nth-child(5):last-child)>:nth-last-child(-n+2){grid-column:span 3}} @media (max-width:1000px){.industries-grid,.int-grid,.reasons-grid,.workflow-grid,.office-grid,.related-services-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}:is(.industries-grid,.int-grid,.reasons-grid,.workflow-grid,.office-grid,.related-services-list)>*{grid-column:auto!important}} @media (max-width:640px){.industries-grid,.int-grid,.reasons-grid,.workflow-grid,.office-grid,.related-services-list{grid-template-columns:minmax(0,1fr)!important}} @media (hover:hover){.industry-card:hover,.int-card:hover,.reason-card:hover,.workflow-card:hover,.stack-category:hover,.office-card:hover,.slide:hover{transform:translateY(-4px);box-shadow:0 18px 44px color-mix(in srgb,var(--black) 45%,transparent),0 8px 30px color-mix(in srgb,var(--i) 14%,transparent)}:is(.industry-card,.reason-card):hover :is(.feature-icon,.service-icon,.industry-icon,.reason-icon,.step-icon,.benefit-icon){background:linear-gradient(135deg,color-mix(in srgb,var(--i) 30%,transparent),color-mix(in srgb,var(--m) 22%,transparent))}} @media (max-width:900px){.seo-about-container{grid-template-columns:minmax(0,1fr)}}