:root{
  --bg:#fbfaf7;
  --ink:#151712;
  --green:#355a3a;
  --gold:#bf812c;
  --line:#e7e0d7;
  --panel:#fffdfa;
  --cream:#f7f3ee;
}
*{box-sizing:border-box}
html{margin:0;width:100%;background:var(--bg)}
body{margin:0;min-width:1640px;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:14px}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer}
.site{width:1640px;margin:0 auto;overflow:hidden;background:var(--bg)}

main{
  position:relative;
  padding:14px 36px 16px;
  background:linear-gradient(90deg,rgba(190,203,181,.08),transparent 12%,transparent 88%,rgba(190,203,181,.05));
}
main:before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:210px;height:720px;
  background:url("../images/Fern_Artwork.png") left top/100% auto no-repeat;
  opacity:.38;
  pointer-events:none;
}
main>*{position:relative;z-index:1}

.panel{width:1568px;margin:0 auto 16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.75)}
.studio-title{height:108px;display:grid;grid-template-columns:80px 1fr auto;align-items:center;padding:0 20px}
.title-icon{width:65px;height:65px;border-radius:11px;background:#fff0f6;display:grid;place-items:center}
.title-icon img{width:65px;height:65px;object-fit:contain}
.studio-title h1{font-size:22px;margin:0 0 6px;font-weight:700}
.studio-title p{font-size:14px;margin:0}
.how-button{border:1px solid var(--line);border-radius:8px;padding:12px 15px;background:#fff;font-weight:700;font-size:14px}

.category-panel{padding:18px 20px 22px;background:#f8f5f0}
.category-heading h2{font-size:21px;margin:0 0 7px}
.category-heading p{font-size:14px;margin:0}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 28px;margin-top:22px}
.category-card{overflow:hidden;border:1px solid var(--line);border-radius:9px;background:white;box-shadow:0 1px 4px rgba(0,0,0,.03)}
.category-card>img{width:100%;height:176px;object-fit:cover;display:block}
.card-body{padding:13px 14px 15px}
.card-body h3{font-size:16px;margin:0 0 10px}
.card-body p{font-size:14px;line-height:1.55;margin:0 0 12px}
.card-body a{height:41px;border:2px solid var(--green);border-radius:6px;display:flex;align-items:center;padding:0 12px;font-weight:700;font-size:14px;color:#294d31}
.card-body a .view-icon{width:20px;height:20px;display:block;object-fit:contain;margin-right:8px;flex:0 0 18px}

.feature-row{width:1500px;margin:0 auto 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:17px}
.feature-row article{height:112px;border:1px solid var(--line);border-radius:9px;background:#fff;display:flex;align-items:center;padding:14px 18px;gap:15px}
.feature-row article>img{width:70px;height:70px;object-fit:contain}
.feature-row h3{font-size:15px;margin:0 0 6px}
.feature-row p{font-size:14px;line-height:1.5;margin:0}
.leaf{position:absolute;top:0;bottom:0;width:250px;background:url("../images/Fern_Artwork.png") center/cover no-repeat;opacity:.30}
.leaf-left{left:0}.leaf-right{right:0;transform:scaleX(0)}
.tools-col a{display:flex;align-items:center;gap:7px}
.tools-col a img{width:30px;height:30px;object-fit:contain}
.trust{text-align:center}


/* =========================================================
   MOCKUP STUDIO FERN — 200% SCALE TEST
   The fern artwork itself is doubled, not just its container.
   ========================================================= */
body main::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:640px !important;
  height:1988px !important;
  min-height:1988px !important;
  background-image:url("../images/Fern_Artwork.png") !important;
  background-position:left top !important;
  background-size:auto 1988px !important;
  background-repeat:no-repeat !important;
  opacity:.34 !important;
  pointer-events:none !important;
}


/* =========================================================
   MOCKUP STUDIO - MAGIC POLISH
   Keeps the existing 4 x 2 layout and all card content.
   ========================================================= */

/* Top studio banner */
.studio-title{
  box-shadow:0 3px 12px rgba(54,44,35,.04);
}

.studio-star{
  color:var(--gold);
  font-size:17px;
  vertical-align:3px;
}

.how-button{
  transition:transform .16s ease, background .16s ease,
             border-color .16s ease, box-shadow .16s ease;
}

.how-button:hover{
  transform:translateY(-2px);
  border-color:#cfc6bc;
  background:#fffdfa;
  box-shadow:0 6px 14px rgba(54,44,35,.07);
}

/* More breathing room before the cards */
.category-heading p{
  color:#555950;
  line-height:1.45;
}

.category-grid{
  margin-top:26px;
}

/* Category cards */
.category-card{
  position:relative;
  border-radius:11px;
  border-color:#e1dad2;
  box-shadow:0 2px 7px rgba(54,44,35,.045);
  transition:transform .17s ease, box-shadow .17s ease,
             border-color .17s ease;
}

.category-card:hover{
  transform:translateY(-4px);
  border-color:#d2c8be;
  box-shadow:0 10px 22px rgba(54,44,35,.10);
}

.category-card>img{
  transition:transform .22s ease, filter .22s ease;
}

.category-card:hover>img{
  transform:scale(1.025);
  filter:saturate(1.03);
}

.card-body{
  background:#fffdfa;
}

.card-body h3{
  color:#263d2a;
  margin-bottom:8px;
}

.card-body p{
  color:#555950;
}

/* View buttons */
.card-body a{
  border:1px solid var(--green);
  border-radius:7px;
  background:#fff;
  transition:transform .15s ease, background .15s ease,
             box-shadow .15s ease;
}

.card-body a:hover{
  transform:translateY(-1px);
  background:#f0f5ed;
  box-shadow:0 3px 8px rgba(53,90,58,.10);
}

.card-body a .view-icon{
  transition:transform .15s ease;
}

.card-body a:hover .view-icon{
  transform:translateX(2px);
}

/* Bottom feature cards get the same quiet interaction */
.feature-row article{
  transition:transform .16s ease, box-shadow .16s ease,
             border-color .16s ease;
}

.feature-row article:hover{
  transform:translateY(-2px);
  border-color:#d8d0c7;
  box-shadow:0 7px 17px rgba(54,44,35,.07);
}

.feature-row h3{
  color:#294d31;
}