
  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:100px 0 90px;
    overflow:hidden;
    background:
      linear-gradient(var(--paper), var(--paper)) padding-box,
      repeating-linear-gradient(0deg, transparent, transparent 39px, var(--line) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, var(--line) 40px);
    background-blend-mode:normal;
  }
  .hero::before{
    content:'';
    position:absolute; inset:0;
    background:
      repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(95,110,82,0.06) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(95,110,82,0.06) 40px);
    pointer-events:none;
  }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;
    position:relative; z-index:1;
  }
  .eyebrow{
    color:var(--sage-deep); margin-bottom:20px; display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{ content:''; width:28px; height:1px; background:var(--brass); display:inline-block; }
  .hero h1{
    font-size:3.4rem; line-height:1.08; margin-bottom:24px;
  }
  .hero h1 em{ font-style:italic; color:var(--sage-deep); }
  .hero p.lead{
    font-size:1.1rem; color:var(--ink-soft); max-width:480px; margin-bottom:36px;
  }
  .hero-ctas{ display:flex; gap:16px; margin-bottom:44px; }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 28px; font-size:0.92rem; font-weight:600;
    border-radius:var(--radius); transition:all .2s;
  }
  .btn-primary{ background:var(--sage-deep); color:var(--white); }
  .btn-primary:hover{ background:var(--ink); }
  .btn-ghost{ border:1px solid var(--ink); color:var(--ink); }
  .btn-ghost:hover{ background:var(--white); }
  .hero-stats{ display:flex; gap:40px; }
  .stat-num{ font-family:'Fraunces',serif; font-size:1.9rem; color:var(--brass); }
  .stat-label{ font-family:'IBM Plex Mono',monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); }

  .hero-visual{ position:relative; height:460px; }
  .hero-img{
    position:absolute; border-radius:var(--radius); object-fit:cover;
    box-shadow:0 24px 48px -12px rgba(31,36,33,0.25);
  }
  .hero-img.one{ width:280px; height:360px; top:0; right:60px; z-index:2; }
  .hero-img.two{ width:220px; height:280px; bottom:0; left:0; z-index:1; }
  .hero-tag{
    position:absolute; bottom:28px; right:0px; background:var(--white);
    padding:16px 20px; border-radius:var(--radius); box-shadow:0 12px 30px rgba(31,36,33,0.15);
    z-index:3; max-width:220px;
  }
  .hero-tag .mono{ color:var(--brass); margin-bottom:6px; display:block; }
  .hero-tag p{ font-size:0.85rem; color:var(--ink-soft); }

  /* ---------- SECTION SHELL ---------- */
  section.category{ padding:96px 0; }
  section.category.alt{ background:var(--paper-deep); }
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:52px; gap:24px; flex-wrap:wrap;
  }
  .section-head .mono{ color:var(--brass); margin-bottom:10px; display:block; }
  .section-head h2{ font-size:2.3rem; }
  .section-cta{
    display:inline-flex; align-items:center; gap:8px;
    font-weight:600; font-size:0.92rem; color:var(--sage-deep);
    border-bottom:1.5px solid var(--sage-deep); padding-bottom:3px;
    white-space:nowrap;
  }

  /* ---------- PRO CARDS ---------- */
  .pro-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
  .pro-card{
    background:var(--white); border-radius:var(--radius); overflow:hidden;
    border:1px solid var(--line);
    transition:transform .25s, box-shadow .25s;
  }
  .pro-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -16px rgba(31,36,33,0.18); }
  .pro-photo{ position:relative; height:220px; overflow:hidden; margin:16px 16px 0; }
  .pro-photo img{ width:100%; height:100%; object-fit:cover; }
  .pro-body{ padding:20px; }
  .pro-name{ font-size:1.15rem; margin-bottom:2px; }
  .pro-role{ font-size:0.85rem; color:var(--sage-deep); font-weight:600; margin-bottom:12px; }
  .pro-desc{ font-size:0.87rem; color:var(--ink-soft); margin-bottom:16px; }
  .pro-foot{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:14px; }
  .pro-meta{ color:var(--ink-soft); }
  .pro-link{ font-weight:600; font-size:0.82rem; color:var(--brass); }

  @media(max-width:900px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-visual{ display:none; }
    .pro-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .menu{ display:none; }
    .hero h1{ font-size:2.4rem; }
  }
  @media(max-width:768px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-visual{ display:none; }
    .pro-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .menu{ display:none; }
    .hero h1{ font-size:2.4rem; }
    .logo img{width: 100px;}
    
  }
