/* ── Reset & Base ───────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:'DM Sans',sans-serif;
  font-weight:300;
  background:#ededed;   /* exact from Webflow: --base-color-neutral--white:#ededed */
  color:#1c1c1c;        /* exact: --base-color-neutral--black:#1c1c1c */
  line-height:1.5;
  overflow-x:hidden
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
button{background:none;border:none;cursor:pointer;font:inherit}

/* ── CSS Custom Properties ──────────────────────── */
:root{
  /* exact from Webflow :root variables */
  --white:#ededed;                    /* --base-color-neutral--white:#ededed */
  --dark:#1c1c1c;                     /* --base-color-neutral--black:#1c1c1c */
  --neutral:#696969;                  /* --base-color-neutral--neutral:#696969 */
  --neutral-light:#d9d9d9;            /* --base-color-neutral--neutral-light:#d9d9d9 */
  --neutral-dark:#363636;             /* --base-color-neutral--neutral-dark:#363636 */
  --muted:#999999;
  --off:#e0e0e0;                      /* slightly darker warm gray for alternate sections */
  --line:rgba(0,0,0,.1);
  --line-dark:rgba(0,0,0,.15);
  --background-color--background-alternate:#1c1c1c; /* exact Webflow: var(--base-color-neutral--black) — dark sections */
  --green:#b2ff60;
  --red:#ff3232;                        /* secondary accent color */
}

/* ── Layout helpers ─────────────────────────────── */
.container-large{max-width:1440px;margin:0 auto;padding:0 2rem}
.padding-global{padding-left:2rem;padding-right:2rem}
.padding-section-large{padding-top:7rem;padding-bottom:7rem}
.bg-off{background:var(--background-color--background-alternate)}

/* ── Type helpers ───────────────────────────────── */
/* Exact from Webflow CSS: .tagline{font-size:.75rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase} */
.tagline{
  font-size:.75rem;
  font-weight:400;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--neutral);   /* #696969 — subtle muted label */
  display:block;
  margin-bottom:1.25rem
}
/* .heading-style-h1{font-size:3.5rem;font-weight:300;line-height:1.2} */
.heading-style-h1{font-size:3.5rem;font-weight:300;line-height:1.2}
/* .heading-style-h4{font-size:2rem;font-weight:300;line-height:1.3} */
.heading-style-h4{font-size:2rem;font-weight:300;line-height:1.3}
/* .heading-style-fluid-large{font-size:8vw} — used for stats */
.heading-style-fluid-large{font-size:8vw;font-weight:300;line-height:1}
/* .hero_heading{font-size:9vw;font-weight:300;line-height:1.4} */
.hero_heading{font-size:9vw;font-weight:300;line-height:1.4;letter-spacing:-.01em}
/* .text-size-large{font-size:3rem;font-weight:300;line-height:1.3} */
.text-size-large{font-size:3rem;font-weight:300;line-height:1.3}
/* .text-banner_text{color:white;text-transform:uppercase;font-size:3rem;font-weight:300} */
.text-banner_text{color:#fff;text-transform:uppercase;font-size:3rem;font-weight:300;white-space:nowrap}
/* .testimonials_statement{font-size:2.25rem;font-weight:300;width:80%} */
.testimonials_statement{font-size:2.25rem;font-weight:300;line-height:1.4;width:80%}

/* ── Dividers ───────────────────────────────────── */
.divider-line{height:1px;background:var(--line);width:100%}
.divider-line-dark{height:1px;background:var(--line-dark);width:100%}

/* ── Reveal animations ──────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ════════════════════════════════════════════════
   NAV — exact Webflow: BOTTOM-fixed compact pill
   section_navigation{position:fixed;inset:auto 0% 1.5rem;width:fit-content;margin:0 auto;
     border-radius:999px;backdrop-filter:blur(4px);box-shadow:0 2px 4px 1px #0000001a}
   navigation_component{background-color:#ffffff80;border-radius:999px;justify-content:center;
     gap:.25rem;width:100%;padding:.25rem;display:flex}
════════════════════════════════════════════════ */
/* Outer fixed wrapper — centers the pill at the bottom of the screen */
.navbar{
  position:fixed;
  inset:auto 0 1.5rem 0;   /* bottom:1.5rem, left:0, right:0 */
  top:auto;
  z-index:999;
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:none;    /* let clicks through the transparent area */
  transform:translateY(5rem);   /* hidden below viewport at page top */
  transition:transform .5s cubic-bezier(.4,0,.2,1)
}
/* Slide up into view once user scrolls */
.navbar.visible{transform:translateY(0)}
/* section_navigation equivalent: the pill container with shadow + overflow */
.nav-section{
  border-radius:999px;
  overflow:hidden;
  box-shadow:0 2px 4px 1px rgba(0,0,0,.1);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  pointer-events:all
}
/* navigation_component = compact pill — width:fit-content, all items centered */
/* exact: background-color:#ffffff80;border-radius:999px;justify-content:center;gap:.25rem;padding:.25rem */
.navigation_component{
  background-color:rgba(255,255,255,.5);  /* exact: #ffffff80 */
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.25rem;
  padding:.25rem;
  width:fit-content
}
/* Nav links group (About / Services / Work) */
.nav-links{
  display:flex;
  align-items:center;
  gap:0;
  overflow:hidden;
  max-width:400px;
  opacity:1;
  flex-shrink:0;
  transition:max-width .45s cubic-bezier(.4,0,.2,1), opacity .3s ease, padding .3s ease
}
/* Nav links always visible — no collapse on scroll */
/* Nav text links — .button.is-secondary */
.nav-link-btn{
  display:inline-flex;align-items:center;
  height:2.5rem;
  padding:0 1.25rem;
  border-radius:999px;
  font-family:'DM Sans',sans-serif;
  font-size:.875rem;font-weight:400;
  letter-spacing:.02em;
  color:#1c1c1c;
  background:transparent;
  border:0;
  transition:background .2s;
  white-space:nowrap;
  cursor:pointer
}
.nav-link-btn:hover{background:#ededed} /* exact Webflow: var(--base-color-neutral--white) */
/* Contact button — navigation_button:
   background-color:var(--black)=#1c1c1c; color:var(--white)=#ededed;
   justify-content:flex-end; width:11.5rem; height:3rem; padding-left:1.5rem; padding-right:.25rem */
/* Contact button — icon-only by default, expands on hover to show label */
.nav-contact-btn{
  display:inline-flex;align-items:center;justify-content:flex-end;
  gap:1rem;
  width:3rem;            /* collapsed: just the icon circle */
  height:3rem;
  border-radius:999px;
  border:1px solid #1c1c1c;
  background-color:#1c1c1c;color:#ededed;
  padding-left:.25rem;padding-right:.25rem;
  font-family:'DM Sans',sans-serif;
  font-size:.65rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  flex-shrink:0;
  text-decoration:none;
  transition:width .4s cubic-bezier(.4,0,.2,1), padding-left .4s cubic-bezier(.4,0,.2,1), background .2s
}
.nav-contact-btn:hover{
  width:11.5rem;
  padding-left:1.5rem;
  background:var(--red);border-color:var(--red)
}
/* Label text hidden by default, fades in on hover */
.nav-contact-label{
  opacity:0;
  max-width:0;
  overflow:hidden;
  white-space:nowrap;
  transition:opacity .15s, max-width .4s cubic-bezier(.4,0,.2,1)
}
.nav-contact-btn:hover .nav-contact-label{
  opacity:1;
  max-width:8rem
}
/* Active state (contact page) — keep expanded */
.nav-contact-active{
  width:11.5rem !important;
  padding-left:1.5rem !important
}
.nav-contact-active .nav-contact-label{
  opacity:1 !important;
  max-width:8rem !important
}
.nav-contact-icon{
  width:2.5rem;height:2.5rem;
  border-radius:50%;
  background:#ededed;color:#1c1c1c;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0
}
/* Mobile burger — stays at top right */
.nav-burger{
  display:none;
  flex-direction:column;gap:5px;
  padding:8px;
  position:fixed;top:1.25rem;right:1.5rem;
  z-index:200
}
.nav-burger span{display:block;width:22px;height:1.5px;background:#1c1c1c;transition:.3s}
.nav-mobile-menu{
  display:none;
  position:fixed;top:0;left:0;right:0;
  background:rgba(237,237,237,.98);
  backdrop-filter:blur(16px);
  padding:80px 2rem 2rem;
  z-index:150;
  border-bottom:1px solid var(--line)
}
.nav-mobile-menu a{
  display:block;padding:1rem 0;
  font-size:1.25rem;font-weight:300;
  border-bottom:1px solid var(--line)
}
.nav-mobile-menu a:last-child{border-bottom:none}
.hide-mobile{display:flex}

/* ════════════════════════════════════════════════
   HERO — exact Webflow CSS
   section_hero > padding-global > container-large > hero_component > _12-colums-grid
════════════════════════════════════════════════ */

/* ══ BlackBox Cube Pattern ═══════════════════
   Repeating wireframe-cube background tiles.
   Two variants encoded as SVG data-URIs:
     --bb-pat-light  white stroke  (for dark backgrounds)
     --bb-pat-dark   dark stroke   (for light backgrounds)
════════════════════════════════════════════════ */
:root{
  /* white cube — use on dark backgrounds */
  --bb-pat-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='86'%3E%3Cg fill='none' stroke='white' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpolygon points='20,28 20,48 42,48 42,28'/%3E%3Cpolygon points='20,28 29,19 51,19 42,28'/%3E%3Cpolygon points='42,28 51,19 51,39 42,48'/%3E%3Cline x1='20' y1='38' x2='42' y2='38'/%3E%3Cline x1='31' y1='28' x2='31' y2='48'/%3E%3C/g%3E%3C/svg%3E");
  /* dark cube — use on light backgrounds */
  --bb-pat-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='86'%3E%3Cg fill='none' stroke='%231c1c1c' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpolygon points='20,28 20,48 42,48 42,28'/%3E%3Cpolygon points='20,28 29,19 51,19 42,28'/%3E%3Cpolygon points='42,28 51,19 51,39 42,48'/%3E%3Cline x1='20' y1='38' x2='42' y2='38'/%3E%3Cline x1='31' y1='28' x2='31' y2='48'/%3E%3C/g%3E%3C/svg%3E")
}

/* ── Hero: cube pattern removed ── */
.hero-bg::after{ display:none }

/* ── Footer: white cubes on dark footer bg ── */
.footer-section{
  position:relative;
  background-color:#1c1c1c
}
.footer-section::before{ display:none }
.footer-section > *{ position:relative;z-index:1 }

/* ── .bb-pattern-section: dark cubes on any light section ── */
.bb-pattern-section{
  position:relative
  /* NOTE: no overflow:hidden — it breaks position:sticky on child cards */
}
.bb-pattern-section::before{
  content:'';
  position:absolute;inset:0;
  background-image:var(--bb-pat-dark);
  background-repeat:repeat;
  background-size:80px 76px;
  opacity:.04;
  pointer-events:none;
  z-index:0
}
.bb-pattern-section > *{ position:relative;z-index:1 }

/* ══ BlackBox Tech Logo ══════════════════════ */
.bb-logo{
  display:inline-flex;align-items:center;gap:.65rem;
  text-decoration:none;
  flex-shrink:0
}
.bb-logo__icon{width:2.1rem;height:auto;flex-shrink:0}
.bb-logo__text{
  display:flex;flex-direction:column;line-height:1.15;
  gap:.05rem
}
.bb-logo__name{
  font-family:'DM Sans',sans-serif;
  font-size:1.15rem;font-weight:700;
  letter-spacing:-.02em
}
.bb-logo__tag{
  font-family:'DM Sans',sans-serif;
  font-size:.44rem;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase
}
/* footer size */
.footer-logo-img ~ .bb-logo,
a > .bb-logo{ display:inline-flex }
/* ── Full-page hero ── */
.section_hero{
  position:relative;
  height:100vh;
  min-height:600px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:#1c1c1c  /* dark fallback while image loads */
}
/* Full-bleed background image */
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  contain:strict;
  will-change:transform;
  transform:translateZ(0)
}
.hero-bg .hero-img{
  width:100%;height:100%;
  object-fit:cover;
  display:block
}
/* Overlay: strong top/bottom, subtle in the middle */
.hero-image-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.25) 40%,
    rgba(0,0,0,.25) 60%,
    rgba(0,0,0,.70) 100%
  )
}
/* Content layer on top of image */
.hero-ui{
  position:relative;
  z-index:10;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-top:2.5rem;
  padding-bottom:3rem
}
/* Centred play button */
.hero-center{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1
}
/* Bottom row: heading left, social right */
.hero-bottom-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem
}
.hero-bottom-row .hero_heading-inner-container{
  flex:1;
  min-width:0;
  max-width:78%   /* force 2-line wrap matching Webflow */
}
.hero-bottom-row .hero_heading{
  font-size:9vw;
  line-height:1.1
}
/* @ icon mirrors Webflow: top-right of heading block, half-outside */
.hero-bottom-row .hero_offset-icon-container{
  inset:-5rem 0 auto auto;
  transform:translate(50%)
}
.hero-bottom-row .hero_offset-icon{
  width:10rem;height:10rem
}
.hero-bottom-row .hero_social-links{
  flex-shrink:0;
  align-self:flex-end;
  margin-bottom:.25rem;
  grid-column:unset;
  grid-row:unset
}
/* hero_top: grid-area 1/1/2/-1 (full row 1), flex space-between */
/* padding-top:2rem;padding-bottom:2rem;display:flex;justify-content:space-between;align-items:flex-start */
.hero_top{
  grid-column:1 / -1;
  grid-row:1;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:flex-start;
  padding-top:2rem;
  padding-bottom:2rem;
  /* align-self:start */
}
/* hero_logo-image: width:8rem */
.hero_logo{display:inline-flex}
.hero_logo-image{width:8rem;height:auto;display:block}

/* hero_top right cluster: phone + notification */
.hero_top-right{
  display:flex;
  align-items:center;
  gap:1rem
}
.hero_phone-link{
  font-size:.8rem;
  font-weight:400;
  letter-spacing:.04em;
  color:#1c1c1c;
  text-decoration:none;
  white-space:nowrap;
  border:1px solid rgba(28,28,28,.2);
  border-radius:999px;
  padding:.45rem 1rem;
  transition:background .2s, color .2s, border-color .2s
}
.hero_phone-link:hover{
  background:#1c1c1c;
  color:#ededed;
  border-color:#1c1c1c
}
/* Light variant (dark backgrounds — index hero, contact hero) */
.hero_phone-light{
  color:#ededed;
  border-color:rgba(237,237,237,.3)
}
.hero_phone-light:hover{
  background:#ededed;
  color:#1c1c1c;
  border-color:#ededed
}

/* page-hero-top: logo + phone row above page headings */
.page-hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:3rem
}

/* ══════════════════════════════════════════
   WhatsApp Chat Widget
══════════════════════════════════════════ */
.wa-widget{
  position:fixed;
  bottom:2rem;
  right:2rem;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.75rem
}

/* Floating bubble button */
.wa-bubble{
  position:relative;
  width:3.5rem;
  height:3.5rem;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 28px rgba(37,211,102,.5);
  transition:transform .25s ease, box-shadow .25s ease;
  flex-shrink:0
}
.wa-bubble:hover{
  transform:scale(1.08);
  box-shadow:0 10px 36px rgba(37,211,102,.6)
}
.wa-bubble-active{
  transform:scale(.92) !important
}
.wa-bubble-icon{
  width:1.75rem;
  height:1.75rem;
  transition:transform .3s ease
}
/* Notification badge */
.wa-bubble-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  width:1.1rem;
  height:1.1rem;
  border-radius:50%;
  background:#ef4444;
  color:#fff;
  font-size:.6rem;
  font-weight:700;
  display:none;
  align-items:center;
  justify-content:center;
  border:2px solid #fff;
  animation:waPop .4s ease
}
@keyframes waPop{
  0%{transform:scale(0)}
  70%{transform:scale(1.2)}
  100%{transform:scale(1)}
}

/* ── Popup card ── */
.wa-popup{
  width:320px;
  border-radius:1.25rem;
  overflow:hidden;
  background:#fff;
  box-shadow:0 16px 60px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  transform:scale(.85) translateY(1.5rem);
  transform-origin:bottom right;
  opacity:0;
  pointer-events:none;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s ease
}
.wa-popup-open{
  transform:scale(1) translateY(0);
  opacity:1;
  pointer-events:auto
}

/* Header bar */
.wa-popup-header{
  display:flex;
  align-items:center;
  gap:.75rem;
  background:#25D366;
  padding:1rem 1rem 1rem 1.1rem
}
.wa-popup-avatar{
  width:2.75rem;
  height:2.75rem;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  flex-shrink:0
}
.wa-popup-info{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  flex:1;
  min-width:0
}
.wa-popup-name{
  font-size:.92rem;
  font-weight:600;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.wa-popup-status{
  display:flex;
  align-items:center;
  gap:.35rem;
  font-size:.72rem;
  font-weight:400;
  color:rgba(255,255,255,.85)
}
.wa-status-dot{
  width:.45rem;
  height:.45rem;
  border-radius:50%;
  background:#b7f5c8;
  animation:waPulse 2s infinite
}
@keyframes waPulse{
  0%,100%{opacity:1}
  50%{opacity:.45}
}
.wa-popup-close{
  background:none;
  border:none;
  color:rgba(255,255,255,.75);
  cursor:pointer;
  padding:.3rem;
  border-radius:.4rem;
  display:flex;
  align-items:center;
  transition:color .15s, background .15s
}
.wa-popup-close:hover{
  color:#fff;
  background:rgba(255,255,255,.15)
}

/* Chat body */
.wa-popup-body{
  padding:1rem
}
.wa-chat-bg{
  background:#e5ddd5;
  border-radius:.75rem;
  padding:.85rem .9rem;
  background-image:url("data:image/svg+xml,%3Csvg width='52' height='52' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='52' height='52' fill='%23e5ddd5'/%3E%3C/svg%3E")
}
/* Incoming message bubble */
.wa-msg-in{
  background:#fff;
  border-radius:.25rem 1rem 1rem 1rem;
  padding:.65rem .85rem;
  max-width:92%;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  font-size:.82rem;
  line-height:1.55;
  color:#1c1c1c;
  position:relative;
  animation:waMsgIn .35s ease
}
@keyframes waMsgIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
.wa-msg-in p{margin:0 0 .35rem}
.wa-msg-in p:last-of-type{margin-bottom:0}
.wa-msg-time{
  display:block;
  text-align:right;
  font-size:.65rem;
  color:#999;
  margin-top:.3rem
}

/* Footer input row */
.wa-popup-footer{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1rem;
  border-top:1px solid rgba(0,0,0,.07);
  background:#f9f9f9
}
.wa-input{
  flex:1;
  border:1px solid rgba(0,0,0,.12);
  border-radius:999px;
  padding:.55rem 1rem;
  font-size:.82rem;
  color:#1c1c1c;
  outline:none;
  background:#fff;
  transition:border-color .2s
}
.wa-input:focus{border-color:#25D366}
.wa-input::placeholder{color:#aaa}
.wa-start-btn{
  width:2.4rem;
  height:2.4rem;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  cursor:pointer;
  flex-shrink:0;
  text-decoration:none;
  transition:background .2s, transform .2s
}
.wa-start-btn:hover{
  background:#1ebe5d;
  transform:scale(1.08)
}

/* Mobile */
@media(max-width:480px){
  .wa-widget{bottom:1.25rem;right:1.25rem}
  .wa-popup{width:calc(100vw - 2.5rem)}
}
/* notification: background-color:black;color:white;border-radius:999px;font-size:.75rem;font-weight:300;letter-spacing:.1em */
.notification{
  display:inline-flex;align-items:center;gap:.5rem;
  background-color:#1c1c1c;color:#ededed;
  border-radius:999px;
  font-size:.75rem;font-weight:300;
  letter-spacing:.1em;
  padding:.5rem .75rem .5rem .75rem
}
.notification_label{white-space:nowrap}
/* notification_dot-container: background-color:#b2ff60;border-radius:50%;width:12px;height:12px;position:relative */
.notification_dot-container{
  background-color:var(--red);
  border-radius:50%;
  width:12px;min-width:12px;
  height:12px;min-height:12px;
  position:relative;
  flex-shrink:0
}
/* notification_dot-background: pulsing halo — semi-transparent red, absolute centered */
.notification_dot-background{
  z-index:1;
  background-color:rgba(255,50,50,.5);
  border-radius:50%;
  width:12px;height:12px;
  position:absolute;
  inset:50% 0% 0% 50%;
  transform:translate(-50%,-50%);
  animation:dotPulse 2.5s ease-in-out infinite
}
@keyframes dotPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.8}
  50%{transform:translate(-50%,-50%) scale(2.8);opacity:0}
}
/* hero_heading-container: grid-area 2/1/3/11 (row 2, cols 1-10), align-self:end */
.hero_heading-container{
  grid-column:1 / 11;
  grid-row:2;
  align-self:end;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  padding-bottom:2rem
}
/* hero_heading-inner-container: position:relative */
.hero_heading-inner-container{position:relative}
/* hero_heading: light on dark full-page image */
.hero_heading{
  font-size:9vw;
  font-weight:300;
  line-height:1.15;
  color:#ededed;
  text-wrap:balance;
  letter-spacing:-.01em
}
/* hero_offset-icon-container: position:absolute;inset:-6rem 0 auto auto;transform:translate(50%) */
.hero_offset-icon-container{
  position:absolute;
  inset:-6rem 0 auto auto;
  transform:translate(50%)
}
/* hero_offset-icon: width:12rem;height:12rem */
.hero_offset-icon{
  width:12rem;height:12rem;
  object-fit:contain;
  animation:floatUp 5s ease-in-out infinite
}
@keyframes floatUp{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-14px) rotate(2deg)}
}
/* hero_social-links: grid-area 2/11/3/-1 (row 2, cols 11-12), align-self:end */
.hero_social-links{
  grid-column:11 / -1;
  grid-row:2;
  align-self:end;
  display:flex;
  flex-direction:row;
  gap:.75rem;
  margin-bottom:1rem
}
.hero_social-link{
  color:#ededed;
  transition:opacity .2s
}
.hero_social-link:hover{opacity:.5}
/* hero logo sizing */
.hero_logo-image{max-height:2.4rem;width:auto}
/* hero-img used inside .hero-bg (full-page hero) */
.hero-img{width:100%;height:100%;object-fit:cover;display:block}
/* animated wave canvas replaces the hero image */
.hero-canvas{
  width:100%;height:100%;display:block;position:absolute;inset:0;
  will-change:transform;          /* own compositor layer */
  transform:translateZ(0);        /* GPU promote */
  image-rendering:auto;
}
.hero-bg{
  contain:strict;                 /* isolate paint/layout from rest of page */
  will-change:transform;
}
.hero-play-btn{
  display:flex;align-items:center;gap:.75rem;
  color:#fff;cursor:pointer;
  background:none;border:none;padding:0;font-family:inherit
}
.play-circle{
  width:3.5rem;height:3.5rem;border-radius:50%;
  background:rgba(255,255,255,.2);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s
}
.hero-play-btn:hover .play-circle{background:rgba(255,255,255,.35)}
.play-label{font-size:.7rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase}

/* Video lightbox */
.video-lightbox{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.85);
  z-index:9000;align-items:center;justify-content:center;
  backdrop-filter:blur(4px)
}
.video-lightbox.open{display:flex}
.video-lightbox-inner{
  position:relative;
  width:min(900px,92vw);
  aspect-ratio:16/9
}
.video-lightbox-close{
  position:absolute;top:-2.5rem;right:0;
  background:none;border:none;color:#fff;
  font-size:2rem;line-height:1;cursor:pointer;
  opacity:.8;transition:opacity .2s
}
.video-lightbox-close:hover{opacity:1}
.video-lightbox-frame{width:100%;height:100%;border-radius:12px;overflow:hidden}

/* ════════════════════════════════════════════════
   ABOUT
════════════════════════════════════════════════ */
.about-section{
  padding-top:7rem;
  padding-bottom:7rem
}
.about-intro{margin-bottom:4rem}
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start;
  padding-top:3rem
}
.about-body{
  /* text-size-large: font-size:3rem;font-weight:300;line-height:1.3 */
  font-size:3rem;
  font-weight:300;
  line-height:1.3;
  letter-spacing:-.01em;
  color:#1c1c1c
}
.about-stats{
  display:flex;
  flex-direction:column;
  gap:2rem
}
.about-stat{}
.stat-label{
  font-size:.75rem;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--neutral);
  margin-bottom:.5rem
}
.stat-number{
  /* heading-style-fluid-large: font-size:8vw */
  font-size:8vw;
  font-weight:300;
  letter-spacing:-.02em;
  color:#111;
  line-height:1
}

/* ════════════════════════════════════════════════
   LOGO STRIP
════════════════════════════════════════════════ */
.logo-strip{
  overflow:hidden;
  padding:1.75rem 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.logo-strip-track{
  display:flex;
  animation:stripScroll 22s linear infinite
}
.logo-strip-item{
  flex-shrink:0;
  padding:0 2.5rem;
  font-size:.8rem;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--neutral);
  border-right:1px solid var(--line);
  white-space:nowrap
}
@keyframes stripScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ════════════════════════════════════════════════
   CTA IMAGES — exact Webflow scroll-driven parallax
   cta-images_component: height:300vh;position:relative
   cta-images_content-container: height:100vh;position:sticky;top:0;overflow:hidden
   Images scatter via position:relative + left/margin-top offsets
════════════════════════════════════════════════ */
/* section_cta-images wrapper — full-width, NO overflow property (would break position:sticky on children!) */
.section_cta-images{width:100%}
/* cta-images_component: height:300vh;position:relative */
.cta-images_component{
  height:300vh;
  position:relative
}
/* cta-images_content-container: height:100vh;position:sticky;top:0;overflow:hidden */
.cta-images_content-container{
  height:100vh;
  position:sticky;
  top:0;
  overflow:hidden;
  width:100%
}
/* Left absolute container — covers full width so vw-positioned images render anywhere */
.cta-images_images-container{
  z-index:1;
  position:absolute;
  inset:0;          /* full width + full height */
  pointer-events:none
}
/* Right absolute container — same full coverage, lower z so it's behind left */
.cta-images_images-container.images-wrapper-right{
  z-index:0
}
/* Image list: flex column, gap 26vw, padding-top pushes images below initial viewport */
.cta-images_image-list{
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:26vw;
  padding-top:70vh;
  position:relative  /* needed for left/right/margin offsets to work */
}
/* Individual image wrappers: position:relative + overflow:hidden, padding-top for natural aspect ratio */
.cta-images_image-wrapper{
  border-radius:12px;
  position:relative;
  overflow:hidden;
  flex-shrink:0
}
/* Image fills wrapper */
.cta-images_picture{
  object-fit:contain;
  width:100%;height:100%;
  display:block
}
/* ── Exact positions from Webflow CSS ─────────────────── */
/* image-1: thumb-up, left column default */
.cta-images_image-wrapper.is-image-1{
  width:22vw;height:26vw;
  left:2vw
}
/* image-2: @ sign, right-ish — left:58vw, overlap up -46vw */
.cta-images_image-wrapper.is-image-2{
  width:22vw;height:26vw;
  margin-top:-46vw;left:58vw
}
/* image-3: text/speech, left edge */
.cta-images_image-wrapper.is-image-3{
  width:20vw;height:24vw;
  margin-top:-5vw;left:4vw
}
/* image-4: notify heart, far right */
.cta-images_image-wrapper.is-image-4{
  width:18vw;height:22vw;
  margin-top:-45vw;left:64vw
}
/* image-5: picture frame, right side (in right container) */
.cta-images_image-wrapper.is-image-5{
  opacity:.75;
  width:20vw;height:24vw;
  left:74vw  /* right side of viewport */
}
/* image-6: cup, center-right (in right container) */
.cta-images_image-wrapper.is-image-6{
  opacity:.75;
  width:18vw;height:22vw;
  margin-top:-44vw;
  left:68vw
}
/* Center content: centered in sticky 100vh, max-width:48rem */
.cta-images_content{
  grid-column-gap:2rem;grid-row-gap:2rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  max-width:48rem;
  height:100%;
  margin-left:auto;
  margin-right:auto;
  padding-top:7rem;
  padding-bottom:7rem;
  position:relative;
  z-index:2;
  gap:2rem
}
/* cta-images_tag: border all sides, border-radius:4px (NOT pill), white bg */
.cta-images_tag{
  border:1px solid rgba(0,0,0,.12);
  background-color:#ffffff;
  color:#111;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-radius:4px;
  padding:.5rem 1rem;
  font-size:.875rem;
  line-height:1em;
  display:flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  margin:0 auto;
  white-space:nowrap
}
.btn-primary{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#1c1c1c;color:#ededed;
  padding:.875rem 1.75rem;
  border-radius:999px;
  font-size:.75rem;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;
  transition:background .2s,transform .15s;
  white-space:nowrap
}
.btn-primary:hover{background:var(--red);transform:translateY(-1px)}
.btn-primary.btn-white{background:#ededed;color:#1c1c1c}
.btn-primary.btn-white:hover{background:#d9d9d9}
.btn-icon{
  width:2rem;height:2rem;border-radius:50%;
  background:#ededed;color:#1c1c1c;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0
}
.btn-icon.btn-icon-dark{background:#1c1c1c;color:#ededed}

/* ════════════════════════════════════════════════
   SERVICES — dark background (#1c1c1c via --background-color--background-alternate)
════════════════════════════════════════════════ */
.services-section{
  background:var(--background-color--background-alternate); /* #1c1c1c */
  padding-top:5rem;
  padding-bottom:0;
  color:#ededed  /* all child text inherits light color */
}
.services-header{
  padding-bottom:2rem
}
.services-section .tagline{color:rgba(237,237,237,.5)}
.services-desc{
  font-size:1rem;font-weight:300;
  color:var(--neutral-light); /* #d9d9d9 — readable on dark bg */
  line-height:1.7;
  max-width:560px;
  margin-top:1rem
}
/* On light-bg sections, override services-desc to be readable */
.work-section .services-desc,
.about-section .services-desc,
.faq-section .services-desc{
  color:var(--neutral);  /* #696969 — readable on #ededed */
}
/* Work section subtitle — large, full-width like Clay reference */
.work-section .services-desc{
  font-size:clamp(1.25rem,2vw,1.75rem);
  max-width:none;
  line-height:1.5
}
/* Dividers inside dark services section */
.services-section .divider-line{background:rgba(255,255,255,.12)}
.services-section .divider-line-dark{background:rgba(255,255,255,.15)}

/* Feature cards: light on dark section bg → strong visual contrast */
.feature-card{color:#1c1c1c}

/* WE BUILD BRANDS banner */
.banner-section{
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.1)  /* light border on dark bg */
}
.banner-tilted{
  transform:rotate(-1.5deg) translateY(-2px);
  overflow:hidden;
  padding:1.25rem 0;
  background:var(--background-color--background-alternate)  /* same dark bg */
}
.banner-track{
  display:flex;gap:3rem;
  animation:bannerScroll 14s linear infinite
}
@keyframes bannerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.banner-tags-row{
  overflow:hidden;
  padding:1rem 0;
  border-top:1px solid rgba(255,255,255,.1)  /* light border on dark bg */
}
.banner-tags-track{
  display:flex;gap:.5rem;
  animation:stripScroll 16s linear infinite
}
.tag-pill{
  display:inline-block;
  border:1px solid rgba(255,50,50,.4);
  border-radius:999px;
  padding:.3rem .875rem;
  font-size:.75rem;font-weight:400;
  letter-spacing:.04em;
  color:var(--red);
  white-space:nowrap;
  flex-shrink:0
}
.tag-pill.tag-sm{font-size:.7rem;padding:.25rem .625rem}

/* ══ Feature cards — Parallax sticky stacking ══
   Cards stack over each other on scroll.
   Each card: position:sticky, staggered top, distinct dark bg.
════════════════════════════════════════════════ */
.features-list{
  padding:2.5rem 0 4rem;
}
.feature-card{
  height:80vh;
  min-height:500px;
  border-radius:1.5rem;
  position:sticky;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  margin-bottom:8vh;
  transition:box-shadow .4s ease;
  will-change:transform, opacity;
  transform-origin:50% 20%;
  box-shadow:0 24px 64px rgba(0,0,0,.35)
}
.feature-card:last-child{margin-bottom:2rem}

/* Staggered top + light backgrounds — pop against dark section */
.feature-card:nth-child(1){top:8vh; background:#ffffff}
.feature-card:nth-child(2){top:10vh;background:#f2f4f7}
.feature-card:nth-child(3){top:12vh;background:#edf0f5}

/* ── Text column ── */
/* Text column — grid: number | body stretches | footer pinned bottom */
.feature-content{
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:3rem 3.5rem;
  align-items:start
}
.feature-num{
  font-size:.7rem;font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(28,28,28,.35);
  margin-bottom:2rem
}
.feature-body{
  display:flex;
  flex-direction:column;
  gap:1.25rem
}
.feature-title{
  font-size:clamp(2.75rem,3.8vw,4rem);
  font-weight:300;
  letter-spacing:-.03em;
  line-height:1.05;
  color:#1c1c1c
}
.feature-divider{
  height:1px;
  background:rgba(28,28,28,.14);
  width:100%
}
.feature-desc{
  font-size:.95rem;font-weight:300;
  color:rgba(28,28,28,.55);
  line-height:1.8
}
.feature-footer{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  align-self:end;
  padding-bottom:0.5rem
}
.feature-tags{
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  gap:.5rem
}

/* Tag pills on light card */
.feature-card .tag-pill{
  background:rgba(28,28,28,.06);
  border-color:rgba(28,28,28,.15);
  color:rgba(28,28,28,.65)
}
.feature-card .tag-pill:hover{
  background:rgba(28,28,28,.12)
}

/* Feature CTA link */
.feature-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.8rem;font-weight:500;letter-spacing:.08em;
  color:rgba(28,28,28,.4);
  text-decoration:none;
  text-transform:uppercase;
  transition:color .2s,gap .2s
}
.feature-cta:hover{color:#1c1c1c;gap:.75rem}

/* ── Image column — bottom-aligned, no top padding ── */
.feature-img-wrap{
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  position:relative;
  padding:0 3rem
}
.feature-card:nth-child(1) .feature-img-wrap{background:#f0ece5}
.feature-card:nth-child(2) .feature-img-wrap{background:#dde8f2}
.feature-card:nth-child(3) .feature-img-wrap{background:#e2ede6}
.feature-img{
  width:90%;height:auto;max-height:92%;
  object-fit:contain;
  display:block;
  transition:transform .6s cubic-bezier(.25,.46,.45,.94)
}
.feature-card:hover .feature-img{transform:scale(1.04) translateY(-8px)}

/* No more direction:rtl trick — all cards same direction */
.feature-card-reverse{direction:ltr}

/* Design Driven marquee */
.design-driven-marquee{
  overflow:hidden;
  padding:1.5rem 0;
  border-top:1px solid rgba(0,0,0,.1);
  background:var(--background-color--background-alternate)
}
.dd-track{
  display:flex;
  overflow:hidden
}
.dd-marquee{
  display:flex;gap:4rem;
  padding:1.5rem 0;
  animation:ddScroll 18s linear infinite;
  flex-shrink:0
}
.dd-track.dd-track-reverse .dd-marquee{
  animation-direction:reverse
}
.dd-word{
  font-size:7vw;
  font-weight:300;
  letter-spacing:-.03em;
  color:#111;
  flex-shrink:0;
  white-space:nowrap
}
@keyframes ddScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ════════════════════════════════════════════════
   WORK — Awards rows  (matches clay-agency-template.webflow.io)
════════════════════════════════════════════════ */
.work-section{padding-top:7rem;padding-bottom:7rem}
.awards-list{margin-top:2rem}

.award-row{
  display:block;
  color:#1c1c1c;
  position:relative;
  text-decoration:none;
  transition:background .2s
}
.award-row:hover{background:rgba(0,0,0,.02)}

.award-grid{
  display:grid;
  /* title | tags | org-name | view-link (no number col) */
  grid-template-columns:1fr auto auto auto;
  align-items:center;
  gap:2rem;
  padding-top:1.75rem;
  padding-bottom:1.75rem;
  position:relative
}

/* Index number — hidden to match Clay reference */
.award-num{ display:none }

/* Project title */
.award-client{
  font-size:clamp(2rem,3.5vw,3.75rem);
  font-weight:300;
  letter-spacing:-.03em;
  line-height:1;
  color:rgba(28,28,28,.75);
  transition:opacity .3s
}
.award-row:hover .award-client{opacity:.45}

/* Award tag pills — dark filled like Clay reference */
.award-tags{display:flex;gap:.4rem;flex-wrap:nowrap;align-items:center}
.award-tags .tag-pill{
  background:#1c1c1c;
  color:#ededed;
  border-color:#1c1c1c;
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.06em
}

/* Organisation name */
.award-name{
  font-size:.8rem;
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(28,28,28,.4);
  white-space:nowrap;
  min-width:6rem;
  text-align:right
}

/* Hover phone image */
.award-image-wrap{
  position:fixed;
  pointer-events:none;
  width:200px;height:280px;
  border-radius:16px;overflow:hidden;
  opacity:0;
  transition:opacity .25s ease;
  z-index:100;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  transform:translate(-50%,-60%)
}
.award-row:hover .award-image-wrap{opacity:1}
.award-img{width:100%;height:100%;object-fit:cover}

/* View Live Site pill */
.award-view-tag{
  display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid rgba(0,0,0,.2);
  border-radius:999px;
  padding:.5rem 1.1rem;
  font-size:.65rem;font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  flex-shrink:0;
  color:#1c1c1c;
  transition:background .2s, border-color .2s, color .2s
}
.award-row:hover .award-view-tag{
  background:#1c1c1c;
  color:#ededed;
  border-color:#1c1c1c
}

/* Testimonials */
/* .testimonials_statement{font-size:2.25rem;font-weight:300;width:80%} */
.testimonials-wrap{
  margin-top:5rem;
  position:relative;
  border-radius:1.25rem;
  overflow:hidden
}
.testimonials-slider{position:relative}
.testimonial-slide{
  display:none;position:relative
}
.testimonial-slide.active{display:block}
.testimonial-img-wrap{
  position:relative;
  height:600px;overflow:hidden
}
.testimonial-img{
  width:100%;height:100%;
  object-fit:cover;
  filter:brightness(.8)
}
.testimonial-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.1) 60%,transparent 100%)
}
.testimonial-content{
  position:absolute;bottom:0;left:0;right:0;
  padding:3rem;color:#fff
}
.testimonial-quote{
  /* testimonials_statement: 2.25rem, weight 300, width 80% */
  font-size:2.25rem;
  font-weight:300;
  line-height:1.4;
  width:80%;
  margin-bottom:1rem
}
.testimonial-author{
  font-size:.75rem;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;
  opacity:.7
}
.testimonial-controls{
  position:absolute;bottom:2.5rem;right:3rem;
  display:flex;gap:.5rem;z-index:10
}
.testimonial-arrow{
  width:2.75rem;height:2.75rem;border-radius:50%;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s
}
.testimonial-arrow:hover{background:rgba(255,255,255,.3)}

/* ════════════════════════════════════════════════
   FAQ
════════════════════════════════════════════════ */
.faq-section{padding-top:7rem;padding-bottom:7rem}
.faq-grid{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:5rem;
  align-items:start
}
.faq-header{position:sticky;top:8rem}
.faq-title{
  font-size:3.5rem;font-weight:300;
  letter-spacing:-.02em;line-height:1.2
}
.faq-item{border-top:1px solid var(--line)}
.faq-q{
  width:100%;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;
  padding:1.5rem 0;
  text-align:left;cursor:pointer
}
.faq-q-text{
  font-size:1.05rem;font-weight:300;
  line-height:1.5;color:#111
}
.faq-q-icon{
  flex-shrink:0;
  width:2rem;height:2rem;
  border:1px solid var(--line-dark);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s
}
.faq-item.open .faq-q-icon{transform:rotate(45deg)}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .4s ease
}
.faq-a p{
  font-size:.95rem;font-weight:300;
  color:var(--neutral);line-height:1.8;
  padding-bottom:1.5rem
}

/* ════════════════════════════════════════════════
   TEXT BANNER (footer CTA strip)
   Dark background with scrolling text
════════════════════════════════════════════════ */
.text-banner-section{
  background:#1c1c1c;   /* exact: --base-color-neutral--black */
  overflow:hidden;
  padding:5rem 0
}
.text-banner-inner{
  max-width:1440px;margin:0 auto;padding:0 2rem;
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem
}
.text-banner-heading{
  font-size:3.5rem;font-weight:300;
  color:#fff;line-height:1.2;
  letter-spacing:-.02em;
  max-width:640px
}
.text-banner-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#ededed;color:#1c1c1c;
  padding:.875rem 1.75rem;
  border-radius:999px;
  font-size:.7rem;font-weight:400;
  letter-spacing:.15em;text-transform:uppercase;
  transition:background .2s;
  white-space:nowrap;
  flex-shrink:0
}
.text-banner-btn:hover{background:#d9d9d9}
.text-banner-btn-icon{
  width:1.75rem;height:1.75rem;
  border-radius:50%;background:#1c1c1c;color:#ededed;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0
}

/* ════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════ */
/* FOOTER — dark background (var(--background-color--background-alternate) = #1c1c1c) */
.footer-section{
  background:var(--background-color--background-alternate); /* #1c1c1c */
  color:#ededed;
  padding-top:4rem;
  padding-bottom:5rem  /* extra space so content clears bottom nav pill */
}
.footer-top{
  display:grid;
  grid-template-columns:1fr auto;
  gap:4rem;
  padding-bottom:3rem
}
.footer-logo-img{
  height:1.75rem;width:auto;
  object-fit:contain;object-position:left;
  margin-bottom:1.5rem
}
.footer-logo-text{
  display:inline-block;
  font-size:1rem;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;
  color:#ededed;
  margin-bottom:1.5rem
}
.footer-contact-info{
  display:flex;flex-direction:column;gap:.3rem;
  margin-bottom:1.5rem
}
.footer-address,.footer-phone,.footer-email{
  font-size:.875rem;font-weight:300;
  color:var(--neutral-light)  /* #d9d9d9 — legible on dark bg */
}
.footer-phone:hover,.footer-email:hover{color:#ededed}
.footer-socials{display:flex;gap:.5rem}
.footer-social-link{
  width:2.5rem;height:2.5rem;
  border:1px solid rgba(255,255,255,.2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--neutral-light);
  transition:color .2s,border-color .2s
}
.footer-social-link:hover{color:#ededed;border-color:rgba(255,255,255,.6)}
.footer-right{display:flex;gap:3rem;align-items:flex-start}
.footer-nav-col{display:flex;flex-direction:column;gap:.75rem}
.footer-link{
  font-size:.875rem;font-weight:300;
  color:var(--neutral-light);transition:color .2s
}
.footer-link:hover{color:#ededed}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.12)  /* light divider on dark bg */
}
.footer-legal{display:flex;align-items:center;gap:.75rem}
.footer-legal-link{
  font-size:.75rem;font-weight:300;
  color:var(--neutral)  /* #696969 muted */
}
.footer-legal-link:hover{color:#ededed}
.footer-sep{color:var(--neutral-dark);font-size:.75rem}
.footer-copyright{
  font-size:.75rem;font-weight:300;
  color:var(--neutral)
}

/* ════════════════════════════════════════════════
   SHARED PAGE HERO (About, Services, Blog)
════════════════════════════════════════════════ */
.page-hero-section{
  padding:2rem 0 5rem;
  background:var(--background-color--background-primary)
}
.page-hero-inner{
  max-width:55rem
}
.page-hero-heading{
  font-size:clamp(2.5rem,6vw,5rem);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:.75rem 0 1.25rem
}
.page-hero-sub{
  font-size:1.25rem;
  font-weight:300;
  color:var(--neutral);
  line-height:1.6;
  max-width:42rem
}
/* Active nav link highlight — dark filled like Clay reference */
.nav-link-active{
  background:#1c1c1c !important;
  color:#ededed !important;
  border-radius:999px
}

/* ════════════════════════════════════════════════
   ABOUT PAGE
════════════════════════════════════════════════ */
.about-mission-section{
  padding:5rem 0
}
.about-mission-grid{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:4rem;
  align-items:start
}
.about-icons-section{
  background:var(--background-color--background-alternate);
  padding:4rem 0;
  overflow:hidden
}
.about-icons-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3rem;
  flex-wrap:wrap;
  padding:0 2rem
}
.about-icon-item{
  flex-shrink:0
}
.about-icon-img{
  width:8rem;
  height:8rem;
  object-fit:contain
}
.about-values-section{
  padding:6rem 0
}
.about-values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem
}
.about-value{
  padding:2rem 0;
  border-top:1px solid var(--line-dark)
}
.about-value-num{
  font-size:.75rem;
  font-weight:400;
  letter-spacing:.2em;
  color:var(--neutral);
  margin-bottom:1.5rem
}
.about-value-title{
  font-size:1.25rem;
  font-weight:400;
  margin-bottom:.75rem
}
.about-value-desc{
  font-size:.9375rem;
  font-weight:300;
  color:var(--neutral);
  line-height:1.7
}

/* ════════════════════════════════════════════════
   BLOG PAGE
════════════════════════════════════════════════ */
.blog-section{
  padding:4rem 0 8rem
}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.5rem
}
.blog-card{
  display:flex;
  flex-direction:column
}
.blog-card-img-link{
  display:block;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:1.5rem
}
.blog-card-img-wrap{
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--neutral-light)
}
.blog-card-img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s ease
}
.blog-card:hover .blog-card-img{transform:scale(1.04)}
.blog-card-body{
  display:flex;flex-direction:column;gap:.625rem
}
.blog-card-cat{
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--neutral);
  display:inline-block
}
.blog-card-title{
  font-size:1.25rem;
  font-weight:400;
  line-height:1.35
}
.blog-card-title a{color:var(--dark);text-decoration:none}
.blog-card-title a:hover{opacity:.7}
.blog-card-excerpt{
  font-size:.9375rem;
  font-weight:300;
  color:var(--neutral);
  line-height:1.65
}
.blog-card-meta{
  display:flex;align-items:center;gap:.5rem;
  font-size:.8125rem;font-weight:300;color:var(--neutral);
  margin-top:.25rem
}
.blog-card-sep{color:var(--neutral-dark)}

/* ════════════════════════════════════════════════
   BLOG POST PAGE
════════════════════════════════════════════════ */
.post-header-section{
  padding:8rem 0 3rem
}
.post-back-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.875rem;font-weight:400;color:var(--neutral);
  text-decoration:none;margin-bottom:2.5rem;
  transition:color .2s
}
.post-back-link:hover{color:var(--dark)}
.post-header-inner{
  max-width:50rem
}
.post-title{
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:300;line-height:1.15;
  letter-spacing:-.02em;
  margin:.75rem 0 1.25rem
}
.post-meta{
  display:flex;align-items:center;gap:.5rem;
  font-size:.875rem;font-weight:300;color:var(--neutral)
}
.post-cover-wrap{
  border-radius:12px;overflow:hidden;
  aspect-ratio:16/7;
  background:var(--neutral-light)
}
.post-cover-img{
  width:100%;height:100%;object-fit:cover
}
.post-body-section{
  padding:3rem 0 8rem
}
.post-body-inner{
  /* max-width:42rem */
}
.post-excerpt{
  font-size:1.25rem;font-weight:300;
  color:var(--neutral);line-height:1.65;
  margin-bottom:2rem;
  padding-bottom:2rem;
  border-bottom:1px solid var(--line-dark)
}
.post-content{
  font-size:1rem;font-weight:300;line-height:1.8;
  color:var(--dark)
}
.post-content p{margin-bottom:1.5rem}
.post-content h2{font-size:1.5rem;font-weight:400;margin:2.5rem 0 1rem}
.post-content h3{font-size:1.25rem;font-weight:400;margin:2rem 0 .75rem}
.post-content ul,.post-content ol{padding-left:1.5rem;margin-bottom:1.5rem}
.post-content li{margin-bottom:.5rem}
.post-content a{color:var(--dark);text-decoration:underline}
.post-content blockquote{
  border-left:3px solid var(--dark);
  padding-left:1.5rem;margin:2rem 0;
  font-style:italic;color:var(--neutral)
}

/* admin tabs */
.admin-tabs{display:flex;gap:.5rem;border-bottom:2px solid var(--border);padding-bottom:0}
.admin-tab{
  padding:.625rem 1.25rem;
  border:none;border-bottom:2px solid transparent;
  background:none;cursor:pointer;
  font-size:.875rem;font-weight:500;color:var(--muted);
  margin-bottom:-2px;transition:color .2s,border-color .2s
}
.admin-tab.active{color:var(--dark);border-bottom-color:var(--dark)}
.admin-tab:hover{color:var(--dark)}

/* ── Banner headline (replaces inline font-size so media queries can override) ── */
.banner-headline{
  font-size:3rem;font-weight:300;color:#111;
  text-transform:uppercase;white-space:nowrap;
  letter-spacing:-.01em;flex-shrink:0
}

/* ════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════ */
@media(max-width:1024px){
  .hero_heading{font-size:7vw}
  .hero_offset-icon{width:8rem;height:8rem}
  .hero_offset-icon-container{inset:-4rem 0 auto auto}
  .about-body{font-size:2.25rem}
  .stat-number{font-size:10vw}
  .dd-word{font-size:10vw}
  .feature-card{height:auto;position:relative;top:auto}
  .cta-images_component{height:200vh}
  .about-values-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .about-mission-grid{grid-template-columns:1fr;gap:2rem}
}
@media(max-width:768px){
  .heading-style-h1{font-size:2.25rem}
  .heading-style-h4{font-size:1.5rem}
  .navbar{padding:1rem 1.5rem}
  .navigation_component{display:none}
  .nav-burger{display:flex}
  .section_hero{padding-top:0}
  .hero_component{height:auto;min-height:70vh}
  .hero_heading{font-size:12vw}
  .hero_heading-container{grid-column:1/-1;padding-bottom:1.5rem}
  .hero_social-links{flex-direction:row;margin-bottom:0;align-self:auto}
  .hero_offset-icon-container{display:none}
  /* Hero bottom row stacks: heading above, socials below */
  .hero-bottom-row{flex-direction:column;align-items:flex-start;gap:1.5rem}
  .hero-bottom-row .hero_heading-inner-container{max-width:100%}
  /* Hero top row wraps on small screens */
  .hero_top{flex-wrap:wrap;gap:.75rem}
  .hero-image-wrap{height:55vw}
  .about-section,.work-section,.section_cta-images,.faq-section,.services-section{padding-top:4rem;padding-bottom:4rem}
  .padding-section-large{padding-top:4rem;padding-bottom:4rem}
  .about-grid{grid-template-columns:1fr;gap:2rem}
  .about-body{font-size:1.75rem}
  .stat-number{font-size:15vw}
  /* Mobile CTA: disable sticky parallax, just show centered content */
  .cta-images_component{height:auto}
  .cta-images_content-container{position:relative;height:auto;overflow:visible}
  .cta-images_images-container{display:none}
  .cta-images_image-list{padding-top:0}
  .cta-images_content{height:auto;padding:4rem 1rem}
  .feature-card{grid-template-columns:1fr;height:auto;position:relative;top:auto}
  .feature-img-wrap{height:280px}
  .feature-content{padding:2.5rem 1.5rem}
  .feature-card-reverse{direction:ltr}
  /* Award grid: hide image hover, org name; keep title + tags + view link */
  .award-grid{grid-template-columns:1fr auto auto}
  .award-num{display:none}
  .award-name{display:none}
  .award-image-wrap{display:none}
  .faq-grid{grid-template-columns:1fr;gap:2rem}
  .faq-header{position:static}
  .faq-title{font-size:2.5rem}
  .testimonial-quote{font-size:1.5rem;width:100%}
  .testimonial-img-wrap{height:420px}
  .testimonial-content{padding:2rem 1.5rem}
  .testimonial-controls{bottom:1.5rem;right:1.5rem}
  .text-banner-inner{flex-direction:column;align-items:flex-start;gap:2rem}
  .text-banner-heading{font-size:2.5rem}
  .footer-top{grid-template-columns:1fr;gap:2rem}
  .footer-right{flex-wrap:wrap;gap:2rem}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:.75rem}
  .dd-word{font-size:14vw}
  .tagline{font-size:.75rem}
  .page-hero-section{padding:2rem 0 3.5rem}
  .page-hero-top{flex-wrap:wrap;gap:.75rem}
  .about-values-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .about-icons-row{gap:1.5rem}
  .about-icon-img{width:5rem;height:5rem}
  .banner-headline{font-size:2rem}
}
@media(max-width:480px){
  .container-large{padding:0 1.25rem}
  .hero-image-wrap{margin:0 1.25rem}
  .about-body{font-size:1.5rem}
  .hero_heading{font-size:16vw}
  .text-banner-heading{font-size:2rem}
  .tagline{font-size:.75rem}
  /* Hide notification pill on very small screens to prevent overflow */
  .notification{display:none}
  /* Simplify award row further: just title + view link */
  .award-tags{display:none}
  .award-grid{grid-template-columns:1fr auto}
  /* Tighter feature card padding */
  .feature-content{padding:2rem 1.25rem}
  .feature-title{font-size:2.25rem}
  /* Banner headline */
  .banner-headline{font-size:1.5rem}
  /* Testimonial */
  .testimonial-quote{font-size:1.25rem}
  .testimonial-img-wrap{height:320px}
  /* Section spacing */
  .padding-section-large{padding-top:3rem;padding-bottom:3rem}
  .faq-title{font-size:2rem}
}

/* ════════════════════════════════════════════════
   CONTACT PAGE — utility classes + components
════════════════════════════════════════════════ */

/* Height utility — .hero_component.height-100vh */
.height-100vh{height:100vh}

/* Spacers */
.spacer-huge{height:4rem}
.spacer-large{height:2rem}
.spacer-xsmall{height:.5rem}

/* Generic divider (original Webflow: 1px solid rgba(0,0,0,.1)) */
.divider{height:1px;background:var(--line);width:100%}

/* Flex layout helpers */
.display-flex-column{display:flex;flex-direction:column;gap:1.5rem}
.display-flex-row{display:flex;flex-direction:row;align-items:center;gap:1.25rem;flex-wrap:wrap}

/* Text style helpers */
.text-style-allcaps{
  font-size:.7rem;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--neutral);
  margin-bottom:.25rem;display:block
}
.text-color-secondary{color:var(--neutral)}
.text-color-primary{color:var(--dark)}
.text-size-small{font-size:.875rem;font-weight:300}
.text-size-medium{font-size:1.25rem;font-weight:300}
.text-weight-light{font-weight:300}

/* Contact info links */
.contact-info-link{
  color:var(--dark);
  text-decoration:none;
  font-weight:300;
  transition:opacity .2s
}
.contact-info-link:hover{opacity:.5}

/* Nav active state on contact page */
.nav-contact-active{cursor:default}

/* ── Banner ticker ──────────────────────────────────────────── */
/* exact Webflow: section_banner with scrolling row of service tags */
.section_banner{
  overflow:hidden;
  padding-top:0;
  padding-bottom:0
}
.banner_component{overflow:hidden}
.banner_bottom-container{overflow:hidden;width:100%}
.banner_bottom{
  display:flex;
  align-items:center;
  gap:1.25rem;
  width:max-content;
  animation:tickerScroll 28s linear infinite;
  padding:.5rem 0
}
.banner_bottom:hover{animation-play-state:paused}

@keyframes tickerScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* Text tag pills — .text-tag.is-tertiary */
.text-tag{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  padding:.5rem 1.375rem;
  border-radius:999px;
  font-size:.875rem;
  font-weight:300;
  letter-spacing:.02em;
  white-space:nowrap;
  border:1px solid var(--dark);
  color:var(--dark);
  background:transparent
}
.text-tag.is-tertiary{
  border-color:var(--neutral-light);
  color:var(--neutral)
}

/* ── Contact section ────────────────────────────────────────── */
.section_contact{
  padding-top:5rem;
  padding-bottom:7rem
}
.contact_component{width:100%}

/* 12-col grid override for contact layout:
   content = cols 1-5, form = cols 6-13 */
.contact-grid .contact_content-container{
  grid-column:1 / 6;
  grid-row:1
}
.contact-grid .contact_form-container{
  grid-column:6 / 13;
  grid-row:1;
  padding-left:4rem
}

/* Interaction blocks */
.interaction-bloc_heading{margin-bottom:.5rem}
.interaction-bloc_text .text-size-large{font-size:2rem;font-weight:300;line-height:1.4}
.interaction-bloc_bloc{display:flex;flex-direction:column;gap:2rem}

/* ── Contact Form ───────────────────────────────────────────── */
/* Two-column row for paired fields */
.form_filed-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  margin-bottom:0
}
.form_field-container{
  display:flex;
  flex-direction:column;
  margin-bottom:1.75rem
}
.form_field-label{
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--neutral);
  margin-bottom:.5rem;
  display:block
}
/* Inputs — borderless except bottom line (exact Webflow form style) */
.form_input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line-dark);
  padding:.875rem 0;
  font-family:'DM Sans',sans-serif;
  font-size:1rem;
  font-weight:300;
  color:var(--dark);
  transition:border-color .2s;
  outline:none
}
.form_input::placeholder{color:var(--muted)}
.form_input:focus{border-bottom-color:var(--dark)}
.form_input.is-select-input{
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23696969'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .25rem center;
  padding-right:1.5rem
}
.form_input.is-text-area{
  resize:vertical;
  min-height:140px;
  line-height:1.6
}

/* Radio buttons */
.form_radio{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  cursor:pointer;
  position:relative;
  user-select:none
}
.form_radio input[type="radio"]{
  position:absolute;opacity:0;width:0;height:0
}
.form_radio-icon{
  width:1.25rem;height:1.25rem;
  border:1px solid var(--dark);
  border-radius:50%;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s
}
.form_radio input[type="radio"]:checked ~ .form_radio-label,
.form_radio input[type="radio"]:checked + .form_radio-icon + .form_radio-label{color:var(--dark)}
.form_radio:has(input:checked) .form_radio-icon{
  background:var(--dark);
  box-shadow:inset 0 0 0 3px var(--white)
}
.form_radio-label{font-size:.875rem;font-weight:300;color:var(--neutral)}

/* Checkbox */
.form_checkbox{
  display:inline-flex;
  align-items:flex-start;
  gap:.75rem;
  cursor:pointer;
  user-select:none
}
.form_checkbox input[type="checkbox"]{
  position:absolute;opacity:0;width:0;height:0
}
.form_checkbox-icon{
  width:1.25rem;height:1.25rem;
  border:1px solid var(--dark);
  border-radius:3px;
  flex-shrink:0;
  margin-top:2px;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s
}
.form_checkbox:has(input:checked) .form_checkbox-icon{
  background:var(--dark);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23ededed'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center
}
.form_checkbox-label{font-size:.8rem;font-weight:300;color:var(--neutral);line-height:1.5}

/* Form feedback messages */
.success-message,.error-message{
  border-radius:8px;
  padding:1.25rem 1.5rem;
  margin-bottom:2rem;
  font-size:.9rem;
  font-weight:400
}
.success-message{background:#dcf5dc;color:#1a6b1a;border:1px solid rgba(26,107,26,.2)}
.error-message{background:#fde8e8;color:#b71c1c;border:1px solid rgba(183,28,28,.2)}

/* Contact submit button */
.btn-contact-submit{
  display:inline-flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  padding-left:1.75rem;padding-right:.375rem;
  height:3.25rem;
  min-width:12rem;
  border-radius:999px;
  background:var(--dark);color:var(--white);
  border:1px solid var(--dark);
  font-family:'DM Sans',sans-serif;
  font-size:.65rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;
  margin-top:.5rem;
  transition:background .2s,border-color .2s
}
.btn-contact-submit:hover{background:var(--neutral-dark);border-color:var(--neutral-dark)}
.btn-contact-icon{
  width:2.5rem;height:2.5rem;
  background:var(--white);color:var(--dark);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0
}

/* ── Contact page responsive ────────────────────────────────── */
@media(max-width:1024px){
  .contact-grid .contact_content-container{grid-column:1/6}
  .contact-grid .contact_form-container{grid-column:6/13;padding-left:2.5rem}
  .interaction-bloc_text .text-size-large{font-size:1.6rem}
}
@media(max-width:768px){
  .contact-grid .contact_content-container{grid-column:1/-1}
  .contact-grid .contact_form-container{grid-column:1/-1;padding-left:0;margin-top:3rem}
  .form_filed-col{grid-template-columns:1fr}
  .section_contact{padding-top:3rem;padding-bottom:5rem}
  .spacer-huge{height:2.5rem}
  .interaction-bloc_text .text-size-large{font-size:1.75rem}
}