:root {
  /* Core colours */
  --green-900: #004d1f;
  --green-800: #006b2c;
  --green-700: #008a38;
  --green-100: #e6f4ec;

  --purple-depth: #583cb4;

  --ink-900: #1a1a1f;
  --ink-700: #3a3a42;
  --ink-500: #6b7280;
  --ink-300: #e5e7eb;
  

  --white: #ffffff;
  --surface: #f8f9fa;

  /* Shadows (reduced to two) */
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.06);

  --radius: 14px;
  --radius-lg: 20px;
  --transition: 0.25s ease;
}

/* =================================
   GLOBAL RESET
================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

 
body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink-700);
  line-height: 1.6;
  background:
    radial-gradient(
      1200px 600px at 50% -200px,
      rgba(88, 60, 180, 0.035),
      transparent 70%
    ),
    radial-gradient(
      900px 500px at 90% 110%,
      rgba(0, 122, 45, 0.03),
      transparent 70%
    ),
    #fbfbfd;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at center,
      transparent 60%,
      rgba(0,0,0,0.025) 100%
    );
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035; /* keep very low */
  mix-blend-mode: multiply;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

img {
  max-width: 100%;
  display: block;
}
 
#skills,
#portfolio,
#testimonials {
  background: linear-gradient(
    180deg,
    rgba(0, 122, 45, 0.03),
    rgba(0, 122, 45, 0.01)
  );
}
 
h1, h2, h3, h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-900);
  letter-spacing: -0.015em;
}

h1 {
  font-size: 2.4rem;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

h4 {
  color: #008a38;
  letter-spacing: -0.01em;
}


p {
  font-size: 1.05rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
}
 
 
section {
  padding: 1rem 1.5rem;
  margin: 0 auto;
  background: transparent;
}

 

@media (min-width: 768px) {
  body::after { opacity: 0.035; }
  section { padding: 3rem 2rem; }
}

 

/* =================================
   NAVIGATION
================================= */
header {
  position: sticky;
  top: 0;
  z-index: 2000;
}

nav {
  background: var(--white);
  border-bottom: 1px solid var(--ink-300);
  backdrop-filter: blur(8px);
  position: relative;
}


nav a,
.button,
.contact-btn {
  letter-spacing: 0.04em;
}

 

/* Mobile */
@media (max-width: 768px) {



.nav-links a {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #eee;
  }
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav.scrolled {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.logo {
  transition: transform .3s ease;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  width: 60px; /* prevents layout shift */
}

.logo a {
  background: var(--green-900);
  padding:  5px;
  text-decoration: none;
  color: var(--white);
}

.logo:hover {
  transform: rotate(-12deg) scale(1.05);
  text-decoration: none;
  
}

/* Desktop */
.nav-links {
  display: flex;
  gap: 1rem;
  align-items: center;
  z-index: 1000;
}

 .nav-links-back a {
  position: relative;
  text-decoration: none;
  color: var(--ink-700);
  font-weight: 500;
  transition: color .2s ease;

}

.nav-links-back a:hover {
  color: var(--green-700);
}

.nav-links a {
  position: relative;
  text-decoration: none;
  color: var(--ink-700);
  font-weight: 500;
  transition: color .2s ease;

}

.nav-links a:hover {
  color: var(--green-700);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--green-700);
  transition: width 0.3s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

.hamburger {
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
}

/* Burger button reset */
.menu-toggle,
.menu-toggle:visited,
.menu-toggle:link {
  color: var(--dark);
  text-decoration: none;
}

/* Burger icon bars */
.menu-toggle span {
  background: var(--dark);
}

/* =================================
   HERO
================================= */
.hero {
  padding-top: 2rem;
  padding-bottom: 3rem;
  text-align: center;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(88, 60, 180, 0.04),
      transparent 60%
    );
}

.hero{
background:linear-gradient(
180deg,
#ffffff 0%,
#f7f9f8 100%
);
}


/* ===============================
   MOBILE NAVIGATION
================================ */

.hamburger{
  display:none;
  width:30px;
  height:24px;
  position:relative;
  background:none;
  border:none;
  cursor:pointer;
}

.hamburger span{
  position:absolute;
  width:100%;
  height:2px;
  left:0;
  transition:all .3s ease;
}

.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:11px; }
.hamburger span:nth-child(3){ bottom:0; }

/* burger animation */

.hamburger.active span:nth-child(1){
  transform:rotate(45deg);
  top:11px;
}

.hamburger.active span:nth-child(2){
  opacity:0;
}

.hamburger.active span:nth-child(3){
  transform:rotate(-45deg);
  bottom:11px;
}

/* mobile layout */

@media (max-width:768px){

  .hamburger{
    display:block;
  }

  .nav-links{
    flex-direction:column;
    position:absolute;
    top:70px;
    left:0;
    width:100%;
    background:white;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-10px);
    transition:all .35s ease;
    box-shadow:0 12px 25px rgba(0,0,0,0.08);
  }

  .nav-links a{
    padding:1rem 1.5rem;
  }

  .nav-links.open{
    max-height:400px;
    opacity:1;
    transform:translateY(0);
  }

}

@media (min-width: 768px) {
  .hero {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

.hero img {
 display: block;
  margin-left: auto;
  margin-right: auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  animation: fadeUp 0.8s ease forwards;
  object-fit: cover;
  border: 4px solid white;
}


.hero h1 {
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 2rem;
  margin-bottom: 1rem;
  animation: fadeUp 1s ease forwards;
  color: var(--green-800);
}



.hero p {
  color: var(--ink-500);
  font-weight: 200;
  letter-spacing: 0.02em;
}


.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero-content p {
  color: #0b0c0c;
  font-weight: 200;
  margin-bottom: 10px;
}


 

@media (min-width: 768px) {
  .hero img {
    width: 160px;
    height: 160px;
  }
}


@media (min-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .hero h1 {
    font-size: 3rem;
  }
}

 

@media (min-width: 768px) {
  .hero p {
    font-size: 1.2rem;
    
  }
}


.button {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition);
}

.button-primary {
  background:#00b140;
  color: var(--white);
}

.button-primary:hover {
  background: var(--green-900);
  transform: translateY(-2px);
}

.button-secondary {
  border: 1px solid var(--ink-300);
  color: var(--ink-700);
}

.button-secondary:hover {
  border-color: var(--green-700);
  color: var(--green-700);
}


 

/* =========================
   SECTION HEADERS
========================= */
.section-header {
  text-align: center;
  margin-bottom: 2rem;
}

.section-header h2 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
  font-weight: 600;
}

@media (min-width: 768px) {
  .section-header h2 {
    font-size: 2.5rem;
  }
}

.section-header p {
  color: var(--ink-500);
  font-size: 1.125rem;
  max-width: 600px;
  margin: 0 auto;
}

/* =========================
   SKILLS GRID
========================= */

.skills-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:24px;
margin-top:40px;
}


/* Tablet */
@media (max-width: 900px) {
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 640px) {
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .skills-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}




.card {
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: all var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.skill-card {
  background: var(--white);
  border: 1px solid var(--ink-300);
  box-shadow: var(--shadow-sm);
  padding: 2rem;
  border-radius: var(--radius);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.skill-card{
position:relative;
overflow:hidden;
}

.skill-card::after{
content:"";
position:absolute;
width:220px;
height:220px;
right:-40px;
bottom:-40px;

background-repeat:no-repeat;
background-size:contain;
background-position:center;

opacity:.20;
z-index:0;
}

.skill-icon,
.skill-card h3,
.skill-card p{
position:relative;
z-index:2;
}

/* UI Design */
.skill-card:nth-child(1)::after{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23007a2d' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cline x1='8' y1='20' x2='16' y2='20'/%3E%3Cline x1='12' y1='16' x2='12' y2='20'/%3E%3C/svg%3E");
}

/* GOV Prototype */
.skill-card:nth-child(2)::after {
background-image:url("data:image/svg+xml,%3Csvg fill='none' stroke='%23007a2d' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
}

/* UX Design */
.skill-card:nth-child(3)::after{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23007a2d' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M5.5 21a6.5 6.5 0 0 1 13 0'/%3E%3C/svg%3E");
}
/* Accessibility */
.skill-card:nth-child(4)::after{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23007a2d' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l7 4v5c0 5-3.5 8-7 9-3.5-1-7-4-7-9V7l7-4z'/%3E%3Cpolyline points='9 12 11 14 15 10'/%3E%3C/svg%3E");
}

/* Wireframing */
.skill-card:nth-child(5)::after{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23007a2d' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
}

/* Design Systems */
.skill-card:nth-child(6)::after{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23007a2d' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolygon points='12 2 22 7 12 12 2 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E");
}


.skill-card:hover::after {
  opacity: 0.30;
  transform: scale(1.1);
  transition: all .3s ease;
}

/* Icon container */
.skill-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--green-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: background var(--transition);
}

.skill-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--green-700);
  transition: stroke var(--transition);
}

.skill-card:hover .skill-icon {
  background: var(--green-700);
}

.skill-card:hover .skill-icon svg {
  stroke: var(--white);
}
 

.skill-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--green-700);
}

.skill-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--ink-900);
}

.skill-card p {
  color: var(--ink-500);
  font-size: 0.95rem;
  line-height: 1.6;
}


.skill-card{
background:linear-gradient(180deg,#ffffff 0%,#f7f9f8 100%);
border:1px solid #e6ece8;
border-radius:14px;
padding:26px;
position:relative;
overflow:hidden;
transition:all .25s ease;
min-height:180px;
}

.skill-card:hover{
transform:translateY(-6px);
box-shadow:0 14px 30px rgba(0,0,0,.08);
border-color:#cfe5d8;
}

.skill-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:#00b140;
transform:scaleX(0);
transform-origin:left;
transition:transform .25s ease;
}

.skill-card:hover::before{
transform:scaleX(1);
}

.skill-card h3{
font-size:1.1rem;
margin-bottom:8px;
font-weight:600;
}

.skill-card p{
font-size:.95rem;
line-height:1.5;
color:#5b6460;
}

/* =================================
   PROJECT PAGES
================================= */


.project-narrow {
  max-width: 675px;
}

.project-hero {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.project-title {
  color: #007a2d;
  position: relative;
}


@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


.project-header-img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px rgba(0,0,0,0.12);
  transition: transform .4s ease;
}

.project-header-img:hover {
  transform: scale(1.01);
}

.project-meta {
  color: var(--ink-500);
  margin-bottom: 1.5rem;
  font-weight: 500;
  font-style: italic;
}

.project-section {
  margin-bottom: 3.5rem;
  padding: 2rem;
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}

.project-section:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
}

.project-section h2 {
  margin-bottom: 1rem;
  font-size: 1.75rem;
}

.project-section p {
  margin-bottom: 1.25rem;
}

.project-section ul {
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
}

.project-section li {
  margin-bottom: .75rem;
}

.project-image {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-top: 2rem;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.project-image:hover {
  transform: translateY(-6px) scale(1.01);
  border: 1px solid var(--ink-300);
}


/* =========================
   PORTFOLIO
========================= */
.portfolio-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =================================
   PROJECT NAVIGATION
================================= */
.project-navigation {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ink-300);
  display: flex;
  justify-content: space-between;
}

.project-navigation a {
  text-decoration: none;
  padding: 0.9rem 1.5rem;
  background: var(--green-800);
  color: white;
  border-radius: 999px; /* pill shape */
  font-weight: 600;
  transition: all .25s ease;
  box-shadow: 0 6px 14px rgba(0,177,64,0.25);
}

.project-navigation a:hover {
  transform: translateY(-3px);
  border: 1px solid var(--ink-300);
}

.code {
  background-color: rgb(233, 233, 233);
  padding: 3px;
  font-weight: 100;
  font-style: italic;
}

.code2 {
  background-color: rgb(241, 243, 220);
  padding: 3px;
  font-weight: 100;
}


.back-link {
  display: inline-block;
  margin-bottom: 2rem;
  text-decoration: none;
  color: var(--green-700);
  font-weight: 600;
}


.project-card {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 200px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow:
    0 12px 30px rgba(0,0,0,0.06),
    0 30px 70px rgba(0,0,0,0.08);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}

.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.0) 0%,
      rgba(0,0,0,0.15) 55%,
      rgba(0,0,0,0.65) 82%,
      rgba(0,0,0,0.85) 100%
    );
  transition: opacity 0.35s ease;
}
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  pointer-events: none;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.12),
    0 40px 100px rgba(0,0,0,0.14),
    0 30px 80px rgba(0,138,56,0.06);
}

.project-card:hover::before {
  opacity: 0.85;
}


.project-card-content {
  position: absolute;
  bottom: 1.0rem;
  left: 1.6rem;
  right: 1.6rem;
  z-index: 2;
  
}

.project-card h3 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: white;
  margin-bottom: 0.35rem;
    text-shadow: 0 3px 10px rgba(0,0,0,0.45);
}

.project-card p {
  font-size: 0.85rem;
  line-height: 1px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.78);
   text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.project-card img {
  transition: transform 0.6s ease;
}

.project-card:hover img {
  transform: scale(1.04);
}

.project-card.planning {
  background-color: #144e81;
  background-image: url('portfolio/images/planning/EP1-Sign-in.png'); 
  background-size: cover;
  background-position: top;
}

.project-card.hmrc {
  background-color: #383838;
  background-image: url('portfolio/images/hmrc/hmrc-logo.png'); 
  background-size: cover;
  background-position: top;
}

.project-card.pins {
  background-color: #f45c43;
  background-image: url('portfolio/images/pins/pins-feedback.png');
  background-size: cover;
  background-position: top;
}

.project-card.repvault { 
  background-color: #43f45e;
  background-image: url('portfolio/images/polecat/repvault-01.png');
  background-size: cover;
  background-position: top;
}

.project-card.dwp {
  background-color: #912c8d;
  background-image: url('portfolio/images/dwp/dwp-questions.png');
  background-size: cover;
  background-position: top;
}

.project-card.polecat {
  background-color: #0b0c0c;
  background-image: url('portfolio/images/polecat/repvault.png');
  background-size: cover;
  background-position: top;
}

.project-card.muddy {
  background-color: #a8e063;
  background-image: url('portfolio/images/muddy/Homepage-Dash2.jpg');
  background-size: cover;
  background-position: top;
}

.project-card.confused{
  background-color: #f45c43;
  background-image: url('portfolio/images/confused/quote-header-1.png');
  background-size: cover;
  background-position: top;
}

.project-card.healthspan {
  background-color: #9943f4;
  background-image: url('portfolio/images/healthspan/ecommerce32.png');
  background-size: cover;
  background-position: top;
}

.project-card.yattonfc {
  background-color: #f4d443;
  background-image: url('portfolio/images/yattonfc/homepage.png');
  background-size: cover;
  background-position: top;
}

.project-card.confused2{
  background-color: #f45c43;
  background-image: url('portfolio/images/confused/homepage.jpg');
  background-size: cover;
  background-position: top;
}


.project-card.repvault{
  background-color: #f4d443;
  background-image: url('portfolio/images/polecat/repvault-01.png');
  background-size: cover;
  background-position: top;
}

.project-card.screwfix{
  background-color: #f4d443;
  background-image: url('portfolio/images/screwfix/screwfix_gales-489x1024.jpg');
  background-size: cover;
  background-position: top;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


:focus-visible {
  outline: 3px solid #00b140;
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #0b0c0c;
  color: white;
  padding: 8px 16px;
  z-index: 1000;
}

.skip-link:focus {
  top: 0;
}

/* =========================
   CLIENTS
========================= */
.clients-section {
  background: var(--surface);
  padding: 2rem 1.5rem;
}

@media (min-width: 768px) {
  .clients-section {
    padding: 2rem 2rem;
  }
}

.clients-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .clients-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.client-card {
  background: white;
  padding: 2rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--ink-300);
}

.client-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.client-card span {
  font-weight: 600;
  color: var(--ink-700);
  font-size: 1.125rem;
  text-align: center;
}

/* =========================
   TESTIMONIALS
========================= */
.testimonials-section {
  background: white;
}

.testimonial-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonial-card {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.04);
  border-left: 2px solid var(--green-700);
  border-radius: var(--radius-lg);
   /*padding: 1rem 1rem 2rem 2.5rem; /* extra left space */
  position: relative;
 padding: 2.5rem 2rem 2rem 3rem;
}

.testimonial-card::after {
  content: "“";
  position: absolute;
  top: 1.25rem;
  left: 1.75rem;
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 600;
  color: rgba(0, 177, 64, 0.08);
  font-family: Georgia, serif;
  pointer-events: none;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.testimonial-card p {
  position: relative;
  z-index: 1;
}

.testimonial-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-700);
  margin-bottom: 1.5rem;
  font-style: italic;
}


.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ink-300);
}

.testimonial-author img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.author-info h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 0.25rem;
}

.author-info p {
  font-size: 0.875rem;
  color: var(--ink-500);
}

/* =========================
   BLOG/CONTACT
========================= */
.contact-section {
  position: relative;
  background-image: url('images/contact.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: white;
  text-align: center;
  overflow: hidden;
}

.contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11, 12, 12, 0.75);
  z-index: 0;
}

.contact-section > * {
  position: relative;
  z-index: 1;
}

.contact-section h2 {
  color: white;
  margin-bottom: 1rem;
}

.contact-section p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.9);
}

.contact-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.contact-btn {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--green-700);
  color: white;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;

  box-shadow: var(--shadow-md);
    transition: 
    transform 0.25s ease,
    background .35s ease,
    color .35s ease;
}


.contact-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  background: var(--green-800);
}

.contact-btn.secondary {
  background: white;
  color: var(--ink-900);
}

.contact-btn.secondary:hover {
  background: var(--surface);
}

/* =========================
   SCROLL ANIMATIONS
========================= */

/* Default state (visible if JS fails) */
.fade-in {
  opacity: 1;
  transform: none;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Only hide when JS enables animation */
.fade-in.animate {
  opacity: 0;
  transform: translateY(30px);
}

/* When in viewport */
.fade-in.animate.visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================
   ANIMATION KEYFRAMES
========================= */
@keyframes fadeUp {
  from { 
    opacity: 0; 
    transform: translateY(40px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}


@media (min-width: 768px) {
  .container {
    padding: 0 2rem;
  }
}

/* ===============================
   BLOG
================================= */

.blog-hero {
  padding: 5rem 1.5rem 3rem;
  text-align: center;
}

.blog-list {
  margin: 0 auto 6rem;
  padding: 0 1.5rem;
}


.blog-card:hover {
  border-left: 2px solid var(--green-700);
}

 
.blog-meta {
  font-size: 0.85rem;
  color: var(--ink-500);
  margin-bottom: 0.75rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.blog-tag {
  background: rgba(0, 122, 45, 0.08);
  color: var(--green-700);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-weight: 500;
}

.blog-card {
  border-left: 3px solid transparent;
  padding-left: 1rem;
  transition: border 0.2s ease;
}

.blog-card:hover {
  border-left: 2px solid var(--green-700);
}


.blog-card h2 {
  font-size: 1.6rem;
  margin-bottom: 0.8rem;
}

.blog-card h2 a {
  text-decoration: none;
  color: var(--ink-700);
  transition: color 0.2s ease;
}

.blog-card h2 a:hover {
  color: var(--green-700);
}

.blog-card p {
  color: var(--ink-500);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.read-more {
  font-weight: 600;
  color: var(--green-700);
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

.post-container {
  margin: 0 auto;
  padding: 0 1.5rem;
}

.post-header {
  padding: 5rem 0 2rem;
  text-align: center;
}

.post-header h1 {
  font-size: 2.4rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.post-meta {
  font-size: 0.9rem;
  color: var(--ink-500);
}

.post-content {
  padding-bottom: 6rem;
}

.post-content .lead {
  font-size: 1.2rem;
  color: var(--ink-700);
  margin-bottom: 2rem;
}

.post-content h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.post-content p {
  line-height: 1.7;
  margin-bottom: 1.2rem;
  color: var(--ink-500);
}


.skill-card,
.project-card,
.client-card {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.04);
}

.site-footer {
  background: var(--green-900);
  color: rgba(255,255,255,0.85);
  padding: 1rem 1.2rem;
  font-size: 0.85rem;
  text-align: center;
}
.site-footer a {
  color: #a7d7b8;
}


/* clients strip */

.client-strip{
padding:20px 20px;
text-align:center;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
}

.client-strip p{
font-weight:600;
margin-bottom:20px;
opacity:0.7;
}

.client-logos{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
opacity:0.8;
}

.client-logos img{
height:48px;
}


/* ===============================
   sticky contact button
================================= */


.sticky-cta{
  position:fixed;
  
  bottom:25px;
  right:25px;
  z-index:1000;
  opacity:0;
  transform:translateY(20px);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
  
}

.sticky-cta .button-primary{
  background: white;
  color: var(--green-700);
  border: 2px solid var(--green-700);
}

.sticky-cta .button-primary:hover{
  background: var(--green-700);
  color: white;
}

.sticky-cta.visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  animation:ctaIn .35s ease;
}


.sticky-cta .button {
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

 

@keyframes ctaIn{
  0%{transform:translateY(30px);opacity:0;}
  60%{transform:translateY(-4px);}
  100%{transform:translateY(0);opacity:1;}
}

/* Force solid white floating button */
#contactFloating .button {
  background: var(--white);
  color: var(--green-700);
  border: 2px solid var(--green-700);
  border-radius: 999px;
  padding: 0.85rem 1.6rem;
  display: inline-block;
}

/* Hover */
#contactFloating .button:hover {
  background: var(--green-700);
  color: var(--white);
}

 

/* Force solid white floating button */
#contactFloating .button {
  background: var(--white);
  color: var(--green-700);
  border: 2px solid var(--green-700);
  border-radius: 999px;
  padding: 0.85rem 1.6rem;
  display: inline-block;
}

/* Hover */
#contactFloating .button:hover {
  background: var(--green-700);
  color: var(--white);
}