:root{
  --bg: #f5f6f7;
  --text: #1f2328;
  --muted: #5b6168;
  --dark: #111418;
  --line: rgba(0,0,0,0.10);
  --radius: 14px;
  --shadow: 0 14px 40px rgba(0,0,0,0.10);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

.wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 18px;
}

/* NAV */
.site-header{
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(245,246,247,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 14px;
}

.brand-name{
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 16px;
}

.brand-sub{
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.nav{
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

/* BUTTONS */
.btn{
  display: inline-block;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--dark);
  color: white;
  font-weight: 600;
  border: 0;
  cursor: pointer;
}
.btn:hover{ text-decoration: none; filter: brightness(1.05); }
.btn-small{ padding: 10px 14px; border-radius: 12px; }

.btn.light{
  background: white;
  color: var(--dark);
}

/* ===== HERO (transparent + alive) ===== */
.hero-modern{
  position: relative;
  overflow: hidden;
  padding: 62px 0 56px;
  border-bottom: 1px solid var(--line);

  /* Transparent “dark bar” instead of solid black */
  background: linear-gradient(to bottom, rgba(15,18,22,0.66), rgba(15,18,22,0.44));
  color: white;
}

/* animated layer */
.hero-modern::before{
  content: "";
  position: absolute;
  inset: -22%;
  background:
    radial-gradient(820px 520px at 18% 22%, rgba(40,60,85,0.28), transparent 60%),
    radial-gradient(720px 480px at 82% 28%, rgba(30,45,65,0.22), transparent 60%),
    radial-gradient(640px 440px at 48% 88%, rgba(25,35,50,0.18), transparent 60%);
  opacity: 1;
  animation: heroFloat 14s linear infinite;
  will-change: transform;
  z-index: 0;
}

@keyframes heroFloat{
  0%   { transform: translate3d(-18%, -6%, 0) scale(1.10); }
  40%  { transform: translate3d( 10%, -2%, 0) scale(1.13); }
  70%  { transform: translate3d( 18%,  6%, 0) scale(1.11); }
  100% { transform: translate3d(-18%, -6%, 0) scale(1.10); }
}

/* respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .hero-modern::before{ animation: none; }
}

/* ===== HERO BACKGROUND WORDS (clean + professional) ===== */
/* ===== HERO BACKGROUND WORDS (clean + readable) ===== */
.hero-words{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;

  display: grid;
  align-content: center;
  gap: 14px;
  padding: 0 8%;

  /* start lower, move less so more lines stay visible */
  transform: translateY(8%);
  animation: wordsFlow 18s linear infinite;
}

.hero-words span{
  font-size: 44px;        /* smaller so more fit */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;

  color: rgba(255,255,255,0.18);
  filter: blur(0.7px);
}

/* stagger alignment so it doesn’t feel stacked */
.hero-words span:nth-child(2),
.hero-words span:nth-child(4),
.hero-words span:nth-child(6),
.hero-words span:nth-child(8),
.hero-words span:nth-child(10){
  justify-self: end;
}

@keyframes wordsFlow{
  0%   { transform: translate3d(-2%, 14%, 0); }
  100% { transform: translate3d( 2%, -20%, 0); }
}

}

/* big, soft, no bubbles */
.hero-words span{
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;

  /* subtle “ink” look */
  color: rgba(255,255,255,0.18);
  filter: blur(0.7px);
}

/* optional: stagger alignment so it doesn’t look stacked */
.hero-words span:nth-child(2){ justify-self: end; }
.hero-words span:nth-child(4){ justify-self: end; }

/* drift upward + slight left-right so it feels alive */
@keyframes wordsFlow{
  0%   { transform: translate3d(-2%, 26%, 0); }
  100% { transform: translate3d( 2%, -34%, 0); }
}


/* keep hero text above animated layers */
.hero-content{
  position: relative;
  z-index: 1;
}

/* HERO TEXT */
.hero-modern h1{
  margin: 0 0 10px;
  font-size: 50px;
  line-height: 1.06;
  letter-spacing: 0.01em;
}

.hero-sub{
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
}

.hero-sub.muted{
  font-size: 15px;
  font-weight: 300;
  opacity: 0.85;
  margin-top: 4px;
}

.hero-actions{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start; /* keeps button sized to text */
}

}

.hero-note{
  margin: 0;
  color: rgba(255,255,255,0.70);
  font-size: 13px;
}

/* SECTIONS */
.section{
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
}

h2{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.lead{
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  font-weight: 300;
  max-width: 900px;
}

.lead.small{ font-size: 16px; }

/* SERVICES */
.services{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  max-width: 560px;
  display: grid;
  gap: 10px;
}

.services li{
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
  font-weight: 500;
}

/* PROCESS */
.steps{
  display: grid;
  gap: 12px;
  max-width: 820px;
}

.step{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

.step-num{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--dark);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.step-title{
  font-weight: 700;
  margin-bottom: 4px;
}

.step-text{
  color: var(--muted);
  font-size: 14px;
}

/* WORK */
.video{
  max-width: 920px;
}

.embed{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0f1216;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.photos{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 920px;
}

.photos img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: white;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.photos img:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.14);
}


.hint{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* CONTACT FORM */
.form{
  max-width: 640px;
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

label{
  display: grid;
  gap: 6px;
  font-weight: 500;
}

input, textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font: inherit;
  background: white;
}

textarea{
  resize: vertical;
  min-height: 140px;
}

/* FOOTER */
.footer{
  background: var(--dark);
  color: rgba(255,255,255,0.90);
  padding: 18px 0;
}

/* MOBILE */
@media (max-width: 860px){
  .nav-row{ align-items: flex-start; }
  .nav{ gap: 12px; justify-content: flex-end; }
  .hero-modern h1{ font-size: 40px; }
  .photos{ grid-template-columns: 1fr; }
}

/* ===== TRUST STRIP ===== */
.trust-grid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;.photos img{

  max-width: 960px;
}

.trust-item{
  padding: 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

.trust-title{
  font-weight: 700;
  margin-bottom: 6px;
}

.trust-text{
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* mobile */
@media (max-width: 860px){
  .trust-grid{
    grid-template-columns: 1fr;
  }
}

/* ===== BRAND MARK ===== */
.brand-row{
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark{
  width: 38px;
  height: auto;
  flex-shrink: 0;
}

.brand-text{
  display: flex;
  flex-direction: column;
}

.brand-mark{
  opacity: 0.92;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.site-header:hover .brand-mark{
  opacity: 1;
  transform: translateY(-1px);
}