/* ---------- self-hosted fonts ---------- */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/work-sans-v24-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/work-sans-v24-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-v38-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-v20-latin-600.woff2') format('woff2');
}

:root{
    --ink:#1f221f;
    --ink-soft:#4b4f47;
    --ink-faint:#7a7e76;
    --forest:#2f4014;
    --paper:#f7f2e7;
    --paper-deep:#efe8d6;
    --sand:#c9d9a0;
    --green-deep:#45610e;
    --green-light:#b3d65e;
    --vista-green:#b3d65e;
    --sage:#5c7a2e;
    --white:#ffffff;
    --line:rgba(31,34,31,0.14);
    --danger:#c1442e;
    --danger-bg:#fbe9e5;
    --warn:#c9a227;
    --info:#3f6fb0;
    --radius-s:6px;
    --radius-m:10px;
    --radius-l:18px;
    --maxw:1120px;
    --shadow-s:0 2px 8px rgba(31,34,31,0.05);
    --shadow-m:0 10px 30px rgba(31,34,31,0.07);
    --shadow-l:0 24px 60px -20px rgba(31,34,31,0.22);
    --ease:cubic-bezier(0.16,1,0.3,1);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; overflow-x:hidden;}
  body{background:var(--paper); color:var(--ink); overflow-x:hidden;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    line-height:1.12;
    margin:0;
    color:var(--ink);
    letter-spacing:-0.015em;
  }
  h2{ letter-spacing:-0.02em; }

  p{margin:0;}
  a{color:inherit; text-decoration:none;}
  ul{margin:0; padding:0; list-style:none;}
  img,svg{display:block; max-width:100%;}

  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--green-deep);
    font-weight:500;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:16px; height:1px;
    background:var(--green-deep);
    display:inline-block;
  }

  .mono{font-family:'IBM Plex Mono', monospace;}

  .dial{flex-shrink:0;}
  .dial circle{fill:none; stroke:currentColor;}
  .dial .tick{stroke:currentColor; stroke-width:2; stroke-linecap:round;}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'IBM Plex Mono', monospace;
    font-size:13.5px;
    letter-spacing:0.03em;
    font-weight:600;
    padding:13px 24px;
    border-radius:999px;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    background:none;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn:active{transform:translateY(0);}
  .btn:focus-visible{outline:2px solid var(--forest); outline-offset:3px;}
  .btn:disabled{opacity:0.5; cursor:not-allowed; transform:none;}
  .btn-primary{background:var(--ink); color:var(--white); box-shadow:0 8px 20px rgba(31,34,31,0.18);}
  .btn-primary:hover{background:var(--forest); box-shadow:0 12px 28px rgba(31,34,31,0.24);}
  .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
  .btn-ghost:hover{border-color:var(--ink); background:rgba(31,34,31,0.03);}
  .btn-green{background:linear-gradient(135deg, var(--green-deep), #587a17); color:#faf9f5; box-shadow:0 8px 22px rgba(69,97,14,0.28), inset 0 1px 0 rgba(255,255,255,0.14);}
  .btn-green:hover{box-shadow:0 14px 30px rgba(69,97,14,0.36), inset 0 1px 0 rgba(255,255,255,0.18); filter:brightness(1.03);}
  .btn-danger{background:transparent; color:var(--danger); border-color:rgba(193,68,46,0.35);}
  .btn-danger:hover{background:var(--danger-bg); border-color:var(--danger);}
  .btn-sm{padding:9px 16px; font-size:12px;}

  /* ---------- header (marketing site) ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:#fff;
    border-bottom:1px solid rgba(31,34,31,0.28);
    box-shadow:0 4px 16px rgba(31,34,31,0.1);
    transition:box-shadow 0.2s ease;
  }
  header.scrolled{box-shadow:0 6px 24px rgba(31,34,31,0.14);}
  :root[data-theme="dark"] header{ background:#15170f; border-bottom-color:rgba(255,255,255,0.16); box-shadow:0 4px 16px rgba(0,0,0,0.4); }
  .nav-row{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
  .logo{display:flex; align-items:center; gap:11px; font-family:'Fraunces', serif; font-weight:600; font-size:19px; color:var(--ink); letter-spacing:0.01em;}
  .logo .dial{color:var(--green-deep); width:24px; height:24px; transition:transform 0.3s var(--ease);}
  .logo:hover .dial{transform:rotate(8deg) scale(1.05);}
  .logo b{color:var(--green-deep); font-weight:600;}
  .logo img.mark{height:36px; width:auto; display:block;}
  footer .logo img.mark{height:34px;}


  /* ---------- Elite drawer: nav card links ---------- */

  /* Desktop: burger drawer opens as a compact dropdown card under the button */
  @media (min-width: 901px){
    .nav-row{ position:relative; }
  }

  /* Mobile / tablet: burger drawer is a full slide-down panel from the header */
  @media (max-width: 900px){
  }

  /* ================================================================
     OWNER PORTAL
     ================================================================ */

  .portal-wrapper{display:flex; min-height:100vh;}

  .portal-topbar{
    display:none;
    align-items:center; justify-content:space-between;
    padding:16px 20px;
    background:var(--paper-deep);
    border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:40;
  }
  .portal-topbar .logo{font-size:20px;}
  .sidebar-toggle{
    background:none; border:1px solid var(--line); border-radius:var(--radius-s);
    padding:8px 10px; cursor:pointer;
  }
  .sidebar-toggle span{display:block; width:18px; height:2px; background:var(--ink); margin:4px 0;}

  .sidebar{
    width:280px;
    background:var(--paper-deep);
    border-right:1px solid var(--line);
    padding:40px 24px;
    display:flex;
    flex-direction:column;
  }
  .sidebar nav{display:flex; flex-direction:column;}
  .nav-link{
    padding:14px 20px;
    border-radius:var(--radius-s);
    display:flex; align-items:center; gap:10px;
    color:var(--ink-soft);
    margin-bottom:6px;
    font-size:15px;
    transition:background 0.15s ease, color 0.15s ease;
  }
  .nav-link.active, .nav-link:hover{background:var(--green-deep); color:var(--white);}
  .sidebar-footer{margin-top:auto; padding-top:60px; display:flex; flex-direction:column; gap:10px;}

  .main-content{flex:1; padding:48px 56px; min-width:0;}

  .card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:24px;
    margin-bottom:20px;
    box-shadow:var(--shadow-s);
  }

  .stat-card{border-top:3px solid var(--green-deep); position:relative; transition:box-shadow 0.2s ease, transform 0.2s var(--ease);}
  .stat-card:hover{box-shadow:var(--shadow-m); transform:translateY(-2px);}
  .stat-card h3{font-family:'Work Sans', sans-serif; font-weight:500; font-size:13px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft);}
  .stat-card .stat-value{font-family:'Fraunces', serif; font-size:3rem; margin:10px 0 0; color:var(--green-deep); font-weight:600;}

  .chart-empty, .empty-state{
    color:var(--ink-faint);
    font-size:14.5px;
    text-align:center;
    padding:32px 0;
  }
  .empty-state a{color:var(--green-deep); font-weight:500;}

  /* recent clients widget */
  .recent-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0;
    border-bottom:1px solid var(--line);
  }
  .recent-row:last-child{border-bottom:none;}
  .recent-row strong{display:block; font-size:15px; margin-bottom:2px;}
  .recent-meta{font-size:13px; color:var(--ink-faint);}

  /* goals */
  .goal-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-s);
    padding:18px 20px;
    margin-bottom:12px;
  }
  .goal-card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
  .goal-card-top strong{font-size:15.5px;}
  .goal-date{color:var(--ink-faint); font-size:12.5px; display:block; margin:4px 0 12px;}
  .goal-status{
    padding:8px 12px; border-radius:var(--radius-s); border:1px solid var(--line);
    font-family:'IBM Plex Mono', monospace; font-size:12.5px; background:var(--white); color:var(--ink);
  }
  .goal-status.status-done{border-color:var(--green-deep); color:var(--green-deep);}
  .goal-status.status-in-progress{border-color:var(--info); color:var(--info);}
  .goal-status.status-not-started{border-color:var(--warn); color:#8a6d10;}

  /* form fields */
  .form-field{margin-bottom:20px;}
  .form-field label{
    display:block; font-family:'IBM Plex Mono', monospace; font-size:12.5px;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px;
  }
  .form-field input, .form-field textarea{
    padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-s);
    font-size:16px; width:100%; background:var(--white); color:var(--ink);
    font-family:'Work Sans', sans-serif;
  }
  .form-field input:focus, .form-field textarea:focus{
    outline:2px solid var(--green-deep); border-color:var(--green-deep);
  }
  .input-error{border-color:var(--danger) !important; outline-color:var(--danger) !important;}

  /* table */
  table{width:100%; border-collapse:collapse;}
  th{text-align:left; padding:16px; border-bottom:2px solid var(--line); color:var(--ink-soft); font-size:13px; text-transform:uppercase; letter-spacing:0.04em; font-family:'IBM Plex Mono', monospace; font-weight:500;}
  td{padding:16px; border-bottom:1px solid var(--line); font-size:14.5px;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--paper-deep);}
  .client-link{color:var(--green-deep); font-weight:600;}
  .client-link:hover{text-decoration:underline;}

  /* modal */
  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(31,34,31,0.75);
    align-items:center; justify-content:center; z-index:1000; padding:20px;
  }

  /* settings */
  .settings-block{max-width:520px;}
  .settings-block p{color:var(--ink-soft); font-size:14.5px; margin-bottom:16px;}
  .settings-actions{display:flex; gap:12px; flex-wrap:wrap;}
  .file-input-label{
    display:inline-flex; align-items:center; gap:8px; cursor:pointer;
    font-family:'IBM Plex Mono', monospace; font-size:13.5px; padding:13px 22px;
    border:1px solid var(--line); border-radius:var(--radius-s); color:var(--ink);
  }
  .file-input-label:hover{border-color:var(--ink);}
  .settings-danger{margin-top:36px; padding-top:24px; border-top:1px solid var(--line);}

  /* toast notifications */
  #toast-container{
    position:fixed; bottom:24px; right:24px; z-index:2000;
    display:flex; flex-direction:column; gap:10px;
  }
  .toast{
    background:var(--ink); color:var(--white);
    padding:14px 18px; border-radius:var(--radius-s);
    font-size:14px; box-shadow:0 8px 24px rgba(31,34,31,0.25);
    opacity:0; transform:translateY(8px);
    transition:opacity 0.2s ease, transform 0.2s ease;
    max-width:320px;
  }
  .toast.show{opacity:1; transform:translateY(0);}
  .toast-danger{background:var(--danger);}
  .toast-success{background:var(--forest);}

  /* ---------- responsive portal ---------- */
  @media (max-width: 900px){
    .portal-topbar{display:flex;}
    .portal-wrapper{flex-direction:column;}
    .sidebar{
      position:fixed; top:0; left:0; bottom:0; z-index:60;
      transform:translateX(-100%);
      transition:transform 0.2s ease;
      box-shadow:0 0 40px rgba(0,0,0,0.2);
    }
    .sidebar.open{transform:translateX(0);}
    .main-content{padding:28px 20px;}
    table{display:block; overflow-x:auto;}
  }

.stage-select{
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-s);
  font-size:15px; background:var(--white); color:var(--ink);
  font-family:'Work Sans', sans-serif; cursor:pointer;
}
.stage-select:focus{
  outline:2px solid var(--green-deep); border-color:var(--green-deep);
}

.stage-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px;
  font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:600;
  letter-spacing:0.03em; text-transform:uppercase;
  border:1px solid transparent; white-space:nowrap;
}
.stage-badge::before{
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0;
}

.stage-badge.stage-new{
  background:rgba(63,111,176,0.1); color:var(--info); border-color:rgba(63,111,176,0.25);
}
.stage-badge.stage-contacted{
  background:rgba(201,162,39,0.12); color:#8a6d10; border-color:rgba(201,162,39,0.3);
}
.stage-badge.stage-qualified{
  background:rgba(69,97,14,0.1); color:var(--green-deep); border-color:rgba(69,97,14,0.25);
}

.stage-badge.stage-enquiry{
  background:var(--paper-deep); color:var(--ink-soft); border-color:var(--line);
}
.stage-badge.stage-health-check{
  background:rgba(201,162,39,0.12); color:#8a6d10; border-color:rgba(201,162,39,0.3);
}
.stage-badge.stage-proposal-sent{
  background:rgba(63,111,176,0.1); color:var(--info); border-color:rgba(63,111,176,0.25);
}
.stage-badge.stage-won{
  background:rgba(69,97,14,0.1); color:var(--green-deep); border-color:rgba(69,97,14,0.25);
}

.stage-badge.stage-lost{
  background:var(--danger-bg); color:var(--danger); border-color:rgba(193,68,46,0.25);
}
.tier-select{
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-s);
  font-size:15px; width:100%; max-width:240px; background:var(--white); color:var(--ink);
  font-family:'Work Sans', sans-serif; cursor:pointer;
}
.tier-select:focus{
  outline:2px solid var(--green-deep); border-color:var(--green-deep);
}

.tier-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px;
  font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:600;
  letter-spacing:0.03em; text-transform:uppercase;
  border:1px solid transparent;
}
.tier-badge::before{
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor;
}
.tier-badge.tier-priority{
  background:rgba(69,97,14,0.1); color:var(--green-deep); border-color:rgba(69,97,14,0.25);
}
.tier-badge.tier-standard{
  background:rgba(63,111,176,0.1); color:var(--info); border-color:rgba(63,111,176,0.25);
}
.tier-badge.tier-basic{
  background:var(--danger-bg); color:var(--danger); border-color:rgba(193,68,46,0.25);
}
.logo{
  display:flex; align-items:center;
}
.nav-logo{
  height:48px;
  width:auto;
}
.contact .section-head h2{
  color:#faf9f5;
}
.contact .section-head .sub{
  color:rgba(250,249,245,0.65);
}
.price-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  margin-top:0;
}
.price-group-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink);
  margin:40px 0 16px;
}
.price-group-label:first-of-type{
  margin-top:32px;
}
.hero-visual .hero-logo{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:78%;
  height:auto;
  z-index:2;
  filter:drop-shadow(0 0 24px rgba(179,214,94,0.35));
}
  .hero{
    padding:76px 0 0; position:relative; overflow:hidden;
    background-image:
      linear-gradient(160deg, rgba(20,22,19,0.5), rgba(31,34,31,0.4) 55%, rgba(20,22,19,0.58)),
      url('https://images.unsplash.com/photo-1731450453063-31716e7b71af?auto=format&fit=crop&w=1600&q=70');
    background-size:cover;
    background-position:center 55%;
    background-repeat:no-repeat;
  }
  .hero-inner{display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; padding-bottom:64px;}
  .hero .eyebrow{ color:#c9e79f; }
  .hero h1{font-size:clamp(34px, 4.4vw, 54px); margin:20px 0 22px; color:#fff; text-shadow:0 2px 16px rgba(0,0,0,0.45);}
  .hero .sub{font-size:17.5px; color:rgba(255,255,255,0.86); max-width:46ch; margin-bottom:32px; text-shadow:0 1px 10px rgba(0,0,0,0.4);}
  .hero-ctas{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
  .hero .btn-ghost{ background:rgba(255,255,255,0.08); color:#fff; border-color:rgba(255,255,255,0.4); }
  .hero .btn-ghost:hover{ background:rgba(255,255,255,0.16); }
  .hero-note{margin-top:18px; font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:#d9edad;}
  .hero-visual{aspect-ratio:1/1.05; background:rgba(20,22,19,0.35); backdrop-filter:blur(2px); border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius-l); position:relative; overflow:hidden; box-shadow:0 30px 70px -20px rgba(0,0,0,0.55);}
  .hero-visual .plate{position:absolute; inset:20px; border:1px solid rgba(179,214,94,0.35); border-radius:6px;}
  .hero-visual .ring{position:absolute; top:50%; left:50%; width:58%; aspect-ratio:1/1; transform:translate(-50%,-50%) rotate(-8deg); border-radius:50%; border:1px solid rgba(179,214,94,0.5);}
  .hero-visual .ring::before{content:""; position:absolute; inset:14%; border-radius:50%; border:1px solid rgba(179,214,94,0.3);}
  .hero-visual .label{position:absolute; bottom:24px; left:24px; right:24px; font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.1em; color:rgba(255,255,255,0.55); text-transform:uppercase;}
  .seam{position:relative; height:1px; background:var(--line); margin:0 auto; max-width:var(--maxw);}
  .seam .rivets{position:absolute; inset:0; display:flex; justify-content:space-between; padding:0 24px;}
  .seam .rivets span{width:6px; height:6px; border-radius:50%; background:var(--green-light); transform:translateY(-2.5px);}
  .trust{padding:26px 0; background:var(--paper-deep); border-bottom:1px solid var(--line); position:relative;}
  .trust::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--green-light), transparent);}
  .trust p{text-align:center; font-size:15px; color:var(--ink-soft); max-width:62ch; margin:0 auto;}
  .trust strong{color:var(--ink); font-weight:600;}
  section{padding:88px 0;}
  .section-head{max-width:640px; margin-bottom:52px;}
  .section-head h2{font-size:clamp(26px,3vw,36px); margin-top:16px;}
  .section-head .sub{color:var(--ink-soft); font-size:16px; margin-top:14px;}

  #how{
    background:linear-gradient(160deg, #1f221f 0%, #2f4014 100%);
    position:relative;
    padding-bottom:104px;
  }
  #how::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--green-light), transparent);}
  #how .eyebrow{ color:#c9e79f; }
  #how .section-head h2{ color:#fff; }
  #how .section-head .sub{ color:rgba(255,255,255,0.72); }
  #how .step{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.32);
    border-radius:var(--radius-m);
    padding:30px 28px 32px;
    transition:border-color 0.25s ease, background 0.25s ease, transform 0.25s var(--ease);
  }
  #how .step:hover{
    background:rgba(255,255,255,0.06);
    border-color:var(--green-light);
    transform:translateY(-3px);
  }
  #how .step .num{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:44px;
    line-height:1;
    color:var(--green-light);
    border:none;
    border-radius:0;
    width:auto;
    height:auto;
    display:block;
    margin-bottom:18px;
  }
  #how .step h3{ color:#fff; }
  #how .step p{ color:rgba(255,255,255,0.72); }

  #about{
    background:linear-gradient(160deg, #1f221f 0%, #2f4014 100%);
    position:relative;
  }
  #about::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--green-light), transparent);}
  #about .eyebrow{ color:#c9e79f; }
  #about .section-head h2{ color:#fff; }
  #about .section-head .sub{ color:rgba(255,255,255,0.78); }
  .about-wrap{display:grid; grid-template-columns:1.3fr 0.7fr; gap:56px; align-items:start;}
  .about-stats{display:flex; flex-direction:column; gap:28px;}
  .about-stat{border-top:1px solid rgba(255,255,255,0.22); padding-top:18px; display:flex; justify-content:space-between; align-items:baseline; gap:16px;}
  .about-stat-num{font-family:'Fraunces', serif; font-weight:600; font-size:32px; color:#fff; white-space:nowrap;}
  .about-stat-label{font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; color:rgba(255,255,255,0.75); text-align:right; max-width:14ch;}

  /* ---------- About page (light section, distinct from homepage's dark #about hero) ---------- */
  #about-page{ background:var(--paper); }
  #about-page .eyebrow{ color:var(--green-deep); }
  #about-page .section-head h2{ color:var(--ink); }
  #about-page .section-head .sub{ color:var(--ink-soft); }
  #about-page .about-stat{ border-top:1px solid var(--line); }
  #about-page .about-stat-num{ color:var(--green-deep); }
  #about-page .about-stat-label{ color:var(--ink-faint); }
  :root[data-theme="dark"] #about-page{ background:var(--paper); }
  :root[data-theme="dark"] #about-page .section-head h2{ color:#f2f4ef; }
  :root[data-theme="dark"] #about-page .section-head .sub{ color:#a9ada3; }
  :root[data-theme="dark"] #about-page .about-stat{ border-top-color:rgba(255,255,255,0.12); }
  :root[data-theme="dark"] #about-page .about-stat-num{ color:var(--green-light); }
  :root[data-theme="dark"] #about-page .about-stat-label{ color:#8b8f86; }

  @media (max-width: 880px){
    .about-wrap{grid-template-columns:1fr; gap:36px;}
    .about-stat{align-items:flex-start; flex-direction:column; gap:6px;}
    .about-stat-label{text-align:left; max-width:none;}
  }
  .price-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); padding:28px 26px; box-shadow:var(--shadow-s); transition:transform 0.25s var(--ease), box-shadow 0.25s ease, border-color 0.2s ease;}
  .price-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:var(--green-deep);}
  .price-card .amount{font-family:'IBM Plex Mono', monospace; font-size:20px; color:var(--forest); font-weight:600; margin:10px 0 14px;}
  .price-card.featured{grid-column:span 3; background:linear-gradient(135deg, #1f221f, #2f4014); color:#fff; padding:36px 38px; position:relative; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; box-shadow:var(--shadow-l);}
  .price-card.featured:hover{transform:none;}
  .price-card.featured h3{color:#fff; font-family:'Fraunces', serif; font-size:22px;}
  .price-card.featured .amount{color:var(--green-light); font-size:26px;}

  /* Testimonials */
  .testimonials-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:24px;
    margin-top:40px;
  }
  .testimonial-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-m);
    padding:32px 30px;
    box-shadow:var(--shadow-s);
    transition:transform 0.25s var(--ease), box-shadow 0.25s ease, border-color 0.2s ease;
  }
  .testimonial-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:var(--green-deep);}
  .testimonial-stars{color:var(--green-deep); font-size:16px; letter-spacing:2px; margin-bottom:14px;}
  .testimonial-quote{
    font-size:15.5px;
    line-height:1.65;
    color:var(--ink-soft);
    margin:0 0 20px;
    font-style:italic;
  }
  .testimonial-author{font-family:'Fraunces', serif; font-weight:600; font-size:16px; color:var(--ink);}
  .testimonial-role{font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px;}
  /* Pricing groups — subtle contained panels so the page isn't one flat stretch of white cards */
  .price-group{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-l);
    padding:32px 32px 32px;
    margin-top:36px;
    box-shadow:var(--shadow-s);
  }
  .price-group .price-grid{ margin-top:20px; }

  .price-grid-crm{ align-items:stretch; }
  .price-grid-crm .price-card{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .price-grid-crm .price-card h3{
    margin-bottom:8px;
  }
  .price-grid-crm .desc{
    color:var(--ink-soft);
    font-size:14px;
    line-height:1.5;
    margin-bottom:24px;
    min-height:63px;
  }
  .crm-tiers{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .crm-tier-row{
    background:var(--white);
    border:1px solid var(--line);
    border-left:3px solid var(--line);
    border-radius:8px;
    padding:16px 18px;
  }
  .crm-tier-label{
    display:block;
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:8px;
  }
  .crm-tier-value{
    display:flex;
    align-items:baseline;
    gap:4px;
    font-family:'IBM Plex Mono', monospace;
    font-size:26px;
    font-weight:700;
    color:var(--ink);
    letter-spacing:-0.01em;
  }
  .crm-tier-row-maintenance{
    border-left-color:var(--green-deep);
    background:linear-gradient(90deg, rgba(69,97,14,0.06), transparent 65%);
  }
  .crm-tier-row-maintenance .crm-tier-value{ color:var(--forest); }
  .crm-tier-row-maintenance .unit{ font-size:14px; font-weight:500; color:var(--ink-soft); margin-left:1px; }
  .crm-tier-value .amount{
    margin:0;
    font-size:inherit;
    font-weight:inherit;
    color:inherit;
    display:flex;
    align-items:baseline;
    gap:4px;
  }

  @media (max-width: 900px){
    .price-grid-crm .desc{ min-height:0; }
  }
  .price-group-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--green-deep);
    margin:0;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);
  }

  .price-group-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);
  }

  .billing-toggle{
    display:inline-flex;
    background:var(--paper-deep);
    border:1px solid var(--line);
    border-radius:999px;
    padding:4px;
    gap:2px;
    flex-shrink:0;
  }
  .billing-toggle-btn{
    appearance:none;
    -webkit-appearance:none;
    font:inherit;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.02em;
    color:var(--ink-soft);
    background:none;
    border:none;
    border-radius:999px;
    padding:8px 16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    transition:background 0.15s ease, color 0.15s ease;
  }
  .billing-toggle-btn:hover{ color:var(--ink); }
  .billing-toggle-btn.is-active{
    background:var(--green-deep);
    color:#fff;
  }
  .billing-save-tag{
    font-size:10px;
    font-weight:700;
    background:var(--green-light);
    color:var(--forest);
    padding:2px 6px;
    border-radius:999px;
    letter-spacing:0.02em;
  }
  .billing-toggle-btn.is-active .billing-save-tag{
    background:rgba(255,255,255,0.25);
    color:#fff;
  }

  .crm-annual-note{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--ink-faint);
    margin-top:6px;
  }
  .crm-annual-note[hidden]{ display:none; }
  .crm-annual-note:not([hidden]){ display:block; }

  .crm-features{
    list-style:none;
    margin:20px 0 0;
    padding:16px 0 0;
    border-top:1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .crm-features li{
    position:relative;
    padding-left:22px;
    font-size:13.5px;
    color:var(--ink-soft);
    line-height:1.4;
  }
  .crm-features li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:var(--green-deep);
    font-weight:700;
    font-size:13px;
  }

  .crm-compare-wrap{
    margin-top: 40px;
  }
  .crm-compare-title{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--green-deep);
    margin:0 0 16px;
  }
  .crm-compare-scroll{
    overflow-x:auto;
    border-radius:12px;
    border:1px solid var(--line);
  }
  .crm-compare-table{
    width:100%;
    border-collapse:collapse;
    min-width:560px;
    font-size:13.5px;
  }
  .crm-compare-table thead th{
    background:var(--green-deep);
    color:#fff;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.03em;
    text-transform:uppercase;
    padding:16px 18px;
    text-align:center;
    white-space:nowrap;
  }
  .crm-compare-table thead th.crm-compare-feature-col{
    text-align:left;
    background:var(--forest);
  }
  .crm-compare-table thead th.crm-compare-popular{
    background:#557a12;
  }
  .crm-compare-table tbody td{
    padding:14px 18px;
    text-align:center;
    border-top:1px solid var(--line);
    color:var(--ink-soft);
  }
  .crm-compare-table tbody td.crm-compare-feature-col{
    text-align:left;
    font-weight:600;
    color:var(--ink);
  }
  .crm-compare-table tbody td.crm-compare-popular{
    background:rgba(85,122,18,0.06);
  }
  .crm-compare-table tbody tr:nth-child(even) td:not(.crm-compare-feature-col):not(.crm-compare-popular){
    background:var(--paper-deep);
  }
  .crm-check{ color:#45610e; font-weight:700; font-size:15px; }
  .crm-cross{ color:var(--ink-faint); font-weight:600; }

  @media (max-width: 700px){
    .crm-compare-table{ font-size:12.5px; }
    .crm-compare-table thead th, .crm-compare-table tbody td{ padding:12px 14px; }
  }

  .crm-cta-row{
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid var(--line);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:18px;
  }
  .crm-cta-row .price-note{
    margin:0;
    max-width:560px;
  }

  .pricing-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:32px 0 28px;
  }
  .pricing-tab{
    appearance:none;
    -webkit-appearance:none;
    font:inherit;
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:0.03em;
    color:var(--ink-soft);
    background:var(--paper-deep);
    border:1px solid var(--line);
    border-radius:999px;
    padding:10px 18px;
    cursor:pointer;
    transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space:nowrap;
  }
  .pricing-tab:hover{ color:var(--ink); border-color:var(--sage); }
  .pricing-tab.is-active{
    background:var(--green-deep);
    color:#fff;
    border-color:var(--green-deep);
  }

  .pricing-tab-panel{ display:none; }
  .pricing-tab-panel.is-active{ display:block; }

  @media (max-width: 700px){
    .pricing-tabs-wrap{
      position:relative;
      margin:24px -20px 24px;
    }
    .pricing-tabs-wrap::after{
      content:"";
      position:absolute;
      top:0; right:0; bottom:4px;
      width:36px;
      background:linear-gradient(90deg, transparent, var(--paper) 75%);
      pointer-events:none;
    }
    .pricing-tabs-wrap::before{
      content:"→";
      position:absolute;
      top:8px;
      right:4px;
      font-size:14px;
      color:var(--ink-faint);
      pointer-events:none;
      z-index:1;
      animation:pricingTabHint 1.6s ease-in-out infinite;
    }
    @keyframes pricingTabHint{
      0%, 100% { opacity:0.3; transform:translateX(0); }
      50% { opacity:0.8; transform:translateX(3px); }
    }
    .pricing-tabs{
      flex-wrap:nowrap;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      margin:0;
      padding:0 20px 4px;
    }
    .pricing-tab{ flex-shrink:0; }
  }

  .btn-ghost-green{
    background:transparent;
    color:var(--forest);
    border:1.5px solid var(--line);
  }
  .btn-ghost-green:hover{
    background:var(--green-deep);
    color:#fff;
    border-color:var(--green-deep);
  }

  .price-grid-crm .crm-recommended{
    position:relative;
    border-color:var(--green-deep);
    box-shadow:0 8px 24px rgba(69,97,14,0.1);
  }
  .crm-recommended-tag{
    position:absolute;
    top:-11px;
    left:24px;
    background:var(--green-deep);
    color:#fff;
    font-family:'IBM Plex Mono', monospace;
    font-size:10px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:4px 10px;
    border-radius:999px;
  }

  @media (max-width: 560px){
    .price-group-header{ flex-direction:column; align-items:flex-start; }
    .billing-toggle{ width:100%; }
    .billing-toggle-btn{ flex:1; justify-content:center; white-space:nowrap; }
    .price-grid-crm .price-card{ padding:22px 20px; }
    .price-grid-crm .desc{ margin-bottom:16px; }
    .crm-tier-row{ padding:12px 14px; }
    .crm-tier-value{ font-size:22px; }
  }
  .price-group:first-of-type{ margin-top:44px; }
  .price-group .price-card{
    background:var(--paper);
    border-color:var(--line);
    box-shadow:none;
  }
  .price-group .price-card:hover{ border-color:var(--green-deep); box-shadow:var(--shadow-s); }

  .contact{background:#181b16; color:#e9ebe6;}
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}

  @media (max-width: 900px){
    .hero-inner{grid-template-columns:1fr; padding-bottom:44px;}
    .price-grid{grid-template-columns:1fr;}
    .price-card.featured{grid-column:span 1; flex-direction:column; align-items:flex-start;}
    .contact-grid{grid-template-columns:1fr; gap:40px;}
    section{padding:60px 0;}
  }

  @media (max-width: 560px){
    .wrap{padding:0 18px;}
    .services-grid{grid-template-columns:1fr;}
    .logo{font-size:16px;}
    .logo .dial, .logo svg.dial{width:28px; height:28px;}
    .nav-row{padding:14px 0;}
    section{padding:48px 0;}
    .hero{padding-top:56px;}
    .hero h1{font-size:clamp(28px, 8vw, 38px);}
    .hero .sub{font-size:16px;}
    .hero-ctas{flex-direction:column; align-items:stretch; gap:12px;}
    .hero-ctas .btn{justify-content:center;}
    .section-head h2{font-size:clamp(22px, 6vw, 28px);}
    table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  }

.contact-methods{  display:flex;
  flex-direction:column;
  gap:20px;
  padding-top:28px;
}
.contact-method{
  display:flex; align-items:center; gap:16px;
  padding:18px 20px;
  border:1px solid rgba(250,249,245,0.16);
  border-radius:var(--radius-s);
  transition:border-color 0.15s ease, background 0.15s ease;
}
.contact-method:hover{border-color:var(--green-light); background:rgba(179,214,94,0.06);}
.contact-method .icon{color:var(--green-light); width:22px; height:22px; flex-shrink:0;}
.contact-method .label{font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:rgba(250,249,245,0.5); margin-bottom:4px;}
.contact-method .value{font-size:15.5px; color:#faf9f5;}
section.contact .form-field label{ color:rgba(250,249,245,0.55) !important; }
section.contact .form-field input, section.contact .form-field textarea{
  background:#faf9f5 !important; color:#1f221f !important; border-color:rgba(250,249,245,0.16) !important;
}
section.contact .form-field input::placeholder, section.contact .form-field textarea::placeholder{ color:#8b8f86; }

footer{
  background:#181b16;
  border-top:1px solid rgba(250,249,245,0.12);
  padding:32px 0;
  position:relative;
}
footer::before{content:""; position:absolute; top:-1px; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(179,214,94,0.5), transparent);}
.footer-row{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px;
}
footer .fine{font-family:'IBM Plex Mono', monospace; font-size:12px; color:rgba(250,249,245,0.45);}
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(31,34,31,0.75);
  align-items:center; justify-content:center; z-index:1000; padding:20px;
  overflow-y:auto;
}
.modal-overlay .card{
  max-height:90vh;
  overflow-y:auto;
  margin:auto;
}

.theme-switcher{
  display:inline-flex; gap:4px; padding:4px;
  background:var(--paper-deep); border:1px solid var(--line); border-radius:var(--radius-s);
}
.theme-option{
  display:flex; align-items:center; gap:6px;
  padding:10px 18px; border:none; border-radius:6px;
  background:none; cursor:pointer;
  font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--ink-soft);
  transition:background 0.15s ease, color 0.15s ease;
}
.theme-option:hover{ color:var(--ink); }
.theme-option.active{
  background:var(--white); color:var(--ink); box-shadow:0 1px 3px rgba(31,34,31,0.1);
}

:root[data-theme="dark"] .theme-switcher{
  background:#141613; border-color:rgba(255,255,255,0.1);
}
:root[data-theme="dark"] .theme-option{ color:#a9ada3; }
:root[data-theme="dark"] .theme-option:hover{ color:#e9ebe6; }
:root[data-theme="dark"] .theme-option.active{
  background:#2a2e27; color:#f2f4ef; box-shadow:none;
}

:root[data-theme="dark"]{
  --ink:#e9ebe6;
  --ink-soft:#c3c7bd;
  --ink-faint:#8b8f86;
  --paper:#141613;
  --paper-deep:#1b1e19;
  --white:#1f2320;
  --line:rgba(255,255,255,0.12);
  --sand:#2a3320;
  --forest:#b3d65e;
  --danger-bg:rgba(193,68,46,0.14);
}
:root[data-theme="dark"] body{ background:#141613; color:#e9ebe6; }
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3{ color:#f2f4ef; }

:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .portal-topbar{
  background:#1b1e19; border-color:rgba(255,255,255,0.08);
}
:root[data-theme="dark"] .nav-link{ color:#b9bdb3; }
:root[data-theme="dark"] .nav-link.active,
:root[data-theme="dark"] .nav-link:hover{ background:var(--green-deep); color:#fff; }

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .goal-card,
:root[data-theme="dark"] .record-card{
  background:#1f2320; border-color:rgba(255,255,255,0.08); color:#e9ebe6;
}
:root[data-theme="dark"] .stat-card .stat-value{ color:var(--green-light); }

:root[data-theme="dark"] table{ color:#e9ebe6; }
:root[data-theme="dark"] th{ color:#a9ada3; border-color:rgba(255,255,255,0.1); }
:root[data-theme="dark"] td{ border-color:rgba(255,255,255,0.08); }
:root[data-theme="dark"] tbody tr:hover{ background:rgba(255,255,255,0.04); }

:root[data-theme="dark"] .form-field label{ color:#a9ada3; }
:root[data-theme="dark"] .form-field input,
:root[data-theme="dark"] .form-field textarea,
:root[data-theme="dark"] .tier-select,
:root[data-theme="dark"] .stage-select{
  background:#141613; border-color:rgba(255,255,255,0.14); color:#e9ebe6;
}
:root[data-theme="dark"] .editable{ border-color:rgba(255,255,255,0.16); color:#e9ebe6; background:#1f2320; }
:root[data-theme="dark"] .record-meta,
:root[data-theme="dark"] .empty-state{ color:#8b8f86; }

:root[data-theme="dark"] .file-input-label{ color:#e9ebe6; border-color:rgba(255,255,255,0.2); }
:root[data-theme="dark"] .btn-ghost{ color:#e9ebe6; border-color:rgba(255,255,255,0.2); }
:root[data-theme="dark"] .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,0.06); }
:root[data-theme="dark"] .btn-danger{ background:rgba(193,68,46,0.12); color:#e08a76; border-color:rgba(193,68,46,0.35); }
:root[data-theme="dark"] .btn-danger:hover{ background:#c1442e; color:#fff; border-color:#c1442e; }
:root[data-theme="dark"] .name-section h1{ color:#f2f4ef; }
:root[data-theme="dark"] .section-label{ color:var(--green-light); }
:root[data-theme="dark"] .field-row{ color:#e9ebe6; }
:root[data-theme="dark"] .notes-area{ background:#1f2320; color:#e9ebe6; }
:root[data-theme="dark"] .avatar-upload-label{ border-color:#1f2320; }
:root[data-theme="dark"] .profile-avatar{ border-color:#1f2320; }

:root[data-theme="dark"] .modal-overlay{ background:rgba(0,0,0,0.8); }
:root[data-theme="dark"] .modal-overlay .card{ background:#1f2320; }

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 16px;
}

.record-header button {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.record-container { max-width: 1100px; margin: 0 auto; padding: 40px 24px; }
.record-card { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:52px; box-shadow:0 12px 40px rgba(0,0,0,0.06); }
.profile-meta-block { display:flex; gap:32px; margin-bottom:48px; }
.avatar-wrapper { position:relative; width:128px; height:128px; }
.profile-avatar { width:128px; height:128px; border-radius:14px; object-fit:cover; border:4px solid #fff; box-shadow:0 8px 28px rgba(0,0,0,0.12); }
.avatar-upload-label { position:absolute; bottom:-8px; right:-8px; background:#45610e; color:white; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; border:3px solid #fff; }
.name-section h1 { font-size:42px; margin:0 0 8px 0; color:#1f221f; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; }
.section-label { font-family:'IBM Plex Mono', monospace; font-size:12px; color:#45610e; margin-bottom:8px; display:block; }
.field-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:16px; }
.editable { padding:10px 16px; border:1px solid #e5e7eb; border-radius:8px; background:#f9f9f6; min-width:220px; }
.notes-area { min-height:280px; white-space:pre-wrap; background:#f9f9f6; padding:24px; border-radius:10px; }
.active-tab {
  background: var(--green-deep) !important;
  color: white !important;
}
#why-us .why-us-card .icon {
    width: 34px;
    height: 34px;
    color: var(--green-deep);
    margin-bottom: 18px;
}
/* ============================================================
   VISTA WEST — HEADER MENU (self-contained, vw- prefixed)
   Rebuilt from scratch. All markup lives in Header.php.
   No other file should define burger/menu/currency/theme-toggle
   styles — this block is the single source of truth.
   ============================================================ */

.nav-row{ position:relative; display:flex; align-items:center; justify-content:space-between; }

/* ---------- Burger button ---------- */
.vw-burger{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  background:var(--white); border:1px solid var(--line); border-radius:50%;
  cursor:pointer; padding:0; position:relative; flex-shrink:0;
  z-index:210;
}
.vw-burger span{
  display:block; width:18px; height:2px; background:var(--ink);
  position:absolute; left:50%; top:50%; margin-left:-9px; margin-top:-1px;
  transition:transform 0.25s var(--ease), opacity 0.2s ease, background-color 0.2s ease;
}
.vw-burger span:nth-child(1){ transform:translateY(-6px); }
.vw-burger span:nth-child(2){ transform:translateY(0); }
.vw-burger span:nth-child(3){ transform:translateY(6px); }
.vw-burger:hover{ border-color:var(--green-deep); }
.vw-burger:hover span{ background:var(--green-deep); }
.vw-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(0) rotate(45deg); background:var(--green-deep); }
.vw-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.vw-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(0) rotate(-45deg); background:var(--green-deep); }

:root[data-theme="dark"] .vw-burger{ background:#1b1e19; border-color:rgba(255,255,255,0.1); }
:root[data-theme="dark"] .vw-burger span{ background:#e9ebe6; }

/* ---------- Backdrop ---------- */
.vw-backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(31,34,31,0.45);
  backdrop-filter:blur(4px);
  z-index:190;
}
.vw-backdrop.vw-open{ display:block; }
body.vw-nav-open{ overflow:hidden; }

/* ---------- Menu panel ---------- */
.vw-menu{
  display:none;
  flex-direction:column;
  position:absolute; top:calc(100% + 12px); right:0; left:auto;
  width:380px; max-width:90vw;
  background:linear-gradient(145deg, rgba(250,249,245,0.98), rgba(240,239,232,0.99));
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(69,97,14,0.14);
  border-radius:20px;
  box-shadow:0 25px 50px -12px rgba(31,34,31,0.18), 0 0 30px rgba(69,97,14,0.05);
  padding:24px;
  z-index:200;
}
.vw-menu.vw-open{
  display:flex;
  animation:vwMenuIn 0.2s var(--ease) forwards;
}
@keyframes vwMenuIn{
  0%{ opacity:0; transform:translateY(-6px) scale(0.98); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

:root[data-theme="dark"] .vw-menu{
  background:linear-gradient(145deg, rgba(20,24,19,0.98), rgba(12,15,11,0.99));
  border-color:rgba(179,214,94,0.15);
  box-shadow:0 25px 50px -12px rgba(0,0,0,0.7), 0 0 30px rgba(179,214,94,0.05);
}

/* ---------- Nav link cards ---------- */
.vw-menu-links{ display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }

.vw-menu-card{
  display:flex; align-items:center; gap:12px;
  padding:13px 14px;
  background:rgba(31,34,31,0.03);
  border:1px solid rgba(31,34,31,0.07);
  border-radius:12px;
  text-decoration:none;
  transition:all 0.25s var(--ease);
}
.vw-menu-icon{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex-shrink:0;
  background:#f2f6ea; color:#45610e; border-radius:10px;
  transition:all 0.25s ease;
}
.vw-menu-label{
  flex:1; font-size:14px; font-weight:600; color:#1f221f; letter-spacing:-0.01em;
}
.vw-menu-chevron{ color:rgba(31,34,31,0.3); transition:transform 0.25s ease, color 0.25s ease; flex-shrink:0; }

.vw-menu-card:hover{
  background:rgba(69,97,14,0.07);
  border-color:rgba(69,97,14,0.3);
  transform:translateX(4px);
}
.vw-menu-card:hover .vw-menu-icon{ background:#45610e; color:#fff; }
.vw-menu-card:hover .vw-menu-chevron{ transform:translateX(3px); color:#45610e; }

:root[data-theme="dark"] .vw-menu-card{ background:rgba(255,255,255,0.03); border-color:rgba(255,255,255,0.06); }
:root[data-theme="dark"] .vw-menu-icon{ background:rgba(179,214,94,0.14); color:#b3d65e; }
:root[data-theme="dark"] .vw-menu-label{ color:#ffffff; }
:root[data-theme="dark"] .vw-menu-chevron{ color:rgba(255,255,255,0.3); }
:root[data-theme="dark"] .vw-menu-card:hover{ background:rgba(179,214,94,0.08); border-color:rgba(179,214,94,0.3); }
:root[data-theme="dark"] .vw-menu-card:hover .vw-menu-icon{ background:#b3d65e; color:#111; }
:root[data-theme="dark"] .vw-menu-card:hover .vw-menu-chevron{ color:#b3d65e; }

/* ---------- Footer: CTA + utility row ---------- */
.vw-menu-footer{
  display:flex; flex-direction:column; gap:12px;
  border-top:1px solid rgba(31,34,31,0.08);
  padding-top:16px;
}
:root[data-theme="dark"] .vw-menu-footer{ border-top-color:rgba(255,255,255,0.06); }

.vw-menu-cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px 16px;
  background:#45610e; color:#fff;
  font-size:13px; font-weight:700;
  border-radius:12px; text-decoration:none;
  box-shadow:0 4px 20px rgba(69,97,14,0.25);
  transition:all 0.25s ease;
}
.vw-menu-cta:hover{ background:#364d0b; transform:translateY(-2px); box-shadow:0 6px 25px rgba(69,97,14,0.35); }

:root[data-theme="dark"] .vw-menu-cta{ background:#b3d65e; color:#0c0f0b; box-shadow:0 4px 20px rgba(179,214,94,0.3); }
:root[data-theme="dark"] .vw-menu-cta:hover{ background:#c4e86e; box-shadow:0 6px 25px rgba(179,214,94,0.45); }

.vw-menu-utility-row{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }

/* ---------- Currency picker ---------- */
.vw-currency{ position:relative; flex:1 1 0; min-width:0; }
.vw-currency-btn{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  width:100%; height:38px; padding:0 10px;
  background:rgba(31,34,31,0.06); border:1.5px solid rgba(31,34,31,0.16);
  border-radius:10px; color:#1f221f;
  font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:600;
  cursor:pointer; transition:all 0.2s ease;
}
.vw-currency-btn:hover{ background:rgba(31,34,31,0.1); border-color:rgba(69,97,14,0.4); }
.vw-currency-current{ display:flex; align-items:center; gap:6px; }
.vw-flag{ width:16px; height:12px; border-radius:2px; object-fit:cover; }

.vw-currency-menu{
  display:none;
  position:absolute; bottom:calc(100% + 6px); left:0;
  min-width:200px; width:max-content; max-width:min(260px, calc(100vw - 32px));
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-m); padding:6px; z-index:220;
  max-height:220px; overflow-y:auto;
}
.vw-currency.vw-open .vw-currency-menu{ display:block; }
.vw-currency-option{
  width:100%; display:flex; align-items:center; gap:8px;
  padding:9px 10px; border:none; background:none; border-radius:6px;
  font-size:12.5px; color:var(--ink); cursor:pointer; text-align:left;
  font-family:'Work Sans', sans-serif;
}
.vw-currency-option:hover{ background:var(--paper-deep); }
.vw-currency-option em{ margin-left:auto; font-style:normal; color:var(--ink-faint); font-size:11px; }

:root[data-theme="dark"] .vw-currency-btn{ background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.14); color:#fff; }
:root[data-theme="dark"] .vw-currency-btn:hover{ background:rgba(255,255,255,0.1); border-color:rgba(179,214,94,0.4); }
:root[data-theme="dark"] .vw-currency-menu{ background:#1f2320; border-color:rgba(255,255,255,0.1); }
:root[data-theme="dark"] .vw-currency-option:hover{ background:rgba(255,255,255,0.06); }

/* ---------- Portal pill ---------- */
.vw-portal-pill{
  display:flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 12px;
  background:linear-gradient(135deg, #45610e, #2f4308);
  border:1px solid rgba(69,97,14,0.3);
  color:#fff; font-size:13px; font-weight:700;
  border-radius:10px; text-decoration:none;
  white-space:nowrap; transition:all 0.2s ease;
  flex:1 1 0; min-width:0;
}
.vw-portal-pill:hover{ background:linear-gradient(135deg, #537411, #384f0a); transform:translateY(-1px); }

:root[data-theme="dark"] .vw-portal-pill{ background:linear-gradient(135deg, #45610e, #2f4308); border-color:rgba(179,214,94,0.3); color:#b3d65e; }
:root[data-theme="dark"] .vw-portal-pill:hover{ background:linear-gradient(135deg, #537411, #384f0a); color:#fff; border-color:#b3d65e; }

/* ---------- Theme toggle ---------- */
.vw-theme-toggle{
  display:flex; align-items:center; justify-content:center;
  height:38px; flex:1 1 0; min-width:0;
  background:rgba(31,34,31,0.06); border:1.5px solid rgba(31,34,31,0.16);
  border-radius:10px; color:#1f221f; cursor:pointer;
  transition:all 0.2s ease;
}
.vw-theme-toggle:hover{ background:rgba(31,34,31,0.1); border-color:rgba(69,97,14,0.4); }
.vw-theme-icon-moon{ display:none; }
:root[data-theme="dark"] .vw-theme-icon-sun{ display:none; }
:root[data-theme="dark"] .vw-theme-icon-moon{ display:block; }
:root[data-theme="dark"] .vw-theme-toggle{ background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.14); color:#fff; }
:root[data-theme="dark"] .vw-theme-toggle:hover{ background:rgba(255,255,255,0.1); border-color:rgba(179,214,94,0.4); }

/* ---------- Mobile: full-width slide-down panel ---------- */
@media (max-width: 900px){
  .vw-menu{
    top:100%; left:0; right:0; width:100%; max-width:100%;
    border-radius:0 0 20px 20px;
    max-height:calc(100vh - 100%);
    overflow:visible;
  }
  .vw-menu-links{
    overflow-y:auto;
    max-height:calc(100vh - 260px);
  }
  /* Utility row sizing (currency / portal / theme toggle) is handled by
     the base rules above and applies at every width — nothing extra
     needed here anymore. */
}
/* ============================================================
   MERGED FROM Head.php (previously an inline <style> block
   duplicated across every page). Head.php now contains no CSS —
   this is the single source of truth for these rules.
   ============================================================ */

/* ---------- Hero legibility fix — keep text white/legible without darkening the photo ---------- */
.hero .eyebrow,
.hero h1,
.hero .sub,
.hero-note {
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.hero h1 { color: #fff !important; }
.hero .eyebrow { color: #c9e79f !important; }

/* ---------- Services: 2-up feature grid ---------- */
.services-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  margin-top: 32px;
}
.service-row {
  background: var(--paper);
  padding: 34px 32px;
  transition: background 0.2s ease;
}
.service-row:hover { background: rgba(69,97,14,0.04); }
.service-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.service-bearing {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--green-deep);
  margin-bottom: 2px;
}
.service-head .icon {
  width: 30px; height: 30px;
  color: var(--green-deep);
  flex-shrink: 0;
  stroke-width: 1.5;
}
.service-row h3 { font-size: 18px; margin: 0; }
.service-row p { font-size: 14px; color: var(--ink-soft); max-width: 46ch; margin-left: 46px; }
:root[data-theme="dark"] .service-bearing, :root[data-theme="dark"] .service-head .icon { color: var(--green-light); }
:root[data-theme="dark"] .services-list { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.08); }
:root[data-theme="dark"] .service-row { background: var(--paper); }
:root[data-theme="dark"] .service-row:hover { background: rgba(179,214,94,0.05); }
@media (max-width: 780px) {
  .services-list { grid-template-columns: 1fr; }
  .service-row p { margin-left: 0; }
}

/* ---------- How it works: connected step cards ---------- */
.steps-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  margin-top: 32px;
}
.step {
  position: relative;
  background: var(--paper);
  padding: 32px 28px 30px;
}
.step::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--green-deep);
  opacity: 0.35;
}
.step:nth-child(1)::after { background: var(--green-deep); opacity: 1; }
.step:nth-child(2)::after { background: var(--green-deep); opacity: 0.65; }
.step:nth-child(3)::after { background: var(--green-deep); opacity: 0.35; }
.step .num {
  font-family: 'Fraunces', serif; font-size: 28px; font-weight: 600; color: var(--forest);
  background: none; border: none; border-radius: 0;
  width: auto; height: auto; display: block;
  margin-bottom: 16px; line-height: 1;
  box-shadow: none;
}
.step h3 { font-size: 19px; margin-bottom: 10px; }
.step p { font-size: 14.5px; }
:root[data-theme="dark"] .step { background: var(--paper); }
:root[data-theme="dark"] .step .num { box-shadow: none; color: var(--green-light); }
:root[data-theme="dark"] .steps-path { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.08); }
@media (max-width: 780px) {
  .steps-path { grid-template-columns: 1fr; }
}

/* ---------- Why choose us: emphasized 2x2, angular icon marks ---------- */
#why-us {
  padding-top: 64px;
  padding-bottom: 48px;
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  margin-top: 32px;
}
.why-us-card {
  background: var(--white);
  border: none; border-radius: 0;
  padding: 30px 24px;
  box-shadow: none;
  transition: background 0.2s ease;
}
.why-us-card:hover { transform: none; box-shadow: none; background: rgba(69,97,14,0.03); }
.why-us-card .icon {
  width: 26px;
  height: 26px;
  color: var(--green-deep);
  margin-bottom: 20px;
}
.why-us-card h3 {
  font-size: 16.5px;
  margin-bottom: 8px;
}
.why-us-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
:root[data-theme="dark"] .why-us-card { background: #1f2320; }
:root[data-theme="dark"] .why-us-card:hover { background: rgba(179,214,94,0.05); }
:root[data-theme="dark"] .why-us-card .icon { color: var(--green-light); }
:root[data-theme="dark"] .why-us-card p { color: #a9ada3; }

#industries { padding-top: 8px; padding-bottom: 8px; }

.industries-strip {
  margin: 56px 0;
  background: var(--forest);
  border-radius: var(--radius-l);
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-l);
}
.industries-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 15%, rgba(179,214,94,0.16), transparent 45%),
    radial-gradient(circle at 88% 85%, rgba(179,214,94,0.1), transparent 50%);
  pointer-events: none;
}
.industries-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-light);
  font-weight: 600;
  margin-bottom: 28px;
  position: relative;
}
.industries-label::before,
.industries-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(179,214,94,0.3);
}
.industries-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  position: relative;
}
.industry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 16px;
  border-radius: var(--radius-m);
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(2px);
  transition: transform 0.25s var(--ease), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.industry-item:hover {
  transform: translateY(-5px);
  background: rgba(179,214,94,0.12);
  border-color: rgba(179,214,94,0.4);
  box-shadow: 0 16px 32px -12px rgba(0,0,0,0.35);
}
.industry-item .icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-light), var(--sage));
  box-shadow: 0 8px 18px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform 0.25s var(--ease);
}
.industry-item:hover .icon-badge { transform: scale(1.08) rotate(-4deg); }
.industry-item .icon { width: 24px; height: 24px; color: var(--forest); margin: 0; stroke-width: 1.7; }
.industry-item span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #f2f6e9;
  text-align: center;
}
.industries-strip .sub { color: rgba(242,246,233,0.75) !important; }
:root[data-theme="dark"] .industries-strip { background: #1a2409; }

@media (max-width: 900px) {
  .industries-row { grid-template-columns: repeat(3, 1fr); }
  .industries-strip { padding: 40px 24px; }
}
@media (max-width: 560px) {
  .industries-row { grid-template-columns: repeat(2, 1fr); }
  .industries-strip { padding: 32px 18px; border-radius: var(--radius-m); }
}

@media (max-width: 900px) {
  .why-us-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .why-us-grid { grid-template-columns: 1fr; }
}

:root[data-theme="dark"] .testimonial-quote { color: #f2f4ef; }
:root[data-theme="dark"] .testimonial-attribution { color: #8b8f86; }

/* ============================================================
   PORTAL SHARED STYLES (merged from Trash.php's inline <style>
   block). Used by portal pages: Trash.php, index.php, calendar.php,
   tasks-table.php, client.php, etc. This is a separate variable
   system from the public marketing site above — portal pages use
   --primary-green/--text-main/--card-bg, the public site uses
   --green-deep/--ink/--paper. Do not mix the two.
   ============================================================ */
    :root {
      --primary-green: #45610e;
      --primary-green-light: #b3d65e;
      --primary-green-subtle: rgba(69, 97, 14, 0.08);
      --bg-canvas: #f8faf9;
      --card-bg: #ffffff;
      --border-line: #e2e8f0;
      --border-line-subtle: #f1f5f9;
      --text-main: #0f172a;
      --text-muted: #64748b;
      --text-faint: #94a3b8;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
      --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
      --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
    }

    :root[data-theme="dark"] {
      --primary-green-subtle: rgba(179, 214, 94, 0.1);
      --bg-canvas: #12140f;
      --card-bg: #1b1e19;
      --border-line: rgba(255, 255, 255, 0.1);
      --border-line-subtle: rgba(255, 255, 255, 0.06);
      --text-main: #f1f3ee;
      --text-muted: #a9ada3;
      --text-faint: #7c8172;
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
      --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
      --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background-color: var(--bg-canvas);
      color: var(--text-main);
      margin: 0;
      padding: 0;
      -webkit-font-smoothing: antialiased;
    }

    /* Hide number input spinner arrows */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    input[type=number] {
      -moz-appearance: textfield;
      appearance: textfield;
    }

    /* Layout Structure matching index.php & quotes-record.php */
    .portal-wrapper {
      display: flex;
      min-height: 100vh;
    }

    .sidebar {
      width: 270px;
      background: var(--card-bg);
      border-right: 1px solid var(--border-line);
      padding: 28px 20px;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      box-shadow: 2px 0 12px rgba(15, 23, 42, 0.02);
      height: 100vh;
      position: sticky;
      top: 0;
      box-sizing: border-box;
    }

    .sidebar-logo-container {
      margin-bottom: 32px;
      padding: 0 4px;
    }

    .sidebar-logo-link {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: inherit;
    }

    .logo-img-wrapper {
      position: relative;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--primary-green-subtle);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      border: 1px solid rgba(69, 97, 14, 0.12);
      box-sizing: border-box;
    }

    .logo-img-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .brand-text {
      display: flex;
      flex-direction: column;
    }

    .brand-name {
      font-size: 17px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text-main);
      line-height: 1.1;
    }

    .brand-name span {
      color: var(--primary-green);
    }

    .brand-sub {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-faint);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-top: 3px;
    }

    .sidebar nav {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .sidebar nav .nav-link {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 16px;
      border-radius: 10px;
      color: var(--text-muted);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sidebar nav .nav-link-content {
      display: flex;
      align-items: center;
    }

    .sidebar nav .nav-link i {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
      transition: transform 0.2s ease, color 0.2s ease;
    }

    .sidebar nav .nav-link:hover {
      background: var(--border-line-subtle);
      color: var(--text-main);
      transform: translateX(3px);
    }

    .sidebar nav .nav-link:hover i {
      color: var(--primary-green);
    }

    .sidebar nav .nav-link.active {
      background: var(--primary-green-subtle);
      color: var(--primary-green);
      font-weight: 600;
      box-shadow: inset 0 0 0 1px rgba(69, 97, 14, 0.12);
    }

    .sidebar nav .nav-link.active i {
      color: var(--primary-green);
    }

    .sidebar nav .nav-link.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 18%;
      bottom: 18%;
      width: 4px;
      background: var(--primary-green);
      border-radius: 0 4px 4px 0;
    }

    /* Custom Active States for Leads, Opportunities, and Clients */
    .sidebar nav .nav-link#nav-leads:hover {
      background: rgba(124, 58, 237, 0.06);
      color: #7c3aed;
    }
    .sidebar nav .nav-link#nav-leads.active {
      background: rgba(124, 58, 237, 0.08);
      color: #7c3aed;
      box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.12);
    }
    .sidebar nav .nav-link#nav-leads.active i,
    .sidebar nav .nav-link#nav-leads:hover i {
      color: #7c3aed;
    }
    .sidebar nav .nav-link#nav-leads.active::before {
      background: #7c3aed;
    }

    .sidebar nav .nav-link#nav-opportunities:hover {
      background: rgba(2, 132, 199, 0.06);
      color: #0284c7;
    }
    .sidebar nav .nav-link#nav-opportunities.active {
      background: rgba(2, 132, 199, 0.08);
      color: #0284c7;
      box-shadow: inset 0 0 0 1px rgba(2, 132, 199, 0.12);
    }
    .sidebar nav .nav-link#nav-opportunities.active i,
    .sidebar nav .nav-link#nav-opportunities:hover i {
      color: #0284c7;
    }
    .sidebar nav .nav-link#nav-opportunities.active::before {
      background: #0284c7;
    }

    .sidebar nav .nav-link#nav-clients:hover {
      background: rgba(199, 20, 2, 0.06);
      color: #c71402;
    }
    .sidebar nav .nav-link#nav-clients.active {
      background: rgba(199, 20, 2, 0.08);
      color: #c71402;
      box-shadow: inset 0 0 0 1px rgba(199, 20, 2, 0.12);
    }
    .sidebar nav .nav-link#nav-clients.active i,
    .sidebar nav .nav-link#nav-clients:hover i {
      color: #c71402;
    }
    .sidebar nav .nav-link#nav-clients.active::before {
      background: #c71402;
    }

    /* Custom Active/Hover States for Dashboard, Quotes, Goals, Tasks, Calendar, Trash, Settings */
    .sidebar nav .nav-link#nav-dashboard:hover {
      background: rgba(69, 97, 14, 0.06);
      color: var(--primary-green);
    }
    .sidebar nav .nav-link#nav-dashboard.active {
      background: rgba(69, 97, 14, 0.08);
      color: var(--primary-green);
      box-shadow: inset 0 0 0 1px rgba(69, 97, 14, 0.12);
    }
    .sidebar nav .nav-link#nav-dashboard.active i,
    .sidebar nav .nav-link#nav-dashboard:hover i {
      color: var(--primary-green);
    }
    .sidebar nav .nav-link#nav-dashboard.active::before {
      background: var(--primary-green);
    }

    .sidebar nav .nav-link#nav-quotes:hover {
      background: rgba(201, 162, 39, 0.07);
      color: #c9a227;
    }
    .sidebar nav .nav-link#nav-quotes.active {
      background: rgba(201, 162, 39, 0.1);
      color: #c9a227;
      box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.14);
    }
    .sidebar nav .nav-link#nav-quotes.active i,
    .sidebar nav .nav-link#nav-quotes:hover i {
      color: #c9a227;
    }
    .sidebar nav .nav-link#nav-quotes.active::before {
      background: #c9a227;
    }

    .sidebar nav .nav-link#nav-goals:hover {
      background: rgba(219, 39, 119, 0.06);
      color: #db2777;
    }
    .sidebar nav .nav-link#nav-goals.active {
      background: rgba(219, 39, 119, 0.08);
      color: #db2777;
      box-shadow: inset 0 0 0 1px rgba(219, 39, 119, 0.12);
    }
    .sidebar nav .nav-link#nav-goals.active i,
    .sidebar nav .nav-link#nav-goals:hover i {
      color: #db2777;
    }
    .sidebar nav .nav-link#nav-goals.active::before {
      background: #db2777;
    }

    .sidebar nav .nav-link#nav-tasks:hover {
      background: rgba(5, 150, 105, 0.06);
      color: #059669;
    }
    .sidebar nav .nav-link#nav-tasks.active {
      background: rgba(5, 150, 105, 0.08);
      color: #059669;
      box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.12);
    }
    .sidebar nav .nav-link#nav-tasks.active i,
    .sidebar nav .nav-link#nav-tasks:hover i {
      color: #059669;
    }
    .sidebar nav .nav-link#nav-tasks.active::before {
      background: #059669;
    }

    .sidebar nav .nav-link#nav-calendar:hover {
      background: rgba(234, 88, 12, 0.06);
      color: #ea580c;
    }
    .sidebar nav .nav-link#nav-calendar.active {
      background: rgba(234, 88, 12, 0.08);
      color: #ea580c;
      box-shadow: inset 0 0 0 1px rgba(234, 88, 12, 0.12);
    }
    .sidebar nav .nav-link#nav-calendar.active i,
    .sidebar nav .nav-link#nav-calendar:hover i {
      color: #ea580c;
    }
    .sidebar nav .nav-link#nav-calendar.active::before {
      background: #ea580c;
    }

    .sidebar nav .nav-link#nav-trash:hover {
      background: rgba(100, 116, 139, 0.07);
      color: #64748b;
    }
    .sidebar nav .nav-link#nav-trash.active {
      background: rgba(100, 116, 139, 0.1);
      color: #64748b;
      box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.14);
    }
    .sidebar nav .nav-link#nav-trash.active i,
    .sidebar nav .nav-link#nav-trash:hover i {
      color: #64748b;
    }
    .sidebar nav .nav-link#nav-trash.active::before {
      background: #64748b;
    }

    .sidebar nav .nav-link#nav-settings:hover {
      background: rgba(8, 145, 178, 0.06);
      color: #0891b2;
    }
    .sidebar nav .nav-link#nav-settings.active {
      background: rgba(8, 145, 178, 0.08);
      color: #0891b2;
      box-shadow: inset 0 0 0 1px rgba(8, 145, 178, 0.12);
    }
    .sidebar nav .nav-link#nav-settings.active i,
    .sidebar nav .nav-link#nav-settings:hover i {
      color: #0891b2;
    }
    .sidebar nav .nav-link#nav-settings.active::before {
      background: #0891b2;
    }

    .sidebar-footer {
      margin-top: auto;
      padding-top: 20px;
      border-top: 1px solid var(--border-line-subtle);
    }

    .logout-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 14px;
      border-radius: 10px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text-muted);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .logout-btn:hover {
      background: #fef2f2;
      color: #dc2626;
      border-color: #fecaca;
    }

    .main-content {
      flex: 1;
      padding: 36px 48px;
      max-width: 1400px;
      margin: 0 auto;
      box-sizing: border-box;
    }

    /* Champion Clean Header & Navigation Tabs */
    .page-header-container {
      margin-bottom: 32px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      border-bottom: 1px solid var(--border-line);
      padding-bottom: 24px;
    }

    .section-title-group h1 {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text-main);
      margin-bottom: 6px;
    }

    .section-title-group p {
      font-size: 14px;
      color: var(--text-muted);
      margin: 0;
    }

    /* Modern Pill Tabs */
    .trash-tabs-container {
      display: flex;
      gap: 8px;
      margin-bottom: 28px;
      border-bottom: 1px solid var(--border-line);
      padding-bottom: 0;
      overflow: hidden; /* Fully disabled scrolling/scrollbar */
    }

    .tab-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 20px;
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      color: var(--text-muted);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      margin-bottom: -1px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .tab-pill:hover {
      color: var(--text-main);
    }

    .tab-pill.active {
      color: var(--primary-green);
      border-bottom-color: var(--primary-green);
      background: var(--primary-green-subtle);
      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    }

    .tab-pill .badge-count {
      background: var(--border-line);
      color: var(--text-muted);
      font-size: 11px;
      padding: 2px 7px;
      border-radius: 999px;
      font-weight: 700;
    }

    .tab-pill.active .badge-count {
      background: var(--primary-green);
      color: #ffffff;
    }

    /* Modern Trash Table Layout */
    .trash-table-card {
      background: var(--card-bg);
      border: 1px solid var(--border-line);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }

    .table-responsive {
      width: 100%;
      overflow-x: auto;
    }

    .trash-data-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
      font-size: 14px;
    }

    .trash-data-table th {
      background: var(--border-line-subtle);
      color: var(--text-muted);
      font-weight: 700;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 14px 20px;
      border-bottom: 1px solid var(--border-line);
    }

    .trash-data-table td {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border-line-subtle);
      color: var(--text-main);
      vertical-align: middle;
    }

    .trash-data-table tbody tr {
      transition: background-color 0.15s ease;
    }

    .trash-data-table tbody tr:hover {
      background-color: rgba(69, 97, 14, 0.02);
    }

    .trash-data-table tbody tr:last-child td {
      border-bottom: none;
    }

    .reason-snippet {
      max-width: 280px;
      color: var(--text-muted);
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: var(--border-line-subtle);
      padding: 4px 8px;
      border-radius: 6px;
      border-left: 3px solid #c9a227;
    }

    .empty-state {
      text-align: center;
      padding: 60px 20px;
      background: var(--card-bg);
      border: 1px dashed var(--border-line);
      border-radius: var(--radius-lg);
      color: var(--text-muted);
    }

    .empty-state i {
      font-size: 36px;
      color: var(--text-faint);
      margin-bottom: 12px;
      display: block;
    }

    /* Buttons */
    .btn-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid var(--border-line);
      background: #fff;
      color: var(--text-muted);
      transition: all 0.15s ease;
      text-decoration: none;
    }

    .btn-action:hover {
      background: var(--bg-canvas);
      color: var(--text-main);
      border-color: var(--text-faint);
    }

    .btn-action-restore {
      background: var(--primary-green-subtle);
      color: var(--primary-green);
      border-color: rgba(69, 97, 14, 0.2);
    }

    .btn-action-restore:hover {
      background: var(--primary-green);
      color: #ffffff;
      border-color: var(--primary-green);
    }

    /* Completely Redesigned Modal Overview Card & Typography */
    .modal-content {
      border: none;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      background: var(--card-bg);
      overflow: hidden;
    }

    .modal-header {
      background: linear-gradient(135deg, rgba(69, 97, 14, 0.04) 0%, rgba(15, 23, 42, 0.02) 100%);
      border-bottom: 1px solid var(--border-line);
      padding: 20px 24px;
    }

    .modal-body {
      padding: 24px;
      max-height: 75vh;
      overflow-y: auto;
    }

    .record-details-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 20px;
    }

    @media (max-width: 576px) {
      .record-details-grid {
        grid-template-columns: 1fr;
      }
    }

    .detail-card-item {
      background: var(--border-line-subtle);
      border: 1px solid var(--border-line);
      border-radius: var(--radius-sm);
      padding: 12px 16px;
    }

    .detail-card-item.full-width {
      grid-column: 1 / -1;
    }

    .detail-label {
      font-size: 11.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .detail-value {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-main);
      word-break: break-word;
    }

    /* Redesigned Notes Section in Modal */
    .notes-timeline-container {
      background: var(--bg-canvas);
      border: 1px solid var(--border-line);
      border-radius: var(--radius-md);
      padding: 16px;
      margin-top: 16px;
    }

    .notes-timeline-header {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
      border-bottom: 1px solid var(--border-line);
      padding-bottom: 8px;
    }

    .notes-content-box {
      font-size: 13.5px;
      color: var(--text-main);
      line-height: 1.6;
      white-space: pre-wrap;
      background: var(--card-bg);
      border: 1px solid var(--border-line);
      border-radius: var(--radius-sm);
      padding: 14px;
      max-height: 220px;
      overflow-y: auto;
    }

    .modal-reason-box {
      background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
      border: 1px solid #fde047;
      border-radius: var(--radius-md);
      padding: 16px;
      margin-top: 16px;
      color: #713f12;
      box-shadow: var(--shadow-sm);
    }

    .modal-reason-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 6px;
      color: #854d0e;
    }

    .modal-footer {
      background: var(--border-line-subtle);
      border-top: 1px solid var(--border-line);
      padding: 16px 24px;
    }

    /* Dark Mode Overrides */
    :root[data-theme="dark"] body { background: #141613; color: #e9ebe6; }
    :root[data-theme="dark"] .sidebar { background: #1f2320; border-color: rgba(255,255,255,0.08); }
    :root[data-theme="dark"] .brand-name { color: #f2f4ef; }
    :root[data-theme="dark"] .sidebar nav .nav-link { color: #8b8f86; }
    :root[data-theme="dark"] .sidebar nav .nav-link:hover { background: rgba(255,255,255,0.04); color: #fff; }
    :root[data-theme="dark"] .trash-table-card { background: #1f2320 !important; border-color: rgba(255,255,255,0.08); }
    :root[data-theme="dark"] .trash-data-table th { background: #262a27; color: #94a3b8; border-color: rgba(255,255,255,0.08); }
    :root[data-theme="dark"] .trash-data-table td { border-color: rgba(255,255,255,0.06); color: #e9ebe6; }
    :root[data-theme="dark"] .trash-data-table tbody tr:hover { background-color: rgba(255,255,255,0.02); }
    :root[data-theme="dark"] .empty-state { background: #1f2320; border-color: rgba(255,255,255,0.08); color: #8b8f86; }
    :root[data-theme="dark"] .reason-snippet { background: #262a27; color: #cbd5e1; }
    :root[data-theme="dark"] .modal-content { background: #1f2320; color: #e9ebe6; border-color: rgba(255,255,255,0.08); }
    :root[data-theme="dark"] .modal-header { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.08); }
    :root[data-theme="dark"] .modal-footer { background: #1a1e1b; border-color: rgba(255,255,255,0.08); }
    :root[data-theme="dark"] .detail-card-item { background: #171b18; border-color: rgba(255,255,255,0.06); }
    :root[data-theme="dark"] .notes-timeline-container { background: #171b18; border-color: rgba(255,255,255,0.06); }
    :root[data-theme="dark"] .notes-content-box { background: #1f2320; border-color: rgba(255,255,255,0.08); color: #e9ebe6; }
    :root[data-theme="dark"] .modal-reason-box { background: #292312; border-color: rgba(202,138,4,0.3); color: #fef08a; }
    :root[data-theme="dark"] .modal-reason-title { color: #fde047; }
    :root[data-theme="dark"] .btn-action { background: #2a2e27; border-color: rgba(255,255,255,0.12); color: #e9ebe6; }
    :root[data-theme="dark"] .btn-action:hover { background: #343a32; color: #fff; }