/* ============================================================
   Display Apps — modern.css
   Modernization OVERRIDE layer on top of the original Webflow CSS.
   Loaded last. Keeps the original structure, dark theme, navy
   (#12427d) accent and DM Sans identity — only refines type,
   spacing, motion, hover states and the video hero.
   ============================================================ */

:root{
  --da-navy:#12427d;
  --da-navy-soft:rgba(18,66,125,.5);
  --da-ink:#000206;
  --da-line:rgba(255,255,255,.08);
  --da-ease:cubic-bezier(.22,.61,.36,1);
  --da-radius:18px;
  --paper:#f2f5f8;          /* off-white text */
  --muted:#8799a8;          /* matches site grey */
  --panel:#12151c;          /* card surface */
}

/* ---------- global polish ---------- */
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:var(--da-navy);color:#fff}

/* subtle on-brand scrollbar */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--da-ink)}
::-webkit-scrollbar-thumb{background:#161b22;border-radius:10px;border:3px solid var(--da-ink)}
::-webkit-scrollbar-thumb:hover{background:#23303f}

img{image-rendering:auto}

:focus-visible{outline:2px solid var(--da-navy);outline-offset:3px}

/* ---------- fluid typography ---------- */
.h1{
  font-size:clamp(2.7rem,7.2vw,92px);
  line-height:.96;
  letter-spacing:-.025em;
}
.h1.max-width{font-size:clamp(2.7rem,7.2vw,92px);height:auto}
.h2{font-size:clamp(2rem,4.4vw,56px);line-height:1.02;letter-spacing:-.02em}
.h4{font-size:clamp(1.4rem,2.4vw,35px);line-height:1.05}
.paragraph-03{line-height:1.7}

/* keep the outlined hero word, add a soft luminous halo */
.text-primary.outlined-text{
  -webkit-text-stroke-width:1.5px;
  -webkit-text-stroke-color:rgba(255,255,255,.55);
  color:#0000;
  text-shadow:0 0 42px rgba(18,66,125,.55);
}

/* ============================================================
   NAV — make it a sticky glass bar that condenses on scroll
   ============================================================ */
.navbar-container.w-nav{
  max-width:none !important;width:auto !important;margin:0 !important;   /* full-bleed bar, edge to edge */
  padding-top:13px;padding-bottom:13px;
  transition:background .4s var(--da-ease),backdrop-filter .4s var(--da-ease),
             padding .4s var(--da-ease),border-color .4s var(--da-ease);
  border-bottom:1px solid transparent;
}
/* sticky ONLY on the homepage (its nav lives inside .home-hero); other pages scroll normally */
.home-hero .navbar-container.w-nav{position:fixed !important;top:0;left:0;right:0;z-index:50}
/* keep the bar full-width but push the content out to the page edges */
.navbar-container-wrap{
  max-width:none !important;
  padding-left:clamp(24px,4vw,64px) !important;
  padding-right:clamp(24px,4vw,64px) !important;
}
.home-hero .navbar-container.w-nav.scrolled{
  background:rgba(0,2,6,.9) !important;     /* frosted glass once scrolled */
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:rgba(255,255,255,.12);     /* faint track under the progress line */
  box-shadow:0 16px 36px -20px rgba(0,0,0,.9);   /* + soft shadow for depth */
  padding-top:7px;padding-bottom:7px;          /* shorter bar once scrolled, with room under the button */
}
.navbar-brand-logo{width:106px;transition:width .35s var(--da-ease),transform .3s var(--da-ease)}
.home-hero .navbar-container.w-nav.scrolled .navbar-brand-logo{width:80px}   /* shrink logo when scrolled */
/* turquoise scroll-progress line — homepage only (its nav is fixed) */
.home-hero .navbar-container.w-nav::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2.5px;
  width:calc(var(--scrollp,0) * 100%);
  background:linear-gradient(90deg,#12427d,#2f6bff,#22d3ee);
  box-shadow:0 0 12px rgba(34,211,238,.55);
  border-radius:0 3px 3px 0;
  opacity:0;transition:opacity .4s var(--da-ease);pointer-events:none;
}
.home-hero .navbar-container.w-nav.scrolled::after{opacity:1}
.navbar-brand:hover .navbar-brand-logo{transform:scale(1.04)}

/* gradient underline on nav links — wipes in from the left, matches the brand line */
.nav-link-text{position:relative;transition:color .25s var(--da-ease)}
.nav-link-text:after{
  content:"";position:absolute;left:0;bottom:-5px;height:2px;width:100%;border-radius:2px;
  background:linear-gradient(90deg,#2f6bff,#22d3ee);
  transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--da-ease);
}
.nav-link-text:hover{color:#fff}
.nav-link-text:hover:after,.nav-link-text.w--current:after{transform:scaleX(1)}
.nav-link-text.w--current{color:#fff}

/* subtle nav fade-in on load */
@keyframes da-navdrop{from{opacity:0}to{opacity:1}}   /* opacity-only: a transform here breaks position:fixed in Chrome */
.navbar-container.w-nav{animation:da-navdrop .5s var(--da-ease) both}

/* keep hero text clear of the now-fixed nav (esp. on small screens) */
.hero-01{margin-top:clamp(150px,22vh,200px)}

/* ============================================================
   HERO VIDEO — immersive cover + legibility overlay
   ============================================================ */
.home-hero{position:relative;overflow:hidden}
.hero-background-video{z-index:0}
.hero-background-video video{object-fit:cover;width:100%;height:100%}
/* gradient so white headline + nav stay readable over the footage */
.home-hero:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,2,6,.28) 0%,rgba(0,2,6,.02) 34%,rgba(0,2,6,.07) 64%,rgba(0,2,6,.58) 90%,var(--da-ink) 100%);
}
/* lighter overlay -> soft shadow keeps hero text legible on bright frames */
.hero-01 .h1,
.hero-01 .paragraph-03{text-shadow:0 2px 28px rgba(0,2,6,.6),0 1px 3px rgba(0,2,6,.55)}
/* lift the real content above the overlay (nav keeps its own z-index:50) */
.home-hero .hero-01,
.home-hero .brand-01{position:relative;z-index:2}

/* refined scroll cue under the hero copy */
.hero-01-bottom-wrap{margin-top:8px}

/* scroll-down cue, anchored to the bottom-centre of the hero */
.da-scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:9px;
  cursor:pointer;text-decoration:none;background:none;border:0;opacity:.9;
  transition:transform .3s var(--da-ease),opacity .3s var(--da-ease);
}
.da-scroll:hover{opacity:1;transform:translateX(-50%) translateY(-3px)}
.da-scroll:focus-visible{outline:2px solid var(--da-navy);outline-offset:6px;border-radius:30px}
.da-scroll-label{
  font-family:Dmsans,Arial,sans-serif;font-size:.62rem;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--paper);
  text-shadow:0 1px 6px rgba(0,2,6,.7);
}
.da-scroll-dot{
  width:30px;height:50px;border:1.5px solid rgba(255,255,255,.5);border-radius:30px;
  display:flex;justify-content:center;padding-top:9px;
  transition:border-color .3s var(--da-ease);
  box-shadow:0 2px 16px rgba(0,2,6,.4);
}
.da-scroll:hover .da-scroll-dot{border-color:#fff}
.da-scroll-arrow{width:5px;height:5px;border-radius:50%;background:#fff;animation:da-bob 1.7s var(--da-ease) infinite}
@keyframes da-bob{0%{transform:translateY(0);opacity:0}25%{opacity:1}55%{transform:translateY(15px);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.da-scroll-arrow{animation:none}}

/* ============================================================
   BUTTONS — smoother, with lift; keep their pill shape + fill anim
   ============================================================ */
.button-02,.button-04,.normal-submit-button{
  transition:transform .25s var(--da-ease),box-shadow .3s var(--da-ease),
             background-color .3s var(--da-ease),color .3s var(--da-ease);
  will-change:transform;
}
.button-02{font-size:13px;letter-spacing:.04em;padding:11px 12px 11px 20px}
.button-02:hover,.button-04:hover{transform:translateY(-2px)}
.button-02:hover{box-shadow:0 14px 30px -12px rgba(255,255,255,.35)}
.button-04{border-color:var(--da-line)}
.button-04:hover{border-color:rgba(255,255,255,.28);box-shadow:0 14px 34px -16px rgba(0,0,0,.8)}
.button-icon{transition:transform .25s var(--da-ease)}
.button-02:hover .button-icon,.button-04:hover .button-icon{transform:translate(3px,-3px)}
.normal-submit-button{padding:14px 26px;font-size:15px;letter-spacing:.02em}
.normal-submit-button:hover{transform:translateY(-2px);box-shadow:0 16px 40px -16px rgba(255,255,255,.4)}

/* ============================================================
   TRUSTED-BY LOGOS — clean uniform monochrome, brand colour on hover
   ============================================================ */
.brand-text .paragraph-03{
  text-transform:uppercase;letter-spacing:.18em;font-size:13px;opacity:.7;
}
.logo-icon{
  filter:brightness(0) invert(1);
  opacity:.5;
  transition:opacity .35s var(--da-ease),filter .35s var(--da-ease),transform .35s var(--da-ease);
}
.logo-box:hover .logo-icon{filter:none;opacity:1;transform:scale(1.06)}

/* ============================================================
   SOLUTIONS / EXPERTISE CARDS — hover lift, navy glow, image zoom
   ============================================================ */
.expetise-card-list{
  transition:transform .45s var(--da-ease),box-shadow .45s var(--da-ease);
}
.expetise-card-list:hover{
  transform:translateY(-7px);
  box-shadow:0 34px 70px -28px rgba(0,0,0,.85),0 0 46px -14px var(--da-navy-soft);
}
.expetise-card-text .image{
  border-radius:0;            /* square so the image lines up with the card's blue frame (no rounded top) */
  transition:transform .6s var(--da-ease),filter .5s var(--da-ease);
  will-change:transform;
}
/* match the slider mask + slide to the image so nothing peeks at the corners */
.expetise-card-text .mask-3,
.expetise-card-text .w-slider-mask,
.expetise-card-text .slide-7{border-radius:0}
.expetise-card-list:hover .image{transform:scale(1.05)}
.text-block-copy{letter-spacing:.04em}

/* section heading block */
.service-heading-wrap .h1{text-shadow:0 0 60px rgba(0,2,6,.6)}

/* ============================================================
   IDEAS / PROJECT showcase — gentle zoom + rounding
   ============================================================ */
.project-m-list{border-radius:var(--da-radius);overflow:hidden}
.project-image-m{transition:transform .7s var(--da-ease)}
.project-m-list:hover .project-image-m{transform:scale(1.05)}
.project-01-slider-wrap .shade{transition:transform .8s var(--da-ease)}

/* ============================================================
   METRICS / CERTIFICATES — framed, subtle hover
   ============================================================ */
.metrics-1st .text-wrapper img,
.metrics-3rd .text-wrapper img{
  border-radius:12px;
  border:1px solid var(--da-line);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8);
  transition:transform .4s var(--da-ease),box-shadow .4s var(--da-ease);
}
.metrics-1st .text-wrapper img:hover,
.metrics-3rd .text-wrapper img:hover{
  transform:translateY(-5px);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.9),0 0 40px -16px var(--da-navy-soft);
}

/* ============================================================
   CTA / CONTACT FORM — let the bg breathe + modern field states
   ============================================================ */
.cta-v2{filter:grayscale(.25)}
.text-field-label{letter-spacing:.04em;opacity:.85}
.text-field-option,.select-field,.textarea{
  transition:border-color .25s var(--da-ease),box-shadow .25s var(--da-ease),background-color .25s var(--da-ease);
  border:1px solid var(--da-line) !important;
}
.text-field-option:focus,.select-field:focus,.textarea:focus{
  border-color:rgba(61,123,255,.65) !important;
  box-shadow:0 0 0 3px rgba(18,66,125,.22);
  outline:none;
}
.text-field-option::placeholder,.textarea::placeholder{color:rgba(135,153,168,.6)}

/* ============================================================
   FOOTER — refined links
   ============================================================ */
.footer{border-top:1px solid var(--da-line);padding-top:clamp(50px,7vw,90px)}
.footer-social-link{transition:opacity .25s var(--da-ease),transform .25s var(--da-ease)}
.footer-social-link:hover{transform:translateX(3px)}
.footer-link-icon-wrap .footer-link-icon{transition:transform .25s var(--da-ease)}
.footer-social-link:hover .footer-link-icon{transform:translate(3px,-3px)}
.footer-logo{transition:transform .3s var(--da-ease)}
.footer-logo-wrap:hover .footer-logo{transform:scale(1.03)}

/* ============================================================
   SCROLL REVEAL (progressive enhancement, layered over Webflow IX2)
   ============================================================ */
.da-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--da-ease),transform .7s var(--da-ease)}
.da-reveal.da-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .da-reveal{opacity:1;transform:none}
}

/* ============================================================
   RESPONSIVE niceties
   ============================================================ */
@media (max-width:991px){
  .navbar-container{padding-top:12px;padding-bottom:12px}
  .navbar-container.scrolled{padding-top:8px;padding-bottom:8px}
}
@media (max-width:767px){
  .hero-01{margin-top:130px}
  .home-hero:after{background:linear-gradient(180deg,rgba(0,2,6,.32) 0%,rgba(0,2,6,.05) 44%,rgba(0,2,6,.6) 90%,var(--da-ink) 100%)}
}

/* ============================================================
   PORTFOLIO PAGE (portfolio.html) — product catalogue
   ============================================================ */
/* first catalogue section clears the fixed nav nicely */
.marketing:first-of-type{margin-top:clamp(120px,17vh,180px) !important}
.marketing + .marketing{margin-top:clamp(60px,8vw,110px) !important}

/* category headings -> prominent section dividers (were small + grey) */
.marketing .heading{
  color:var(--paper) !important;
  font-size:clamp(1.9rem,3.6vw,3rem);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.04;
  text-transform:uppercase;
  margin-bottom:42px;
  padding-bottom:20px;
  position:relative;
}
.marketing .heading:after{            /* small navy accent rule under each heading */
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:56px;height:3px;border-radius:2px;background:var(--da-navy);
}

/* product cards */
.marketing-box-list{
  overflow:hidden;
  border:1px solid var(--da-line) !important;
  transition:transform .4s var(--da-ease),box-shadow .4s var(--da-ease),border-color .4s var(--da-ease);
}
.marketing-box-list:hover{
  transform:translateY(-7px);
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:0 34px 70px -28px rgba(0,0,0,.85),0 0 48px -16px var(--da-navy-soft);
}
.marketing-box-list .fit-cover{
  filter:saturate(118%);
  transition:transform .6s var(--da-ease),filter .5s var(--da-ease);
  will-change:transform;
}
.marketing-box-list:hover .fit-cover{transform:scale(1.05)}
/* breathing room around the name + download button */
.marketing-details{padding:22px 22px 24px}   /* push product name down, clear of the (animated) image */
.marketing-details .h3{color:var(--paper);font-size:clamp(1.5rem,2vw,1.95rem);font-weight:600;letter-spacing:-.01em;line-height:1.08}

/* ============================================================
   FACTORY PAGE (services.html)
   ============================================================ */
.we-work{margin-top:clamp(120px,16vh,180px) !important}   /* had no top margin -> clear fixed nav */
.work-list{
  border:1px solid var(--da-line) !important;
  transition:transform .4s var(--da-ease),box-shadow .4s var(--da-ease),border-color .4s var(--da-ease);
}
.work-list:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:0 30px 64px -28px rgba(0,0,0,.85),0 0 44px -16px var(--da-navy-soft);
}
/* icon chip + line-icons */
.work-icon-wrap{
  width:56px !important;height:56px !important;
  display:flex;align-items:center;justify-content:center;
  border-radius:13px;
  background:linear-gradient(155deg,rgba(38,99,193,.30),rgba(18,66,125,.06));
  border:1px solid rgba(255,255,255,.10);
  transition:transform .3s var(--da-ease),border-color .3s var(--da-ease),box-shadow .3s var(--da-ease);
}
.work-icon-wrap .work-svg{width:27px;height:27px;color:#fff;display:block}
.work-list:hover .work-icon-wrap{
  transform:translateY(-2px) scale(1.05);
  border-color:rgba(46,109,193,.55);
  box-shadow:0 0 26px -6px var(--da-navy-soft);
}
/* modern card titles + spec text (were flat low-contrast navy) */
.work-list .h4{
  color:var(--paper) !important;
  font-weight:600;
  font-size:clamp(1.55rem,2.4vw,2.05rem);
  letter-spacing:-.015em;line-height:1.06;
  position:relative;padding-bottom:18px;margin-bottom:2px;
}
.work-list .h4::after{
  content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#2f6bff,#22d3ee);
}
.work-list .paragraph-03{
  color:var(--muted) !important;
  font-size:.96rem;letter-spacing:.005em;line-height:1.6;
}

/* ============================================================
   REFERENCES PAGE (references.html)
   ============================================================ */
/* filter tabs */
.blog-tab-icon{
  transition:background-color .25s var(--da-ease),border-color .25s var(--da-ease),color .25s var(--da-ease),transform .2s var(--da-ease);
}
.blog-tab-icon:hover{border-color:rgba(255,255,255,.3) !important;transform:translateY(-1px)}
.blog-tab-icon.w--current{
  background-color:var(--da-navy) !important;
  border-color:var(--da-navy) !important;
  color:#fff !important;
}
/* reference cards: image zoom on hover + prominent title */
.blog-image-wrap{border-radius:16px}
.blog-image-wrap .fit-cover{transition:transform .6s var(--da-ease);will-change:transform}
.blog-list-wrap > div{cursor:pointer}
.blog-list-wrap > div:hover .blog-image-wrap .fit-cover{transform:scale(1.05)}
.heading-4{
  color:var(--paper);
  font-size:clamp(1.15rem,1.7vw,1.5rem);
  line-height:1.15;letter-spacing:-.01em;
  transition:color .25s var(--da-ease);
}
.blog-list-wrap > div:hover .heading-4{color:#fff}
/* normalise ALL reference titles — 5 of them are bare <h2> (32px) vs 91 .heading-4 (24px) */
.blog-text-wrap h2{color:var(--paper) !important;font-size:clamp(1.25rem,1.7vw,1.55rem) !important;font-weight:600;line-height:1.18;letter-spacing:-.01em;transition:color .25s var(--da-ease)}
.blog-list-wrap > div:hover .blog-text-wrap h2{color:#fff !important}
.category-details .paragraph-03{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem}

/* ============================================================
   CONTACT PAGE (contact-us.html)
   .contact-us already has margin-top:200px (clears nav);
   the form inherits the global .text-field-option / .select-field / .textarea polish.
   ============================================================ */
.contact-bottom-right-wrap .contact-form-block{
  background:var(--panel, #101319);
  border:1px solid var(--da-line);
  border-radius:16px;
  padding:clamp(22px,3vw,36px);
}

/* ============================================================
   MOBILE OPTIMISATION
   (this preview renders at a fixed 1920 viewport so these are built
   to the original Webflow breakpoints; intended for real phones)
   ============================================================ */

/* References gallery has no native mobile rule (stays 3-col) -> fix it */
@media (max-width:900px){
  .blog-list-wrap{grid-template-columns:1fr 1fr !important}
}
@media (max-width:600px){
  .blog-list-wrap{grid-template-columns:1fr !important}
  .blog-image-wrap{height:auto !important;aspect-ratio:16/10}
}

/* keep the (now fixed) mobile nav menu readable when opened */
@media (max-width:991px){
  .nav-menu-wrapper.w-nav-menu{
    background:rgba(0,2,6,.97);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    border-bottom:1px solid var(--da-line);
    padding:6px 0 18px;
  }
  .navbar-container-wrap{padding-left:20px !important;padding-right:20px !important}
}

/* phones: comfortable type + spacing */
@media (max-width:600px){
  .hero-01{margin-top:120px}
  .hero-01 .h1{font-size:clamp(2rem,11vw,2.9rem) !important;line-height:1}
  .hero-01 .paragraph-03{font-size:.92rem}
  .contact-us .h1{font-size:clamp(1.9rem,8.5vw,2.6rem) !important;line-height:1.05}
  .marketing .heading{font-size:1.28rem;line-height:1.18;letter-spacing:-.01em;word-break:break-word;margin-bottom:22px;padding:0 6px 14px}
  .marketing .heading:after{width:46px}
  .heading-4{font-size:1.12rem}
  .h2{font-size:clamp(1.6rem,8vw,2.3rem)}
  .h4{font-size:1.25rem}

  /* tighter top clearance for first sections under the fixed nav */
  .marketing:first-of-type{margin-top:104px !important}
  .we-work{margin-top:104px !important}

  /* product cards: kill the huge inner gaps (fixed 700px height + space-between) */
  .marketing-box-list{height:auto !important;justify-content:flex-start !important;padding:0 !important}
  .marketing-box-list .fit-cover{width:100% !important;height:auto !important;object-fit:contain}
  .marketing-details{padding:18px 18px 22px}

  /* scroll cue: smaller + clear of the fold */
  .da-scroll{bottom:16px;gap:7px}
  .da-scroll-label{font-size:.58rem;letter-spacing:.28em}
  .da-scroll-dot{width:26px;height:44px}

  /* factory icon chip slightly smaller */
  .work-icon-wrap{width:50px !important;height:50px !important}
  .work-icon-wrap .work-svg{width:24px;height:24px}
}

/* portfolio + reference cards: also fix on small tablets / large phones (<=767) */
@media (max-width:767px){
  .marketing .heading{font-size:1.4rem;line-height:1.18;letter-spacing:-.01em;word-break:break-word;margin-bottom:22px;padding:0 6px 14px}
  .marketing-box-list{height:auto !important;justify-content:flex-start !important;padding:0 !important}
  /* compact image so cards aren't oversized on phones (cap height, keep whole product) */
  .marketing-box-list .fit-cover{width:100% !important;height:auto !important;max-height:230px !important;object-fit:contain !important}
  /* tighter space around the product name */
  .marketing-details{padding:12px 16px 16px !important;grid-row-gap:8px !important;row-gap:8px !important}
}

/* ============================================================
   INNER PAGES — nav is in normal flow (not fixed), so the first
   section only needs a modest top gap (was tuned for a fixed nav)
   ============================================================ */
.we-work,
.marketing:first-of-type,
.blog,
.contact-us{margin-top:clamp(40px,6vw,60px) !important}

/* ============================================================
   SCROLL-TO-TOP button (blue, bottom-right, on every page)
   ============================================================ */
.da-top{
  position:fixed;right:24px;bottom:24px;z-index:60;
  width:50px;height:50px;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(145deg,#3a7bff,#12427d);
  box-shadow:0 12px 28px -8px rgba(47,107,255,.55),0 2px 6px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--da-ease),visibility .3s var(--da-ease),box-shadow .3s var(--da-ease),background .3s var(--da-ease);
}
.da-top.show{opacity:1;visibility:visible}
.da-top:hover{background:linear-gradient(145deg,#4a86ff,#1a539a);box-shadow:0 16px 34px -8px rgba(47,107,255,.8),0 2px 6px rgba(0,0,0,.4)}
.da-top:active{box-shadow:0 8px 20px -8px rgba(47,107,255,.6)}
.da-top svg{width:22px;height:22px}
.da-top:focus-visible{outline:2px solid #8af0ff;outline-offset:3px}
@media (max-width:600px){ .da-top{right:16px;bottom:16px;width:46px;height:46px} }

/* ============================================================
   CERTIFICATES — drop the fragile off-screen slide animation;
   show both certs static, side by side, readable
   ============================================================ */
.metrics-01{padding:clamp(48px,7vw,90px) 0;height:auto !important;min-height:0 !important}
.metrics-01 .container-2{max-width:1100px;margin:0 auto;padding:0 24px;height:auto !important;min-height:0 !important}
.metrics-sticky-wrapper{
  height:auto !important;min-height:0 !important;position:static !important;
  flex-direction:row !important;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(20px,4vw,40px) !important;padding:0 !important;
}
.metrics-1st,.metrics-2nd,.metrics-3rd{position:static !important;transform:none !important;height:auto !important;opacity:1 !important;visibility:visible !important;filter:none !important}
.metrics-1st,.metrics-3rd{flex:0 1 460px;max-width:460px}
.metrics-1st .text-wrapper img,
.metrics-3rd .text-wrapper img{
  width:100% !important;height:auto !important;max-width:none;background:#fff;
}

/* ============================================================
   "CAPTURE ATTENTION" project banner — much shorter scroll track
   so the photo appears quickly (was 600vh)
   ============================================================ */
.project-01-bottom-wrap{height:250vh !important}