@charset "utf-8";
/* CSS Document */

:root{
    --sidebar-home:#3d4a3a;
    --sidebar-about:#93a08f;
    --sidebar-services:#b1bcac;
    --content-bg:#eef1ee;
    --ink:#1c2318;
    --ink-soft:#3a413a;
  }

  html,body{height:100%;}
  body{
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:var(--content-bg);
    overflow-x:hidden;
  }
  h1,h2,h3,.brand-font{font-family:'Poppins',sans-serif;}

  /* ---------- App shell ---------- */
  .app-shell{
    display:flex;
    min-height:100vh;
  }

  /* ---------- Sidebar ---------- */
  .sidebar{
    display:flex;
    width:400px;
    flex:0 0 400px;
  }
  .sidebar-panel{
    flex:1;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top:2.25rem;
    cursor:pointer;
    border:none;
    color:#fff;
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:.95rem;
    letter-spacing:.03em;
    transition:filter .25s ease, flex .35s ease;
  }
  .sidebar-panel:hover{filter:brightness(1.08);}
  .sidebar-panel:focus-visible{outline:3px solid #fff; outline-offset:-4px;}
  .sidebar-panel.active{flex:1.15;}

  .sidebar-panel[data-target="home"]{background:var(--sidebar-home); color:#fff;}
  .sidebar-panel[data-target="about"]{background:var(--sidebar-about); color:#22281f;}
  .sidebar-panel[data-target="services"]{background:var(--sidebar-services); color:#22281f;}

  /* ---------- Main column ---------- */
  .main-col{
    flex:1;
    display:flex;
    flex-direction:column;
    min-width:0;
  }

  .top-bar{
    padding:1.6rem 2.75rem 1.1rem;
    border-bottom:2px solid var(--ink);
    background:var(--content-bg);
  }
  .top-bar h2{
    font-size:1.6rem;
    font-weight:700;
    margin:0;
  }

  /* ---------- Sliding content stack ---------- */
  .content-stack{
    position:relative;
    flex:1;
    overflow:hidden;
  }
  .content-panel{
    position:absolute;
    inset:0;
    padding:2.5rem 2.75rem 3rem;
    background:var(--content-bg);
    overflow-y:auto;
    transform:translateX(-102%);
    transition:transform .55s cubic-bezier(.65,0,.35,1);
    will-change:transform;
  }
  .content-panel.in-stack{
    transform:translateX(0);
  }

  /* ---------- Photo collage (Home) ---------- */
  .collage{
    position:relative;
    width:100%;
    max-width:520px;
    height:340px;
  }
  .collage .ph{
    position:absolute;
    border-radius:6px;
    box-shadow:0 12px 28px rgba(0,0,0,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    overflow:hidden;
  }
  .ph svg{width:38%;height:38%;opacity:.85;}
  .ph-1{
    top:0; left:0; width:78%; height:58%;
    background:linear-gradient(135deg,#c9a877,#7a9b8e 65%,#3d5a4c);
    z-index:1;
  }
  .ph-2{
    bottom:0; right:0; width:68%; height:62%;
    background:linear-gradient(135deg,#2f3b45,#4a6b63 60%,#8faa79);
    z-index:2;
    border:6px solid var(--content-bg);
  }

  .sub-copy p{
    max-width:60ch;
    line-height:1.65;
    color:var(--ink-soft);
    margin-bottom:1.35rem;
  }

  /* ---------- About / Services helpers ---------- */
  .stat-chip{
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:8px;
    padding:1.1rem 1.3rem;
  }
  .stat-chip .num{
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:1.6rem;
    color:var(--sidebar-home);
  }

  .service-card{
    border:1px solid rgba(0,0,0,.08);
    border-radius:8px;
    background:#fff;
    padding:1.5rem 1.4rem;
    height:100%;
  }
  .service-card .icon-wrap{
    width:46px;height:46px;
    border-radius:8px;
    background:var(--sidebar-home);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:.9rem;
  }
  .service-card .icon-wrap svg{width:24px;height:24px;fill:#fff;}
  .service-card h3{font-size:1.05rem;font-weight:600;margin-bottom:.5rem;}
  .service-card p{font-size:.92rem;color:var(--ink-soft);margin:0;line-height:1.55;}

  /* ---------- Responsive ---------- */
  @media (max-width:900px){
    .app-shell{flex-direction:column;}
    .sidebar{width:100%;flex:0 0 auto;flex-direction:row;height:64px;}
    .sidebar-panel{padding-top:0;align-items:center;font-size:.82rem;}
    .top-bar{padding:1.2rem 1.25rem .9rem;}
    .content-panel{padding:1.5rem 1.25rem 2rem;}
    .collage{height:260px;}
  }