@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Metropolis Regular */
@font-face {
  font-family: "Metropolis";
  src: url("/fonts/Metropolis-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Metropolis Bold */
@font-face {
  font-family: "Metropolis";
  src: url("/fonts/Metropolis-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Metropolis Light */
@font-face {
  font-family: "Metropolis";
  src: url("/fonts/Metropolis-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Bizantheum Font */
@font-face {
  font-family: "Bizantheum";
  src: url("/fonts/Bizantheum.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Google Font */
:root {
  --ink: #111210;
  --ink-deep: #0A0C0A;
  --white: #FFFFFF;
  --accent: #C8A96E;
  --light:#B2C1B0;
  --green-dark: #081D12;
  --font2: 'Metropolis', sans-serif;
  --serif: 'Bizantheum', serif;
  --font: "Inter", sans-serif;
  --width: 85vw;
  --ease: cubic-bezier(0.16,1,0.3,1);
  --radius: 60px;
  --btn-r: 8px;
  --padding:80px;
}
.card-shadow {
  box-shadow:
  164px 246px 83px 0 rgba(0,0,0,0),
  105px 158px 76px 0 rgba(0,0,0,0.01),
  59px 89px 64px 0 rgba(0,0,0,0.05),
  26px 39px 47px 0 rgba(0,0,0,0.09),
  7px 10px 26px 0 rgba(0,0,0,0.10);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box;   -ms-overflow-style: none;  /* IE + Edge */
  scrollbar-width: none;     /* Firefox */}


*::-webkit-scrollbar {
  display: none;             /* Chrome, Safari */
}
html { scroll-behavior: auto; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
body { font-family:var(--font); background:var(--ink); color:var(--white); overflow-x:hidden; overflow-y:auto; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
.container { width:var(--width); margin:0 auto; }
em { font-family:var(--serif); font-style:normal; }
h1, h2, h3, h4{
    font-family:var(--font2);
}
@keyframes metalSpin { to { --angle: 360deg; } }
strong{
    font-weight:500 !important;
}

.vfm-orb {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  will-change: filter, transform, opacity;
}
.vfm-orb img {
  width: 100%;
  display: block;
}
/* dark host: screen blend glows against dark bg */
.vfm-orb-dark img  { mix-blend-mode: screen;   }
/* light host: multiply darkens on light bg */
.vfm-orb-light img { mix-blend-mode: multiply; }
.metal-border,
.mb {
  position: relative;
  isolation: isolate;
}

.metal-border::before,
.mb::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: var(--btn-r);
  background: conic-gradient(
    from var(--angle),
    transparent  0%,  transparent 34%,
    #686868     40%,  #c8c8c8    46%,
    #f4f4f4     50%,  #c8c8c8    54%,
    #686868     60%,  transparent 66%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1.5px;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}

.metal-border:hover::before,
.mb:hover::before {
  opacity: 1;
  animation: metalSpin 2.4s linear infinite;
}

.metal-border--light::before,
.mb--light::before {
  background: conic-gradient(
    from var(--angle),
    transparent  0%,  transparent 34%,
    #b0a090     40%,  #d8c8b4    46%,
    #ede8e0     50%,  #d8c8b4    54%,
    #b0a090     60%,  transparent 66%,
    transparent 100%
  );
}

.mb::before { border-radius: inherit; }
.metal-border::after,
.mb::after { display: none; }

/*========================================================
`   LOADER
============================================================*/
#loader-vfm {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0f1a12;
  overflow: hidden;
  pointer-events: all;
}

/* ── Logo — CENTER ── */
#loader-logo-vfm {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
}
#loader-logo-vfm img {
  height: 26px;
  width: auto;
  display: block;
}

/* ── Heading — centred, hidden until JS reveals ── */
#loader-heading-vfm {

  font-size: clamp(38px, 6.5vw, 112px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
      margin-left: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  font-weight: 400;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: center;
  display: flex;
  font-family: var(--font);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.03em;
    background: linear-gradient(to top, #999999 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  gap: 0.25em;
  align-items: flex-end;
}

/* ── Rect image — visible immediately, centered, BEHIND heading ── */
#loader-img-vfm {
  position: absolute;
  top: 50%;
  left: 50%;
  /* larger starting rect — more impactful before scale */
  width: 660px;
  height: 420px;
  transform: translate(-50%, -50%);
  z-index: 1;
  overflow: hidden;
  border-radius: 4px;
}
#loader-img-vfm img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Overlay inside loader image */
#loader-img-overlay-vfm {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.42) 60%,
    rgba(0, 0, 0, 0.65) 100%
  );
  pointer-events: none;
}

/* sweep panel not used — keep hidden */
#loader-sweep-vfm { display: none; }
/* ════════════════════════════════════════════════════════
   SECTION INDICATOR — fixed bottom-right navigator
════════════════════════════════════════════════════════ */

#sec-indicator {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transform: translateY(15px);
}

#sec-indicator-inner {
  position: relative;
  pointer-events: all;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}

/* ── Pill button ── */
#sec-btn {
pointer-events: all;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
#sec-btn.si--dark {
  background: var(--ink);
  color: var(--white);
}
#sec-btn.si--light {
  background: var(--white);
  color: var(--ink);
}

/* ── Label flip ── */
#sec-btn .si-label-wrap {
  position: relative;
  overflow: hidden;
  height: 11.5px;
}
#sec-btn .si-label-a,
#sec-btn .si-label-b {
  position: absolute;
  top: 0; left: 0;
  white-space: nowrap;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  will-change: transform, opacity;
  transition: transform 0.40s cubic-bezier(0.16,1,0.3,1), opacity 0.30s ease;
}
#sec-btn .si-label-a { transform: translateY(0%);    opacity: 1; }
#sec-btn .si-label-b { transform: translateY(115%);  opacity: 0; }
#sec-btn.si--flipping .si-label-a { transform: translateY(-115%); opacity: 0; }
#sec-btn.si--flipping .si-label-b { transform: translateY(0%);    opacity: 1; }

#sec-btn .si-arrow {
  width: 10px; height: 10px; flex-shrink: 0; display: block;
  transform: rotate(0deg);
  transition: transform 0.30s cubic-bezier(0.16,1,0.3,1);
}
#sec-indicator.si--open #sec-btn .si-arrow { transform: rotate(180deg); }

/* ── Pop-up menu ── */
#sec-menu {
  pointer-events: none;
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
        padding: 5px 0;
    min-width: 150px;
    border-radius: 8px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transform-origin: bottom right;
    transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1), transform 0.30s cubic-bezier(0.16, 1, 0.3, 1);
}
#sec-indicator.si--open #sec-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0) scale(1);
}

#sec-menu.si--dark  { background: var(--ink,   #111210) !important; }
#sec-menu.si--light { background: var(--white, #ffffff) !important; }

.si-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease;
}
#sec-menu.si--dark  .si-menu-item           { color: rgba(255,255,255,0.60); }
#sec-menu.si--light .si-menu-item           { color: rgba(17,18,16,0.50);   }
#sec-menu.si--dark  .si-menu-item:hover     { background: rgba(255,255,255,0.07); color: #fff; }
#sec-menu.si--light .si-menu-item:hover     { background: rgba(17,18,16,0.05);   color: var(--ink); }
#sec-menu.si--dark  .si-menu-item.si-active { color: var(--accent, #C8A96E); }
#sec-menu.si--light .si-menu-item.si-active { color: var(--ink, #111210); font-weight: 700; }

.si-menu-item .si-item-dot {
display:none !important;
}
#sec-menu.si--dark  .si-menu-item           .si-item-dot { background: rgba(255,255,255,0.18); }
#sec-menu.si--light .si-menu-item           .si-item-dot { background: rgba(17,18,16,0.18);    }
#sec-menu.si--dark  .si-menu-item.si-active .si-item-dot { background: var(--accent,#C8A96E); transform: scale(1.5); }
#sec-menu.si--light .si-menu-item.si-active .si-item-dot { background: var(--ink,#111210);    transform: scale(1.5); }

.si-menu-divider { height: 1px; margin: 2px 14px; }
#sec-menu.si--dark  .si-menu-divider { background: rgba(255,255,255,0.07); }
#sec-menu.si--light .si-menu-divider { background: rgba(17,18,16,0.07);    }

@media (max-width: 767px) {
  #sec-indicator { bottom: 18px; right: 14px; }
}

/* ════════════════════════════════════════════════════════
   PROJECTS SECTION — FIX: sticky scrolls in naturally
════════════════════════════════════════════════════════ */
#sProjects {
  overflow: visible;
}

#projectsSticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  will-change: transform;
}

.proj-title-wrap {
  will-change: opacity, transform;
}

.proj-bg-item {
  will-change: opacity;
}

/* ═══════════════════════════════════════════════════
   SCROLL ANIMATION HELPERS  (-vfm suffix)
═══════════════════════════════════════════════════ */
.line-mask-vfm  { display: block; overflow: hidden; }
.line-inner-vfm { display: block; will-change: transform; }
.img-reveal-vfm {overflow: hidden;
    display: block;
        height: 150px;}
.images-blk1{
        display: flex;
    align-items: center;
    justify-content: flex-end;
}
/* ═══════════════════════════════════════════════════
   PORTFOLIO BLOCKS — blur crossfade rotator
═══════════════════════════════════════════════════ */
.cl-blocks.card-shadow {
  position: relative;
  overflow: hidden;
}

/* Both layers fill the block */
.blk-bg-vfm {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: opacity, filter;
}

/* Back layer: always visible, no blur */
.blk-back-vfm {
  z-index: 0;
  opacity: 1;
  filter: blur(0px);
  transition: filter 0.7s ease;
}

/* Front layer: fades in sharp, then outgoing (back) blurs out */
.blk-front-vfm {
  z-index: 1;
  opacity: 0;
  filter: blur(0px);
  transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1),
              filter  0.7s ease;
}

/* Existing block content must sit above image layers */
.cl-blocks.card-shadow > *:not(.blk-bg-vfm) {
  position: relative;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════
   MOBILE PORTFOLIO CAROUSEL
   — replaces the scroll-driven sticky section on mobile
   — hidden on desktop (≥768px), shown on mobile (<768px)
═══════════════════════════════════════════════════ */
#sMobileProjects {
  display: none; /* hidden on desktop */
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0a0a0a;
}

/* Full-viewport slide */
.mproj-track {
  display: flex;
  width: 100%;
  transition: transform 0.55s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
}

.mproj-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100svh;
  position: relative;
  overflow: hidden;
}

.mproj-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* Same dark gradient overlay as desktop */
.mproj-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.28) 45%,
    rgba(0,0,0,0.72) 100%
  );
  z-index: 1;
}

/* Slide content — centered */
.mproj-slide-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}

.mproj-type-badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 18px;
  width: fit-content;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mproj-title {
  font-size: clamp(34px, 10vw, 56px);
  font-weight: 400;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}


/* ── Navigation bar — counter + arrows ── */
.mproj-nav {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 24px;
}

/* Pill container */
.mproj-nav-pill {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 100px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}

.mproj-nav-btn {
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0.85;
  transition: opacity 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mproj-nav-btn:active {
  background: rgba(255,255,255,0.12);
  opacity: 1;
}

.mproj-nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.mproj-nav-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.mproj-nav-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}

.mproj-counter {
  padding: 0 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.08em;
  white-space: nowrap;
  min-width: 72px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Dots row */
.mproj-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  position: absolute;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.mproj-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: background 0.3s, transform 0.3s;
}

.mproj-dot.active {
  background: #fff;
  transform: scale(1.35);
}

/* ── Show/hide: desktop vs mobile ── */
@media (min-width: 768px) {
  /* Desktop: show sticky scroll section, hide mobile carousel */
  #sProjects       { display: block; }
  #sMobileProjects { display: none !important; }
}

@media (max-width: 767px) {
  /* Mobile: hide sticky scroll section, show carousel */
  #sProjects       { display: none !important; }
  #sMobileProjects { display: block; }
}
/* ═══════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════ */
.btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.btn--text {
  overflow: visible;
  padding: 9px 16px;
  background: transparent !important;
}
.btn--text .btn-underline {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 10px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transition: opacity .3s ease;
  pointer-events: none;
}
.hero-btn1 { bottom:0px; left:10px; right:0px; }
.btn--text:hover .btn-underline { opacity: 0; }
.btn--text .btn-label  { margin-right: 8px; }
.btn--text .btn-icon   { display: flex; align-items: center; }
.btn--text .btn-icon svg { width:12px; height:12px; fill:currentColor; transition:transform .42s var(--ease); }
.btn--text:hover .btn-icon svg { transform: rotate(-45deg); }

.btn--accent { gap:0; position:relative; isolation:isolate; }
.btn--accent .btn-label { background:var(--accent); color:var(--ink); font-weight:700; padding:11px 20px; border-radius:100px; }
.btn--accent .btn-icon  { padding:10px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.btn--accent .btn-icon svg { width:13px; height:13px; fill:var(--ink); transition:transform .42s var(--ease); }
.btn--accent:hover .btn-icon svg { transform: rotate(-45deg); }
.btn--accent::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: var(--btn-r);
  background: conic-gradient(from var(--angle),
    transparent 0%, transparent 34%,
    #686868 40%, #c8c8c8 46%, #f4f4f4 50%,
    #c8c8c8 54%, #686868 60%,
    transparent 66%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1.5px;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 2;
}
.btn--accent:hover::before { opacity:1; animation:metalSpin 2.4s linear infinite; }
.btn--accent::after { display: none; }

.btn--dark-pill {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 100px;
  transition: gap .4s var(--ease);
  white-space: nowrap;
  position: relative;
  isolation: isolate;
}
.btn--dark-pill:hover { gap: 16px; }
.btn--dark-pill svg { width:11px; height:11px; fill:var(--ink); transition:transform .42s var(--ease); }
.btn--dark-pill:hover svg { transform: rotate(-45deg); }
.btn--dark-pill::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: var(--btn-r);
  background: conic-gradient(from var(--angle),
    transparent 0%, transparent 34%,
    #b0a090 40%, #d8c8b4 46%, #ede8e0 50%,
    #d8c8b4 54%, #b0a090 60%,
    transparent 66%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1.5px;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 2;
}
.btn--dark-pill:hover::before { opacity:1; animation:metalSpin 2.4s linear infinite; }
.btn--dark-pill::after { display: none; }


/* ═══════════════════════════════════════════════════════════════
   TOOLTIP
═══════════════════════════════════════════════════════════════ */
#tip {
  position:fixed; pointer-events:none; z-index:9999;
  background:var(--ink-deep); color:rgba(255,255,255,.78);
 font-size:11px; font-weight:500;
  letter-spacing:.14em;white-space:nowrap;
  padding:8px 16px; border:1px solid rgba(255,255,255,.08);
  opacity:0; transition:opacity .18s ease; transform:translate(20px,15px);
}

/* ═══════════════════════════════════════════════════════════════
   LOADER — smoothed with blur + scale exit
═══════════════════════════════════════════════════════════════ */
#loader {
  position:fixed; inset:0; z-index:9999;
  background:var(--green-dark);
  display:flex; align-items:center; justify-content:center;
  /* Rounded bottom, will animate off upward */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow:hidden;
  /* Blur veil that will be removed */
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  will-change: transform, opacity, filter;
}

/* Noise/grain texture overlay on loader */
#loader::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}

#loader-logo {
  display:flex; align-items:center; gap:10px;
  position: relative; z-index: 2;
  opacity:0; transform:translateY(24px) scale(0.96);
  filter: blur(8px);
  transition: opacity .8s cubic-bezier(0.16,1,0.3,1),
              transform .8s cubic-bezier(0.16,1,0.3,1),
              filter .8s cubic-bezier(0.16,1,0.3,1);
}
#loader-logo img { height:36px; width:auto; display:block; }
#loader-logo .loader-text {
  font-size:13px; font-weight:800; letter-spacing:.28em;
  text-transform:uppercase; color:var(--white);
}
#loader-logo.show {
  opacity:1;
  transform:translateY(0) scale(1);
  filter: blur(0px);
}

/* Loader exit — smooth blur+scale+slide up */
#loader.sweep {
  animation: loaderExit 0.9s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes loaderExit {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0px);
    border-radius: 0;
  }
  30% {
    filter: blur(4px);
    opacity: 0.9;
  }
  70% {
    border-bottom-left-radius: 48px;
    border-bottom-right-radius: 48px;
    filter: blur(12px);
    opacity: 0.6;
  }
  100% {
    transform: translateY(-105%) scale(0.96);
    opacity: 0;
    filter: blur(20px);
    border-bottom-left-radius: 64px;
    border-bottom-right-radius: 64px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:28px 7.5vw;
  display:flex; align-items:center; justify-content:space-between;
  opacity:0;
}
nav.loaded { opacity:1; }

nav.nav--light .nav-logo-text,
nav.nav--light #navBtn { color: var(--ink) !important; }
nav.nav--light #navBtn .btn-underline { background: var(--ink); }
nav.nav--light #navBtn svg { fill: var(--ink); }
nav.nav--light #navLogo path,
nav.nav--light #navLogo rect,
nav.nav--light #navLogo polygon,
nav.nav--light #navLogo circle,
nav.nav--light #navLogo ellipse { fill: var(--ink); }
nav.nav--light img { filter: invert(1); }

nav.nav--dark .nav-logo-text,
nav.nav--dark #navBtn { color: var(--white) !important; }
nav.nav--dark #navBtn .btn-underline { background: var(--white); }
nav.nav--dark #navBtn svg { fill: var(--white); }
nav.nav--dark #navLogo path,
nav.nav--dark #navLogo rect,
nav.nav--dark #navLogo polygon,
nav.nav--dark #navLogo circle,
nav.nav--dark #navLogo ellipse { fill: var(--white); }

.nav-logo-text { font-size:12px; font-weight:800; letter-spacing:.28em; text-transform:uppercase; color:var(--white); }

/* ═══════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════ */
.hero { position:fixed; inset:0; z-index:1; overflow:hidden; background:var(--green-dark); }
.hero-bg {
  position:absolute; inset:-4%;
  opacity:0; filter:blur(22px);
  transition:opacity 1.2s var(--ease), filter 1.5s var(--ease);
  will-change: transform;
}

.hero-bg img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.hero-bg.reveal {
  opacity:.72; filter:blur(0);
}
.hero-overlay { position:absolute; inset:0; background:linear-gradient(160deg, rgba(10,12,10,.55) 0%, rgba(10,12,10,.08) 50%, rgba(10,12,10,.62) 100%); }
.hero-grid {
  position:absolute; left:0; right:0; bottom:0; top:0;
  pointer-events:none; z-index:2; overflow:hidden; opacity:0.4;
}
.hero-grid .vl { content:''; position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.10); }
.hero-grid .vl:nth-child(1) { left:40px; }
.hero-grid .vl:nth-child(2) { left:18%; }
.hero-grid .vl:nth-child(3) { left:34%; }
.hero-grid .vl:nth-child(4) { left:55%; }
.hero-grid .vl:nth-child(5) { left:72%; }
.hero-grid .vl:nth-child(6) { left:88%; }
.hero-content {
  display:flex; margin:auto; opacity:0; gap:30px;
  width:var(--width); transform:translateY(18px);
  color:var(--white);
  transition:opacity .9s var(--ease) .5s, transform .9s var(--ease) .5s;
  align-items:flex-start; flex-direction:column;
  justify-content:flex-end; height:100%;
}
.hero-content.reveal { opacity:1; transform:translateY(0); }
.hero-eyebrow { display:flex; gap:10vw; height:50%; }
.hero-title { font-family:var(--font);   margin-bottom: 1vw; font-size: clamp(60px, 9vw, 140px); margin-left:-2vw; margin-top:2vw; font-weight:400; line-height:1.2; letter-spacing:-.03em;  background: linear-gradient(to top, #999999 0%, #FFFFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }
.hero-br { position:absolute; bottom:56px; right:7.5vw; z-index:5; display:flex; flex-direction:column; align-items:flex-end; gap:20px; max-width:270px; opacity:0; transition:opacity .9s var(--ease) .85s; }
.hero-br.reveal { opacity:1; }
.hero-desc { text-align:right; font-size:11px; font-weight:300; line-height:1.85; color:rgba(255,255,255,.48); }
.main-cnt { flex:1; display:flex; align-items:flex-end; }
.main-cnt p { width:50%; line-height:1.4; }
.mid-content { flex:0.5; gap:10px; display:flex; flex-direction:column; align-items:flex-end; text-align:right; line-height:1.4; }
.mid-content img { max-width:10vw; margin-bottom:5px; }
.third { display:flex; align-items:end; line-height:1.4; }

/* ═══════════════════════════════════════════════════════════════
   MAIN
═══════════════════════════════════════════════════════════════ */
.main-wrapper { position:relative; z-index:10; margin-top:100vh; }
.d1 { transition-delay:.08s; } .d2 { transition-delay:.18s; } .d3 { transition-delay:.28s; }

/* ─── Unified reveal-up ─── */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal-up.in {
  opacity: 1;
  transform: translateY(0);
}
.ru-d1 { transition-delay: .10s; }
.ru-d2 { transition-delay: .22s; }
.ru-d3 { transition-delay: .36s; }
.ru-d4 { transition-delay: .50s; }

/* ─── reveal-clip ─── */
.reveal-clip {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(20px);
  transition: opacity .9s var(--ease), clip-path 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal-clip.in {
  opacity: 1;
  clip-path: inset(0 0 0% 0);
  transform: translateY(0);
}

/* ─── reveal-fade ─── */
.reveal-fade {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.reveal-fade.in {
  opacity: 1;
}

/* ─── reveal-scale ─── */
.reveal-scale {
  opacity: 0;
  transform: scale(0.94) translateY(24px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
}
.reveal-scale.in {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ─── reveal-slide-left / right ─── */
.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
}
.reveal-left.in { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
}
.reveal-right.in { opacity: 1; transform: translateX(0); }

/* ═══════════════════════════════════════════════════════════════
   LIQUID DISTORT — SVG filters for headings & images
═══════════════════════════════════════════════════════════════ */
.liquid-svg-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Heading distort wrapper */
.distort-heading {
  position: relative;
  display: inline-block;
}

/* Image distort wrapper */
.distort-img-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.distort-img-wrap img,
.distort-img-wrap > * {
  width: 100%;
  height: 100%;
  object-fit: inherit;
  display: block;
}
.orb1{
    width:60vw; bottom:-9%; left:50%; transform:translateX(-50%);
}
.orb2{
    width:44vw; top:50%; right:-2%; transform:translateY(-50%);
}
.label2{
    display:none;
}
/* ═══════════════════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════════════════ */
.s-about { background:var(--white); color:var(--ink); padding:140px 0; }
.about-layout { display:grid; grid-template-columns:220px 1fr; gap:60px; padding-top:40px; }
.about-label-col { font-size:11px; font-weight:400; letter-spacing:.04em; color:rgba(17,18,16,.4); padding-top:4px; }
.about-text-col { display:flex; flex-direction:column; gap:48px; }
.about-para { font-size:clamp(15px,1.4vw,18px); font-weight:300; line-height:1.85; max-width:680px; }
.about-para--lead { font-size:clamp(16px,1.6vw,20px); }
.about-para .w { display:inline; opacity:0; transition:opacity .35s ease; }

/* ═══════════════════════════════════════════════════════════════
   PHILOSOPHY / QUOTE SECTION
═══════════════════════════════════════════════════════════════ */
.quote-wrapper {
  position: relative;
  height: 300vh;
  background: var(--white);
  z-index: 15;
}
.quote-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.image-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.base-img,
.blur-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: auto;
  object-fit: contain;
}
.base-img {
  pointer-events: auto;
  cursor: none;
  z-index: 1;
  opacity: 1;
  filter: drop-shadow(0 0 40px rgba(200,169,110,0.15));
}
.blur-img {
  pointer-events: none;
  z-index: 2;
  filter: blur(14px);
  opacity: 0;
  mask-image: radial-gradient(circle 0px at -999px -999px, black 0%, transparent 0%);
  -webkit-mask-image: radial-gradient(circle 0px at -999px -999px, black 0%, transparent 0%);
}
#quote-box {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  line-height: 1.4;
  font-weight: 300;
  text-align: center;
  min-height: 200px;
}
.q-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  padding: 0 5%;
}
.q-wrap p {
  margin: 0;
  display: block;
  width: 100%;
  font-size: clamp(1.3rem, 2.2vw, 2.2rem) !important;
  color: var(--ink);
  font-weight: 300;
}
.q-wrap .accent {
  font-size: calc(100% + 2px);
  font-style: italic;
}
.q-wrap .abt-text { font-weight: 500; }
.anim-word {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}

/* ═══════════════════════════════════════════════════════════════
   About new
═══════════════════════════════════════════════════════════════ */
.about-vfm{
  position:relative;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  background: var(--white);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  padding: var(--padding) 0;
  align-items: center;
}
.about-img{
  position: absolute;
  bottom: 0;
  opacity: 0.55;
  pointer-events: none;
}
.main-abt{
  width: var(--width);
  margin: 0 auto;
}
/* Two-column about grid */
.gif-head3{
    width: 100%;
    display: flex;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /* min-height: 40vh; */
    flex-direction: column;
}
.abt-left-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 50%;
    min-height: 100%;
    justify-content: space-between;
}
.abt-label {
    /* font-size: 9px; */
    font-weight: 400;
    /* letter-spacing: .28em; */
    /* text-transform: uppercase; */
    /* color: rgba(17, 18, 16, .35); */
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top:40px;
}

.abt-right-col {
display: flex;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 32px;
    /* width: 50%; */
    flex: 0.5;
    padding-bottom: 4px;
    align-items: flex-end;
}
.abt-right-body {
    /* font-size: clamp(15px, 1.2vw, 18px); */
    font-weight: 400;
    line-height: 1.4;
    display: flex;
    align-items: flex-end;
    max-width: 40%;
    /* text-align: right; */
    flex: 1;
}
.h2-abtvfm{
font-size: clamp(24px, 3vw, 55px);
font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.05;
  background: linear-gradient(to bottom, #081D12 0%, #4a6b55 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.reveal-about{
  width: 80%;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   GIF / SHOWCASE SECTION
═══════════════════════════════════════════════════════════════ */
.s-gif-hover {
  background: var(--green-dark);
  color: var(--white);
  position: relative;
  overflow: hidden;
  padding: calc(var(--padding) * 2) 0;
}
.bg-img-svg{
  position: absolute;
  right: -10vw;
  height: -webkit-fill-available;
}
.gif-head1{
  width: 100%;
  margin-bottom: 40px;
  display: flex;
}
.gif-section-inner {
  width: var(--width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gif-section-heading {
  text-align: center;
  margin-bottom: 64px;
}
.gif-section-eyebrow {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.gif-section-eyebrow::before,
.gif-section-eyebrow::after {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--accent);
}
.gif-section-title {
  font-size: clamp(36px, 5.5vw, 82px);
  font-weight: 200;
  letter-spacing: -.03em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}
.gif-heading{
  font-size: clamp(42px, 6vw, 96px);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1;
}
.gif-section-img-wrap {
    position: relative;
    width: 100%;
    max-width: 30vw;
    overflow: visible;
    margin-bottom: 40px;

}
.gif-hover-static {
  width: 100%;
  height: auto;
  display: block;
  will-change: transform;
}
/*.gif-hover-gif {
  position: fixed;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  transition: opacity 0.25s ease, transform 0.25s var(--ease);
  border: 2px solid rgba(200,169,110,.6);
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
}*/
.gif-hover-gif {
    cursor:pointer;
display:none;
}
.gif-hover-gif.gif-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.gif-section-blocks {
  display: flex;
  gap: 40px;
      flex-wrap: wrap;
  width: 100%;
  z-index: 2;
}
.no-wrap{
    flex-wrap: nowrap !important;
}
.gif-section-blocks .gif-block{
  background: var(--green-dark);
}
.gif-block-p{
  font-size:calc(100% - 2px);
  color:var(--light);
  line-height:1.4;
}
.gif-block-title2 {
  display: flex;
  flex-direction: column;
  background: linear-gradient(to top, var(--light) 0%, #081D12 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
      line-height: 1;
  background-clip: text;
  color: transparent;
  font-weight: 500;
  font-size: clamp(48px, 6vw, 120px);
}
.gif-block-title2-cont {
  color: var(--white);
  -webkit-text-fill-color: var(--white);
  background: none;
  font-size: 0.5em;
      font-size: calc(100% - 4.3vw);
  margin-top:-5px;
  font-weight:400;
}
.gif-block-body2{
font-size: clamp(12px, 0.5vw, 14px);  font-weight: 400;
  line-height: 1.4;
  opacity: 0.9;
  text-transform: uppercase;
  margin-top:15px;
}
.gif-section-heading2 {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.gif2-sec{
  display: flex;
  gap: 5vw;
  margin-bottom: 80px;
  align-items: flex-start;
  width: 75%;
}
.gif2-heading{
  display: flex;
  flex: 1;
  width: 100%;
  justify-content: center;
}
.img-cvt{
  max-width: 10vw;
  height: auto;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  width: 100%;
  flex: 1;
}
.img-cvt img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.gif2-heading-content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.gif2-heading-content h2{
  font-size: clamp(42px, 6vw, 96px);
  font-weight:450;
  background: linear-gradient(to top, #999999 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gif2-heading-content span{
  text-align: right;
  width: 100%;
  transform: translateX(-10px);
}
.gif2-body{
  flex:1;
}
.gif2-body p{
  line-height: 1.4;
  color:var(--light);
}
.gif2-body p:not(:last-child){
  margin-bottom:3vw;
}
.gif-block {
  padding: 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  transition: background .4s ease;
  cursor: default;
  flex:1;
  gap:20px;
  border-radius: 16px;
  min-height: 40vh;
  border: 1px solid #B2C1B033;
  justify-content: space-between;
}
.gif-block-img {
height: 100%;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    /* margin-left: auto; */
    width: 100%;
}
.gif-block::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 13.5px;
  background: conic-gradient(
    from var(--angle),
    transparent  0%,  transparent 34%,
    #686868     40%,  #c8c8c8    46%,
    #f4f4f4     50%,  #c8c8c8    54%,
    #686868     60%,  transparent 66%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1.5px;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}
.gif-block:hover::before {
  opacity: 1;
  animation: metalSpin 2.4s linear infinite;
}
.gif-block-num {
  font-size: 11px;
  color: var(--accent);
  opacity: .8;
  letter-spacing: .1em;
}
.gif-block-title {
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 300;
  letter-spacing: -.01em;
  color: var(--white);
  line-height: 1.2;
}
.gif-block-body {
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 400;
  line-height: 1.4;
  opacity: 0.9;
}
.gif-block-divider {
  width: 24px;
  height: 1px;
  background: var(--accent);
  opacity: .4;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   COLUMN BLOCKS SECTION
═══════════════════════════════════════════════════════════════ */
.s-col-blocks {
  background: var(--white);
  color: var(--ink);
padding: calc(var(--padding) * 2) 0;}
.col-blocks-inner {
  width: var(--width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.col-blocks-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 75%;
    flex: 1;
    margin-bottom: 5vw;
}
.col-blocks-header span{
text-align: right;
    width: 100%;
}
.abt-oth{
  display: flex;
  gap:5vw;
  align-items: flex-end;
}
.w50{
    max-width: 40%;
    font-size: clamp(1.1rem, 1vw, 1.4rem);
    line-height: 1.4;
}
.col-blocks-eyebrow {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.oth-sup{
  width: 100%;
  display: flex;
  align-items: flex-end;
  flex:1;
  justify-content: flex-end;
}
.oth-sup p{
  width:80%;
  line-height: 1.4; 
}
.col-blocks-eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--accent);
}
.col-blocks-title {
    font-size: clamp(32px, 7vw, 82px);
    font-weight: 450;
  letter-spacing: -.03em;
  line-height: 1;
  text-wrap-mode: nowrap;
  background: linear-gradient(to top, #B2C1B0 0%, #081D12 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.col-blocks-list {
  display: flex;gap: 5vw;align-items:flex-start;
}
.cd-blk1{
  flex:1;
  display: flex;gap: 40px; flex-direction: column;
}
.col-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
padding: 40px 80px;  position: relative;
  isolation: isolate;
  cursor: default;
  transition: padding-left .4s var(--ease);
  border: 1px solid rgba(17,18,16,.08);
  border-radius: 12px;
  flex: 1;
}
.cd-blk1 .col-block:nth-child(2) {
  transform: translateX(20px);
}
.cd-blk2{
  flex:1; margin-top:8vw;
}
.col-block-header {
display: flex;
    align-items: center;
        width: 100%;
    justify-content: flex-end;
}
.img1-display{
        overflow: hidden;
    display: block;
    width: 30% !important;
}
.col-block-img {
  max-width: 30vh;
  max-height: 30vh;
  height: 100%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  margin-left: auto;
  width: 100%;
}
.col-block::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 13.5px;
  background: conic-gradient(
    from var(--angle),
    transparent  0%,  transparent 34%,
    #b0a090     40%,  #d8c8b4    46%,
    #ede8e0     50%,  #d8c8b4    54%,
    #b0a090     60%,  transparent 66%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1.5px;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}
.col-block:hover::before {
  opacity: 1;
  animation: metalSpin 2.4s linear infinite;
}
.col-block-num {
  font-size: 11px;
  color: var(--accent);
  opacity: .7;
  letter-spacing: .1em;
  flex-shrink: 0;
}
.col-block-name {
  font-weight: 500;
  font-family:var(--font2);
  color: var(--ink);
  line-height: 1;
font-size: clamp(2rem, 4vw, 3.1rem);
background: linear-gradient(to top, #B2C1B0 0%, #081D12 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.col-block-desc {
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 400;
  line-height: 1.4;
  opacity:0.9;
}
.col-block-tag {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(200,169,110,.3);
  padding: 6px 14px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .35s ease, transform .35s ease;
  margin-top: auto;
}
.col-block:hover .col-block-tag {
  opacity: 1;
  transform: translateX(0);
}
.col-blocks-col2 {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.col-blocks-col2 .col-block:last-child {
  margin-top: 40px;
}


/* ═══════════════════════════════════════════════════════════════
   PROJECTS — Full-bleed Carousel
═══════════════════════════════════════════════════════════════ */
#sProjects {
  position: relative;
}

.projects-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.proj-bg-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.proj-bg-item {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.72s cubic-bezier(0.16,1,0.3,1);
}

.proj-bg-item.active {
  opacity: 1;
}

.proj-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(8,29,18,.88) 0%,
    rgba(8,29,18,.22) 50%,
    rgba(8,29,18,.50) 100%
  );
  pointer-events: none;
}

.proj-label {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.50);
  white-space: nowrap;
}

.proj-title-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 0 5vw;
}

.proj-title-wrap {
  position: absolute;
  text-align: center;
  width: 100%;
  padding: 0 5vw;
}

.proj-title-text {
font-size: clamp(28px, 5vw, 80px);    font-weight: 300;
    letter-spacing: -.03em;
    line-height: 1.2;
background: linear-gradient(to top, #999999 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;    /* text-transform: uppercase; */
    display: block;
    white-space: normal;
    word-break: break-word;
}

/* ── Bottom bar — CENTER ONLY, left/right nav commented out ── */
.proj-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 7.5vw 48px;
  gap: 24px;
}


/* ── COMMENTED OUT: left/right nav areas ──
.proj-nav-area { ... }
.proj-nav-area--right { ... }
.proj-prev-label, .proj-next-label { ... }
.proj-adj-tag { ... }
.proj-adj-name { ... }
.proj-arrow-btn { ... }
.proj-arrow-btn svg { ... }
.proj-arrow-btn:hover { ... }
.proj-arrow-btn:disabled { ... }
.proj-arrow-btn--prev svg { ... }
*/

/* Counter center */
.proj-counter-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.proj-counter-text {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .14em;
  color: rgba(255,255,255,.50);
}

.proj-counter-dots {
  display: flex;
  gap: 6px;
}

.proj-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  transition: background .3s, transform .3s;
}

.proj-dot.active {
  background: var(--white);
  transform: scale(1.4);
}

.proj-type-badge {
    position: absolute;
    z-index: 11;
    bottom: 10px;
    left: 50%;
    background: var(--ink);
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--white);
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: 8px;
}


/* ═══════════════════════════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════════════════════════ */
.s-services {
  background: var(--white);
  color: var(--ink);
  margin: 0 auto;
  display: flex;
  width: 100%;
  gap: 80px;
  flex-direction: column;
  align-items: center;
    padding: calc(var(--padding) * 2) 0;
    
}
.services-img{
  height: 60vh;
}
.services-img img{
  height: 100%;
    width: auto;
  object-fit: cover;  
}
.services-heading { width: 60vw; margin: 0 auto; text-align: center;}
.services-row { width:var(--width); margin:0 auto; display:flex; gap:0; align-items:stretch; overflow:visible; }
.svc-col {
  flex:1; min-width:0;
  border-left:1px solid rgba(17,18,16,.1);
  padding:48px 36px; cursor:default; position:relative;
  transition:transform .48s var(--ease), box-shadow .48s ease, color .4s ease;
  z-index:1; will-change:transform;
}
.svc-col:last-child { border-right:1px solid rgba(17,18,16,.1); }
.svc-col::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, var(--green-dark) 0%, rgba(26,43,26,.9) 100%); opacity:0; transition:opacity .4s ease; z-index:0; }
.svc-col:hover { transform:scale(1.05); z-index:10; box-shadow:0 28px 64px rgba(0,0,0,.2); color:var(--white); }
.svc-col:hover::before { opacity:1; }
.svc-col-inner { position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:space-between; min-height:340px; }
.svc-num { font-size:11px; color:rgba(17,18,16,.3); transition:color .4s ease; }
.svc-col:hover .svc-num { color:rgba(255,255,255,.35); }
.svc-name { font-size:clamp(18px,1.8vw,26px); font-weight:300; letter-spacing:-.01em; line-height:1.15; margin-top:auto; margin-bottom:16px; transition:color .4s ease; }
.svc-desc { font-size:12px; font-weight:300; line-height:1.8; color:rgba(17,18,16,.5); max-width:240px; opacity:0; transform:translateY(8px); transition:opacity .4s ease .1s, transform .4s ease .1s, color .4s ease; }
.svc-col:hover .svc-desc { opacity:1; transform:translateY(0); color:rgba(255,255,255,.65); }
.svc-arrow { width:32px; height:32px; border-radius:50%; border:1px solid rgba(17,18,16,.15); display:flex; align-items:center; justify-content:center; margin-top:28px; opacity:0; transform:translateX(-8px); transition:opacity .35s ease, transform .35s ease, border-color .35s ease; }
.svc-arrow svg { width:11px; height:11px; fill:var(--white); }
.svc-col:hover .svc-arrow { opacity:1; transform:translateX(0); border-color:rgba(255,255,255,.3); }

/* ═══════════════════════════════════════════════════════════════
   PORTFOLIO / TESTIMONIALS
═══════════════════════════════════════════════════════════════ */
.port-and-test {
  background: var(--white);
  color: var(--ink);
  padding: calc(var(--padding) * 2) 0;
  margin: 0 auto;
  width: 100%;
  align-items: center;
  border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}
.grids-main{
  width: 75vw;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: stretch;
}
.cl1-grid{
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex:1;
}
.grids-main .cl1-grid:first-child { margin-top: 10vw; }
.grids-main .cl1-grid:last-child { margin-top: 15vw; }
.cl-blocks{
    min-height: 60vh !important;
    max-height: max-content;
    height: 100%;
    border-radius: 16px;
    background: #081D12;
    padding: 30px;
    color: var(--white);
}
.blktext{
  height:100%;
  display: flex;
  flex-direction: column;
  justify-content:space-between;
}
.cl-blocks img{
  width: 100%;
  height: 100%;
  background-size: cover;
  border-radius: 16px;
  background-position: center;
  background-repeat: no-repeat;
}

.x-line {
  width: 100%;
  height: 0.4px;
  background: var(--light);
  margin-bottom:20px;
}
.blktext-top{
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-direction: column-reverse;
    text-align: right !important;
}
.blktext-title{
    font-size: clamp(14px, 1.2vw, 22px);
    font-weight:400;
  letter-spacing: -.02em;
  margin-bottom:20px;
  line-height: 1.2;
  color: var(--light);
}
.blktext-img{ width:50%; }
.blktext-bottom{ margin-bottom:10px; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
footer {
    background: var(--green-dark);
    padding-top: 10vw;
    padding-bottom: 20px;
    position: relative;
        overflow: hidden;
}

.footer-bg-img{
  position:absolute;
  bottom: -5vw;
  width:100%;
  overflow: hidden;
  pointer-events: none;
}
.footer-bg-img img{
  width:100%;
  height:auto;  
  object-fit: cover;
  display: block;
}
.footer-cta-card {
  position: relative;
  z-index: 2;
  background: var(--white);
  border-radius: 16px 16px 0 0;
  padding: 5vw 8vw;
  text-align: center;
  margin: 0 16px 0;
}
.footer-cta-eyebrow { font-size:9px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:rgba(17,18,16,.35); margin-bottom:20px; }
.footer-cta-title { font-size:clamp(28px,3vw,46px); font-weight:300; letter-spacing:-.025em; color:var(--ink); line-height:1.1; margin-bottom:12px; }
.footer-cta-sub { font-size:12px; font-weight:300; line-height:1.8; color:rgba(17,18,16,.45); max-width:420px; margin:0 auto 32px; }
.footer-inner {
  position:relative; z-index:2; width:70VW; margin:0 auto;
  padding-bottom:100px;
  display:flex; 
  gap:10px;
  align-items: flex-start; 
}
.footer-logo { font-size:12px; font-weight:800; letter-spacing:.28em; text-transform:uppercase; color:var(--white); }
.footer-logo span { font-weight:300; opacity:.4; letter-spacing:.14em; font-size:9px; }
.footer-tagline {font-size:13px; line-height:1.65; color:rgba(255,255,255,.28); max-width:200px; margin-top:12px; }
.footer-socials { display:flex; gap:10px; margin-top:20px; }
.footer-social { width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.45); font-size:10px;  cursor:pointer; transition:border-color .22s ease, color .22s ease; }
.footer-social:hover { border-color:rgba(255,255,255,.5); color:var(--white); }
.footer-col-title { font-size:13px; font-weight:400; color:var(--white); margin-bottom:18px; letter-spacing:.01em; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer-links li a { font-size:11px; font-weight:300; color:rgba(255,255,255,.35); transition:color .22s ease; }
.footer-links li a:hover { color:var(--white); }
.footer-bottom {
  position:relative; z-index:2; width:70VW; margin:0 auto;
  display:flex; justify-content:center; align-items:center;
  padding-bottom:20px; 
  text-align:center;
  font-size: clamp(10px, 1.5vw, 12px); font-weight:400; letter-spacing:.1em; 
  color:var(--light);
}
.footer-main-content{
  display: flex;
  flex-direction: column;
  gap: 100px;
  width: 70VW;
  margin: 0 auto;
  padding-bottom: 100px;
}
.footer-header{
  background: linear-gradient(90deg, #FFFFFF 0%, #B2C1B0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: 500;
  font-size: clamp(48px, 6vw, 120px);
}
.footer-icon{
  width: 80px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex11{ flex:1; }
.flex05{ flex:0.5; }
.footer-icon img{
  height: 50%;
  width: 50%;
  object-fit: contain;
}

/* ─── Footer CTA → Contact Form Card ─────────────────────────── */
.footer-cta-card-f {
  background: var(--white, #fff);
  border-radius: 16px;
  padding: 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
}
.footer-cta-eyebrow-f {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7a7a6e;
  margin: 0 0 2px;
}
.footer-cta-title-f {
font-family: var(--serif);  color:var(--ink);
  line-height: 1.2;
  margin-bottom: 20px;
  font-weight: 400;
  font-size: clamp(1.5rem, 7vw, 3rem);
}
.footer-cta-sub-f {
  font-size: 14px;
  font-weight: 300;
  color: #555;
  margin: 0;
  line-height: 1.6;
}
.footer-form-f {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-form-row-f {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 50px;
}
.footer-form-row-f.full-f { grid-template-columns: 1fr; }
.footer-field-f {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-field-f label {
  font-size: clamp(12px, 0.8vw, 14px);
  font-weight: 400;
  color: var(--ink);
}
.footer-field-f input,
.footer-field-f select,
.footer-field-f textarea {
  all:unset;
  font-size: clamp(14px, 0.8vw, 16px);
  font-weight: 300;
  cursor:normal !important;
  color: var(--ink);
  border-bottom: 1px solid var(--light);
  padding: 12px 0;
  outline: none;
  transition: border-color 0.22s, background 0.22s;
  resize: none;
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.footer-field-f input::placeholder,
.footer-field-f textarea::placeholder { color: #bbb; }
.footer-field-f input:focus,
.footer-field-f select:focus,
.footer-field-f textarea:focus { border-color: #2d4a2d; background: #fff; }
.footer-field-f textarea { min-height: 96px; line-height: 1.5; }
.footer-field-f .select-wrap-f { position: relative; }
.footer-field-f .select-wrap-f::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}
.footer-field-f .select-wrap-f select { padding-right: 36px; cursor: pointer; }
.footer-form-submit-f {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-direction: row-reverse;
    /* flex-wrap: nowrap; */
    align-items: center;

}
.footer-form-note-f {
    font-size: 11px;
    color: var(--ink);
    /* flex: 1; */
    text-align: right;
}
.btn2-footer{
all: unset;
    display: flex;
    background: var(--ink);
    padding: 12px 16px;
    border-radius: 32px;
    line-height: 1;
    align-items: center;
    gap: 8px;
    width:max-content;
    transition:all ease-in 0.3s;
}
.btn2-footer:hover{
    gap:10px;
        transition:all ease-in 0.3s;

}
.btn2-footer:hover svg{
    transform:rotate(-45deg);
            transition:all ease-in 0.3s;

}
.btn--form-submit-f {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white, #fff);
  background: #1a2e1a;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  transition: background 0.22s, transform 0.18s;
  white-space: nowrap;
}
.btn--form-submit-f:hover { background: #2d4a2d; transform: translateY(-1px); }
.btn--form-submit-f svg { width: 13px; height: 11px; fill: var(--white, #fff); flex-shrink: 0; transition: transform 0.22s; }
.btn--form-submit-f:hover svg { transform: translateX(3px); }
.footer-form-success-f {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 0 8px;
  text-align: center;
}
.footer-form-success-f .success-icon-f {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eaf2ea;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-form-success-f .success-icon-f svg { width: 20px; height: 20px; stroke: #2d4a2d; fill: none; }
.footer-form-success-f p {  font-size: 14px; color: #444; margin: 0; }
.footer-form-f.submitted-f .footer-form-fields-f { display: none; }
.footer-form-f.submitted-f .footer-form-success-f { display: flex; }
.footer-contact-card-f {
  background: rgba(20, 40, 20, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: clamp(24px, 3.5vw, 40px) clamp(24px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}
.footer-contact-row-f {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 16px;
  align-items: baseline;
}
.footer-contact-row-f span{ font-size: clamp(14px, 1vw, 16px) !important; }
.footer-contact-label-f {  font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.5); letter-spacing: 0.02em; }
.footer-contact-val-f { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.88); line-height: 1.65; }
.footer-contact-val-f a { color: inherit; text-decoration: none; transition: color 0.2s; }
.footer-contact-val-f a:hover { color: #fff; }
.footer-contact-divider-f { height: 1px; background: rgba(255,255,255,0.08); margin: 2px 0; }

.footer-contact-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer-contact-item {
  padding: 14px 0;
  transition: opacity 0.35s cubic-bezier(0.16,1,0.3,1);
  cursor: default;
}

.footer-contact-group:has(.footer-contact-item:hover) .footer-contact-item {
  opacity: 0.28;
}

.footer-contact-group:has(.footer-contact-item:hover) .footer-contact-item:hover {
  opacity: 1;
}

.footer-contact-item:hover .footer-contact-label-f {
  color: rgba(255,255,255,0.65);
}

.footer-contact-item:hover .footer-contact-val-f,
.footer-contact-item:hover .footer-contact-val-f a {
  color: var(--white);
}
.footer-main-content-f {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 80px);
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 920px) {
    :root {
  --width: 88vw;
  --radius: 30px;
  --btn-r: 4px;
  --padding:60px;
}
.footer-contact-row-f {
    display: flex;
    grid-template-columns: 100px 1fr;
    gap: 8px 16px;
    /* align-items: baseline; */
    flex-direction: column;
}
.footer-main-content {
    display: flex;
    flex-direction: column;
    gap: 100px;
    width: var(--width);
    margin: 0 auto;
    padding-bottom: 50px;
}
    .hero-eyebrow {
        flex-direction: column;
        gap: 20px;
        height: auto;
    }
    .main-cnt { max-width: 100%; }
    .mid-content {
        flex-direction: column;
        align-items: flex-end;
        gap: 16px;
    }
    .gif-block-img {
        height: 100%;
        object-fit: contain;
        display: block;
        flex-shrink: 0;
        margin-left: auto;
        width: 100%;
}
    .gif-section-blocks {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .gif-block {
        min-height: auto;
}
.gif-head1 {
    width: 100%;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
}
  .col-blocks-list { flex-direction: column; }
  .cd-blk1, .cd-blk2 { flex-direction: column; width: 100%; }
  .col-block { width: 100%;     padding: 40px;}
  .gif-section-img-wrap { max-height: 300px; overflow: hidden; }
    .gif2-sec {
        flex-direction: column;
        gap: 30px;
        width: 100%;
    }
    .gif2-heading {
        /* flex-direction: column; */
        gap: 20px;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .gif-block-title2{
        gap:5px;
    }
    .img-cvt { width: 100%; max-height: 260px; overflow: hidden; }
  .gif2-body { padding: 0; }
  .s-services { flex-direction: column; }
    .services-img {
        width: 80vw;
        height: auto;
    }
    .services-img img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}
    .grids-main { gap: 16px; }
  .cl1-grid { grid-template-columns: 1fr !important; }
  .footer-main-content-f { grid-template-columns: 1fr; }
.about-vfm {
        max-height: 80vh;
        height: 100%;
        min-height: 80vh;}
        .footer-icon{
                flex: 1;
    width: 140px;
    justify-content: center;
        }
        .gif2-heading-content span {
    text-align: right;
    width: 100%;
    transform: translateX(10px);
}
.gif-section-img-wrap {
    position: relative;
    width: 100%;
    max-width: 80vw;
    overflow: visible;
    margin-bottom: 72px;
}
.footer-inner{
    width:var(--width);
}
}
.hide{}
@media (max-width: 600px) {
  #nav { padding: 16px 20px;         margin-top: 20px;
}
  #nav img { height: 28px; }
  .gif-section-blocks { grid-template-columns: 1fr !important; }
  .about-vfm {        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-height: 100%;
  }
  .main-abt { padding: 40px 20px; }
  .gif-head3 { flex-direction:column;}
  .footer-form-row-f { grid-template-columns: 1fr; }
  .footer-contact-row-f { grid-template-columns: 80px 1fr; }
  .footer-form-submit-f { flex-direction: column; align-items: stretch; }
  .btn--form-submit-f { justify-content: center; }
  .footer-inner { flex-direction: column; gap: 32px; align-items: flex-start; }
.img-cvt {
    max-width: max-content;
    height: auto;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    width: 100%;
    flex: 1;
}
        .footer-icon{
                flex: 1;
    width: 140px;
    justify-content: flex-start;
        }
.grids-main .cl1-grid:last-child {
    margin-top: 0;
}
.grids-main .cl1-grid:first-child {
    margin-top: 0;
}
  .grids-main {
    width: 75vw;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: stretch;
    flex-direction: column;
}
.footer-form-note-f{
    text-align:left;
}
.hide{
    display:none;
}
.footer-form-row-f {
    margin-bottom: 20px;
}
.hide{display:none;}
.mid-content img {
    max-width: 100%;
    margin-bottom: 5px;
}
.footer-cta-card-f{
    padding:40px;
}
.main-cnt p {
    width: 80%;
    line-height: 1.4;
    margin-bottom: 20px;
}
#loader-img-vfm {
  position: absolute;
  top: 50%;
  left: 50%;
  /* larger starting rect — more impactful before scale */
  width: 460px;
  height: 420px;
  transform: translate(-50%, -50%);
  z-index: 1;
  overflow: hidden;
  border-radius: 4px;
}
}
@media (max-width:797px){
    .abt-left-col{
        width: 100%;
        margin-bottom: 40px;    }
    .abt-right-body{
            width: 100% !important;
    min-width: 100%;
    }
    #loader-img-vfm img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cd-blk1 .col-block:nth-child(2) {
    transform: translateX(0px);
}
}