* {
box-sizing: border-box
}
html {
scroll-behavior: smooth
}
body {
margin: 0;
font-family: 'Poppins', sans-serif;
color: #090909;
background: #fff;
line-height: 1.45
}
button,
input,
select {
font: inherit
}
a {
color: inherit;
text-decoration: none
}
img {
max-width: 100%;
display: block
}
.section {
width: min(1120px, 100%);
margin: auto;
padding: 88px 0
}
h1,
h2,
h3,
p {
margin-top: 0
}
h1 {
font-size: clamp(2.2rem, 5vw, 4.7rem);
line-height: 1.1;
letter-spacing: -.045em;
max-width: 820px
}
h2 {
text-align: center;
font-size: clamp(1.7rem, 3vw, 2.5rem);
letter-spacing: -.035em
}
h3 {
line-height: 1.15
}
.sub {
text-align: center;
color: #6d6d6d;
margin-top: -12px
}
.eyebrow {
font-size: .75rem;
font-weight: 700;
letter-spacing: .12em;
color: #087fe5
}
.btn {
border: 0;
border-radius: 999px;
padding: 11px 20px;
background: #087fe5;
color: white;
font-weight: 600;
cursor: pointer;
transition: .25s transform, .25s background
}
.industries-h3 {
font-size: 20px;
}
.btn-hero {
position: relative;
bottom: 35px;
}
.btn:hover {
transform: translateY(-2px);
background: #006dcc
}
.btn-dark {
background: #050505;
border-radius: 4px;
padding: 8px 16px
}
.nav {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px max(5vw, 22px);
background: rgba(255, 255, 255, .88);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(0, 0, 0, .05)
}
.brand {
font-weight: 800;
line-height: .85
}
.nav nav {
display: flex;
gap: 25px;
align-items: center;
font-size: .8rem
}
.nav nav a:hover {
color: #087fe5
}
.menu {
display: none;
border: 0;
background: none;
font-size: 1.4rem
}
.hero {
min-height: 660px;
display: grid;
grid-template-columns: 1.2fr .8fr;
align-items: center;
gap: 30px;
padding-top: 10px
}
.hero-copy p {
max-width: 660px;
color: #555;
position: relative;
bottom: 30px;
}
.hero-art img {
max-height: 560px;
margin: auto;
object-fit: contain
}
.industries {
padding-top: 20px
}
.industry-grid,
.cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px
}
.industry-grid article,
.cards article {
background: #050505;
color: #fff;
border-radius: 10px;
padding: 22px;
min-height: 105px;
display: flex;
gap: 12px;
align-items: center
}
.industry-grid span {
font-size: .9rem
}
.problem {
text-align: center
}
.problem img {
width: min(550px, 100%);
margin: 32px auto
}
.problem p {
max-width: auto;
margin: auto;
font-family: "Poppins";
font-weight: 300;
font-size: 35px;
}
.para-whatactually {
font-family: 'Poppins';
font-weight: 300;
font-size: 20px;
position: relative;
bottom: 30px;
}
.fa-users,
.fa-receipt,
.fa-code {
font-size: 50px;
}
.serivceheadlinetext {
position: relative;
top: 10px;
}
.achieve,
.trial,
.about {
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 55px;
align-items: center
}
.achieve h2,
.trial h2,
.about h2 {
text-align: left
}
.about p {
font-weight: 400;
}
.achieve img,
.trial img,
.about img {
border-radius: 12px;
width: 100%;
max-height: 360px;
object-fit: cover
}
/* ==================================
ADKLOP WORK SECTION
================================== */
.adklop-work {
width: 100%;
padding: 100px 0;
background: #f5f5f3;
overflow: hidden;
}
/* HEADING */
.work-heading {
max-width: 1000px;
margin: 0 auto 60px;
padding: 0 24px;
text-align: center;
}
.work-label {
margin-bottom: 16px;
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
color: #777;
}
.work-heading h2 {
margin: 0;
font-size: clamp(48px, 5.5vw, 85px);
line-height: 0.95;
letter-spacing: -4px;
font-weight: 800;
color: #080808;
}
.work-subtitle {
max-width: 580px;
margin: 25px auto 0;
font-size: 16px;
line-height: 1.6;
color: #666;
}
/* ==================================
CAROUSEL
================================== */
.work-carousel {
width: 100%;
}
/* EACH ROW */
.work-row {
width: 100%;
overflow: hidden;
}
.work-row + .work-row {
margin-top: 14px;
}
/* MOVING TRACK */
.work-track {
display: flex;
width: max-content;
will-change: transform;
}
/* EACH 7-POSTER SET */
.work-set {
display: flex;
flex-shrink: 0;
gap: 14px;
padding-right: 14px;
}
/* POSTER SIZE */
.work-set img {
/*
Approximately 7 cards across desktop.
Change 14px if you want bigger/smaller cards.
*/
width: calc((100vw - 84px) / 7);
max-width: 260px;
min-width: 190px;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
flex-shrink: 0;
border-radius: 5px;
}
/* ==================================
ROW 1 - MOVE LEFT
================================== */
.work-track-left {
animation: workMoveLeft 35s linear infinite;
}
@keyframes workMoveLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* ==================================
ROW 2 - MOVE RIGHT
================================== */
.work-track-right {
animation: workMoveRight 38s linear infinite;
}
@keyframes workMoveRight {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}
/* PAUSE ON HOVER */
.work-row:hover .work-track {
animation-play-state: paused;
}
/* MOBILE VERSION HIDDEN ON DESKTOP */
.work-mobile-grid {
display: none;
}
/* ==================================
MOBILE
================================== */
@media (max-width: 600px) {
.adklop-work {
padding: 65px 12px;
}
/* HEADING */
.work-heading {
padding: 0;
margin-bottom: 35px;
}
.work-label {
font-size: 10px;
}
.work-heading h2 {
font-size: 38px;
line-height: 1;
letter-spacing: -2px;
}
.work-subtitle {
max-width: 330px;
margin-top: 18px;
font-size: 14px;
line-height: 1.5;
}
/* REMOVE AUTO CAROUSEL */
.work-carousel {
display: none;
}
/* 2 POSTERS PER ROW */
.work-mobile-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
width: 100%;
}
.work-mobile-grid img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
.work-track {
animation: none;
}
}
.cards {
grid-template-columns: repeat(3, 1fr);
max-width: 850px;
margin: auto
}
.cards article {
display: block;
min-height: 230px
}
.cards b {
font-size: 1.5rem
}
.sub {
position: relative;
bottom: 20px;
}
.sectionparagraphhowwework {
position: relative;
bottom: 20px;
font-weight: 600;
font-size: 30px;
}
.compareimgsection {
width: 80%;
position: relative;
left: 10%;
}
.howweworkheadline {
font-size: 30px;
}
.cards p {
font-size: .78rem;
color: #bbb
}
.steps {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px
}
.steps article {
background: #050505;
color: #fff;
border-radius: 8px;
padding: 20px;
display: flex;
gap: 14px
}
.steps em {
font-style: normal;
font-weight: 800;
font-size: 1.5rem
}
.steps p {
font-size: .75rem;
color: #bbb;
margin: 0
}
.compare {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 900px;
margin: 35px auto 25px;
border: 1px solid #eee;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 14px 40px rgba(0, 0, 0, .05)
}
.compare>div {
padding: 32px
}
.compare .ours {
background: #f5fff9;
border-right: 1px solid #e8e8e8
}
.compare h3 {
font-size: 1.5rem
}
.compare>div>div {
display: flex;
gap: 12px;
margin: 25px 0
}
/* ==========================
AGENCY COMPARISON
========================== */
.agency-comparison {
width: 100%;
margin: 40px auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.comparison-item {
width: 100%;
overflow: hidden;
}
.comparison-item img {
width: 100%;
height: auto;
display: block;
}
/* MOBILE */
@media (max-width: 760px) {
.agency-comparison {
grid-template-columns: 1fr;
gap: 20px;
margin: 30px auto;
}
.comparison-item {
width: 100%;
}
.comparison-item img {
width: 100%;
height: auto;
}
}
.compare span {
display: grid
}
.compare small {
color: #777;
margin-top: 4px
}
.different {
text-align: center
}
.trial h2 {
font-size: clamp(2rem, 4vw, 3.6rem);
margin-top: 12px;
line-height: 1.05;
}
.trial p {
font-weight: 300;
font-size: 30px;
position: relative;
bottom: 30px;
}
.trynowbuttontrial {
position: relative;
bottom: 35px;
}
.chesstrialsection {
width: 300px;
height: 500px;
}
.faqs {
max-width: 850px
}
.faqs details {
border: 1px solid #e7e7e7;
border-radius: 8px;
padding: 18px 20px;
margin: 12px 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, .035)
}
.faqs summary {
cursor: pointer;
font-weight: 500
}
.faqs details p {
color: #666;
font-size: .88rem;
margin: 14px 0 0
}
.cta {
height: 360px;
border-radius: 22px;
background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)), url('assets/cta-bg.jpg') center/cover;
display: grid;
place-items: center;
text-align: center;
color: #fff;
margin-bottom: 90px
}
.cta h2 {
font-size: clamp(2.3rem, 5vw, 4rem);
max-width: 700px;
line-height: 1.06;
}
footer {
width: min(1120px, 90%);
margin: auto;
padding: 10px 0 70px;
display: flex;
justify-content: space-between
}
footer div {
display: grid;
gap: 8px
}
.logonameinfooter {
font-weight: 900;
font-size: 30px;
line-height: 1.02;
}
footer div:last-child {
text-align: right;
font-size: .8rem
}
footer small {
max-width: 220px
}
.reveal {
opacity: 0;
transform: translateY(35px);
transition: opacity .75s ease, transform .75s cubic-bezier(.2, .75, .25, 1)
}
.reveal.right {
transform: translateX(40px)
}
.reveal.visible {
opacity: 1;
transform: none
}
.modal {
position: fixed;
inset: 0;
z-index: 50;
display: none;
place-items: center;
padding: 20px
}
.modal.open {
display: grid
}
.backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .6);
backdrop-filter: blur(6px)
}
.modal-card {
position: relative;
width: min(560px, 100%);
max-height: 92vh;
overflow-y: auto;
background: white;
border-radius: 18px;
padding: 34px;
box-shadow: 0 30px 90px rgba(0, 0, 0, .25);
animation: pop .25s ease
}
.modal-card h2 {
text-align: left;
margin: 8px 0
}
.modal-card>p {
color: #666
}
.close {
position: absolute;
right: 18px;
top: 14px;
border: 0;
background: none;
font-size: 1.7rem;
cursor: pointer
}
.modal form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 22px
}
.modal label {
font-size: .78rem;
font-weight: 600
}
.modal input,
.modal select {
width: 100%;
margin-top: 6px;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff
}
.modal form .btn,
.form-status {
grid-column: 1/-1
}
.form-status {
font-size: .8rem;
margin: 0;
color: #555
}
.Footernameinbottom {
font-family: 'Poppins';
font-weight: 1000;
font-size: 320px;
margin: 0;
top: 0;
padding: 0;
bottom: 0;
}
@media(max-width:760px) {
.Footernameinbottom {
font-size: 80px;
}
}
@keyframes pop {
from {
opacity: 0;
transform: scale(.97) translateY(8px)
}
}
@media(max-width:760px) {
.nav nav {
display: none;
position: absolute;
top: 64px;
left: 4%;
right: 4%;
padding: 22px;
background: #fff;
border: 1px solid #eee;
border-radius: 12px;
box-shadow: 0 15px 35px rgba(0, 0, 0, .1);
flex-direction: column;
align-items: stretch
}
.nav nav.open {
display: flex
}
.menu {
display: block
}
.section {
padding: 62px 0
}
.hero {
grid-template-columns: 1fr;
min-height: auto
}
.hero-art {
order: -1
}
.hero-art img {
max-height: 330px
}
.industry-grid {
grid-template-columns: 1fr 1fr
}
.cards,
.steps,
.compare,
.achieve,
.trial,
.about {
grid-template-columns: 1fr
}
.compare .ours {
border-right: 0;
border-bottom: 1px solid #e8e8e8
}
.achieve img,
.trial img,
.about img {
order: -1
}
.modal form {
grid-template-columns: 1fr
}
.cta {
width: 100%;
border-radius: 0;
height: 300px
}
footer {
gap: 30px;
flex-direction: column
}
footer div:last-child {
text-align: left
}
}
@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto
}
.reveal {
opacity: 1;
transform: none;
transition: none
}
}
/* =========================================================
FINAL POLISH OVERRIDES — requested revisions
Poppins remains the only font family.
========================================================= */
/* General responsive safety */
html,
body {
max-width: 100%;
overflow-x: hidden;
}
body {
font-family: 'Poppins', sans-serif;
}
.section {
padding-left: 24px;
padding-right: 24px;
}
/* Industries: clean icon + type hierarchy */
.industries {
padding-top: 34px;
}
.industry-grid {
align-items: stretch;
}
.industry-grid article {
min-height: 132px;
padding: 24px;
border-radius: 14px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 22px;
transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.industry-grid article:hover {
transform: translateY(-5px);
box-shadow: 0 18px 36px rgba(0, 0, 0, .12);
background: #111;
}
.industry-icon {
font-size: 28px;
line-height: 1;
color: #fff;
}
.industries-h3 {
margin: 0;
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.25;
}
/* Problem paragraph: progressive scroll text reveal */
.problem p.scroll-text-reveal {
max-width: 1040px;
margin: 0 auto;
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: clamp(1.7rem, 3.1vw, 2.45rem);
line-height: 1.35;
letter-spacing: -.035em;
text-wrap: balance;
}
.scroll-text-reveal .word {
color: rgba(9, 9, 9, .15);
transition: color .12s linear;
}
.scroll-text-reveal .word.is-revealed {
color: #090909;
}
/* What We Actually Help You Achieve */
.achieve {
gap: 64px;
}
.achieve .copy {
max-width: 620px;
}
.achieve h2 {
margin: 0 0 24px;
font-size: clamp(2.15rem, 4vw, 3.15rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -.045em;
}
.para-whatactually {
position: static;
bottom: auto;
margin: 0;
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.75;
color: #4f4f4f;
}
.para-whatactually strong {
color: #111;
font-weight: 600;
}
/* Services */
#services>h2 {
margin-bottom: 34px;
}
.cards {
max-width: 960px;
gap: 20px;
align-items: stretch;
}
.cards article {
min-height: 280px;
height: 100%;
padding: 30px 28px;
border-radius: 14px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.cards article:hover {
transform: translateY(-6px);
background: #111;
box-shadow: 0 20px 42px rgba(0, 0, 0, .14);
}
.cards b {
display: grid;
place-items: center;
width: 58px;
height: 58px;
margin-bottom: 34px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 14px;
font-size: 24px;
}
.fa-users,
.fa-receipt,
.fa-code {
font-size: 25px;
}
.serivceheadlinetext {
position: static;
top: auto;
margin: 0 0 13px;
font-size: 22px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -.025em;
}
.cards p,
.cards .serviceparagraphtext {
margin: 0;
font-size: 15px;
font-weight: 400;
line-height: 1.7;
color: #bdbdbd;
}
/* How We Work — animated process journey */
.process>h2 {
margin-bottom: 18px;
font-size: clamp(2rem, 3.5vw, 2.75rem);
font-weight: 700;
}
.process>.sub {
position: static;
bottom: auto;
margin: 0 auto 44px;
font-size: 16px;
line-height: 1.6;
}
.process-timeline {
position: relative;
gap: 20px;
}
.process-timeline::before {
content: "";
position: absolute;
left: 50%;
top: 20px;
bottom: 20px;
width: 2px;
background: #ededed;
transform: translateX(-50%);
z-index: 0;
}
.process-progress {
position: absolute;
left: 50%;
top: 20px;
width: 2px;
height: 0;
max-height: calc(100% - 40px);
background: #087fe5;
transform: translateX(-50%);
z-index: 1;
transition: height .12s linear;
}
.steps article {
position: relative;
z-index: 2;
min-height: 210px;
padding: 28px;
border-radius: 14px;
align-items: flex-start;
opacity: .42;
transform: translateY(20px);
transition: opacity .5s ease, transform .5s ease, box-shadow .3s ease;
}
.steps article.process-active {
opacity: 1;
transform: none;
}
.steps article:hover {
box-shadow: 0 18px 40px rgba(0, 0, 0, .13);
}
.steps em {
min-width: 48px;
font-size: 18px;
color: #8cc9ff;
}
.howweworkheadline {
margin: 0 0 14px;
font-size: 22px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -.025em;
}
.sectionparagraphhowwework {
position: static;
bottom: auto;
margin: 0;
font-size: 15px;
font-weight: 400;
line-height: 1.7;
color: #bdbdbd;
}
/* Why We're Different: intentionally preserve the user's section.
Only keep the image safe/responsive. */
.compareimgsection {
max-width: 100%;
}
/* Trial section: preserve design; only correct paragraph typography */
.trial p {
position: static;
bottom: auto;
margin: 18px 0 28px;
font-size: clamp(1.05rem, 1.8vw, 1.35rem);
font-weight: 400;
line-height: 1.6;
color: #555;
}
.trynowbuttontrial {
position: static;
bottom: auto;
}
/* About Us typography */
.about>div {
max-width: 650px;
}
.about h2 {
margin: 0 0 22px;
font-size: clamp(2rem, 3.2vw, 2.6rem);
font-weight: 700;
line-height: 1.15;
}
.about h3 {
margin: 0 0 22px;
font-size: clamp(1.65rem, 2.6vw, 2.1rem);
font-weight: 600;
line-height: 1.28;
letter-spacing: -.035em;
}
.about p {
margin: 0 0 16px;
font-size: 16px;
font-weight: 400;
line-height: 1.75;
color: #555;
}
.about p:last-of-type {
color: #111;
font-weight: 600;
}
/* FAQ accordion */
.faqs h2 {
margin-bottom: 32px;
}
.faqs details {
padding: 0;
overflow: hidden;
transition: border-color .25s ease, box-shadow .25s ease;
}
.faqs details[open] {
border-color: #d7d7d7;
box-shadow: 0 10px 28px rgba(0, 0, 0, .055);
}
.faqs summary {
position: relative;
display: flex;
align-items: center;
min-height: 66px;
padding: 18px 58px 18px 20px;
list-style: none;
font-size: 15px;
font-weight: 500;
line-height: 1.45;
}
.faqs summary::-webkit-details-marker {
display: none;
}
.faqs summary::after {
content: "+";
position: absolute;
right: 20px;
top: 50%;
width: 30px;
height: 30px;
border-radius: 50%;
display: grid;
place-items: center;
transform: translateY(-50%);
background: #f4f4f4;
color: #111;
font-size: 20px;
font-weight: 400;
transition: transform .3s ease, background .3s ease;
}
.faqs details[open] summary::after {
content: "−";
transform: translateY(-50%) rotate(180deg);
background: #111;
color: #fff;
}
.faqs .faq-answer {
margin: 0;
padding: 0 58px 20px 20px;
color: #666;
font-size: 14px;
line-height: 1.75;
}
/* Footer right-side hierarchy */
.footercontactdetials {
align-content: start;
gap: 9px;
}
.footer-email {
font-size: 15px;
font-weight: 600;
color: #111;
}
.footer-email:hover,
.footer-terms:hover {
color: #087fe5;
}
.footer-terms {
font-size: 13px;
font-weight: 500;
color: #555;
}
.footer-copy {
margin-top: 3px;
font-size: 12px;
font-weight: 400;
color: #8a8a8a;
}
/* Lead form: hide the scrollbar while preserving scrolling on small screens */
.modal-card {
scrollbar-width: none;
-ms-overflow-style: none;
}
.modal-card::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
/* Mobile-specific layout — hero copy must come before image */
@media (max-width: 760px) {
/* ==========================
MOBILE FULLSCREEN NAV
========================== */
@media (max-width: 760px) {
.nav {
height: 72px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1001;
background: #fff;
}
.brand {
position: relative;
z-index: 1003;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-weight: 600;
color: #000;
}
/* HAMBURGER */
.menu {
position: relative;
z-index: 1003;
width: 42px;
height: 42px;
padding: 0;
border: 0;
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
}
.menu span {
display: block;
width: 25px;
height: 2px;
background: #000;
transition:
transform 0.35s ease,
opacity 0.25s ease;
}
/* TURN HAMBURGER INTO X */
.menu.active span:first-child {
transform: translateY(4px) rotate(45deg);
}
.menu.active span:last-child {
transform: translateY(-4px) rotate(-45deg);
}
/* FULL SCREEN MENU */
.nav nav {
position: fixed;
inset: 0;
width: 100%;
height: 100dvh;
padding:
150px
28px
50px;
background: #fff;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0;
opacity: 0;
visibility: hidden;
transform: translateY(-15px);
transition:
opacity 0.35s ease,
transform 0.35s ease,
visibility 0.35s ease;
z-index: 1002;
overflow-y: auto;
}
/* OPEN MENU */
.nav nav.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* BIG MENU LINKS */
.nav nav a {
display: block;
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
font-size: clamp(44px, 13vw, 70px);
font-weight: 400;
line-height: 0.98;
letter-spacing: -0.055em;
color: #000;
text-decoration: none;
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
/* faded links like reference */
.nav nav a:not(:hover) {
opacity: 0.28;
}
.nav nav a:hover,
.nav nav a:focus {
opacity: 1;
transform: translateX(5px);
}
/* HOME FIRST LINK */
.nav nav a:first-child {
opacity: 1;
}
/* TRY NOW */
.nav nav .btn {
margin-top: 35px;
padding: 13px 25px;
font-size: 15px;
background: #000;
color: #fff;
border-radius: 50px;
}
}
.section {
width: 100%;
padding: 58px 20px;
}
h1 {
font-size: clamp(2.25rem, 11vw, 3.35rem);
line-height: 1.08;
letter-spacing: -.05em;
}
.hero {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 30px;
padding-top: 48px;
}
.hero-copy {
order: 1;
}
.hero-art {
order: 2;
}
.hero-copy p {
position: static;
bottom: auto;
margin: 22px 0 26px;
font-size: 15px;
line-height: 1.7;
}
.btn-hero {
position: static;
bottom: auto;
min-height: 46px;
padding: 12px 22px;
}
.hero-art img {
max-height: 360px;
width: 100%;
object-fit: contain;
}
.industry-grid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.industry-grid article {
min-height: 125px;
padding: 18px;
gap: 18px;
}
.industry-icon {
font-size: 24px;
}
.industries-h3 {
font-size: 15px;
}
.problem p.scroll-text-reveal {
font-size: clamp(1.55rem, 7.2vw, 2rem);
line-height: 1.4;
}
.achieve,
.trial,
.about {
gap: 34px;
}
.achieve img,
.trial img,
.about img {
order: 0;
}
.achieve .copy,
.about>div {
order: 0;
}
.achieve h2 {
font-size: 2.15rem;
}
.para-whatactually {
font-size: 16px;
line-height: 1.75;
}
.cards {
grid-template-columns: 1fr;
gap: 14px;
}
.cards article {
min-height: 235px;
padding: 26px 24px;
}
.cards b {
margin-bottom: 28px;
}
.steps {
grid-template-columns: 1fr;
padding-left: 24px;
}
.process-timeline::before,
.process-progress {
left: 7px;
transform: none;
}
.steps article {
min-height: 0;
padding: 24px;
}
.howweworkheadline {
font-size: 20px;
}
.compareimgsection {
width: 100%;
left: 0;
}
.trial h2 {
font-size: clamp(2rem, 9vw, 2.8rem);
line-height: 1.08;
}
.trial p {
font-size: 16px;
margin: 18px 0 24px;
}
.chesstrialsection {
width: 100%;
height: auto;
max-height: 420px;
}
.about h3 {
font-size: 1.65rem;
}
.about p {
font-size: 15px;
}
.faqs summary {
padding-right: 54px;
font-size: 14px;
}
.faqs .faq-answer {
padding-right: 20px;
font-size: 13.5px;
}
.modal {
padding: 12px;
}
.modal-card {
width: 100%;
max-height: 94dvh;
padding: 28px 20px 22px;
}
footer {
width: 100%;
padding: 10px 20px 55px;
}
.footercontactdetials {
text-align: left !important;
}
}
@media (max-width: 430px) {
.industry-grid {
grid-template-columns: 1fr;
}
.industry-grid article {
min-height: 104px;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.scroll-text-reveal .word {
transition: none;
color: #090909;
}
.steps article {
opacity: 1;
transform: none;
transition: none;
}
.process-progress {
display: none;
}
}