<style>

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

html.scroll-disabled {
scroll-behavior: auto;
scroll-snap-type: none;
}

body {

font-family:'Inter',Arial,sans-serif;
color:#111;
background:#ffffff;
line-height:1.75;
font-size:18px;

}

body a {

color:#0066cc;
text-decoration:underline;

}

body a:hover {

color:#004499;

}

header a {

color:white;
text-decoration:none;

}

header a:hover {

text-decoration:none;
/* Optional: color:#ddd; */

}

section{

scroll-snap-align:start;
padding:90px 8%;

}

img{

max-width:100%;
height:auto;
display:block;

}

a{

color:black;
text-decoration:none;

}

h1{

font-size:3.5rem;
font-weight:800;
line-height:1.1;

}

h2{

font-size:2.2rem;
font-weight:700;
margin-bottom:25px;

}

h3{

font-size:1.35rem;
font-weight:600;
margin-bottom:10px;

}

p{

margin-bottom:20px;
max-width:900px;

}

ul{

margin-left:25px;
margin-bottom:25px;

}

li{

margin-bottom:10px;

}

/*=========================
HEADER
==========================*/

header{

position:sticky;
top:0;
z-index:999;
background:black;
color:white;
border-top:8px solid black;
box-shadow:0 2px 10px rgba(0,0,0,.25);

}

.header-container{

max-width:1500px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 30px;
gap:25px;
flex-wrap:wrap;

}

.brand{

display:flex;
align-items:center;
gap:20px;
min-width:320px;

}

.logo{

width:auto;
height:auto;
border:2px solid black;
display:flex;
align-items:center;
justify-content:center;
font-size:.75rem;
text-align:center;

}

.brand h1{

font-size:1.55rem;
font-weight:700;
color:white;

}

.brand p{

font-size:.8rem;
letter-spacing:.16em;
text-transform:uppercase;
margin:0;
color:#ddd;

}

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

nav{

display:flex;
flex-wrap:wrap;
gap:28px;

}

nav a{

color:white;
font-weight:600;
font-size:.95rem;
text-transform:uppercase;
letter-spacing:.08em;
transition:.25s;

}

nav a:hover{

color:#bdbdbd;

}

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

.menu-button{

display:none;
background:none;
border:none;
color:white;
font-size:2rem;
cursor:pointer;

}

@media(max-width:900px){

.header-container{

flex-direction:column;
align-items:flex-start;

}

.menu-button{

display:block;

}

nav{

display:none;
flex-direction:column;
width:100%;
padding-top:20px;

}

nav.show{

display:flex;

}

.brand{

min-width:100%;

}

h1{

font-size:2.6rem;

}

h2{

font-size:1.8rem;

}

section{

padding:70px 7%;

}

}

/*=========================
HERO
==========================*/

.hero{

min-height:auto;
display:flex;
align-items:center;
background:white;
padding:70px 8% 90px;


}

.hero-grid{

display:grid;
grid-template-columns:1.2fr .8fr;
gap:80px;
align-items:center;
max-width:1500px;
margin:auto;

}

.hero-image{

border:2px solid #ddd;
display:flex;
align-items:center;
justify-content:center;
font-size:1rem;
background:#f4f4f4;
color:#666;

}

.hero-tag{

font-size:.9rem;
letter-spacing:.22em;
text-transform:uppercase;
font-weight:700;
margin-bottom:18px;

}

.hero h1{

margin-bottom:25px;

}

.hero p{

font-size:1.2rem;

}

.button{

display:inline-block;
margin-top:18px;
padding:14px 26px;
background:black;
color:white;
font-weight:600;
transition:.25s;

}

.button:hover{

background:#333;

}

@media(max-width:1000px){

.hero-grid{

grid-template-columns:1fr;
gap:50px;

}

}

/*=========================
IMAGE BLOCKS
==========================*/

.image-placeholder{

border:2px solid #ddd;
background:#f7f7f7;
aspect-ratio:16/9;

display:flex;
align-items:center;
justify-content:center;

color:#777;
font-weight:500;

margin:35px 0 12px;

}

.caption {
  font-size: .9rem;
  color: #666;
  font-style: italic;
  margin-bottom: 35px;
}

.caption a {
  color: #0066cc;
  text-decoration: underline;
}

.caption a:hover {
  color: #004499;
}

/*=========================
CONTENT WIDTH
==========================*/

.container{

max-width:1400px;
margin:auto;

}

.two-column{

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;

}

@media(max-width:900px){

.two-column{

grid-template-columns:1fr;

}

}

.one-column{

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;

}

@media(max-width:900px){

.one-column{

grid-template-columns:1fr;

}

}

.feature-box{

padding:30px;
border-left:5px solid black;
background:#fafafa;
margin-bottom:25px;

}

.mode{

margin-bottom:45px;

}

footer{

background:black;
color:white;
padding:60px 8%;

}


 .photo-section {
      margin: 2.5em 0 1.5em;
    }
    .photo-section h2 {
      font-size: 1.25rem;
      margin-bottom: 1em;
      color: #1a1a1a;
    }
    .photo-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .photo-item {
      background: #eaeae6;
      border: 1px solid #ddd;
      display: flex;
      flex-direction: column;
    }
    .photo-item img {
      width: 100%;
      height: auto;
      display: block;
      aspect-ratio: 4/3;
      object-fit: cover;
      background: #ddd;
    }

.expertise-box{

    border-left:5px solid black;
    padding-left:30px;
    margin-bottom:25px;

}

.photo-rights{

padding:35px 8%;
background:#f7f7f7;
color:#555;
font-size:.8rem;
line-height:1.6;

}

.photo-rights p{

max-width:1100px;
margin-bottom:10px;

}

.photo-rights strong{

color:#222;
font-weight:600;

}

/*=========================
LINKEDIN
==========================*/

.linkedin-invite {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    color: #111;
}

.linkedin-invite span {
    font-weight: 600;
}

.linkedin-link {
    display: inline-block;
    line-height: 0;
}

.linkedin-link img {
    width: 40px;
    height: auto;
    display: block;
    transition: filter 0.25s ease, transform 0.25s ease;
}

.linkedin-link:hover img {
    filter: brightness(1.35);
    transform: scale(1.05);
}


</style>
