html {
    scroll-behavior: smooth;
}
:root {
  --navy: #030C1C;         /* background */
  --navy-soft: #101c33;
  --copper: #c78a43;       /* strapline / accents */
  --ivory: #f4f2ec;        /* TROVE letters */
  --text-main: #1e2430;
  --text-muted: #5a6270;
  --grey-section: #d3d3d3;
  --max-width: 1080px;
  --border-soft:#dde0ea;
}

/* GLOBAL */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin:0;
  padding:0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background: #ffffff;
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.divider {
      width: 64px;
      height: 2px;
      background: var(--copper);
      margin: 1rem 0 1.5rem;
    }

/* HERO */

.hero {
  background: var(--navy);
  color: var(--ivory);
  padding: 1.5rem 0 2rem;
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;

}

.hero-logo {
  max-width:576px;
  margin: 0 auto;
  text-align:center;
}

 .hero-subcopy {
      max-width: 576px;
      margin: 0.75rem auto;
      font-size: 1.05rem;
      color: #dde2ee;
      letter-spacing:0.1em;
      line-height:1.8;
      text-align:center;
    }
    
    .hero-cta {
      margin-top: 1.75rem;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.75rem;
    }
    
     .hero-nav {
       display: flex;
       gap: 1.5rem;
       font-size: 0.78rem;
       letter-spacing: 0.18em;
       text-transform: uppercase;
       color: rgba(248, 250, 252, 0.85);    
    }   

    .hero-nav a {
        text-decoration: none;
        color: inherit;
    }

    .hero-nav a:hover {
        color: #ffffff;
}

    .hero-header-row {
        display:grid;
        grid-template-columns:1fr auto;
        align-items:center;
        width:100%;
        margin-bottom:0.5rem;
    }
    
/* BUTTONS */

    .btn-primary {
      border-radius: 999px;
      padding: 0.7rem 1.4rem;
      font-size: 0.9rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
      border: 1px solid transparent;
      text-decoration:none;
      background: var(--copper);
      color: #ffffff;
      border-color: var(--copper);
      font-weight:600;
      letter-spacing: 1.5px;
      font-size: 1.02rem;
      margin:0.75rem auto 0 auto;
    }
    
     .btn-primary:hover {
      filter: brightness(1.05);
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.8rem;
      align-items: center;
    }

/* SECTIONS */

main {
  padding: 0 0 0.5rem;
}

.section {
  max-width: var(--max-width);
  margin: 1rem auto 0rem;
  padding: 1rem 1.5rem 1rem ;
}

.section-heading {
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
  color: var(--navy-soft);
}

.section-intro {
   font-size: 0.98rem;
      color: var(--text-muted);
      margin-bottom: 0.5rem;}

.section-intro strong {
  font-weight: 600;
}

.section-grey {
        background: var(--ivory);
        padding: 1rem 1.5rem 1rem ;
        margin: 0 auto;
    }
    
.section-grey-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* WHAT WE DO GRID */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.7rem;
}

.card {
   border-radius: 0.75rem;
      padding: 1.3rem 1.25rem 1.4rem;
      border: 1px solid #e1e4ee;
      background: #ffffff;

}

.card-tag {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper);
}

.card-title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--navy-soft);
}

.card p + p {
  font-size: 0.9rem;
  margin-bottom:0.6rem;
  color: var(--text-muted);
  line-height:2;

  }
    
.card-question  {
  display:block;
  min-height: 2.75rem;
  font-weight:600;
  margin:0.9rem auto;
  line-height: 1.3;
 }
 
 /* About.html styling */

	
	.about-hero-grid {
    	display:grid;
   		grid-template-columns:
        minmax(0, 1fr)   /* col 1 - text */
        minmax(0, 1.1fr)   /* col 2 - text */
        minmax(0, 1.9fr);   /* col 3 - image */
    	gap:2rem;
    	align-items:start;
    	padding:0;
	}
    
    .about-copy {
        grid-column: 1 / span 2; 
    }
    
    .about-photo {
    	grid-column: 3 / span 1;
    	padding: 1rem 0;
    	max-width: 600px;   
    	width: 100%;
    	margin-left: auto;
    	margin-right: auto; /* keeps it centred in col 3 */
}
	
	/* ABOUT PAGE IMAGE */

	.about-photo-wrapper {
  		display: flex;
  		justify-content: center;
  		align-items: flex-start;
	}

        
   
  .intro-text {
  font-size: 1.05rem;
  color: var(--copper);
  margin-bottom: 1.2rem;
  line-height: 1.55;
  
}

  .bio-quote {

    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--navy);
    max-width: 65ch;
    font-weight:500;
    /*quote-bar*/
    border-left: 3px solid var(--copper);
    padding-left: 1rem;
    margin: 1rem 0 2rem;  
  }

/* WHO WE WORK WITH */

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.75rem;
  margin-top: 1.25rem;
  align-items: flex-start;
}

.list-check {
  list-style: none;
  padding: 1.4rem 0rem 1.4rem 0rem;
}

.list-check li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.6rem;
  font-size: 0.94rem;
  color: var(--navy);
}

.list-check li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--copper);
  font-size: 1.1rem;
  line-height: 1;
}

.panel {
  background: #ffffff;
  border-radius: 0.75rem;
  padding: 1.4rem 1.3rem;
  border: 1px solid #dde0ea;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
  font-size: 0.94rem;
  color: var(--text-muted);
}

.panel .card-tag {
  margin-bottom: 1rem;
}

.panel strong {
      color: var(--navy-soft);
    }
    
    .panel p + p {
        margin-top:1rem;
    }


/* HOW WE WORK STEPS */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.6rem;
}

.step {
  border-radius: 0.75rem;
      border: 1px solid #e1e4ee;
      padding: 1.1rem 1.1rem 1.2rem;
      background: #ffffff;
      font-size: 0.9rem;
}

.step-label {
    font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--copper);
      margin-bottom: 0.25rem;
}

.step-title {
   display:block;
      font-size:0.98rem;
      text-transform: uppercase;
      min-height: 2.75rem;
      font-weight:600;
      margin-bottom:0.6rem;
      line-height: 1.3;
      color: var(--copper);
}

/* CONTACT SECTION */

#contact .two-col > div:first-child {
  align-self: center;
}

.contact-panel {
  padding: 1.5rem 1.4rem 1.4rem;
  border-radius: 1.15rem;
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.contact-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.94rem;
  cursor:pointer;
}


.contact-note {
  margin: 1.25rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-soft);
  text-align: center;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.contact-panel a {
  color: var(--navy-soft);
  font-weight: 500;
  text-decoration: none;
}

.contact-line a {
  color: var(--navy-soft);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.contact-line a:hover {
  text-decoration-thickness: 2px;
  color: #d79b55;
}



.contact-icon {
  width: 18px;
  height: 18px;
  color: var(--navy-soft);
  flex-shrink: 0;
}

/* FOOTER */

footer {
  border-top: 1px solid rgba(148, 163, 184, 0.3);
  padding: 1.75rem 1.5rem 1.9rem;
  background: #020712;
  color: rgba(148, 163, 184, 0.95);
  font-size: 0.85rem;
}

footer .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.bio-headshot {
  max-width: 100%;
  border-radius: 0.75rem;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.35);
  object-fit: cover;
  margin-top:2.75rem;
}

    .bio-panel {
        max-width:800px;
        margin: 1.5rem auto 0;
    }
    
    .bio-panel .section-intro {
        font-size: 1.02rem;
        line-height:1.9;
    }
        
    .about-hero {
  align-items: center;
}

.experience-list {
    margin: 1rem 0 1.5rem;
    padding-left:1.25rem;
    line-height:1.6;
}

    .experience-list li {
        margin-bottom:0.5rem;
    }
    
    .experience-summary {
        font-weight:500;    
    }


/* RESPONSIVE */

@media (max-width: 900px) {
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

 main {
    padding: 1rem 1.25rem 1rem;
  }

  .two-col {
    display: block;
  }

  .two-col > div + div {
    margin-top: 1rem;
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero {
    padding-bottom: 3.6rem;
    margin: 0 auto;
  }
  
   .hero-bar {
    flex-direction: column;
    align-items:center;
    gap: 0.75rem;
  }

  .hero-nav {
    font-size: 0.75rem;
  }
  
  .panel {
   
    align-items:center;
  }
  
  .panel img {
    margin: 0 auto;
  }
  
  .contact-line {
    display: block;
    align-items: center;
  }

  .about-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-copy {
    grid-column: 1 / span 1;
  }

  .about-photo {
    grid-column: 1 / span 1;
    margin-top: 0;
  }
  
    .bio-quote {
    margin-bottom: 0;    
    }
    
    .bio-headshot {
    margin-top: 0;
}
  
}

@media (max-width: 640px) {
  .grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
  
  .hero {
    padding: 2.75rem 1.25rem 3.25rem;
  }
  
  .section {
  max-width: var(--max-width);
  margin: 2rem auto 0rem;
  padding: 0 0; 
}

}