/* ============================================
   Dyemys Painting — Modelo 2
   Pixel-perfect mirror of Penpot design
   Container fixed at 1440px desktop
   ============================================ */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; }
body {
  font-family: 'Inter', sans-serif;
  background: #fbf3e6;
  color: #052e64;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* Palette */
:root {
  --navy: #052e64;
  --cream: #fbf3e6;
  --orange: #F58220;
  --orange-deep: #b76c01;
  --white: #FFFFFF;
  --vermilion: #D7401A;
  --saffron: #F4B72D;
  --brand-gold: #D4A03B;
  --terracotta: #C56B49;
  --olive: #6E6224;
  --star-yellow: #FFB534;
}

/* Section + container — pixel-perfect 1440 */
.section { position: relative; width: 100%; }
.canvas {
  position: relative;
  width: 1440px;
  margin: 0 auto;
}

/* ============================================
   01 - HEADER (1440 x 130)
   ============================================ */
.section--header { background: #052e64; height: 130px; }
.section--header .canvas { height: 130px; }

.hd-addr-icon  { position: absolute; left: 120px; top: 28px; width: 18px; height: 18px; color: #F58220; }
.hd-addr-text  { position: absolute; left: 148px; top: 30px; width: 280px; height: 18px; font-family: Inter; font-size: 15px; font-weight: 500; color: #FFFFFF; line-height: 18px; }

.hd-logo       { position: absolute; left: 647px; top: -11.5px; width: 153px; height: 153px; z-index: 5; }
.hd-logo img   { width: 153px; height: 153px; object-fit: contain; }

.hd-mail-icon  { position: absolute; left: 990px; top: 28px; width: 18px; height: 18px; color: #F58220; }
.hd-mail-text  { position: absolute; left: 1018px; top: 30px; width: 200px; height: 18px; font-family: Inter; font-size: 15px; font-weight: 500; color: #FFFFFF; line-height: 18px; }

.hd-divider    { position: absolute; left: 1230px; top: 23px; width: 1px; height: 28px; background: rgba(15,27,45,0.2); }

.hd-call-bg    { position: absolute; left: 1250px; top: 12px; width: 170px; height: 50px; background: #FFFFFF; border-radius: 6px; }
.hd-call-text  { position: absolute; left: 1276px; top: 27px; width: 118px; height: 20px; font-family: Poppins; font-size: 16px; font-weight: 700; color: #052e64; line-height: 20px; }

.hd-nav-band   { position: absolute; left: calc(50% - 50vw); top: 74px; width: 100vw; height: 56px; background: #b76c01; }

.hd-nav-link   { position: absolute; top: 92px; height: 20px; font-family: Poppins; font-size: 16px; font-weight: 600; color: #FFFFFF; line-height: 20px; }
.hd-nav-left-0 { left: 120px;  width: 49px; }
.hd-nav-left-1 { left: 220px;  width: 73px; }
.hd-nav-left-2 { left: 360px;  width: 81px; }
.hd-nav-right-0{ left: 1100px; width: 59px; }
.hd-nav-right-1{ left: 1200px; width: 67px; }
.hd-nav-right-2{ left: 1290px; width: 66px; }

/* ============================================
   02 - HERO (1440 x 640) - section.y = 130
   CSS top = penpot.y - 130
   ============================================ */
.section--hero { background: #fef2e1; height: 640px; overflow: hidden; }
.section--hero .canvas { height: 640px; }

.hr-bg-img    { position: absolute; left: 530px; top: -360px; width: 1475px; height: 1900px; transform: rotate(10.078deg); transform-origin: center center; z-index: 1; }
.hr-img-2     { position: absolute; left: 630px; top: -64px; width: 425px; height: 708px; z-index: 2; }
.hr-img-3     { position: absolute; left: 973px; top: -115px; width: 468px; height: 780px; z-index: 2; }
.hr-bg-img img, .hr-img-2 img, .hr-img-3 img { width: 100%; height: 100%; object-fit: cover; }

.hr-eyebrow   { position: absolute; left: 120px; top: 90px;  width: 226px; height: 16px; font-family: Poppins; font-size: 13px; font-weight: 600; color: #052e64; line-height: 16px; z-index: 5; }
.hr-h1        { position: absolute; left: 120px; top: 130px; width: 531px; height: 202px; font-family: Poppins; font-size: 56px; font-weight: 800; color: #052e64; line-height: 1.18; white-space: pre-line; z-index: 5; }
.hr-body      { position: absolute; left: 120px; top: 366px; width: 472px; height: 58px; font-family: Inter; font-size: 16px; font-weight: 400; color: rgba(0,0,0,0.85); line-height: 1.55; white-space: pre-line; z-index: 5; }

.hr-cta-bg    { position: absolute; left: 120px; top: 456px; width: 240px; height: 56px; background: #052e64; border-radius: 6px; z-index: 5; }
.hr-cta-text  { position: absolute; left: 152px; top: 476px; width: 172px; height: 17px; font-family: Poppins; font-size: 14px; font-weight: 700; color: #FFFFFF; line-height: 17px; z-index: 6; }

.hr-star      { position: absolute; top: 540px; width: 18px; height: 18px; color: #FFB534; z-index: 5; }
.hr-star-0 { left: 120px; } .hr-star-1 { left: 142px; } .hr-star-2 { left: 164px; } .hr-star-3 { left: 186px; } .hr-star-4 { left: 208px; }

.hr-trust     { position: absolute; left: 120px; top: 562px; width: 233px; height: 16px; font-family: Inter; font-size: 13px; font-weight: 500; color: rgba(0,0,0,0.7); line-height: 16px; z-index: 5; }

/* ============================================
   03 - ABOUT (1440 x 600) - section.y = 770
   ============================================ */
.section--about { background: #ffffff; height: 600px; }
.section--about .canvas { height: 600px; }

.ab-img-1     { position: absolute; left: 120px; top: 100px; width: 230px; height: 306px; border-radius: 12px; overflow: hidden; }
.ab-img-2     { position: absolute; left: 370px; top: 78px; width: 230px; height: 395px; border-radius: 12px; overflow: hidden; }
.ab-img-1 img, .ab-img-2 img { width: 100%; height: 100%; object-fit: cover; }

.ab-phone-card{ position: absolute; left: 120px; top: 424px; width: 230px; height: 90px; background: linear-gradient(180deg, #f3b30b 0%, #f46f03 100%); border-radius: 12px; }
.ab-phone-icon{ position: absolute; left: 140px; top: 455px; width: 28px; height: 28px; color: #FFFFFF; }
.ab-phone-text{ position: absolute; left: 183px; top: 459px; width: 147px; height: 24px; font-family: Poppins; font-size: 20px; font-weight: 700; color: #FFFFFF; line-height: 24px; }

.ab-eye-dot   { position: absolute; left: 720px; top: 122px; width: 8px; height: 8px; border-radius: 50%; background: #F58220; }
.ab-eyebrow   { position: absolute; left: 736px; top: 117px; width: 102px; height: 16px; font-family: Poppins; font-size: 13px; font-weight: 700; color: #052e64; line-height: 16px; }
.ab-heading   { position: absolute; left: 720px; top: 150px; width: 510px; height: 159px; font-family: Poppins; font-size: 44px; font-weight: 800; color: #052e64; line-height: 1.18; white-space: pre-line; }
.ab-body      { position: absolute; left: 720px; top: 320px; width: 558px; height: 126px; font-family: Inter; font-size: 15px; font-weight: 400; color: rgba(0,0,0,0.75); line-height: 1.55; white-space: pre-line; }

.ab-cta-bg    { position: absolute; left: 720px; top: 500px; width: 230px; height: 52px; background: linear-gradient(180deg, #f3b30b 0%, #f46f03 100%); border-radius: 6px; }
.ab-cta-text  { position: absolute; left: 750px; top: 519px; width: 170px; height: 17px; font-family: Poppins; font-size: 14px; font-weight: 700; color: #FFFFFF; line-height: 17px; white-space: nowrap; }

/* ============================================
   04 - SERVICES (1440 x 836) - section.y = 1370
   ============================================ */
.section--services { background: #f7f7f7; height: 836px; }
.section--services .canvas { height: 836px; }

.sv-eye-dot   { position: absolute; left: 120px; top: 84px; width: 8px; height: 8px; border-radius: 50%; background: #F58220; }
.sv-eyebrow   { position: absolute; left: 136px; top: 79px; width: 93px; height: 16px; font-family: Poppins; font-size: 13px; font-weight: 700; color: #052e64; line-height: 16px; }
.sv-heading   { position: absolute; left: 120px; top: 110px; width: 580px; height: 106px; font-family: Poppins; font-size: 44px; font-weight: 800; color: #052e64; line-height: 1.18; white-space: pre-line; }

.sv-prev-btn  { position: absolute; left: 1180px; top: 100px; width: 56px; height: 56px; background: #FFFFFF; border-radius: 50%; border: 1.5px solid rgba(5,46,100,0.2); display: flex; align-items: center; justify-content: center; color: #052e64; }
.sv-next-btn  { position: absolute; left: 1252px; top: 100px; width: 56px; height: 56px; background: linear-gradient(180deg, #f3b30b 0%, #f46f03 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFFFFF; }

.sv-card      { position: absolute; top: 240px; width: 284px; height: 376px; background: #FFFFFF; border-radius: 12px; box-shadow: 0 4px 16px rgba(5,46,100,0.06); overflow: hidden; }
.sv-card-0 { left: 120px; } .sv-card-1 { left: 432px; } .sv-card-2 { left: 744px; } .sv-card-3 { left: 1056px; }
.sv-card-img  { position: absolute; top: 18px; left: 18px; width: 249px; height: 177px; border-radius: 8px; overflow: hidden; }
.sv-card-img img { width: 100%; height: 100%; object-fit: cover; }
.sv-card-title{ position: absolute; top: 211px; left: 18px; width: 249px; height: 24px; font-family: Poppins; font-size: 20px; font-weight: 700; color: #052e64; line-height: 24px; }
.sv-card-body { position: absolute; top: 250px; left: 18px; width: 249px; font-family: Inter; font-size: 14px; font-weight: 400; color: rgba(0,0,0,0.7); line-height: 1.55; }
.sv-card-link { position: absolute; top: 340px; left: 18px; font-family: Poppins; font-size: 13px; font-weight: 700; color: #052e64; line-height: 16px; display: inline-flex; align-items: center; gap: 4px; }
.sv-card-link svg { width: 13px; height: 13px; }

.sv-view-all-bg { position: absolute; left: 610px; top: 670px; width: 220px; height: 56px; background: linear-gradient(180deg, #f3b30b 0%, #f46f03 100%); border-radius: 6px; }
.sv-view-all-text { position: absolute; left: 653.5px; top: 689.5px; width: 133px; height: 17px; font-family: Poppins; font-size: 14px; font-weight: 700; color: #FFFFFF; line-height: 17px; }

/* ============================================
   05 - OUR PROCESS (1440 x 780) - section.y = 2206
   ============================================ */
.section--process { background: #ffffff; height: 780px; }
.section--process .canvas { height: 780px; }

.pr-eye-dot   { position: absolute; left: 120px; top: 84px; width: 8px; height: 8px; border-radius: 50%; background: #F58220; }
.pr-eyebrow   { position: absolute; left: 136px; top: 79px; width: 91px; height: 16px; font-family: Poppins; font-size: 13px; font-weight: 700; color: #052e64; line-height: 16px; }
.pr-heading   { position: absolute; left: 120px; top: 110px; width: 464px; height: 106px; font-family: Poppins; font-size: 44px; font-weight: 800; color: #052e64; line-height: 1.18; white-space: pre-line; }
.pr-body      { position: absolute; left: 120px; top: 250px; width: 545px; height: 36px; font-family: Inter; font-size: 15px; font-weight: 400; color: rgba(0,0,0,0.75); line-height: 1.55; white-space: pre-line; }

.pr-cta-bg    { position: absolute; left: 120px; top: 320px; width: 220px; height: 52px; background: linear-gradient(180deg, #f3b30b 0%, #f46f03 100%); border-radius: 6px; }
.pr-cta-text  { position: absolute; left: 153px; top: 339px; width: 146px; height: 17px; font-family: Poppins; font-size: 14px; font-weight: 700; color: #FFFFFF; line-height: 17px; }

.pr-image     { position: absolute; left: 700px; top: 70px; width: 620px; height: 320px; border-radius: 12px; overflow: hidden; background: #C56B49; }
.pr-image img { width: 100%; height: 100%; object-fit: cover; }

.pr-card      { position: absolute; top: 460px; width: 384px; height: 220px; border-radius: 12px; box-shadow: 0 4px 16px rgba(5,46,100,0.06); }
.pr-card-0    { left: 120px; background: linear-gradient(180deg, #f3b30b 0%, #f46f03 100%); }
.pr-card-1    { left: 528px; background: #f7f7f7; }
.pr-card-2    { left: 936px; background: #f7f7f7; }

.pr-card-num-bg{ position: absolute; top: 484px; width: 54px; height: 54px; border-radius: 50%; }
.pr-card-num-bg-0 { left: 144px; background: #FFFFFF; }
.pr-card-num-bg-1 { left: 552px; background: #ffe9d3; }
.pr-card-num-bg-2 { left: 960px; background: #ffe9d3; }
.pr-card-num   { position: absolute; top: 499px; width: 54px; text-align: center; font-family: Poppins; font-size: 20px; font-weight: 800; color: #F58220; line-height: 24px; }
.pr-card-num-0 { left: 144px; }
.pr-card-num-1 { left: 552px; }
.pr-card-num-2 { left: 960px; }

.pr-card-title { position: absolute; top: 560px; width: 336px; font-family: Poppins; font-size: 20px; font-weight: 700; line-height: 24px; }
.pr-card-title-0 { left: 144px; color: #FFFFFF; }
.pr-card-title-1 { left: 552px; color: #052e64; }
.pr-card-title-2 { left: 960px; color: #052e64; }

.pr-card-body  { position: absolute; top: 600px; width: 336px; font-family: Inter; font-size: 14px; font-weight: 400; line-height: 1.55; }
.pr-card-body-0 { left: 144px; color: rgba(255,255,255,0.95); }
.pr-card-body-1 { left: 552px; color: rgba(0,0,0,0.7); }
.pr-card-body-2 { left: 960px; color: rgba(0,0,0,0.7); }

.pr-arrow      { position: absolute; top: 470px; width: 129px; height: 78px; color: #052e64; opacity: 0.4; }
.pr-arrow-1    { left: 418px; }
.pr-arrow-2    { left: 823px; }

/* ============================================
   06 - GALLERY (1440 x 1213) - section.y = 2986
   ============================================ */
.section--gallery { background: #fbf3e6; height: 1213px; }
.section--gallery .canvas { height: 1213px; }

.gl-eye-dot   { position: absolute; left: 670px; top: 87px; width: 8px; height: 8px; border-radius: 50%; background: #F58220; }
.gl-eyebrow   { position: absolute; left: 686px; top: 82px; width: 80px; height: 16px; font-family: Poppins; font-size: 13px; font-weight: 700; color: #052e64; line-height: 16px; }
.gl-heading   { position: absolute; left: 410px; top: 110px; width: 591px; height: 53px; font-family: Poppins; font-size: 44px; font-weight: 800; color: #052e64; text-align: center; line-height: 1.18; }

.gl-card      { position: absolute; border-radius: 12px; }
.gl-card img  { position: absolute; top: -10px; left: -10px; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.gl-card-0    { left: 120px; top: 210px; width: 871px; height: 447px; background: #D7401A; }
.gl-card-1    { left: 1017px; top: 210px; width: 280px; height: 451px; background: #F4B72D; }
.gl-card-2    { left: 118px; top: 711px; width: 381px; height: 371px; background: #D4A03B; }
.gl-card-3    { left: 521px; top: 710px; width: 380px; height: 374px; background: #C56B49; }
.gl-card-4    { left: 922px; top: 710px; width: 377px; height: 373px; background: #6E6224; }

/* ============================================
   07 - BEFORE & AFTER (1440 x 878) - section.y = 4200
   ============================================ */
.section--ba { background: #ffffff; height: 878px; }
.section--ba .canvas { height: 878px; }

.ba-eye-dot   { position: absolute; left: 658px; top: 87px; width: 8px; height: 8px; border-radius: 50%; background: #F58220; }
.ba-eyebrow   { position: absolute; left: 674px; top: 82px; width: 110px; height: 16px; font-family: Poppins; font-size: 13px; font-weight: 700; color: #052e64; line-height: 16px; }
.ba-heading   { position: absolute; left: 540px; top: 110px; width: 419px; height: 53px; font-family: Poppins; font-size: 44px; font-weight: 800; color: #052e64; text-align: center; line-height: 1.18; }

.ba-img-1     { position: absolute; left: 168px; top: 220px; width: 550px; height: 513px; border-radius: 12px; overflow: hidden; background: #C56B49; }
.ba-img-2     { position: absolute; left: 722px; top: 220px; width: 550px; height: 513px; border-radius: 12px; overflow: hidden; background: #F4B72D; }
.ba-img-1 img, .ba-img-2 img { width: 100%; height: 100%; object-fit: cover; }

.ba-slider-bg { position: absolute; left: 692px; top: 432px; width: 56px; height: 56px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 4px 12px rgba(5,46,100,0.2); }
.ba-slider-icon { position: absolute; left: 709px; top: 453px; width: 22px; height: 14px; color: #052e64; z-index: 2; }

.ba-before-label { position: absolute; left: 412px; top: 770px; width: 60px; height: 22px; font-family: Poppins; font-size: 18px; font-weight: 700; color: #052e64; line-height: 22px; }
.ba-after-label  { position: absolute; left: 970px; top: 770px; width: 46px; height: 22px; font-family: Poppins; font-size: 18px; font-weight: 700; color: #052e64; line-height: 22px; }

/* ============================================
   08 - CONTACT FORM (1440 x 1194) - section.y = 5079
   ============================================ */
.section--contact { background: #ffffff; height: 1194px; }
.section--contact .canvas { height: 1194px; }

.ct-eye-dot   { position: absolute; left: 660px; top: 67px; width: 8px; height: 8px; border-radius: 50%; background: #F58220; }
.ct-eyebrow   { position: absolute; left: 676px; top: 62px; width: 100px; height: 16px; font-family: Poppins; font-size: 13px; font-weight: 700; color: #052e64; line-height: 16px; }
.ct-heading   { position: absolute; left: 320px; top: 90px; width: 800px; height: 53px; font-family: Poppins; font-size: 44px; font-weight: 800; color: #052e64; text-align: center; line-height: 1.18; }

.ct-form-card { position: absolute; left: 120px; top: 180px; width: 641px; height: 690px; background: #f7f7f7; border-radius: 12px; box-shadow: 0 4px 16px rgba(5,46,100,0.06); }
.ct-form-title{ position: absolute; left: 152px; top: 212px; width: 400px; height: 27px; font-family: Poppins; font-size: 22px; font-weight: 700; color: #052e64; line-height: 27px; }
.ct-form-desc { position: absolute; left: 152px; top: 248px; width: 460px; height: 34px; font-family: Inter; font-size: 14px; font-weight: 400; color: rgba(0,0,0,0.7); line-height: 1.55; white-space: pre-line; }

.ct-input-label    { position: absolute; height: 15px; font-family: Inter; font-size: 12px; font-weight: 600; color: #052e64; line-height: 15px; }
.ct-input-bg       { position: absolute; height: 44px; background: rgba(255,255,255,0.5); border: 1px solid rgba(5,46,100,0.15); border-radius: 6px; }
.ct-input-placeholder { position: absolute; height: 17px; font-family: Inter; font-size: 14px; font-weight: 400; color: rgba(0,0,0,0.4); line-height: 17px; }
.ct-textarea-bg    { position: absolute; height: 189px; background: rgba(255,255,255,0.5); border: 1px solid rgba(5,46,100,0.15); border-radius: 6px; }

.ct-submit-bg     { position: absolute; left: 152px; top: 786px; width: 160px; height: 50px; background: linear-gradient(180deg, #f3b30b 0%, #f46f03 100%); border-radius: 6px; }
.ct-submit-text   { position: absolute; left: 184px; top: 804px; width: 100px; height: 17px; font-family: Poppins; font-size: 14px; font-weight: 700; color: #FFFFFF; line-height: 17px; }

.ct-image-placeholder { position: absolute; left: 800px; top: 196px; width: 527px; height: 674px; background: #C56B49; border-radius: 12px; }
.ct-image-placeholder img { position: absolute; top: -10px; left: -10px; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }

.ct-card      { position: absolute; top: 910px; width: 389px; height: 160px; border-radius: 12px; box-shadow: 0 4px 16px rgba(5,46,100,0.06); }
.ct-card-0 { left: 120px; background: #f7f7f7; }
.ct-card-1 { left: 529px; background: linear-gradient(180deg, #f3b30b 0%, #f46f03 100%); }
.ct-card-2 { left: 938px; background: #f7f7f7; }

.ct-card-icon  { position: absolute; top: 947px; width: 30px; height: 30px; }
.ct-card-icon-0 { left: 299.5px; color: #F58220; }
.ct-card-icon-1 { left: 708.5px; color: #FFFFFF; }
.ct-card-icon-2 { left: 1117.5px; color: #F58220; }

.ct-card-title { position: absolute; top: 983px; width: 234px; font-family: Poppins; font-size: 20px; font-weight: 700; text-align: center; line-height: 21px; }
.ct-card-title-0 { left: 197.5px; color: #052e64; }
.ct-card-title-1 { left: 606.5px; color: #FFFFFF; }
.ct-card-title-2 { left: 1015.5px; color: #052e64; }

.ct-card-value { position: absolute; top: 1012px; width: 311px; font-family: Inter; font-size: 16px; font-weight: 500; text-align: center; line-height: 22px; }
.ct-card-value-0 { left: 159px; color: rgba(0,0,0,0.75); }
.ct-card-value-1 { left: 568px; color: #FFFFFF; }
.ct-card-value-2 { left: 977px; color: rgba(0,0,0,0.75); }

/* ============================================
   09 - CTA BANNER (1440 x 427) - section.y = 6274
   ============================================ */
.section--cta { background: linear-gradient(180deg, #f3b30b 0%, #f46f03 100%); height: 427px; }
.section--cta .canvas { height: 427px; }

.cta-heading  { position: absolute; left: 120px; top: 70px; width: 522px; height: 120px; font-family: Poppins; font-size: 50px; font-weight: 800; color: #052e64; line-height: 1.2; white-space: pre-line; }
.cta-body     { position: absolute; left: 120px; top: 198px; width: 665px; height: 72px; font-family: Inter; font-size: 20px; font-weight: 400; color: rgba(0,0,0,0.8); line-height: 1.55; white-space: pre-line; }

.cta-btn-bg   { position: absolute; left: 120px; top: 308px; width: 285px; height: 62px; background: #052e64; border-radius: 6px; }
.cta-btn-text { position: absolute; left: 152px; top: 328px; width: 221px; height: 22px; font-family: Poppins; font-size: 18px; font-weight: 700; color: #FFFFFF; line-height: 22px; }

.cta-logo     { position: absolute; left: 933px; top: 16px; width: 394px; height: 394px; }
.cta-logo img { width: 100%; height: 100%; object-fit: contain; }

/* ============================================
   10 - FOOTER (1440 x 397) - section.y = 6701
   ============================================ */
.section--footer { background: #052e64; height: 397px; }
.section--footer .canvas { height: 397px; }

.ft-logo      { position: absolute; left: 107px; top: 14px; width: 221px; height: 221px; }
.ft-logo img  { width: 100%; height: 100%; object-fit: contain; }

.ft-desc      { position: absolute; left: 120px; top: 230px; width: 280px; height: 51px; font-family: Inter; font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.75); line-height: 1.45; white-space: pre-line; }

.ft-soc       { position: absolute; top: 80px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.ft-soc-0     { left: 1090px; background: #F58220; }
.ft-soc-1     { left: 1138px; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.5); }
.ft-soc-2     { left: 1186px; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.5); }
.ft-soc-3     { left: 1234px; background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.5); }

.ft-col-head  { position: absolute; top: 80px; height: 22px; font-family: Poppins; font-size: 18px; font-weight: 700; color: #FFFFFF; line-height: 22px; }
.ft-col-head-company { left: 540px; }
.ft-col-head-services { left: 800px; }

.ft-link      { position: absolute; height: 17px; font-family: Inter; font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.75); line-height: 17px; }

.ft-divider   { position: absolute; left: 120px; top: 330px; width: 1200px; height: 1px; background: rgba(255,255,255,0.15); }
.ft-copyright { position: absolute; left: 120px; top: 350px; height: 16px; font-family: Inter; font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.6); line-height: 16px; }
.ft-designed  { position: absolute; left: 1100px; top: 350px; width: 207px; height: 16px; font-family: Inter; font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.6); line-height: 16px; }

/* ============================================
   INTERACTIVITY — Hovers + transitions
   ============================================ */
.hr-cta-bg, .ab-cta-bg, .pr-cta-bg, .sv-view-all-bg, .ct-submit-bg, .cta-btn-bg {
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.hr-cta-bg:hover, .ab-cta-bg:hover, .pr-cta-bg:hover, .sv-view-all-bg:hover, .ct-submit-bg:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(245,130,32,.38);
  filter: brightness(1.06);
}
.cta-btn-bg:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.2);
}
.hr-cta-bg:active, .ab-cta-bg:active, .pr-cta-bg:active, .sv-view-all-bg:active, .ct-submit-bg:active, .cta-btn-bg:active { transform: translateY(0); }

.ab-phone-card { transition: transform 200ms ease, box-shadow 200ms ease; }
.ab-phone-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(245,130,32,.38); }

.hd-call-bg { cursor: pointer; transition: transform 200ms ease, box-shadow 200ms ease; }
.hd-call-bg:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }

.sv-prev-btn, .sv-next-btn { cursor: pointer; transition: transform 200ms ease, box-shadow 200ms ease; }
.sv-prev-btn:hover, .sv-next-btn:hover { transform: scale(1.08); box-shadow: 0 6px 16px rgba(5,46,100,.2); }

.hd-nav-link { transition: color 200ms ease; position: absolute; }
.hd-nav-link::after { content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:#fff; transition: width 250ms ease; }
.hd-nav-link:hover { color: #fff; }
.hd-nav-link:hover::after { width: 100%; }

.ft-link { transition: color 200ms ease, transform 150ms ease; }
.ft-link:hover { color: #FFFFFF; transform: translateX(3px); }

.sv-card { cursor: pointer; transition: transform 300ms ease, box-shadow 300ms ease; overflow: hidden; }
.sv-card:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(5,46,100,.14); }
.sv-card-img { overflow: hidden; }
.sv-card-img img { transition: transform 600ms ease; }
.sv-card:hover .sv-card-img img { transform: scale(1.06); }

.pr-card { transition: transform 300ms ease, box-shadow 300ms ease; }
.pr-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(5,46,100,.12); }

.ct-card { transition: transform 300ms ease, box-shadow 300ms ease; }
.ct-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(5,46,100,.14); }

.gl-card img { transition: transform 500ms ease; }
.gl-card:hover img { transform: scale(1.03) translate(-10px, -10px); }

.ab-img-1, .ab-img-2 { overflow: hidden; }
.ab-img-1 img, .ab-img-2 img { transition: transform 500ms ease; }
.ab-img-1:hover img, .ab-img-2:hover img { transform: scale(1.05); }

.hr-img-2, .hr-img-3 { overflow: hidden; }
.hr-img-2 img, .hr-img-3 img { transition: transform 500ms ease; }
.hr-img-2:hover img, .hr-img-3:hover img { transform: scale(1.04); }

.pr-image { overflow: hidden; }
.pr-image img { transition: transform 600ms ease; }
.pr-image:hover img { transform: scale(1.05); }

.ba-img-1, .ba-img-2 { cursor: pointer; }
.ba-img-1 img, .ba-img-2 img { transition: transform 500ms ease; }
.ba-img-1:hover img, .ba-img-2:hover img { transform: scale(1.04); }

.ba-slider-bg { cursor: pointer; transition: transform 200ms ease; }
.ba-slider-bg:hover { transform: scale(1.1); box-shadow: 0 6px 18px rgba(5,46,100,.3); }

.hd-logo { transition: transform 300ms ease; }
.hd-logo:hover { transform: scale(1.04); }

.ft-soc { cursor: pointer; transition: transform 200ms ease, background 200ms ease; }
.ft-soc:hover { transform: translateY(-3px) scale(1.06); }

.ct-input-bg, .ct-textarea-bg { transition: border-color 200ms ease, box-shadow 200ms ease; }
.ct-input-bg:hover, .ct-textarea-bg:hover { border-color: rgba(5,46,100,.35) !important; }

/* ============================================
   SCROLL REVEAL — fade-in + slide-up
   (sections after Hero)
   ============================================ */
.reveal { transition: opacity 700ms ease, transform 700ms ease; will-change: opacity, transform; }
.js-on .reveal { opacity: 0; transform: translateY(40px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Button text spans — let mouse pass through to link beneath */
.hr-cta-text, .ab-cta-text, .pr-cta-text, .sv-view-all-text, .ct-submit-text, .cta-btn-text, .hd-call-text {
  pointer-events: none;
}

/* Force pointer cursor on all children of interactive cards (text elements default to I-beam) */
.sv-card, .sv-card *, .pr-card, .pr-card *, .ct-card, .ct-card *, .gl-card, .gl-card *, .ab-img-1, .ab-img-1 *, .ab-img-2, .ab-img-2 *, .ba-img-1, .ba-img-1 *, .ba-img-2, .ba-img-2 *, .pr-image, .pr-image *, .hr-img-2, .hr-img-2 *, .hr-img-3, .hr-img-3 * {
  cursor: pointer;
}

/* ============================================
   FIX: button text + card overlay elements
   move together with their bg/card on hover
   ============================================ */
/* Pointer-events: none on overlay elements → mouse hover always reaches bg/card behind */
.pr-card-num-bg, .pr-card-num, .pr-card-title, .pr-card-body { pointer-events: none; }
.ct-card-icon, .ct-card-title, .ct-card-value { pointer-events: none; }

/* Cursor pointer on cards bg (children inherit via sibling rules below — but text has pointer-events:none so cursor comes from card) */
.pr-card, .ct-card { cursor: pointer; }

/* Transitions on text/overlay elements (they need to move smoothly) */
.hr-cta-text, .ab-cta-text, .pr-cta-text, .sv-view-all-text, .ct-submit-text, .cta-btn-text, .hd-call-text {
  transition: transform 200ms ease;
}
.pr-card-num-bg, .pr-card-num, .pr-card-title, .pr-card-body,
.ct-card-icon, .ct-card-title, .ct-card-value { transition: transform 300ms ease; }

/* Button text follows bg on :hover (text is sibling AFTER bg in DOM → ~ combinator) */
.hr-cta-bg:hover ~ .hr-cta-text,
.ab-cta-bg:hover ~ .ab-cta-text,
.pr-cta-bg:hover ~ .pr-cta-text,
.sv-view-all-bg:hover ~ .sv-view-all-text,
.ct-submit-bg:hover ~ .ct-submit-text,
.cta-btn-bg:hover ~ .cta-btn-text,
.hd-call-bg:hover ~ .hd-call-text { transform: translateY(-2px); }

/* PR cards: when bg is hovered, lift all overlay siblings together */
.pr-card-0:hover ~ .pr-card-num-bg-0,
.pr-card-0:hover ~ .pr-card-num-0,
.pr-card-0:hover ~ .pr-card-title-0,
.pr-card-0:hover ~ .pr-card-body-0,
.pr-card-1:hover ~ .pr-card-num-bg-1,
.pr-card-1:hover ~ .pr-card-num-1,
.pr-card-1:hover ~ .pr-card-title-1,
.pr-card-1:hover ~ .pr-card-body-1,
.pr-card-2:hover ~ .pr-card-num-bg-2,
.pr-card-2:hover ~ .pr-card-num-2,
.pr-card-2:hover ~ .pr-card-title-2,
.pr-card-2:hover ~ .pr-card-body-2 { transform: translateY(-4px); }

/* CT cards: same pattern */
.ct-card-0:hover ~ .ct-card-icon-0,
.ct-card-0:hover ~ .ct-card-title-0,
.ct-card-0:hover ~ .ct-card-value-0,
.ct-card-1:hover ~ .ct-card-icon-1,
.ct-card-1:hover ~ .ct-card-title-1,
.ct-card-1:hover ~ .ct-card-value-1,
.ct-card-2:hover ~ .ct-card-icon-2,
.ct-card-2:hover ~ .ct-card-title-2,
.ct-card-2:hover ~ .ct-card-value-2 { transform: translateY(-4px); }

/* About phone card — icon + text follow card on hover */
.ab-phone-icon, .ab-phone-text { pointer-events: none; transition: transform 200ms ease; }
.ab-phone-card:hover ~ .ab-phone-icon,
.ab-phone-card:hover ~ .ab-phone-text { transform: translateY(-2px); }

/* ============================================
   1. SMOOTH SCROLL (anchor links)
   ============================================ */
html { scroll-behavior: smooth; }

/* ============================================
   2. FOCUS STATES — form inputs
   ============================================ */
.ct-input-bg:focus, .ct-textarea-bg:focus,
.ct-input-bg:focus-within, .ct-textarea-bg:focus-within {
  border-color: #F58220 !important;
  box-shadow: 0 0 0 3px rgba(245,130,32,.15) !important;
  outline: none;
}
input:focus, textarea:focus, select:focus { outline: none; }

/* ============================================
   3. STAGGER REVEAL — children fade-in with delay
   ============================================ */
.reveal-stagger { transition: opacity 600ms ease, transform 600ms ease; will-change: opacity, transform; }
.js-on .reveal-stagger { opacity: 0; transform: translateY(30px); }
.reveal-stagger.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal-stagger { opacity: 1; transform: none; transition: none; }
}

/* ============================================
   4. SERVICES CARROSSEL — track + window
   ============================================ */
.sv-window { position: absolute; left: 120px; top: 240px; width: 1320px; height: 380px; overflow: hidden; }
.sv-track  { display: flex; gap: 28px; transition: transform 450ms ease; }
.sv-track > .sv-card { position: relative !important; left: auto !important; top: auto !important; flex: 0 0 284px; height: 376px; }

/* ============================================
   5. BEFORE/AFTER — drag slider (refactored)
   Single comparison container; after-img clip moves with handle
   ============================================ */
.ba-comparison { position: absolute; left: 168px; top: 220px; width: 1104px; height: 513px; border-radius: 12px; overflow: hidden; user-select: none; }
.ba-comparison .ba-cmp-before, .ba-comparison .ba-cmp-after { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba-comparison .ba-cmp-before img, .ba-comparison .ba-cmp-after img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-comparison .ba-cmp-after { clip-path: inset(0 0 0 50%); }
.ba-handle-line { position: absolute; top: 0; bottom: 0; width: 4px; background: rgba(255,255,255,0.9); left: 50%; transform: translateX(-50%); z-index: 5; pointer-events: none; }
.ba-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 4px 12px rgba(5,46,100,0.3); cursor: ew-resize; z-index: 10; display: flex; align-items: center; justify-content: center; }
.ba-knob svg { color: #052e64; pointer-events: none; }
.ba-knob:hover { transform: translate(-50%, -50%) scale(1.08); }

/* ============================================
   6. ACTIVE NAV LINK — highlight current section
   ============================================ */
.hd-nav-link.is-active { color: #fff; }
.hd-nav-link.is-active::after { width: 100%; }

/* ============================================
   7. SCROLL-TO-TOP button (floating)
   ============================================ */
.scroll-top { position: fixed; bottom: 24px; right: 24px; width: 52px; height: 52px; border-radius: 50%; background: #052e64; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(5,46,100,0.3); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 250ms ease, transform 250ms ease, background 200ms ease; z-index: 1000; border: none; }
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: #F58220; transform: translateY(-2px); }
.scroll-top svg { width: 22px; height: 22px; }

/* ============================================
   8. SUBMIT button loading state (spinner)
   ============================================ */
.ct-submit-bg.is-loading { pointer-events: none; }
.ct-submit-bg.is-loading::before { content:''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spinSpinner 700ms linear infinite; z-index: 5; }
.ct-submit-bg.is-loading ~ .ct-submit-text { opacity: 0; }
@keyframes spinSpinner { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ct-submit-bg { position: absolute; }
.form-success-msg { position: absolute; left: 152px; top: 850px; width: 588px; padding: 14px 18px; background: #ECFDF5; border: 1px solid #10B981; border-radius: 6px; font-family: Inter; font-size: 14px; font-weight: 500; color: #065F46; opacity: 0; transition: opacity 300ms ease; pointer-events: none; }
.form-success-msg.is-visible { opacity: 1; }

/* ============================================
   Real form elements — input/textarea/select/button
   ============================================ */
input.ct-input-bg, textarea.ct-textarea-bg, select.ct-input-bg {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #052e64;
  padding: 0 14px;
  -webkit-appearance: none;
  appearance: none;
}
input.ct-input-bg::placeholder, textarea.ct-textarea-bg::placeholder {
  color: rgba(0,0,0,0.4);
}
textarea.ct-textarea-bg { padding: 14px; resize: vertical; line-height: 1.5; font-family: 'Inter', sans-serif; font-size: 14px; color: #052e64; }
select.ct-input-bg { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23052e64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }
button.ct-submit-bg { border: none; cursor: pointer; }