*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --white:#ffffff;
  --snow:#FAFAFA;
  --pearl:#F5F5F5;
  --silver:#EEEEEE;
  --mist:#E0E0E0;
  --steel:#BDBDBD;
  --gray:#9E9E9E;
  --graphite:#616161;
  --charcoal:#333333;
  --ink:#1A1A1A;
  --black:#0D0D0D;
  --crimson:rgb(195, 0, 26);
  --crimson-light:rgba(129,0,17,0.75);
  --crimson-glow:rgba(129,0,17,0.06);
  --crimson-glow2:rgba(129,0,17,0.12);
  --shadow-xs:0 1px 3px rgba(0,0,0,0.03);
  --shadow-sm:0 2px 8px rgba(0,0,0,0.04);
  --shadow-md:0 8px 30px rgba(0,0,0,0.06);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.07);
  --shadow-xl:0 30px 80px rgba(0,0,0,0.09);
  --radius:16px;
  --radius-lg:24px;
  --radius-xl:32px;
}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden}
body {
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  background: 
    radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.9), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.9), transparent 40%),
    linear-gradient(135deg, #f0f3f8 0%, #ffffff 40%, #e6e9f0 100%);
  background-attachment: fixed;
  color: var(--charcoal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--snow)}
::-webkit-scrollbar-thumb{background:var(--mist);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--steel)}

/* === ACCESSIBILITY === */
a:focus-visible, button:focus-visible, .project-card:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--crimson);
  outline-offset: 4px;
  border-radius: 4px;
}

/* === UTILITIES === */
.brand-red { color: var(--crimson); }

/* === NAV === */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:24px 56px;
  display:flex;align-items:center;justify-content:space-between;
  transition:all 0.6s cubic-bezier(0.22,1,0.36,1);
}
nav.scrolled{
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(32px) saturate(1.8);
  -webkit-backdrop-filter:blur(32px) saturate(1.8);
  box-shadow:0 1px 0 rgba(0,0,0,0.04);
  padding:16px 56px;
}
.nav-logo {
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  z-index: 1001; 
}

/* Logo Image Styling for Nav and Footer */
.logo-image {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.nav-links{display:flex;gap:40px;align-items:center}
.nav-links a{
  text-decoration:none;
  color:var(--gray);
  font-size:1rem; 
  font-weight:500;
  letter-spacing:0.05em;
  text-transform:uppercase;
  transition:color 0.3s;
  position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;
  background:var(--crimson);transition:width 0.4s cubic-bezier(0.22,1,0.36,1);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}

.nav-cta{
  background:var(--ink);
  color: #FFFFFF !important;
  padding:12px 32px; 
  border-radius:100px;
  font-size:0.95rem; 
  font-weight:600;
  text-decoration:none;
  letter-spacing:0.04em;
  text-transform:uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition:all 0.4s cubic-bezier(0.22,1,0.36,1);
}
.nav-links a.nav-cta::after { display: none; }
.nav-cta svg { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.nav-cta:hover{
  background:var(--crimson);
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(129,0,17,0.2);
  gap: 14px;
}
.nav-cta:hover svg { transform: translateX(3px); }

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  color: var(--ink);
  z-index: 1001; 
}
.mobile-menu-toggle svg { width: 28px; height: 28px; }

/* === HERO === */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:160px 56px 120px;
  position:relative;overflow:hidden;
  background:transparent;
}
.hero::before{
  content:'';position:absolute;top:-300px;right:-200px;
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,var(--pearl) 0%,transparent 60%);
  pointer-events:none;animation:drift 28s ease-in-out infinite;
  filter:blur(40px);
}
.hero::after{
  content:'';position:absolute;bottom:-250px;left:-200px;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,var(--silver) 0%,transparent 60%);
  pointer-events:none;animation:drift 32s ease-in-out infinite reverse;
  filter:blur(50px);opacity:0.5;
}
@keyframes drift{
  0%,100%{transform:translate(0,0)}
  33%{transform:translate(25px,-35px)}
  66%{transform:translate(-20px,28px)}
}
.hero-eyebrow{
  font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gray);font-weight:600;
  margin-bottom:36px;
  display:flex;align-items:center;gap:16px;
  animation:fade-up 1s cubic-bezier(0.22,1,0.36,1) 0.2s both;
}
.hero-eyebrow::before,.hero-eyebrow::after{
  content:'';width:32px;height:1px;background:rgba(129,0,17,0.25);
}
.hero h1{
  font-size:clamp(3rem,7vw,6rem);
  font-weight:800;line-height:1.0;
  letter-spacing:-0.04em;color:var(--ink);
  max-width:800px;
  animation:fade-up 1s cubic-bezier(0.22,1,0.36,1) 0.4s both;
}
.hero h1 .light{
  font-weight:300;
  color:var(--crimson) !important;
  font-style: italic;
}
.hero-sub{
  font-size:clamp(0.95rem,1.2vw,1.08rem);
  color:var(--graphite);max-width:500px;
  margin:32px auto 52px;font-weight:400;line-height:1.8;
  animation:fade-up 1s cubic-bezier(0.22,1,0.36,1) 0.6s both;
}
.hero-actions{
  display:flex;gap:14px;align-items:center;
  animation:fade-up 1s cubic-bezier(0.22,1,0.36,1) 0.8s both;
}

/* BUTTONS */
.btn-primary{
  background:var(--ink);color:var(--white);
  padding:17px 42px;border-radius:100px;
  font-size:0.85rem;font-weight:600;text-decoration:none;
  transition:all 0.4s cubic-bezier(0.22,1,0.36,1);
  letter-spacing:0.03em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;
  position:relative;overflow:hidden;
}
.btn-primary::before{
  content:'';position:absolute;top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
  transition:left 0.6s;
}
.btn-primary:hover::before{left:100%}
.btn-primary svg{transition:transform 0.3s cubic-bezier(0.22, 1, 0.36, 1)}
.btn-primary:hover{
  background:var(--crimson);transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(129,0,17,0.2);
  gap: 14px;
}
.btn-primary:hover svg{transform:translateX(5px)}

.btn-ghost{
  background:var(--white); 
  color:var(--ink); 
  padding:16px 28px; 
  font-size:0.85rem;font-weight:600;text-decoration:none;
  transition:all 0.4s cubic-bezier(0.22,1,0.36,1);
  display:inline-flex;align-items:center;gap:10px;
  border-radius:100px;letter-spacing:0.03em;text-transform:uppercase;
  border:2px solid var(--graphite); 
}
.btn-ghost svg { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.btn-ghost:hover{
  border-color:var(--crimson); color:var(--crimson); background:var(--crimson-glow);
  transform:translateY(-2px); box-shadow:0 14px 40px rgba(129,0,17,0.2); gap: 14px;
}
.btn-ghost:hover svg { transform: translate(3px, -3px); }

.scroll-indicator{
  position:absolute;bottom:44px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  animation:fade-up 1s cubic-bezier(0.22,1,0.36,1) 1.2s both;
}
.scroll-indicator span{font-size:0.62rem;color:var(--steel);letter-spacing:0.18em;text-transform:uppercase;font-weight:500}
.scroll-line{width:1px;height:44px;background:var(--silver);position:relative;overflow:hidden}
.scroll-line::after{
  content:'';position:absolute;top:-100%;left:0;width:100%;height:40%;
  background:var(--crimson);animation:scroll-anim 2.5s ease-in-out infinite;
}
@keyframes scroll-anim{0%{top:-40%}100%{top:100%}}
@keyframes fade-up{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}

/* === SECTION COMMON === */
section{padding:130px 56px}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: var(--crimson-glow);
  color: var(--crimson);
  border-radius: 100px;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 24px;
  border: 1px solid rgba(195, 0, 26, 0.15);
}

.section-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 0 8px var(--crimson);
}

.section-title {
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 600px;
}

.section-desc {
  color:var(--graphite);font-size:1.05rem;font-weight:400;
  max-width:480px;line-height:1.8;margin-top:22px;
}

/* === SPLIT HEADER LAYOUT === */
.section-header-split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 76px;
}

.header-left {
  flex: 1;
  max-width: 600px;
}

.header-right {
  flex: 1;
  max-width: 500px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.header-right .section-desc {
  margin-top: 0;
  max-width: 320px;
}

/* === LOGO PARTICLE ANIMATION (Services Section) === */
.cram-berry-animation {
  position: relative;
  /* Container size increased to fit a much larger logo */
  width: 180px; 
  height: 160px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bespoke logo - BIGGER */
.logo-animate {
  width: 100px; /* Signficantly increased size */
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 2; /* Logo is always on top */
  animation: float-berry 4s ease-in-out infinite;
  /* Soft crimson glow */
  filter: drop-shadow(0 12px 24px rgba(195, 0, 26, 0.25)); 
}

@keyframes float-berry {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); } /* slightly more float */
}

/* Streams of incoming Green Pixel bits */
.bit-streams {
  position: absolute;
  top: 50%; left: 50%; 
  width: 0; height: 0;
  z-index: 1;
}

.bit {
  position: absolute;
  /* Blocky "pixel" particles */
  width: 6px; 
  height: 6px; 
  background: #74C333; /* Matches your logo's leaf green */
  border-radius: 0px;  /* Sharp pixel corners */
  top: -3px; left: -3px; 
  opacity: 0;
  animation: cram-bits linear infinite;
}

/* Animation: Pixels spawn far away and suck INWARD directly into logo */
@keyframes cram-bits {
  0% { 
    /* Spawn far out based on CSS variable --dist */
    transform: rotate(var(--angle)) translateX(var(--dist)) scale(0);
    opacity: 0;
  }
  20% { 
    transform: rotate(var(--angle)) translateX(calc(var(--dist) * 0.8)) scale(1);
    opacity: 1;
  }
  80% { 
    /* Pulled inwards to the edge of the bigger logo */
    transform: rotate(var(--angle)) translateX(15px) scale(1);
    opacity: 1;
  }
  100% { 
    /* absorbed completely */
    transform: rotate(var(--angle)) translateX(0px) scale(0);
    opacity: 0;
  }
}

/* === WORK (PROJECT CARDS) === */
@property --neon-angle { syntax: "<angle>"; inherits: false; initial-value: 360deg; }

.work{position:relative;background:transparent}
.projects{display:flex;flex-direction:column;gap:56px;max-width:1200px;margin:0 auto}

.project-card {
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-xl); 
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 1),
    0 4px 12px rgba(0, 0, 0, 0.03),
    0 12px 30px rgba(0, 0, 0, 0.05);
  min-height: 420px; 
  transform: translateY(0);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); 
  cursor: pointer;
}

.project-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--neon-angle), transparent 60%, var(--crimson) 85%, #ff3344 95%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none; opacity: 0;
  filter: blur(1px) drop-shadow(0 0 5px var(--crimson)) drop-shadow(0 0 15px var(--crimson));
  transition: opacity 1s ease-out; z-index: 10;
}

.project-card:hover {
  transform: translateY(-4px); 
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 1), 
    0 14px 40px rgba(129, 0, 17, 0.15); 
  border-color: rgba(195, 0, 26, 0.3); 
}

.project-card:hover::after { opacity: 1; animation: spin-neon 2.5s linear infinite; }

@keyframes spin-neon { from { --neon-angle: 360deg; } to { --neon-angle: 0deg; } }

.project-visual-inner {
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:32px; 
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-card:hover .project-visual-inner { transform: scale(1.02); }

.pmh-visual{background:linear-gradient(145deg,#F3F5FB 0%,#fff0cb 50%,#F0F0FA 100%)}
.kz-visual{background:linear-gradient(145deg,#494947 0%,#876515 50%,#555553 100%)}

.phone-mockup{
  width: 190px; height: 380px; background:var(--white);
  border-radius:36px;
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(0,0,0,0.04);
  position:relative;overflow:hidden;display:flex;flex-direction:column;
}
.phone-notch{
  width:90px;height:22px;background:var(--white);
  border-radius:0 0 16px 16px;
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;
}
.phone-screen{flex:1;margin:8px;border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.screen-img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}

.project-info{padding:40px 48px;display:flex;flex-direction:column;justify-content:center;}
.project-tag{
  font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--gray);font-weight:600;margin-bottom:18px;
  display:flex;align-items:center;gap:10px;
}
.project-tag .tag-dot{width:5px;height:5px;border-radius:50%;background:var(--crimson)}
.project-info h3{
  font-size:2rem;font-weight:800;color:var(--ink);
  letter-spacing:-0.03em;line-height:1.1;margin-bottom:18px;
}
.project-info p{
  color:var(--graphite);font-size:0.9rem;line-height:1.8;font-weight:400;margin-bottom:28px;text-align: justify;
}
.project-tech{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.tech-pill{
  padding:7px 16px;border-radius:100px;
  background:var(--snow);border:1px solid var(--silver);
  font-size:0.7rem;font-weight:500;color:var(--charcoal);letter-spacing:0.03em;
}
.project-link{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ink);font-weight:600;font-size:0.82rem;
  text-decoration:none;letter-spacing:0.06em;text-transform:uppercase;
  transition:all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-link svg { width:16px;height:16px; transition:transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.project-link:hover{gap:14px;color:var(--crimson)}
.project-link:hover svg{transform:translateX(5px)}

/* === SERVICES === */
.services{background:transparent;position:relative}
.services::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--silver),transparent);
}
.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  max-width:1200px;margin:0 auto;
}

.service-card {
  --rx: 0deg; --ry: 0deg;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 1), 0 10px 25px rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-lg);
  padding: 48px 40px; position: relative; overflow: hidden; text-align: justify;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0) scale(1);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.6s;
}
.service-header{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.service-card:hover {
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 1), 0 20px 45px rgba(0, 0, 0, 0.09);
  border-color: rgba(255, 255, 255, 1);
}
.service-icon{
  width:52px;height:52px;border-radius:14px;
  background:var(--pearl); display:flex;align-items:center;justify-content:center;
  margin-bottom:28px;transition:all 0.4s; border:1px solid var(--silver);
}
.service-card:hover .service-icon{background:var(--crimson);border-color:var(--crimson)}
.service-card:hover .service-icon svg{stroke:var(--white)}
.service-icon svg{width:24px;height:24px;stroke:var(--charcoal);stroke-width:1.5;fill:none;transition:stroke 0.4s}
.service-card h3{ font-size:1.2rem;font-weight:700;color:var(--ink); margin-bottom:14px;letter-spacing:-0.01em; }
.service-card p{color:var(--graphite);font-size:0.88rem;line-height:1.75;font-weight:400}

/* === PROCESS === */
.process {
  background: 
    radial-gradient(circle at 20% 0%, #2a2a2a 0%, transparent 50%),
    radial-gradient(circle at 80% 100%, #1a1a1a 0%, transparent 50%),
    linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 40%, #000000 100%);
  color: var(--white); position: relative; overflow: hidden;
}
.process::before {
  content: ''; position: absolute; top: -300px; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 600px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(195, 0, 26, 0.1) 0%, transparent 60%);
}
.process .section-label { 
  background: rgba(195, 0, 26, 0.15); 
  border-color: rgba(195, 0, 26, 0.25); 
  color: #ff4d5e; 
}
.process .section-title { color: var(--white); }
.process .section-desc { color: rgba(255,255,255,0.6); }

.process-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  max-width: 1200px; margin: 0 auto; position: relative;
}
.process-steps::before {
  content: ''; position: absolute; top: 120px; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(195, 0, 26, 0.4), transparent); z-index: 0;
}
.process-step {
  --rx: 0deg; --ry: 0deg; padding: 44px 36px; position: relative; z-index: 1;
  background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9); border-radius: var(--radius-lg);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 1), 0 10px 25px rgba(0, 0, 0, 0.4);
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0) scale(1);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.6s;
}
.process-step:hover {
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 1), 0 20px 45px rgba(0, 0, 0, 0.6);
  border-color: var(--crimson);
}
.step-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.process-icon { width: 32px; height: 32px; color: var(--crimson); transition: transform 0.4s ease; margin-bottom: 0 !important; }
.process-step:hover .process-icon { transform: scale(1.1) rotate(-5deg); }
.step-num {
  font-size: 3rem; font-weight: 800; color: transparent; -webkit-text-stroke: 1px var(--crimson);
  letter-spacing: -0.03em; line-height: 1; transition: all 0.4s; margin-bottom: 0 !important;
}
.process-step:hover .step-num { color: var(--crimson); text-shadow: 0 4px 12px rgba(195, 0, 26, 0.2); }
.step-title { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.step-desc { font-size: 0.82rem; color: var(--graphite); line-height: 1.8; font-weight: 400; }

/* === CTA SECTION === */
.cta-section{
  text-align:center;padding:150px 56px;
  position:relative;overflow:hidden;background:transparent;
}
.cta-section::before{
  content:'';position:absolute;top:50%;left:50%;
  width:800px;height:800px;transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle,rgba(195, 0, 26, 0.08) 0%,transparent 60%);
  pointer-events:none;filter:blur(40px);
}
.cta-section h2{
  font-size:clamp(2.4rem,4.5vw,3.8rem); font-weight:800;color:var(--ink);
  letter-spacing:-0.03em;line-height:1.08;margin-bottom:22px;position:relative;
}
.cta-section h2 .light{ font-weight:300; color:var(--crimson) !important; font-style: italic; }
.cta-section p{
  color:var(--graphite);font-size:1rem;
  max-width:420px;margin:0 auto 48px;font-weight:400;line-height:1.8;
}

/* === FOOTER === */
footer{
  padding:22px 56px;display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--silver);background:var(--white);
}
.footer-logo{ font-weight:700;font-size:1.15rem;color:var(--ink); display:flex;align-items:center;gap:8px; }
.footer-copy{ font-size:0.85rem; color:var(--gray); }

/* === ANIMATIONS === */
.reveal {
  opacity: 0; translate: 0 35px; 
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible { opacity: 1; translate: 0 0; }
.reveal-delay-1{transition-delay:0.12s}
.reveal-delay-2{transition-delay:0.24s}
.reveal-delay-3{transition-delay:0.36s}

/* === RESPONSIVE === */
@media(max-width:1024px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .process-steps{grid-template-columns:repeat(2,1fr)}
  .project-card{grid-template-columns:1fr}
}
@media(max-width:768px){
  nav { padding:16px 24px; }
  .mobile-menu-toggle { display: block; }
  
  .nav-links {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
  }
  .nav-links.active {
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a { font-size: 1.5rem; }
  
  section { padding:88px 24px; }
  
  /* Make the split layout stack beautifully on mobile */
  .section-header-split {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .header-right {
    flex-direction: column-reverse; /* Put animation above text on mobile */
    align-items: flex-start;
  }
  
  .services-grid { grid-template-columns:1fr; }
  .process-steps { grid-template-columns:1fr; }
  .process-steps::before { display:none; }
  footer { flex-direction:column; gap:24px; text-align:center; padding: 32px 24px; }
  .project-info { padding: 32px 24px; }
}

/* === PREFERS REDUCED MOTION (A11Y) === */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; translate: 0 0; transition: none; }
}