:root{
  --brand: #558b61;
  --brand-dark: #3d6f4e;
  --border: rgba(0,0,0,.10);
  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --radius: 16px;
}

/* Studio section wrapper */
.studio-section{
  padding: 2.5rem 0;
}

/* Category card */
.studio-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.studio-card-header{
  padding: 1.1rem 1.1rem .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.studio-card-title{
  margin: 0;
  font-weight: 600;
}

.studio-card-note{
  margin: .15rem 0 0;
  color: #6b7280;
  font-size: .95rem;
}

/* Gallery grid */
.studio-grid{
  padding: 0 1.1rem 1.1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

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

.studio-thumb{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #e5e7eb;
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
}

.studio-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.studio-thumb:hover img{
  transform: scale(1.05);
}

.studio-thumb::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.18), rgba(0,0,0,0));
  opacity: 0;
  transition: opacity .25s ease;
}

.studio-thumb:hover::after{ opacity: 1; }

/* Optional: small “View all” link style */
.studio-viewall{
  color: var(--brand);
  font-weight: 600;
}

.studio-viewall:hover{
  color: var(--brand-dark);
}
</style>
<style>
:root{
  --brand:#558b61;
  --brand-dark:#3d6f4e;
  --bg:#f6f7f8;
  --card:#fff;
  --muted:#6b7280;
  --border: rgba(0,0,0,.10);
  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --radius: 18px;
}

body{ background: var(--bg); }

/* Buttons used in your HTML */
.btn-outline-brand{
  border: 1px solid var(--brand);
  color: var(--brand);
  background: transparent;
}
.btn-outline-brand:hover{
  background: var(--brand);
  color: #fff;
}

/* Sections used in your HTML */
.section{ padding: 2.5rem 0; }
.section-title{ font-weight: 800; letter-spacing: -0.01em; }
.section-sub{ color: var(--muted); }

/* Your card + header structure */
.cat-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cat-head{
  padding: 1rem 1.1rem .75rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}
.cat-head .left{
  display:flex;
  align-items:center;
  gap: .75rem;
}
.cat-icon{
  width: 38px; height: 38px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(85,139,97,.12);
  border: 1px solid rgba(85,139,97,.20);
  color: var(--brand);
}
.cat-title{ margin:0; font-weight: 800; }
.cat-note{ margin:.15rem 0 0; color: var(--muted); font-size: .95rem; }

.cat-body{ padding: 0 1.1rem 1.1rem; margin:0 auto; }

/* Gallery grid + thumbs */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 16px;
}
@media (max-width: 992px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px){
  .gallery-grid{
    grid-template-columns: 1fr;            /* phones */
  }
}

.gallery-grid .thumb{
  aspect-ratio: 3 / 4;
}

.thumb{
  position: relative;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: #e5e7eb;
  aspect-ratio: 5 / 4;
  cursor: zoom-in;
}
.thumb img{
  object-position: center top;
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .35s ease;
}
.thumb:hover img{ transform: scale(1.05); }

.thumb::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.18), rgba(0,0,0,0));
  opacity:0;
  transition: opacity .25s ease;
}
.thumb:hover::after{ opacity:1; }

/* Optional hero spacing if you add hero later */

.hero{ padding: 2rem 0 1rem;
  background: linear-gradient(135deg, rgba(85,139,97,.10), rgba(255,255,255,.92));
  border-bottom: 1px solid rgba(0,0,0,.06);
 }
 
/* HERO (video background) */

.hero.hero-video{
  position: relative;
  min-height: 62vh;
  display: grid;
  place-items: center;
  overflow: hidden;

  /* optional: keep a soft fallback background */
  background: linear-gradient(135deg, rgba(85,139,97,.10), rgba(255,255,255,.92));
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.hero-bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;

  opacity: 1; /* start here, adjust later */
  filter: saturate(.9) contrast(.95);
}

.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255,255,255,.35); /* start here, adjust later */
}

.hero-content{
  position: relative;
  z-index: 2;
  padding: 3.5rem 0;
}



/*FEATURED AREA*/
.feature-panel{
  background: rgba(85,139,97,.06);
  border: 1px solid rgba(85,139,97,.18);
  border-radius: 16px;
  padding: 18px;
}

.feature-panel .cat-title{
  font-size: 1.25rem;
  font-weight: 800;
}

.feature-panel .cat-note{
  font-size: .98rem;
}

.feature-panel p{
  font-size: 1.02rem;
  line-height: 1.55;
}

.feature-actions .btn{
  padding: .55rem .9rem;
  border-radius: 12px;
}

/*social pinned bottom-right*/
.feature-right{
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* top content + bottom social */
  padding: 6px 6px 6px 0;         /* keeps it flush with image */
}

.feature-title{
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.feature-sub{
  color: var(--muted);
  font-size: .98rem;
}

.feature-desc{
  margin-top: .75rem;
  color: #374151;
  font-size: 1.05rem;      /* bigger */
  line-height: 1.7;        /* more spacing */
  max-width: 520px;
}

.feature-bottom{
  display: flex;
  justify-content: flex-end; /* bottom-right */
  padding-top: 10px;
}

.social-row a{
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  color: var(--brand);
  text-decoration: none;
  margin-left: 8px;
}
.social-row a:hover{
  background: var(--brand);
  color: #fff;
}

/*CTA SECTION*/
.cta-section{ padding: 2.2rem 0; }

.cta-card{
  background: linear-gradient(135deg, rgba(85,139,97,.10), rgba(255,255,255,.95));
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 18px 18px;
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 16px;
  align-items: center;
}

.cta-avatar img{
  width: 90px;
  height: 90px;
  object-fit: contain;
}

.cta-title{
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.cta-sub{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 768px){
  .cta-card{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .cta-avatar{ display:flex; justify-content:center; }
  .cta-action{ display:flex; justify-content:center; }
}

/*BACK TO TOP*/
.back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 14px;               /* modern, not a circle */
  display: grid;
  place-items: center;
  background: #558b61;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 9999;
}

.back-to-top:hover{
  background: #3d6f4e;
  color: #fff;
}

.back-to-top.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}