/*
=============================================================================
DeltaFin Innovations — Responsive QA Layer
Purpose:
  Consolidated device-specific overrides loaded after site.css.
  Desktop visual design (above 1180px) is intentionally left untouched.

Validated targets / design ranges:
  • Large desktop / laptop: 1181px+
  • Small laptop / tablet landscape: 901px–1180px
  • Tablet / compact landscape: 641px–900px
  • Mobile: 391px–640px
  • Small mobile: <=390px
=============================================================================
*/

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:76px;
}
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
iframe{max-width:100%}
input,textarea,select,button{max-width:100%}
body.no-scroll{overflow:hidden!important}
.container{box-sizing:border-box}

/* Prevent long technical terms / URLs from creating horizontal overflow. */
p,li,a,small,span,h1,h2,h3,h4{
  overflow-wrap:break-word;
  word-break:normal;
}
.legal-copy a,
.footer a,
.contact-details a,
.seo-solution-section a{overflow-wrap:anywhere}

/* ========================================================================
   SMALL LAPTOP / TABLET LANDSCAPE — 901px to 1180px
   ======================================================================== */
@media (min-width:901px) and (max-width:1180px){
  .container{width:min(calc(100% - 40px),1060px)!important}

  /* Header remains compact; switch to hamburger early enough for tablets. */
  .header,.nav,.header .nav{
    height:64px!important;
    min-height:64px!important;
  }
  .brand{height:50px!important;gap:10px!important}
  .brand-mark{width:40px!important;height:44px!important;flex-basis:40px!important}
  .brand-name{font-size:17px!important}
  .brand-sub{font-size:6.8px!important;margin-top:4px!important}
  .menu-btn{
    display:block!important;
    width:44px!important;height:44px!important;
    position:relative;z-index:1003;
  }
  .nav-links{
    display:none!important;
    position:fixed!important;
    top:64px!important;left:18px!important;right:18px!important;
    max-height:calc(100dvh - 82px)!important;
    overflow-y:auto!important;
    padding:12px!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:14px!important;
    background:#071a3a!important;
    box-shadow:0 20px 55px rgba(4,18,43,.28)!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:2px!important;
    z-index:1002!important;
  }
  .nav-links.open{display:flex!important}
  .nav-links>a{
    color:#fff!important;
    padding:13px 14px!important;
    border-radius:9px!important;
  }
  .nav-links>a:hover,.nav-links>a.active{
    color:#efbd45!important;
    background:rgba(255,255,255,.055)!important;
  }
  .nav-links>a:not(.nav-cta):after{display:none!important}
  .nav-cta{
    margin-top:5px!important;
    text-align:center!important;
    justify-content:center!important;
    background:#e5b43e!important;
    color:#071a3a!important;
  }

  /* Home hero — keep desktop composition but avoid tablet clipping. */
  .dfi-hero-v36{
    min-height:540px!important;
    max-height:none!important;
  }
  .dfi-hero-slide > .dfi-hero-inner{
    grid-template-columns:1fr 1fr!important;
    gap:22px!important;
    padding-inline:0!important;
  }
  .dfi-hero-copy h1{
    font-size:clamp(38px,4.8vw,52px)!important;
  }
  .dfi-hero-description{
    font-size:13px!important;
    line-height:1.5!important;
  }
  .hero-slide-main .dfi-hero-visual{transform:scale(.76)!important}
  .hero-slide-products .dfi-custom-workspace{transform:scale(.74)!important}
  .custom-hero-visual{transform:scale(.74)!important}
  .ecosystem-hero-visual{transform:scale(.76)!important}

  /* Content grids become two-column rather than compressed 3/4-column cards. */
  .value-grid,
  .service-grid,
  .inner-grid,
  .blog-grid,
  .seo-capability-grid,
  .seo-outcome-grid,
  .seo-link-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .about-grid,.contact-layout,.product-detail-grid{
    gap:28px!important;
  }
  .about-copy,.about-quote{padding:38px!important}
  .footer-grid,.footer-grid-v50{
    grid-template-columns:1.45fr 1fr 1fr!important;
    gap:30px!important;
  }
  .footer-grid>div:last-child{grid-column:auto}
}

/* ========================================================================
   TABLET / COMPACT DEVICES — up to 900px
   ======================================================================== */
@media (max-width:900px){
  html{scroll-padding-top:64px}
  .container{width:min(calc(100% - 32px),760px)!important}

  .header,.nav,.header .nav{
    height:64px!important;
    min-height:64px!important;
  }
  .header{position:sticky!important;top:0!important}
  .brand{height:50px!important;gap:9px!important}
  .brand-mark{width:39px!important;height:43px!important;flex-basis:39px!important}
  .brand-copy{display:flex!important}
  .brand-name{font-size:16px!important}
  .brand-sub{font-size:6.4px!important;margin-top:4px!important}

  .menu-btn{
    display:block!important;
    width:44px!important;height:44px!important;
    position:relative!important;z-index:1003!important;
  }
  .menu-btn span{
    background:#fff!important;
    width:24px!important;
    margin:5px auto!important;
  }
  .nav-links{
    display:none!important;
    position:fixed!important;
    top:64px!important;left:14px!important;right:14px!important;
    max-height:calc(100dvh - 80px)!important;
    overflow:auto!important;
    padding:11px!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:14px!important;
    background:#071a3a!important;
    box-shadow:0 22px 60px rgba(4,18,43,.32)!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:2px!important;
    z-index:1002!important;
  }
  .nav-links.open{display:flex!important}
  .nav-links>a{
    color:#fff!important;
    padding:13px 14px!important;
    border-radius:9px!important;
    text-align:left!important;
  }
  .nav-links>a:not(.nav-cta):after{display:none!important}
  .nav-links>a:hover,.nav-links>a.active{
    color:#efbd45!important;background:rgba(255,255,255,.055)!important;
  }
  .nav-cta{
    margin-top:5px!important;
    justify-content:center!important;
    text-align:center!important;
    background:#e5b43e!important;color:#071a3a!important;
  }

  /* ---------------- Home hero ---------------- */
  .dfi-hero-v36{
    height:auto!important;min-height:0!important;max-height:none!important;
  }
  .dfi-hero-slider,.dfi-hero-track{
    height:auto!important;min-height:0!important;
  }
  .dfi-hero-track{align-items:stretch!important}
  .dfi-hero-slide{
    height:auto!important;
    min-height:0!important;
  }
  .dfi-hero-slide > .dfi-hero-inner{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:20px!important;
    height:auto!important;min-height:0!important;
    padding-top:38px!important;
    padding-bottom:88px!important;
    align-items:start!important;
  }
  .dfi-hero-copy,
  .hero-slide-products .dfi-hero-copy{
    padding-top:0!important;
    max-width:100%!important;
    transform:none!important;
  }
  .dfi-eyebrow{
    font-size:9px!important;
    letter-spacing:.17em!important;
    gap:9px!important;
    margin-bottom:8px!important;
  }
  .dfi-eyebrow span{width:24px!important}
  .dfi-kicker{
    font-size:8.5px!important;
    line-height:1.55!important;
    letter-spacing:.14em!important;
    margin-bottom:13px!important;
    white-space:normal!important;
  }
  .dfi-hero-copy h1,
  .hero-slide-main .dfi-hero-copy h1,
  .hero-slide-products .dfi-hero-copy h1{
    font-size:clamp(39px,7vw,52px)!important;
    line-height:.98!important;
    max-width:720px!important;
    margin-bottom:15px!important;
  }
  .dfi-hero-description,
  .hero-slide-main .dfi-hero-description,
  .hero-slide-products .dfi-hero-description{
    max-width:700px!important;
    font-size:14px!important;
    line-height:1.58!important;
    margin-bottom:17px!important;
  }
  .dfi-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:10px!important;
  }
  .dfi-actions .btn,
  .hero-slide-main .dfi-actions .btn,
  .hero-slide-products .dfi-actions .btn{
    min-height:43px!important;
    height:auto!important;
    padding:11px 17px!important;
    font-size:11.5px!important;
  }
  .dfi-trust{
    margin-top:10px!important;
    line-height:1.45!important;
  }

  /* Hero visuals move below copy and fit the device width. */
  .dfi-hero-visual{
    width:100%!important;
    height:340px!important;
    min-height:0!important;
    transform:none!important;
    order:2!important;
  }
  .hero-slide-main .dfi-hero-visual,
  .hero-slide-main.is-active .dfi-hero-visual{
    height:340px!important;
    transform:scale(.76)!important;
  }
  .hero-slide-main .dfi-logo-stage{
    width:min(340px,78vw)!important;
    height:min(340px,78vw)!important;
  }
  .hero-slide-main .dfi-hero-mark{
    width:min(260px,58vw)!important;
    height:min(260px,58vw)!important;
  }
  .hero-slide-main .dfi-float-card{
    min-width:112px!important;
    padding:9px 11px!important;
  }
  .hero-slide-main .dfi-float-card small{font-size:6.5px!important}
  .hero-slide-main .dfi-float-card strong{font-size:9.5px!important}

  .hero-slide-products .dfi-custom-workspace,
  .dfi-custom-workspace{
    height:330px!important;max-height:330px!important;
    transform:none!important;
  }
  .workspace-window{
    width:min(650px,94vw)!important;
    height:300px!important;
    transform:none!important;
  }
  .workspace-chip{display:none!important}

  .custom-hero-visual{
    height:340px!important;min-height:340px!important;
    transform:none!important;
  }
  .custom-flow{
    width:min(610px,94vw)!important;
    height:320px!important;
  }
  .flow-node{width:128px!important;padding:12px!important}
  .flow-core{width:120px!important;height:120px!important}
  .flow-core img{width:78px!important;height:78px!important}

  .ecosystem-hero-visual{
    height:340px!important;min-height:340px!important;
    transform:none!important;
  }
  .eco-backdrop{width:330px!important;height:330px!important}
  .eco-card{width:130px!important}

  .dfi-hero-controls{
    right:50%!important;
    transform:translateX(50%)!important;
    bottom:43px!important;
  }
  .dfi-hero-bottom{
    height:36px!important;
    overflow:hidden!important;
  }
  .dfi-bottom-inner{
    width:100%!important;
    max-width:none!important;
    overflow-x:auto!important;
    justify-content:flex-start!important;
    gap:22px!important;
    padding:0 16px!important;
    white-space:nowrap!important;
    scrollbar-width:none!important;
  }
  .dfi-bottom-inner::-webkit-scrollbar{display:none}

  /* ---------------- General sections ---------------- */
  .section,.inner-section{
    padding-top:64px!important;padding-bottom:64px!important;
  }
  .split-heading{
    grid-template-columns:1fr!important;
    gap:18px!important;
    align-items:start!important;
  }
  .split-heading h2,.section-top h2{
    font-size:clamp(36px,6vw,48px)!important;
  }
  .split-heading p{max-width:680px!important}

  .value-grid,
  .service-grid,
  .inner-grid,
  .blog-grid,
  .seo-capability-grid,
  .seo-outcome-grid,
  .seo-link-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }

  .about-grid,
  .contact-layout,
  .product-detail-grid,
  .seo-context-grid{
    grid-template-columns:1fr!important;
    gap:22px!important;
  }

  .about-copy,.about-quote{padding:38px!important}
  .about-copy h2{font-size:clamp(36px,6vw,46px)!important}

  /* Process becomes a readable vertical sequence. */
  .process-section .split-heading{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  .process-section .process-line{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    margin-top:28px!important;
  }
  .process-section .process-line:before{
    left:28px!important;top:18px!important;bottom:18px!important;
    width:1px!important;height:auto!important;
  }
  .process-section .process-step{
    position:relative!important;
    text-align:left!important;
    padding:0 0 0 72px!important;
    min-height:58px!important;
  }
  .process-section .process-step i{
    position:absolute!important;left:0!important;top:0!important;
    width:56px!important;height:56px!important;margin:0!important;
  }
  .process-section .process-step b{
    margin-top:0!important;font-size:15px!important;
  }
  .process-section .process-step small{
    max-width:560px!important;
    margin:6px 0 0!important;
    font-size:11px!important;line-height:1.55!important;
  }

  /* Showcase: stack copy over visual. */
  .dfi-showcase-slide{
    grid-template-columns:1fr!important;
    min-height:0!important;
    gap:24px!important;
    padding:38px 34px 82px!important;
  }
  .showcase-copy{max-width:680px!important}
  .showcase-copy h3{font-size:clamp(38px,6vw,48px)!important}
  .showcase-art{height:310px!important}
  .dfi-showcase-nav{right:18px!important;bottom:18px!important}

  /* Product carousel: comfortable tablet card width. */
  .product-carousel-shell{padding-bottom:54px!important}
  .product-slide{
    min-width:min(72vw,430px)!important;
    height:350px!important;
  }
  .product-carousel-nav{right:0!important}

  /* Inner pages */
  .page-hero{
    min-height:0!important;
    padding:66px 0 56px!important;
  }
  .page-hero h1{
    font-size:clamp(43px,7vw,58px)!important;
  }
  .page-hero p{font-size:15.5px!important}

  .product-detail{
    min-height:0!important;
    padding:64px 0!important;
  }
  .product-detail-grid{grid-template-columns:1fr!important}
  .product-dashboard{
    min-height:340px!important;
    transform:none!important;
  }
  .product-name{font-size:clamp(50px,8vw,66px)!important}

  .contact-layout{grid-template-columns:1fr!important}
  .contact-info-box,.form-box{padding:32px!important}
  .contact-form-grid{grid-template-columns:1fr 1fr!important}

  /* Footer */
  .footer{padding:50px 0 20px!important}
  .footer-grid,.footer-grid-v50{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:30px 36px!important;
  }
  .footer-brand{grid-column:1 / -1}
  .footer-bottom{gap:20px!important}
}

/* ========================================================================
   MOBILE — 391px to 640px
   ======================================================================== */
@media (max-width:640px){
  .container{width:calc(100% - 28px)!important}

  .brand-mark{width:37px!important;height:41px!important;flex-basis:37px!important}
  .brand-name{font-size:15px!important}
  .brand-sub{font-size:6px!important;letter-spacing:.25em!important}
  .menu-btn{width:42px!important;height:42px!important}

  /* Hero */
  .dfi-hero-slide > .dfi-hero-inner{
    gap:16px!important;
    padding-top:30px!important;
    padding-bottom:84px!important;
  }
  .dfi-eyebrow{font-size:8px!important;letter-spacing:.14em!important}
  .dfi-kicker{font-size:8px!important;letter-spacing:.12em!important}
  .dfi-hero-copy h1,
  .hero-slide-main .dfi-hero-copy h1,
  .hero-slide-products .dfi-hero-copy h1{
    font-size:clamp(36px,10vw,44px)!important;
    line-height:.99!important;
    letter-spacing:-.045em!important;
  }
  .dfi-hero-description,
  .hero-slide-main .dfi-hero-description,
  .hero-slide-products .dfi-hero-description{
    font-size:13.5px!important;
    line-height:1.55!important;
  }
  .dfi-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .dfi-actions .btn{
    width:100%!important;
    min-height:44px!important;
  }
  .dfi-trust{
    align-items:flex-start!important;
    font-size:9px!important;
  }

  .dfi-hero-visual,
  .hero-slide-main .dfi-hero-visual,
  .hero-slide-main.is-active .dfi-hero-visual{
    height:285px!important;
    transform:scale(.70)!important;
  }
  .hero-slide-main .dfi-logo-stage{
    width:min(285px,82vw)!important;height:min(285px,82vw)!important;
  }
  .hero-slide-main .dfi-hero-mark{
    width:min(210px,58vw)!important;height:min(210px,58vw)!important;
  }
  .hero-slide-main .dfi-float-card{
    min-width:96px!important;padding:7px 9px!important;
  }
  .hero-slide-main .dfi-float-card small{font-size:5.8px!important}
  .hero-slide-main .dfi-float-card strong{font-size:8.5px!important}
  .hero-slide-main .card-software{left:0!important;top:48px!important}
  .hero-slide-main .card-product{right:0!important;top:118px!important}
  .hero-slide-main .card-digital{left:8px!important;bottom:52px!important}
  .hero-slide-main .card-tech{right:5px!important;bottom:44px!important}

  .hero-slide-products .dfi-custom-workspace,
  .dfi-custom-workspace{
    height:275px!important;max-height:275px!important;
  }
  .workspace-window{
    height:255px!important;width:96vw!important;max-width:100%!important;
  }
  .workspace-body{grid-template-columns:45px 1fr!important}
  .workspace-body aside{padding:17px 8px!important}
  .workspace-body main{padding:14px!important}
  .workspace-cards{gap:6px!important;margin-top:12px!important}
  .workspace-cards div{padding:8px!important}
  .workspace-cards b{font-size:11px!important}
  .workspace-cards span{display:none!important}

  .custom-hero-visual{height:285px!important;min-height:285px!important}
  .custom-flow{height:270px!important}
  .flow-node{width:105px!important;padding:9px!important}
  .flow-node small{font-size:5.5px!important;margin-bottom:4px!important}
  .flow-node b{font-size:9px!important}
  .flow-node span{display:none!important}
  .flow-core{width:92px!important;height:92px!important}
  .flow-core img{width:62px!important;height:62px!important}

  .ecosystem-hero-visual{height:285px!important;min-height:285px!important}
  .eco-backdrop{width:265px!important;height:265px!important}
  .eco-card{width:100px!important;min-height:64px!important;padding:8px!important}
  .eco-card b{font-size:9px!important}.eco-card span{font-size:5.5px!important}
  .eco-core{width:78px!important;height:78px!important}
  .eco-core img{width:54px!important;height:54px!important}

  /* Section typography / cards */
  .section,.inner-section{padding:52px 0!important}
  .split-heading h2,.section-top h2{
    font-size:clamp(32px,9vw,39px)!important;
    line-height:1.05!important;
  }
  .value-grid,
  .service-grid,
  .inner-grid,
  .blog-grid,
  .seo-capability-grid,
  .seo-outcome-grid,
  .seo-link-grid{
    grid-template-columns:1fr!important;
  }
  .value-card,.service-card,.inner-card{padding:24px!important}

  .about-copy,.about-quote{padding:28px!important}
  .about-quote p{font-size:24px!important}

  .dfi-showcase-slide{
    padding:30px 22px 76px!important;
    border-radius:18px!important;
  }
  .showcase-copy h3{
    font-size:clamp(34px,9vw,42px)!important;
    margin:13px 0!important;
  }
  .showcase-copy p{font-size:13px!important;line-height:1.6!important}
  .showcase-art{height:260px!important}
  .product-art{grid-template-columns:repeat(2,1fr)!important;gap:8px!important;transform:none!important}
  .mini-product-card{min-height:100px!important;padding:12px!important}
  .mini-product-card b{font-size:14px!important}
  .dfi-showcase-nav{
    right:50%!important;transform:translateX(50%)!important;bottom:14px!important;
  }

  .product-slide{
    min-width:calc(100vw - 52px)!important;
    height:340px!important;
    padding:21px!important;
  }
  .product-slide h3{font-size:29px!important}
  .product-symbol{font-size:49px!important;margin-top:38px!important}
  .product-bottom{left:21px!important;right:21px!important;bottom:21px!important}
  .product-carousel-nav{
    right:50%!important;
    transform:translateX(50%)!important;
  }

  .process-section .process-step{
    padding-left:65px!important;
  }

  /* Inner pages / SEO landers */
  .page-hero{padding:52px 0 42px!important}
  .page-hero h1{
    font-size:clamp(36px,10vw,44px)!important;
    line-height:1!important;
  }
  .page-hero p{font-size:14px!important;line-height:1.6!important}
  .seo-solution-hero .hero-actions{
    display:grid!important;grid-template-columns:1fr!important;
  }

  .product-detail{padding:50px 0!important}
  .product-name{font-size:clamp(44px,12vw,58px)!important}
  .product-tag{font-size:20px!important}
  .dashcards{grid-template-columns:repeat(2,1fr)!important}
  .dashbody{height:300px!important}
  .product-dashboard{min-height:350px!important}

  .contact-info-box,.form-box{padding:25px!important}
  .contact-info-box h2{font-size:34px!important}
  .contact-form-grid{grid-template-columns:1fr!important}
  .job{align-items:flex-start!important;flex-direction:column!important;gap:12px!important}

  .legal-copy,.about-copy{font-size:14px!important}
  .legal-copy h2{font-size:25px!important}

  /* Footer */
  .footer{padding-top:42px!important}
  .footer-grid,.footer-grid-v50{
    grid-template-columns:1fr!important;
    gap:26px!important;
  }
  .footer-brand{grid-column:auto!important}
  .footer-bottom{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:7px!important;
  }
}

/* ========================================================================
   SMALL MOBILE — <=390px
   ======================================================================== */
@media (max-width:390px){
  .container{width:calc(100% - 22px)!important}

  .brand-copy{display:none!important}
  .brand-mark{width:39px!important;height:43px!important;flex-basis:39px!important}
  .nav-links{left:10px!important;right:10px!important}

  .dfi-hero-slide > .dfi-hero-inner{
    padding-top:26px!important;padding-bottom:82px!important;
  }
  .dfi-hero-copy h1,
  .hero-slide-main .dfi-hero-copy h1,
  .hero-slide-products .dfi-hero-copy h1{
    font-size:clamp(33px,10vw,38px)!important;
  }
  .dfi-hero-description{font-size:13px!important}
  .dfi-kicker{font-size:7.5px!important}
  .dfi-hero-visual,
  .hero-slide-main .dfi-hero-visual,
  .hero-slide-main.is-active .dfi-hero-visual{
    height:255px!important;
  }

  .section,.inner-section{padding:46px 0!important}
  .split-heading h2,.section-top h2{font-size:32px!important}

  .dfi-showcase-slide{padding:26px 18px 74px!important}
  .showcase-art{height:235px!important}
  .mini-product-card{min-height:91px!important;padding:10px!important}

  .product-slide{
    min-width:calc(100vw - 38px)!important;
    height:325px!important;
  }

  .page-hero h1{font-size:35px!important}
  .about-copy,.about-quote,.contact-info-box,.form-box{padding:22px!important}
}

/* ========================================================================
   SHORT LANDSCAPE DEVICES
   ======================================================================== */
@media (max-height:540px) and (orientation:landscape) and (max-width:900px){
  .header,.nav,.header .nav{height:58px!important;min-height:58px!important}
  .nav-links{top:58px!important;max-height:calc(100dvh - 70px)!important}
  .dfi-hero-slide > .dfi-hero-inner{
    padding-top:22px!important;padding-bottom:72px!important;
  }
  .dfi-hero-copy h1{font-size:36px!important}
  .dfi-hero-visual{height:240px!important}
}

/* ========================================================================
   TOUCH / ACCESSIBILITY / REDUCED MOTION
   ======================================================================== */
@media (hover:none){
  .btn:hover,
  .inner-card:hover,
  .blog-card:hover,
  .product-slide:hover,
  .mini-product-card:hover,
  .value-card:hover{
    transform:none!important;
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}