:root{
  --bg:#0F0F0F; /* background */
  --text:#F5F5F5; /* primary text */
  --muted:#9A9A9A; /* secondary text */
  --accent:#B89B5E; /* warm gold accent */
  --soft:#1F1F1F; /* hover / highlight */
  --max:1600px;
  --header-height:120px;
}
/* Make in-page anchor jumps respect the fixed header and enable smooth scrolling */
html{
  scroll-padding-top:calc(var(--header-height) + 12px);
  scroll-behavior:smooth;
}
section[id]{scroll-margin-top:calc(120px + 12px)}
*{box-sizing:border-box}
html,body{height:100%}
.font-heading{font-family:'Playfair Display', serif}
body{font-family:'Lato','Open Sans',Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;line-height:1.45;color:var(--text);background:var(--bg);margin:0}
main{padding-top:var(--header-height)}
h1,h2,h3,.brand{font-family:'Playfair Display', serif;margin:0}
.container{max-width:var(--max);margin:0 auto;padding:1rem}
.site-header{border-bottom:1px solid var(--soft);background:var(--bg);position:fixed;top:0;left:0;width:100%;z-index:999}
/* layout: left and right navs with centered brand */
.site-header .container{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 1rem;height:var(--header-height)}
.site-header .brand{position:absolute;left:50%;transform:translateX(-50%);z-index:10030;padding:1rem 0;font-size:1.125rem;margin:0;display:flex;align-items:center;flex-direction:column;gap:.25rem}
.site-header .brand .brand-text{display:block;text-align:center;font-size:1.5rem;letter-spacing:0.1em}
.brand-logo{height:44px;width:auto;display:block}
.brand-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.25rem;flex-direction: column;}
.brand-link:focus{outline:none !important;outline-offset:none !important;border-radius:none!important;}
.site-header .nav{display:flex;gap:1rem;flex:0 0 auto}
.nav a{color:inherit;text-decoration:none;letter-spacing:0.1em}
.hero{padding:0rem 0;background-color:var(--soft);background-size:cover;background-position:center;background-repeat:no-repeat;background-blend-mode:multiply;display:flex;align-items:center;width:100%;min-height:60vh}
.hero h2{margin:0 0 .5rem;font-size:1.6rem}
.hero-inner{display:flex;align-items:center;gap:1.25rem;justify-content:center}

.hero-content{flex:1;text-align:center;max-width:980px;margin:0 auto}

/* Hero content design: backdrop, typography, CTA */
.hero-content{background:linear-gradient(180deg, rgba(15,15,15,0.6), rgba(15,15,15,0.25));padding:2.25rem;border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,0.6);animation:fadeUp .6s ease both}
.hero-content h2{font-size:clamp(2rem,6vw,4rem);line-height:1.02;margin-bottom:.5rem;color:var(--text);font-weight:600}
.hero-content p{color:var(--muted);margin-bottom:1.25rem;font-size:1.125rem}
.cta{display:inline-block;margin-top:1rem;padding:.85rem 1.5rem;background:var(--accent);color:var(--bg);border-radius:10px;text-decoration:none;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;box-shadow:0 8px 26px rgba(184,155,94,0.12)}
.cta:hover,.cta:focus{transform:translateY(-4px);filter:brightness(.98);box-shadow:0 18px 40px rgba(184,155,94,0.18)}

@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Make backdrop lighter on very small screens for legibility */
@media(max-width:480px){
  .hero-content{background:linear-gradient(180deg, rgba(15,15,15,0.5), rgba(15,15,15,0.12));padding:1.25rem;border-radius:8px}
  .cta{padding:.6rem 1rem}
}
.cta{display:inline-block;margin-top:1rem;padding:.6rem 1rem;background:var(--accent);color:#fff;border-radius:6px;text-decoration:none}
.gallery h3,.about h3,.contact h3{margin-top:0}
.gallery{ text-align:center }
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;justify-content:center;margin:0 auto;max-width:1600px;width:100%}
.grid .work-item{display:block;width:100%;margin:0;overflow:hidden;aspect-ratio:4/3;position:relative}
.work-item.hidden{display:none}
.grid img{width:100%;height:100%;display:block;cursor:pointer;border-radius:10px;object-fit:cover;opacity:0.7;transition:opacity .28s ease,transform .28s ease}

/* caption overlay on hover/focus/active for work items */
.work-item figcaption{position:absolute;inset:0;padding:1.5rem 1.25rem;border-radius:10px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.6) 100%);color:var(--text);opacity:0;transform:translateY(6px);transition:opacity .22s ease,transform .22s ease}
.work-item figcaption strong{color:var(--text);font-size:1.05rem}
.work-item figcaption p{color:var(--muted);margin:0}
.work-item:hover img,.work-item:focus-within img,.work-item.active img{opacity:1;transform:scale(0.98)}
.work-item:hover figcaption,.work-item:focus-within figcaption,.work-item.active figcaption{opacity:1;transform:translateY(0)}

@media(max-width:720px){
  .work-item figcaption{padding:1rem}
}

/* Hover/focus: restore to full opacity and give a subtle lift (accessibility: focus-visible included) */
@media (hover: hover) {
  .grid img:hover{opacity:1;transform:scale(0.98)}
}
.grid img:focus-visible{opacity:1;outline:3px solid rgba(184,155,94,0.14);transform:scale(0.98)}
.work-item strong{display:block;color:var(--text);margin-bottom:.35rem;font-size:1.125rem;font-weight:600}
.about,.contact{padding:1rem}
.intro{
  max-width:900px;
  margin:0 auto;
  text-align:center;
  padding:clamp(1rem,4vw,2.5rem) 1rem;
}

.intro h2{
  font-size:clamp(1.4rem,3.5vw,2.4rem);
  margin-bottom:.75rem;
    letter-spacing:0.05em;

}

.intro p{
  font-size:clamp(.95rem,1.6vw,1.125rem);
  line-height:1.65;
  color:var(--muted);
  margin:0 auto;
  max-width:900px;
  letter-spacing:0.1em;
}

/* About-me section: photo + bio layout */
.about-me{padding:3rem 1rem 2.5rem;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));}
.about-me-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:480px 1fr;gap:2rem;align-items:center}
.about-photo{display:flex;align-items:center;justify-content:center}
.about-photo img{width:460px;height:460px;object-fit:cover;border-radius:14px;border:4px solid rgba(255,255,255,0.02);box-shadow:0 12px 30px rgba(0,0,0,0.45);transition:transform .18s ease}
.about-photo img:hover{transform:translateY(-6px) scale(1.02)}
.about-bio h3{font-size:1.6rem;margin:0 0 .5rem;letter-spacing:0.04em}
.about-bio h3::after{content:"";display:block;width:64px;height:4px;background:var(--accent);border-radius:3px;margin-top:.6rem}
.about-bio p{color:var(--muted);line-height:1.7;margin-top:1rem;font-size:18px;letter-spacing:0.1em}

@media(max-width:900px){
  .about-me-inner{grid-template-columns:1fr;gap:1.25rem;text-align:center}
  .about-photo img{width:200px;height:200px}
  .about-bio h3::after{margin-left:auto;margin-right:auto}
  .about-bio p{text-align:left}
}


@media (min-width:1000px) {
  .intro{padding:3rem 1.5rem}
  .intro h2{font-size:clamp(1.6rem,2.2vw,2.6rem);text-align:center}
  .intro p{font-size:1.125rem;max-width:800px}
}
/* Gallery actions (e.g. View more) */
.gallery-actions{margin-top:1.75rem;text-align:center}
.view-more{padding:.85rem 1.5rem;border-radius:10px;font-size:1rem;background:transparent;color:var(--accent);border:1px solid var(--accent);box-shadow:none;transition:background .22s ease,color .22s ease,transform .18s ease;min-width:260px;display:inline-block;text-align:center}
.view-more:hover,.view-more:focus{background:var(--accent);color:var(--bg);text-decoration:none}
/* Contact form layout and controls */
.contact{max-width:1000px;margin:0 auto;padding-bottom:2rem}
.contact form{display:block;margin-top:1rem;max-width: 1000px;margin: auto;}
.contact .form-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.contact label{display:block;font-weight:600;margin-bottom:.25rem}
.contact input[type="text"],.contact input[type="email"],.contact textarea{width:100%;padding:1.2rem 1.2rem;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.02);color:var(--text);border-radius:8px;box-shadow:inset 0 1px 0 rgba(0,0,0,0.25);transition:border-color .15s ease,box-shadow .15s ease;margin-top: 10px;}
.contact input:focus,.contact textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 6px 18px rgba(184,155,94,0.08)}
.contact textarea{min-height:140px;resize:vertical}
.contact .row{display:block}
.contact .actions{margin-top:1rem;display:flex;gap:1rem;align-items:center}
.contact .actions button{background:var(--accent);color:var(--bg);border:0;padding:.8rem 1.25rem;border-radius:10px;cursor:pointer;font-weight:600}
.contact .actions .muted{margin:0;font-size:.95rem;color:var(--muted)}
.contact #form-status{margin-top:.5rem;color:var(--muted);font-style:italic}

/* Contact form submit: full-width, centered text, envelope icon */
#contact-form .submit-btn, #contact-form button[type="submit"]{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.95rem 1rem;
  background:var(--accent);
  color:var(--bg);
  border-radius:10px;
  border:0;
  font-weight:700;
  text-align:center;
  box-shadow:0 10px 30px rgba(184,155,94,0.12);
  transition:transform .14s ease,box-shadow .14s ease,filter .12s ease;
}
#contact-form .submit-btn i{font-size:1rem;line-height:1;display:inline-block;color:inherit}
#contact-form .submit-btn:hover,#contact-form .submit-btn:focus{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(184,155,94,0.16);
  filter:brightness(.98);
}

@media(min-width:720px){
  /* Keep submit full-width on small screens, optional narrower form on larger screens */
  #contact-form .submit-btn{max-width:100%;margin:0 auto;}
}

/* Mailto link styling in contact: accent color, small pill, icon support */
.contact p a, .muted a{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.28rem .5rem;
  border-radius:8px;
  transition:background .18s ease,color .18s ease,transform .12s ease;
}
.contact p a .bi{font-size:1rem;color:inherit}
.contact p a:hover,.contact p a:focus{
  background:rgba(184,155,94,0.12);
  color:var(--text);
  transform:translateY(-2px);
  text-decoration:none;
}
.contact p a:focus{outline:3px solid rgba(184,155,94,0.14);outline-offset:2px}

@media(min-width:720px){
  .contact .form-grid{grid-template-columns:1fr 1fr}
  .contact .form-grid .full{grid-column:1/-1}
  .contact label{margin-bottom:.5rem}
}

/* Keep existing generic button rule below for fallback */
button{background:var(--accent);color:#fff;border:0;padding:.6rem 1rem;border-radius:6px;cursor:pointer}
.muted{color:var(--muted);font-size:.95rem}
.site-footer{border-top:1px solid var(--soft);padding:1rem 0;margin-top:2rem;text-align:center}

/* Footer social links */
.site-footer .social-links{margin-top:.6rem;display:flex;gap:.5rem;justify-content:center;align-items:center}
.site-footer .social-links a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;color:var(--muted);background:transparent;text-decoration:none;transition:background .15s ease,color .15s ease,transform .12s ease}
.site-footer .social-links a i{font-size:1.05rem;line-height:1}
.site-footer .social-links a:hover,.site-footer .social-links a:focus{background:rgba(184,155,94,0.12);color:var(--accent);transform:translateY(-3px);outline:none}
.site-footer .social-links a:focus{box-shadow:0 0 0 3px rgba(184,155,94,0.12)}

/* hidden state for components — scoped to lightbox to avoid being overridden */
.lightbox.hidden{display:none}

/* Testimonials — larger, centered card layout */
.testimonials{padding:4rem 1rem;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));}
.testimonials .container{max-width:1200px;margin:0 auto;text-align:center}
.testimonials h2{margin-bottom:1.5rem;font-size:clamp(1.6rem,3.6vw,2.4rem);letter-spacing:0.06em}
.testimonial-slider{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center;align-items:stretch}
.testimonial{flex:1 1 420px;max-width:720px;background:rgba(255,255,255,0.02);border-radius:16px;padding:1.75rem 1.5rem 2rem;box-shadow:none;text-align:center;position:relative;overflow:hidden;transition:transform .22s ease}
.testimonial::before{
  content:"“";
  position:absolute;
  left:16px;
  top:12px;
  font-family:'Playfair Display', serif;
  font-size:64px;
  color:rgba(184,155,94,0.08);
  line-height:1;
  z-index:0;
  pointer-events:none;
}
.testimonial p{position:relative;z-index:1;font-style:italic;color:var(--text);margin:0 0 1rem;font-size:1.125rem;line-height:1.6}
.testimonial cite{position:relative;z-index:1;display:block;color:var(--muted);font-weight:700;font-style:normal;text-align:center;margin-top:.5rem}
.testimonial:hover{transform:translateY(-8px)}

@media(max-width:920px){
  .testimonials{padding:3rem 0}
  .testimonial{flex:1 1 340px;max-width:640px;padding:1.5rem 1.25rem}
  .testimonial::before{font-size:68px;top:-12px}
}

@media(max-width:720px){
  .testimonials{padding:2rem 0}
  .testimonial{max-width:100%;text-align:center;padding:1.25rem 1rem}
  .testimonial::before{left:50%;top:-8px;font-size:56px}
  .testimonial p{font-size:1.03rem}
}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:10010}
.lightbox .lb-inner{position:relative;display:inline-block;max-width:90%}
.lightbox img{max-width:100%;max-height:80vh;height:auto;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,0.6);display:block}
.lb-close{position:absolute;right:16px;top:16px;background:transparent;color:#fff;border:0;font-size:2rem;z-index:10011}
.lightbox .lb-caption{
  position:absolute;
  left:16px;
  right:16px;
  bottom:12px;
  transform:none;
  color:var(--text);
  box-sizing:border-box;
  text-align:center;
  font-size:1rem;
  background:rgba(0,0,0,0.45);
  padding:.6rem 1rem;
  border-radius:8px;
  z-index:10012;
}

/* Responsive */
@media(min-width:800px){
  /* Full-height hero on larger screens */
  .hero{padding:0;min-height:100vh}
  .brand{font-size:1.25rem}
  .brand-logo{height:44px}
}

/* small screens: slightly taller hero but not full viewport to avoid oversize */
@media (max-width:480px) {
  .hero{min-height:55vh}
}

/* On small screens keep brand in normal flow to avoid overlap */
@media (max-width:600px) {
  .site-header .container{display:flex;flex-direction:row}
  .site-header .brand{position:absolute;left:50%;transform:translateX(-50%);padding:0;font-size:1.05rem;z-index:10030}
}

/* Responsive hero: stack on small screens */
@media (max-width:800px) {
  .hero-inner{flex-direction:column}
  .hero-content{text-align:center}
}

/* Gallery responsive breakpoints: more columns on wide screens, fewer on small */
@media (min-width:1200px) {
  .grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}
}

@media (max-width:800px) {
  .grid{grid-template-columns:repeat(2,1fr);gap:1rem}
}

@media (max-width:600px) {
  .grid{grid-template-columns:1fr;gap:1rem}
  .grid .work-item{margin-bottom:1rem}
}

/* Mobile overrides: reduce header size, increase tap targets, make view-more full-width */
@media (max-width:720px){
  :root{--header-height:72px}
  .site-header .brand .brand-text{font-size:1rem}
  .brand-logo{height:36px}
  .site-header .nav a{padding:.5rem}
  .view-more{min-width:0;width:100%}
}

/* Mobile nav toggle button */
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  color:var(--text);
  padding:.5rem;
  width:48px;
  height:48px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* two-line icon — built with a center bar and ::before/::after for top/bottom */
.nav-icon{
  position:relative;
  display:inline-block;
  width:22px;
  height:2px;
  background:currentColor;
  border-radius:2px;
  transition:transform .25s ease,opacity .25s ease;
}
.nav-icon::before,
.nav-icon::after{
  content:'';
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background:currentColor;
  border-radius:2px;
  transition:transform .25s ease,top .25s ease,opacity .25s ease;
}
.nav-icon::before{top:-7px}
.nav-icon::after{top:7px}

@media (max-width:720px){
  .nav-toggle{display:flex;position:relative;z-index:10020}
  .site-header{height: calc(var(--header-height) + 20px);padding: .75rem 0;}
  .site-header .nav{display:none}
  .site-header.nav-open .nav{display:flex;flex-direction:column;align-items:center;gap:0;padding:.75rem 0;background:var(--bg);position:fixed;left:0;right:0;top:calc(var(--header-height) + 20px);z-index:10009;border-top:1px solid rgba(255,255,255,0.02)}
  .site-header.nav-open .nav a{display:block;padding:1rem 1rem;width:100%;text-align:center}

  /* when open (aria-expanded="true" on button) morph into an X */
  .nav-toggle[aria-expanded="true"] .nav-icon,
  .nav-toggle.open .nav-icon{
    background:transparent;
  }
  .nav-toggle[aria-expanded="true"] .nav-icon::before,
  .nav-toggle.open .nav-icon::before{
    top:0;
    transform:rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-icon::after,
  .nav-toggle.open .nav-icon::after{
    top:0;
    transform:rotate(-45deg);
  }
}

/* Call button: hidden on desktop, visible on small screens to the right */
.call-btn{display:none}
@media (max-width:720px){
  .call-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:center;
    background:var(--accent);
    color:var(--bg);
    width:48px;
    height:48px;
    padding:0;
    border-radius:10px;
    margin-left:8px;
    text-decoration:none;
    font-weight:700;
    z-index:10025;
  }

  .call-btn i{
    font-size:20px;
    line-height:1;
    display:inline-block;
    color:#fff;
  }
}