:root{
    /* every value below sampled from the LeafTecha logo's own leaf-blade gradient */
    --forest-950:#152f18;   /* darkest blade shadow / wordmark ink */
    --forest-800:#22421c;
    --forest-600:#3a6329;
    --leaf-500:#588136;
    --leaf-400:#7a9c3e;
    --lime-500:#a0b73c;     /* mid-gradient olive-lime, primary accent */
    --lime-300:#c3d156;     /* brightest tip of the leaf, lightened for use on dark */
    --sand-50:#f5f6ec;      /* paper tinted by the lime, not a generic cream */
    --paper-0:#fffef9;
    --ink-900:#13210f;
    --ink-600:#4b5642;
    --line:rgba(19,33,15,0.12);
    --shadow: 0 24px 60px -28px rgba(19,33,15,0.45);
    --duotone: linear-gradient(150deg, var(--forest-950) 0%, var(--leaf-500) 55%, var(--lime-500) 100%);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    color:var(--ink-900);
    background:var(--paper-0);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;max-height:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  ul{margin:0;padding:0;list-style:none;}
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:3rem;
    letter-spacing:0.01em;
    text-transform:uppercase;
    color:var(--leaf-500);
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px;
  }

  h1,h2,h3,h4{
    font-family:'Fraunces',serif;
    margin:0 0 0.5em 0;
    color:#999;
    font-weight:400;
    letter-spacing:-0.01em;
  }
  .container{
    max-width:1280px;
    margin:0 auto;
    padding:0 32px;
    position:relative;
  }
  section{padding:100px 0;position:relative;}
  .btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:0.95rem;
    padding:15px 30px;
    cursor:pointer;
    border:1.5px solid transparent;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
    clip-path:polygon(0 0, 100% 0, 100% 78%, 92% 100%, 0 100%);
  }
  .btn-primary{ background:var(--lime-500); color:var(--forest-950); }
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(224,162,51,0.55);}
  .btn-outline{ background:transparent; border-color:rgba(255,255,255,0.6); color:#fff; }
  .btn-outline:hover{background:rgba(255,255,255,0.12);}
  .btn-line{ background:transparent; border-color:var(--forest-950); color:var(--forest-950); }
  .btn-line:hover{background:var(--forest-950);color:#fff;}

  /* ================= reveal-on-scroll ================= */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none;}
    *{animation:none !important;}
  }

  /* ================= signature slash divider (logo blade motif) ================= */
  .slash{ position:relative; height:70px; width:100%; overflow:hidden; }
  .slash svg{width:100%;height:100%;display:block;}

  /* ================= Top utility strip ================= */
  .topbar{
    background:linear-gradient(90deg, var(--forest-950) 0%, var(--forest-800) 100%);
    color:#cddac6;
    font-size:0.92rem;
  }
  .topbar-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 32px; flex-wrap:wrap; gap:14px;
  }
  .topbar-info{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
  .tb-item{
    display:flex; align-items:center; gap:10px;
    color:#cddac6; font-weight:500; white-space:nowrap;
  }
  .tb-item svg{width:18px;height:18px;stroke:var(--lime-500);flex-shrink:0;}
  .tb-item a{color:inherit;}
  .tb-item:hover{color:#fff;}
  .tb-social{display:flex;gap:10px;flex-shrink:0;}
  .tb-social a{
    width:32px;height:32px;border-radius:50%;
    background:var(--leaf-500);
    display:flex;align-items:center;justify-content:center;
    transition:background .2s ease,transform .2s ease;
  }
  .tb-social a:hover{background:var(--lime-500);transform:translateY(-2px);}
  .tb-social a svg{width:16px;height:16px;stroke:#fff;}

  /* ================= Header ================= */
  header.main{
    top:0;z-index:100;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 1px 0 rgba(0,0,0,0.02);
  }
  .header-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 0;
    gap:28px;
  }
  
  .brand{display:flex;align-items:center;flex-shrink:0;}
  .brand img{height:52px;width:auto;display:block;margin-left:10px}

  nav.mainnav{ display:flex; min-width:0; }
  nav.mainnav ul{ display:flex; gap:6px; align-items:center; }
  nav.mainnav > ul > li{position:relative;}
  nav.mainnav a{
    display:flex; align-items:center; gap:5px;
    padding:10px 16px; font-weight:700; font-size:0.95rem;
    color:var(--forest-950); position:relative; white-space:nowrap;
  }
  nav.mainnav a svg{width:14px;height:14px;stroke:var(--ink-600);transition:transform .2s ease;}
  nav.mainnav li:hover a svg{transform:rotate(180deg);}
  nav.mainnav a.active{color:var(--lime-500);}
  nav.mainnav a::after{
    content:""; position:absolute;left:16px;right:16px;bottom:2px;height:2px;
    background:var(--lime-500); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
  }
  nav.mainnav a:hover::after, nav.mainnav a.active::after{transform:scaleX(1);}

  .dropdown{
    position:absolute; top:100%; left:0; min-width:210px;
    background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
    padding:8px 0; z-index:50;
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  nav.mainnav li.has-drop:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
  .dropdown a{
    display:block; padding:10px 20px; font-weight:600; font-size:0.86rem;
    color:var(--ink-600); white-space:nowrap;
  }
  .dropdown a::after{display:none;}
  .dropdown a:hover{color:var(--forest-600);}

  .navtoggle{
    display:none;background:none;cursor:pointer;flex-shrink:0;margin-left:auto;margin-right:10px; 
    width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;
    border:1.5px solid var(--line); border-radius:4px;
    transition:border-color .2s ease;
  }
  .navtoggle span{
    display:block;width:20px;height:2px;background:var(--forest-950);margin:3px 0;
    transition:transform .25s ease, opacity .25s ease;
  }
  .navtoggle.open{border-color:var(--lime-500);}
  .navtoggle.open span:nth-child(1){transform:translateY(11px) rotate(45deg);}
  .navtoggle.open span:nth-child(2){opacity:0;}
  .navtoggle.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}


  /* ================= Hero: bracket-frame carousel ================= */
  .hero{
    position:relative;
    min-height:88vh;
    display:flex; align-items:center; justify-content:center;
    color:#fff; overflow:hidden;
    background:var(--forest-950);
  }
  .hero-slides{ position:absolute; inset:0; }
  .hero-slide{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    filter:brightness(1.3) saturate(1.15) contrast(1.05);
    opacity:0;
    transition:opacity 1.1s ease;
  }
  .hero-slide.is-active{opacity:1;}
  .hero-scrim{
    position:absolute; inset:0; z-index:2;
    background:linear-gradient(180deg, rgba(13,24,10,0.32) 0%, rgba(13,24,10,0.18) 40%, rgba(13,24,10,0.55) 100%);
  }

  .hero-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:6;
    width:48px;height:48px; border-radius:50%;
    background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.35);
    color:#fff; display:flex;align-items:center;justify-content:center;
    cursor:pointer; transition:background .2s ease, transform .2s ease;
  }
  .hero-arrow svg{width:18px;height:18px;}
  .hero-arrow:hover{background:var(--lime-500);border-color:var(--lime-500);color:var(--forest-950);}
  .hero-arrow.prev{left:28px;}
  .hero-arrow.next{right:28px;}

  .hero-frame{
    position:relative; z-index:5;
    max-width:760px; margin:0 40px; padding:56px 44px;
  }
  .frame-corner{ position:absolute; width:120px; height:90px; }
  .frame-corner::before, .frame-corner::after{ content:""; position:absolute; background:rgba(255,255,255,0.75); }
  .frame-corner.tl{ top:0; left:0; }
  .frame-corner.tl::before{ top:0;left:0;width:100%;height:1.5px; }
  .frame-corner.tl::after{ top:0;left:0;width:1.5px;height:100%; }
  .frame-corner.tr{ top:0; right:0; }
  .frame-corner.tr::before{ top:0;right:0;width:100%;height:1.5px; }
  .frame-corner.tr::after{ top:0;right:0;width:1.5px;height:100%; }
  .frame-corner.bl{ bottom:0; left:0; }
  .frame-corner.bl::before{ bottom:0;left:0;width:100%;height:1.5px; }
  .frame-corner.bl::after{ bottom:0;left:0;width:1.5px;height:100%; }
  .frame-corner.br{ bottom:0; right:0; }
  .frame-corner.br::before{ bottom:0;right:0;width:100%;height:1.5px; }
  .frame-corner.br::after{ bottom:0;right:0;width:1.5px;height:100%; }

  .hero-content{ text-align:center; }
  .eyebrow-framed{
    display:flex; align-items:center; justify-content:center; gap:16px;
    font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:0.8rem;
    letter-spacing:0.2em; text-transform:uppercase; color:var(--lime-300);
    margin-bottom:22px;
  }
  .eyebrow-framed .rule{width:44px;height:1px;background:var(--lime-300);}
  .hero-content h1{
    color:#fff; font-size:clamp(2rem,4.2vw,3.3rem); line-height:1.14;
    text-transform:uppercase; font-weight:700; margin:0 0 22px;
    text-shadow:0 2px 16px rgba(0,0,0,0.35);
  }
  .hero-content p{
    font-size:1.02rem; color:rgba(255,255,255,0.82);
    max-width:560px; margin:0 auto 30px;
    text-shadow:0 1px 10px rgba(0,0,0,0.3);
  }
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}

  .hero-dots{
    position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
    z-index:6; display:flex; gap:10px;
  }
  .hero-dots button{
    width:9px;height:9px;border-radius:50%;
    background:rgba(255,255,255,0.4); border:none; cursor:pointer;
    transition:background .2s ease, transform .2s ease;
  }
  .hero-dots button.active{background:var(--lime-500);transform:scale(1.25);}

  .hero-baseline{
    position:absolute; left:0; right:0; bottom:0; height:5px; z-index:6;
    background:linear-gradient(90deg,var(--forest-800),var(--lime-500),var(--forest-800));
  }

  @media (max-width:900px){
    .hero{min-height:78vh;}
    .hero-frame{padding:40px 20px;margin:0 20px;}
    .frame-corner{width:60px;height:50px;}
    .hero-arrow{width:40px;height:40px;}
    .hero-arrow.prev{left:12px;}
    .hero-arrow.next{right:12px;}
  }

  /* ================= Stats ================= */
  .stats{ background:var(--forest-800); color:#fff; position:relative; overflow:hidden; }
  .stats-bg{
    position:absolute; inset:0; z-index:0;
    background-size:cover; background-position:center;
    /*filter:grayscale(1) contrast(1.1) brightness(0.9);*/
  }
  .stats-bg::after{
    content:""; position:absolute; inset:0;
    background:var(--duotone); mix-blend-mode:color; opacity:0.85;
  }
  .stats-scrim{
    position:absolute; inset:0; z-index:1;
    background:rgba(11,25,15,0.72);
  }
  .stats .container{ position:relative; z-index:2; }
  .stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
  .stat{ padding:0px 40px; border-right:1px solid rgba(255,255,255,0.1); text-align:center; }
  .stat:last-child{border-right:none;}
  .stat-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:90px;height:90px; border-radius:50%;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
    color:var(--lime-300); margin-bottom:18px;
  }
  .stat-icon svg{width:50px;height:50px;}
  .stat .num{ font-family:'Fraunces',serif; font-size:clamp(2.6rem,5vw,3.7rem); color:var(--lime-300); font-weight:700; line-height:1; }
  .stat .label{ margin-top:14px; font-size:0.95rem; color:rgba(255,255,255,0.78); max-width:220px; margin-left:auto;margin-right:auto; }

  /* ================= Who we are: photo collage + specialty checklist ================= */
  .who{ background:#fff; }
  .who-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:70px; align-items:center; }

  .who-collage{ position:relative; display:grid; grid-template-columns:1.05fr 1fr; gap:22px; }
  .dot-grid{
    position:absolute; width:170px; height:170px; z-index:0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:24px 24px;
  }
  .dot-grid::after{
    content:""; position:absolute; inset:0;
    background-image:radial-gradient(var(--leaf-400) 2px, transparent 2px);
    background-size:24px 24px; opacity:0.55;
  }
  .dg-tl{ top:-28px; left:-28px; }
  .dg-br{ bottom:-28px; right:-28px; }

  .who-tall, .who-small{
    position:relative; overflow:hidden; z-index:1;
    box-shadow:var(--shadow);
  }
  .who-tall{ aspect-ratio:3/4.6; }
  .who-stack{ display:flex; flex-direction:column; gap:22px; align-self:stretch; }
  .who-small{ aspect-ratio:3/2.05; flex:1; }
  .who-tall img, .who-small img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  /*.who-tall::before, .who-small::before{
    content:""; position:absolute; inset:0;
    background:var(--duotone); mix-blend-mode:color; opacity:0.85;
  }*/

  .eyebrow-line{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
  .eyebrow-line .eyebrow{margin:0;}
  .who-text p{color:var(--ink-600);margin-bottom:26px; }

  .specialty-head{ font-size:1.5rem; color:var(--forest-950); margin-bottom:16px; }
  .specialty-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:16px 28px;
    margin-bottom:30px;
  }
  .specialty-item{ display:flex; align-items:center; gap:12px; font-size:0.96rem; color:var(--ink-600); }
  .specialty-item .tick{
    width:26px;height:26px;flex-shrink:0;border-radius:50%;
    background:var(--leaf-500); color:#fff;
    display:flex;align-items:center;justify-content:center;
  }
  .specialty-item .tick svg{width:14px;height:14px;}

  .btn-pill{
    background:var(--forest-950); color:#fff;
    padding:16px 36px; border-radius:100px;
    font-weight:700; font-size:0.95rem;
    display:inline-flex; align-items:center;
    clip-path:none;
    transition:background .25s ease, transform .25s ease;
  }
  .btn-pill:hover{ background:var(--leaf-500); transform:translateY(-2px); }


  /* ================= Section heads ================= */
  .sec-head{ display:flex;justify-content:space-between;align-items:flex-end; margin-bottom:29px;gap:24px;flex-wrap:wrap; }
  .sec-head h2{font-size:1.6rem;max-width:580px; color: var(--forest-950);}
  .sec-head p{color:var(--ink-600);max-width:420px;margin:0;}

  /* ================= Cards (3 col) w/ diagonal thumb ================= */
  .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
  .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:34px; }
  .vmv-block + .vmv-block{ margin-top:44px; }
  .vmv-block .sec-head{ margin-bottom:12px; }

  /* ================= Vision / Mission banner ================= */
  .vm-banner{
    position:relative; overflow:hidden; background:var(--forest-950);
    box-shadow:var(--shadow);
  }
  .vm-banner::before{
    content:""; position:absolute; top:-30px; right:-30px; width:190px; height:190px; z-index:0;
    background-image:radial-gradient(rgba(255,255,255,0.16) 1.5px, transparent 1.5px);
    background-size:20px 20px; pointer-events:none;
  }
  .vm-banner-inner{ display:grid; grid-template-columns:1fr 1fr; position:relative; }
  .vm-half{ position:relative; z-index:1; padding:58px 56px; }
  .vm-quote-mark{
    position:absolute; top:-6px; left:28px; z-index:0;
    font-family:'Fraunces',serif; font-weight:600; font-size:7rem; line-height:1;
    color:rgba(255,255,255,0.07); pointer-events:none; user-select:none;
  }
  .vm-head{
    position:relative; z-index:1;
    display:flex; align-items:center; gap:16px; margin-bottom:24px;
  }
  .vm-icon{
    width:46px; height:46px; border-radius:50%; flex-shrink:0;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.28);
    display:flex; align-items:center; justify-content:center; color:var(--lime-300);
  }
  .vm-icon svg{ width:21px; height:21px; }
  .vm-tag{
    display:block;
    font-family:'IBM Plex Mono',monospace; font-size:1.05rem; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--lime-300); font-weight:600;
  }
  .vm-quote{
    position:relative; z-index:1;
    font-family:'Fraunces',serif; font-style:italic; font-weight:400;
    font-size:clamp(1.1rem,1.5vw,1.32rem); line-height:1.55; color:#fff; margin:0; max-width:460px;
  }
  .vm-divider{ position:absolute; left:50%; top:14%; bottom:14%; width:1px; background:rgba(255,255,255,0.16); }
  @media (max-width:760px){
    .vm-banner-inner{ grid-template-columns:1fr; }
    .vm-half{ padding:44px 30px; }
    .vm-divider{ left:30px; right:30px; top:auto; bottom:0; width:auto; height:1px; }
    .vm-half:first-child{ padding-bottom:48px; }
  }

  /* ================= Core Values: numbered list ================= */
  .value-list{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
  .value-row{
    display:grid; grid-template-columns:52px 52px 1fr; align-items:start; gap:22px;
    padding:30px 6px; border-bottom:1px solid var(--line);
    transition:background .25s ease;
  }
  .value-row:hover{ background:rgba(160,183,60,0.07); }
  .value-row .vl-num{
    font-family:'Fraunces',serif; font-weight:600; font-size:1.7rem; color:var(--lime-500);
    line-height:1.3;
  }
  .value-row .vl-icon{
    width:44px; height:44px; border-radius:50%; flex-shrink:0;
    background:var(--leaf-500); color:#fff;
    display:flex; align-items:center; justify-content:center;
    transition:background .25s ease, transform .25s ease;
  }
  .value-row .vl-icon svg{ width:20px; height:20px; }
  .value-row:hover .vl-icon{ background:var(--forest-950); transform:scale(1.08) rotate(-4deg); }
  .value-row .vl-copy h3{ margin:0 0 8px; color:var(--forest-600); font-size:1.15rem; }
  .value-row .vl-copy p{ margin:0; color:var(--ink-600); font-size:0.94rem; max-width:680px; }
  @media (max-width:640px){
    .value-row{ grid-template-columns:40px 1fr; gap:14px; }
    .value-row .vl-num{ display:none; }
  }
  .card .body .value-num{ font-family:'IBM Plex Mono',monospace; font-size:12px;color:var(--leaf-500);font-weight:600; letter-spacing:0.1em;text-transform:uppercase; margin:0 0 16px 0; display:block; }
  .card{
    background:#fff; border:1px solid var(--line); overflow:hidden;
    position:relative;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .card::before{
    content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,-20%), rgba(160,183,60,0.16), transparent 70%);
    opacity:0; transition:opacity .3s ease;
  }
  .card:hover::before{opacity:1;}
  .card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
  .card .thumb{
   overflow:hidden;position:relative; width: 380px; height: 248px;
    
  }
  .card .thumb img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .5s ease, filter .6s ease;
    /*filter:grayscale(1) contrast(1.08) brightness(1.02);*/
  }
  /*.card .thumb::before{
    content:""; position:absolute; inset:0; z-index:1;
    background:var(--duotone); mix-blend-mode:color; opacity:0.88;
    transition:opacity .6s ease;
  }*/
  .card:hover .thumb img{transform:scale(1.06);filter:grayscale(0) contrast(1) brightness(1);}
  .card:hover .thumb::before{opacity:0;}
  .card .body{padding:37px ;}
  .card .body .idx{ font-family:'IBM Plex Mono',monospace; font-size:12px;color:var(--leaf-500);font-weight:600; letter-spacing:0.1em;text-transform:uppercase; margin: 0 0 20px 0; }
  .emob .card .body .idx{color:var(--leaf-400);}
  .card h3{font-size:20px;margin-top:8px;color: var(--forest-600)}
  .card p{color:var(--ink-600);font-size:14px;margin:0;}

  .sec-eyebrow{
    font-family:'IBM Plex Mono',monospace; font-size:1.2rem; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--leaf-500); font-weight:600;
    display:block; margin-bottom:10px;
  }

  /* ================= Story timeline cards ================= */
  .story-grid .card{ border-top:3px solid var(--lime-500); }
  .story-grid .card .num-mark{
    position:absolute; top:8px; right:22px; z-index:0;
    font-family:'Fraunces',serif; font-weight:600; font-size:4.4rem;
    color:rgba(19,33,15,0.055); line-height:1;
    pointer-events:none; user-select:none;
  }
  .story-grid .card .body{ position:relative; z-index:1; }
  .story-grid .card .phase{
    display:flex; align-items:center; gap:10px;
    font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--leaf-500); font-weight:600;
    margin:0 0 16px;
  }
  .story-grid .card .phase::before{ content:""; width:22px; height:1px; background:var(--leaf-400); flex-shrink:0; }

  /* ================= Pipeline / roadmap cards ================= */
  .pipeline-head{ margin-top:56px; }
  .pipeline-grid .card{ border-top:3px dashed var(--lime-500); }
  .pipeline-grid .card .pl-head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
  .pipeline-grid .card .pl-icon{
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    background:var(--leaf-500); color:#fff;
    display:flex; align-items:center; justify-content:center;
    transition:background .25s ease, transform .25s ease;
  }
  .pipeline-grid .card .pl-icon svg{ width:19px; height:19px; }
  .pipeline-grid .card:hover .pl-icon{ background:var(--forest-950); transform:scale(1.08) rotate(-4deg); }
  .pipeline-grid .card h3{ margin:0; }

  .read-more{
    display:inline-flex; align-items:center; gap:4px;
    color:var(--forest-800); font-weight:700; font-size:0.9rem;
    margin-top:18px; width:fit-content;
  }
  .read-more .dash{
    width:15px;height:1px;background:var(--line);
    transition:width .3s ease, background .3s ease;
  }
  .read-more svg{
    width:15px;height:15px;stroke:currentColor;flex-shrink:0;
    transition:transform .3s ease;
  }
  .read-more:hover{color:var(--leaf-500);}
  .read-more:hover .dash{width:30px;background:var(--leaf-500);}
  .read-more:hover svg{transform:translateX(4px);}

  .renewable{ padding: 56px 0;}
  .emob{background:var(--sand-50);}

  /* ================= Renewable Energy: numbered badge cards ================= */
  .energy-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
  .energy-card{
    display:flex; flex-direction:column;
    background:#fff; overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .energy-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
  .energy-media{ position:relative; aspect-ratio:5/4; overflow:hidden; }
  .energy-media img{
    width:100%;height:100%;object-fit:cover;
    /*filter:grayscale(1) contrast(1.08) brightness(1.02);*/
    transition:filter .6s ease, transform .5s ease;
  }
  /*.energy-media::before{
    content:""; position:absolute; inset:0; z-index:1;
    background:var(--duotone); mix-blend-mode:color; opacity:0.88;
    transition:opacity .6s ease;
  }*/
  .energy-card:hover .energy-media img{ filter:grayscale(0) contrast(1) brightness(1); transform:scale(1.05); }
  .energy-card:hover .energy-media::before{opacity:0;}
  .energy-eyebrow{
    position:absolute; top:20px; left:20px; z-index:2;
    color:#fff; font-weight:700; font-size:0.74rem;
    letter-spacing:0.14em; text-transform:uppercase;
  }
  .energy-num{
    position:absolute; left:16px; bottom:6px; z-index:2;
    font-family:'Fraunces',serif; font-weight:700; font-size:4.4rem; line-height:1;
    color:rgba(255,255,255,0.4); pointer-events:none; user-select:none;
  }

  .energy-panel{
    padding:30px 28px; flex:1;
    display:flex; flex-direction:column;
    transition:background .25s ease;
  }
  .energy-panel.dark{ background:var(--forest-950); }
  .energy-panel.solid{ background:var(--leaf-500); }
  .energy-panel.solid.alt{ background:var(--forest-600); }

  .energy-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px; }
  .energy-head h3{ color:#fff; font-size:1.2rem; margin:0; }
  .energy-toggle{
    width:32px;height:32px;flex-shrink:0; border-radius:50%;
    border:1px solid rgba(255,255,255,0.28);
    display:flex;align-items:center;justify-content:center;
    color:#fff; transition:background .2s ease, border-color .2s ease;
  }
  .energy-panel:hover .energy-toggle{background:rgba(255,255,255,0.12);}
  .energy-toggle svg{width:14px;height:14px;}
  .energy-panel p{ color:rgba(255,255,255,0.68); font-size:0.92rem; margin:0 0 22px; flex:1; }

  /* Explore-more link: dash grows and brightens, arrow nudges forward on hover */
  .explore-link{
    display:inline-flex; align-items:center; gap:4px;
    color:rgba(255,255,255,0.92); font-weight:700; font-size:0.9rem;
    width:fit-content; position:relative;
  }
  .explore-link .dash{
    width:15px;height:1px;background:rgba(255,255,255,0.4);
    transition:width .3s ease, background .3s ease;
  }
  .explore-link svg{
    width:15px;height:15px;stroke:currentColor;flex-shrink:0;
    transition:transform .3s ease;
  }
  .explore-link:hover{color:var(--lime-300);}
  .explore-link:hover .dash{width:30px;background:var(--lime-300);}
  .explore-link:hover svg{transform:translateX(4px);}

  @media (max-width:1024px){
    .energy-grid{grid-template-columns:1fr;}
  }

  /* ================= Marquee logo strips ================= */
  .strip-band{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:52px 0; overflow:hidden; }
  .strip-band.alt{background:var(--sand-50);}
  .marquee{ width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
  .marquee-track{ display:flex; width:max-content; gap:22px; animation:scrollLeft 28s linear infinite; }
  .marquee:hover .marquee-track{animation-play-state:paused;}
  @keyframes scrollLeft{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  .logo-chip{
    height:74px;min-width:190px;
    border:1px dashed var(--line);
    display:flex;align-items:center;justify-content:center;
    font-family:'IBM Plex Mono',monospace; font-size:0.8rem;letter-spacing:0.08em; color:var(--ink-600);
    /*filter:grayscale(1); opacity:0.7; transition:opacity .25s ease, filter .25s ease;*/
    flex-shrink:0; padding:0 24px; margin: 0 9px;
  }
  .logo-chip:hover{opacity:1;filter:grayscale(0);}

#brands, #partners{ width: 100% !important;}  
#brands li{position:relative; margin: 0;}


  /* ================= Testimonials ================= */
  .feedback{background:var(--forest-950);color:#fff;position:relative;}
  .feedback .sec-head h2{color:#fff;}
  .feedback .sec-head p{color:rgba(255,255,255,0.7);}
  .quote-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:28px; }
  .quote-card{
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
    padding:34px; display:flex;flex-direction:column; justify-content:space-between; min-height:260px;
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%, 0 20px);
  }
  .quote-mark{ font-family:'Fraunces',serif; font-size:3rem;color:var(--lime-500);line-height:0.5; margin-bottom:10px; }
  .quote-card p.txt{color:rgba(255,255,255,0.88);font-size:0.98rem;}
  .quote-person{ display:flex;align-items:center;gap:12px;margin-top:22px; border-top:1px solid rgba(255,255,255,0.12); padding-top:18px; }
  .quote-person img{width:44px;height:44px;border-radius:50%;object-fit:cover;}
  .quote-person .name{font-weight:700;font-size:0.92rem;}
  .quote-person .role{font-size:0.8rem;color:rgba(255,255,255,0.6);font-family:'IBM Plex Mono',monospace;}

  /* ================= Blog ================= */
  .blog-card .body .date{ font-family:'IBM Plex Mono',monospace;font-size:0.72rem; color:var(--ink-600);letter-spacing:0.05em; }
  .blog-card h3{font-size:1.15rem;color:#333}
  .blog-card a.readmore{
    display:inline-flex;align-items:center;gap:6px;margin-top:14px;
    font-weight:700;font-size:0.85rem;color:var(--forest-800);
    border-bottom:1.5px solid var(--lime-500);padding-bottom:2px;
  }

  /* ================= CTA band ================= */
  .cta-band{ background:linear-gradient(120deg,var(--forest-800),var(--forest-950)); color:#fff;text-align:center; position:relative; overflow:hidden; }
  .cta-band h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem);}
  .cta-band p{color:rgba(255,255,255,0.75);max-width:560px;margin:0 auto 30px;}
  .cta-band .eyebrow{justify-content:center;color:var(--lime-300);}
  .cta-band .eyebrow::before{background:var(--lime-300);}

  /* ================= Footer ================= */
  footer{ background:#0d1f16; color:rgba(255,255,255,0.82); padding-top:56px; position:relative; overflow:hidden; }
  .footer-rays{
    position:absolute; inset:-20% -10%; z-index:0; pointer-events:none;
    background:repeating-conic-gradient(from 0deg at 15% -10%,
      rgba(255,255,255,0.05) 0deg 6deg, transparent 6deg 18deg);
  }
  footer .container{ position:relative; z-index:1; }

  .footer-top{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:28px;
    padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .footer-logo img{height:48px;}
  .footer-quick{ display:flex; flex-wrap:wrap; gap:132px; }
  .fq-item{ display:flex; align-items:center; gap:12px; }
  .fq-icon{
    width:42px;height:42px;border-radius:50%;flex-shrink:0;
    background:var(--leaf-500); color:#fff;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s ease;
  }
  .fq-item:hover .fq-icon{background:var(--lime-500);}
  .fq-icon svg{width:19px;height:19px;}
  .fq-text{ display:flex; flex-direction:column; font-size:0.88rem; color:rgba(255,255,255,0.7); line-height:1.4; }
  .fq-text strong{ color:#fff; font-size:0.92rem; font-weight:700; }

  .footer-grid{
    display:grid; grid-template-columns:0.9fr 0.85fr 0.85fr 0.9fr 1.1fr;
    gap:32px; padding:44px 0 30px; border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .footer-brand h4, .footer-col h4, .footer-gallery h4{
    color:#fff;font-family:'IBM Plex Mono',monospace; font-size:1.0rem;letter-spacing:0.10em;text-transform:uppercase; margin-bottom:20px;font-weight:600;
  }
  .footer-col li{margin-bottom:12px;font-size:0.92rem;}
  .footer-col a:hover{color:var(--lime-300);}
  .social-row{display:flex;gap:12px;margin-top:8px;}
  .social-row a{
    width:38px;height:38px;border:1px solid rgba(255,255,255,0.2);
    display:flex;align-items:center;justify-content:center;
    transition:background .25s ease,border-color .25s ease;
    clip-path:polygon(20% 0,100% 0,100% 80%,80% 100%,0 100%,0 20%);
  }
  .social-row a:hover{background:var(--lime-500);border-color:var(--lime-500);}
  .social-row a svg{width:16px;height:16px;stroke:#fff;}
  .social-row a:hover svg{stroke:var(--forest-950);}

  .gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .gallery-grid a{ display:block; aspect-ratio:1/1; overflow:hidden; }
  .gallery-grid img{
    width:100%;height:100%;object-fit:cover;
    /*filter:grayscale(1) contrast(1.08);*/
    transition:transform .4s ease, filter .4s ease;
  }
  .gallery-grid a:hover img{ transform:scale(1.1); filter:grayscale(0); }

  .footer-bottom{
    display:flex;justify-content:space-between;align-items:center;
    padding:22px 0;font-size:0.82rem;color:rgba(255,255,255,0.5);
    flex-wrap:wrap;gap:10px;
  }
  .footer-bottom a{color:var(--lime-300);font-weight:600;}
  .footer-legal{display:flex;align-items:center;gap:10px;}
  .footer-legal .fl-sep{color:rgba(255,255,255,0.3);}

  @media (max-width:1024px){
    .footer-grid{grid-template-columns:1fr 1fr;}
    .footer-gallery{grid-column:1/-1;}
  }
  @media (max-width:640px){
    .footer-grid{grid-template-columns:1fr;}
    .footer-top{flex-direction:column;align-items:flex-start;}
  }

  /* ================= Scroll-spy dot navigation ================= */
  .dotnav{
    position:fixed; right:26px; top:50%; transform:translateY(-50%);
    z-index:150; display:flex; flex-direction:column; gap:14px;
  }
  .dotnav a{
    width:10px;height:10px; border-radius:50%;
    background:transparent; border:1.5px solid rgba(19,33,15,0.35);
    position:relative; transition:background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .dotnav a:hover{transform:scale(1.3);}
  .dotnav a.active{ background:var(--lime-500); border-color:var(--lime-500); }
  .dotnav a::after{
    content:attr(data-label);
    position:absolute; right:22px; top:50%; transform:translateY(-50%);
    background:var(--forest-950); color:#fff;
    font-family:'IBM Plex Mono',monospace; font-size:0.72rem; font-weight:600;
    padding:6px 12px; white-space:nowrap;
    clip-path:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px));
    opacity:0; pointer-events:none;
    transition:opacity .2s ease;
  }
  .dotnav a:hover::after{opacity:1;}
  @media (max-width:1200px){ .dotnav{display:none;} }

  /* ================= Back to top ================= */
  .back-to-top{
    position:fixed; right:26px; bottom:94px; z-index:199;
    width:44px;height:44px;border-radius:50%;
    background:var(--forest-950); color:var(--lime-500);
    border:none; cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 12px 24px -10px rgba(19,33,15,0.5);
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity .3s ease, transform .3s ease, background .2s ease, visibility .3s ease;
  }
.visionhd{ font-size: 20px !important;}
  .back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
  .back-to-top:hover{background:var(--lime-500);color:var(--forest-950);}
  .back-to-top svg{width:20px;height:20px;}
#about-head{ color: var(--forest-800); font-size: 32px; margin: 0 0 60px 0;}
.who-grid2{ display: flex; flex-direction: row-reverse; gap: 60px;}
.who-text2{ width: 140%;}
.who-text2 p{ color: var(--ink-600); font-size: 15px;}
.leafhd{ margin: 50px 0 26px 0;}
.specialty-grid2{ display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 30px;}

  .wa-float{
    position:fixed;right:24px;bottom:24px;z-index:200;
    width:58px;height:58px;border-radius:50%;
    background:#25D366;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 12px 28px -8px rgba(0,0,0,0.4);
    animation:wa-pulse 2.6s infinite;
  }
  .wa-float svg{width:30px;height:30px;fill:#fff;}
  @keyframes wa-pulse{
    0%{box-shadow:0 0 0 0 rgba(37,211,102,0.55),0 12px 28px -8px rgba(0,0,0,0.4);}
    70%{box-shadow:0 0 0 14px rgba(37,211,102,0),0 12px 28px -8px rgba(0,0,0,0.4);}
    100%{box-shadow:0 0 0 0 rgba(37,211,102,0),0 12px 28px -8px rgba(0,0,0,0.4);}
  }


  @media (max-width:1024px){
    .who-grid{grid-template-columns:1fr;}
    .who-collage{max-width:520px;margin:0 auto 20px;}
    .grid-3{grid-template-columns:repeat(2,1fr);}
    .quote-grid{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:760px){
    .grid-2{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    .specialty-grid{grid-template-columns:1fr;}
    .dot-grid{display:none;}
    .logo-chip{ min-width: 190px; padding: 0;}
  }

  @media (max-width:1180px){
    nav.mainnav a{padding:10px 12px;font-size:0.88rem;}
    .topbar-info{gap:20px;}
      .card .thumb{ width: 100%; height: auto;}
  }
  @media (max-width:900px){
    .topbar-row{padding:10px 20px;}
    .topbar-info{gap:14px;}
    .tb-item span{display:none;}
    .header-row{position:relative;flex-wrap:wrap;}
    .navtoggle{display:flex;margin-left:auto;}
    nav.mainnav{
      display:none;
      position:fixed; left:0; right:0; top:132px; bottom:0;
      background:var(--forest-950);
      z-index:150; overflow-y:auto;
    }
    .who-grid2{ flex-direction: column;}
    .who-text{ width: 100%;}
  
    .specialty-grid2{ flex-wrap: wrap; gap: 30px; justify-content: space-between;}
    nav.mainnav.open{display:flex;}
    nav.mainnav ul{ flex-direction:column; width:100%; padding:0; gap:0; }
    nav.mainnav > ul > li{width:100%;border-bottom:1px solid rgba(255,255,255,0.12);}
    nav.mainnav a{
      padding:12px 28px; justify-content:space-between;
      font-family:'IBM Plex Mono',monospace; font-size:1.15rem; font-weight:500;
      color:rgba(255,255,255,0.92); letter-spacing:0.02em;
    }
    nav.mainnav a svg{stroke:rgba(255,255,255,0.55);}
    nav.mainnav a.active{color:var(--lime-500);}
    nav.mainnav a::after{display:none;}
    .dropdown{
      position:static; opacity:1; visibility:visible; transform:none;
      box-shadow:none; border:none;
      background:transparent; padding:0 0 14px;
    }
    .dropdown a{
      padding:11px 28px 11px 52px !important; font-size:1rem; font-weight:500;
      color:rgba(255,255,255,0.75);
    }
    .dropdown a:hover{color:#fff;}
  }
  @media (max-width:760px){
    section{padding:64px 0;}
    .stats-grid{grid-template-columns:1fr;}
    .stat{border-right:none;border-bottom:1px solid rgba(255,255,255,0.1);}
    .stat:last-child{border-bottom:none;}
    .grid-3{grid-template-columns:1fr;}
    .quote-grid{grid-template-columns:1fr;}
    .footer-quick{ gap:62px ;}
    .footer-grid{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    .hero-arrow{display:none;}
    .tb-social a:nth-child(n+3){display:none;}
    .eyebrow{font-size: 34px;}
  }

  /* ================= Inner page hero ================= */
  .page-hero{
    position:relative; min-height:0; padding:46px 0; display:flex; align-items:center;
    color:#fff; overflow:hidden; background:var(--forest-950) url(../images/about1.jpg);
    background-size:cover; background-position:center;
  }
  .page-hero-scrim{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(120deg, rgba(21,47,24,0.92) 0%, rgba(58,99,41,0.78) 100%);
  }
  .page-hero .container{ position:relative; z-index:2; }
  .page-hero .eyebrow{ color:var(--lime-300); margin-bottom:0; font-size:2rem; }
  .page-hero .eyebrow::before{ background:var(--lime-300); }
  .page-hero h1{
    color:#fff; font-size:clamp(2rem,4vw,3rem); margin-bottom:16px; text-transform:uppercase; font-weight:700;
  }
  .page-hero p{ color:rgba(255,255,255,0.8); max-width:560px; margin:0; }
  @media (max-width:560px){
    .page-hero{ padding:32px 0; }
    .page-hero .eyebrow{ font-size:1.5rem; }
  }

  
  .intro-block .eyebrow{ justify-content:center; }
  .intro-block h2{ font-size:27px; color: var(--forest-950); }
  .intro-block p{ color:var(--ink-600); margin-top:14px; font-size: 14px; }


  .form-section{ background:var(--sand-50); }
  .form-wrap{
    display:flex; justify-content: center;
  }
  .form-card{
    background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
    padding:44px; position:relative; width: 720px;
  }
  .hub-form-title{ color:var(--forest-950); font-size:1.5rem; margin:0 0 26px; }

  /* ================= Contact Hub: split info / form card ================= */
  .contact-hub{
    display:grid; grid-template-columns:0.86fr 1.14fr;
    box-shadow:var(--shadow); border:1px solid var(--line);
  }
  .contact-hub .info-card{
    margin:0; padding:56px 48px; height:100%;
    display:flex; flex-direction:column; justify-content:flex-start;
  }
  .contact-hub .form-card{
    width:auto; margin:0; border:none; box-shadow:none;
    padding:56px 48px; display:flex; flex-direction:column; justify-content:flex-start;
  }
  .contact-hub .info-card > *{ position:relative; z-index:1; }
  .contact-hub .info-card h2{ color:#fff; font-size:1.7rem; margin:10px 0 16px; }
  .contact-hub .info-card p{ color:rgba(255,255,255,0.72); font-size:0.94rem; margin:0 0 30px; max-width:400px; }
  .info-list a.fq-item{ text-decoration:none; color:rgba(255,255,255,0.7); }
  .info-list a.fq-item:hover .fq-text strong{ color:var(--lime-300); }
  .hub-social{ margin-top:32px; }

  @media (max-width:900px){
    .contact-hub{ grid-template-columns:1fr; }
  }
  @media (max-width:640px){
    .contact-hub .info-card, .contact-hub .form-card{ padding:36px 26px; }
  }

  /* ================= Career strip ================= */
  .career-strip{
    display:flex; align-items:center; justify-content:center; gap:14px;
    margin-top:26px; padding:20px 24px;
    background:var(--sand-50); border-top:3px dashed var(--lime-500);
    font-size:0.92rem; color:var(--ink-600); text-align:center; flex-wrap:wrap;
  }
  .career-strip a{ color:var(--forest-800); font-weight:700; text-decoration:underline; }
  .career-icon{
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    background:var(--leaf-500); color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .career-icon svg{ width:16px; height:16px; }

  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 20px; }
  .form-group{ display:flex; flex-direction:column; gap:8px; }
  .form-group.full{ grid-column:1/-1; }
  .form-group label{
    font-family:'IBM Plex Mono',monospace; font-size:0.72rem; letter-spacing:0.08em;
    text-transform:uppercase; font-weight:600; color:var(--forest-800);
  }
  .form-group label .req{ color:var(--lime-500); }
  .form-group input, .form-group select, .form-group textarea{
    font-family:'Inter',sans-serif; font-size:0.95rem; color:var(--ink-900);
    padding:13px 15px; border:1.5px solid var(--line); background:var(--sand-50);
    outline:none; transition:border-color .2s ease, background .2s ease; width:100%;
  }
  .form-group textarea{ resize:vertical; min-height:110px; }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus{
    border-color:var(--lime-500); background:#fff;
  }
  .form-card .btn-primary{ margin-top:28px; border:none; width:fit-content; }
  .form-note{ font-size:0.82rem; color:var(--ink-600); margin-top:16px; }
  .form-success{
    display:none; align-items:center; gap:12px; background:var(--sand-50);
    border:1.5px solid var(--lime-500); padding:16px 20px; margin-bottom:22px; font-weight:600; color:var(--forest-800);
  }
  .form-success.show{ display:flex; }
  .form-success svg{ width:20px;height:20px; stroke:var(--leaf-500); flex-shrink:0; }

  .side-info{ display:flex; flex-direction:column; gap:20px; }
  .info-card{
    background:var(--forest-950); color:#fff; padding:30px; position:relative; overflow:hidden;
  }
  .info-card a{ color: var(--lime-500); text-decoration: underline;}
  .info-card h4{ color:#fff; font-size:1.05rem; margin-bottom:14px; }
  .info-card p{ color:rgba(255,255,255,0.72); font-size:0.9rem; margin:0 0 18px; }
  .info-list{ display:flex; flex-direction:column; gap:20px; }
  .info-list .fq-item{ align-items:flex-start; }
  .info-list .fq-item .fq-icon{ background:var(--leaf-500); }
  .info-list .fq-text{ color:rgba(255,255,255,0.7); }
  .info-list .fq-text strong{ color:#fff; }
  .info-card.light{ background:#fff; border:1px solid var(--line); }
  .info-card.light h4{ color:var(--forest-950); }
  .info-card.light p{ color:var(--ink-600); }
  .steps-list{ list-style:none; padding:0; margin:0; counter-reset:step; }
  .steps-list li{
    display:flex; gap:14px; align-items:flex-start; padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,0.1); font-size:0.9rem; color:rgba(255,255,255,0.82);
  }
  .steps-list li:last-child{ border-bottom:none; }
  .steps-list li::before{
    counter-increment:step; content:counter(step);
    flex-shrink:0; width:28px;height:28px;border-radius:50%;
    background:var(--lime-500); color:var(--forest-950); font-weight:700; font-size:0.82rem;
    display:flex;align-items:center;justify-content:center; font-family:'IBM Plex Mono',monospace;
  }

  @media (max-width:1024px){
    .form-wrap{ grid-template-columns:1fr; }
  }
  @media (max-width:640px){
    .form-grid{ grid-template-columns:1fr; }
    .form-card{ padding:28px 22px; }
    .footer-quick{ gap: 33px;}
    .info-card{ flex-direction: column;}
  }

  .project-filter{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px; }
  .filter-btn{
    font-family:'IBM Plex Mono',monospace; font-size:0.78rem; font-weight:600; letter-spacing:0.05em;
    text-transform:uppercase; padding:10px 20px; border:1.5px solid var(--line); background:#fff;
    color:var(--ink-600); cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .filter-btn:hover{ border-color:var(--lime-500); }
  .filter-btn.active{ background:var(--forest-950); border-color:var(--forest-950); color:#fff; }

  .project-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  .project-item{
    position:relative; overflow:hidden; cursor:zoom-in; background:var(--forest-950);
    aspect-ratio:4/3.2; clip-path:polygon(0 0, 100% 0, 100% 90%, 92% 100%, 0 100%);
  }
  .project-img{ width: 387px; height: 310px;}
  .project-img img{
    width:100%;height:100%;object-fit:cover; transition:transform .5s ease, filter .5s ease;
  }
  .project-item:hover img{ transform:scale(1.08); }
  .project-overlay{
    position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end;
    padding:22px 24px; background:linear-gradient(0deg, rgba(13,24,10,0.88) 0%, transparent 55%);
    opacity:0; transition:opacity .3s ease;
  }
  .project-item:hover .project-overlay{ opacity:1; }
  .project-overlay .p-cat{ font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--lime-300); margin-bottom:6px; }
  .project-overlay h3{ color:#fff; font-size:1.1rem; margin:0; }
  .zoom-icon{
    position:absolute; top:16px; right:16px; z-index:3;
    width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.4);
    color:#fff; display:flex;align-items:center;justify-content:center;
    opacity:0; transform:scale(.8); transition:opacity .3s ease, transform .3s ease, background .2s ease;
  }
  .project-item:hover .zoom-icon{ opacity:1; transform:scale(1); }
  .zoom-icon svg{ width:17px;height:17px; }

  .lightbox{
    position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center;
    background:rgba(13,24,10,0.94); padding:40px;
  }
  .lightbox.open{ display:flex; }
  .lightbox-inner{ position:relative; max-width:1000px; width:100%; text-align:center; }
  .lightbox-inner img{
    max-width:100%; max-height:78vh; margin:0 auto; box-shadow:0 30px 80px -20px rgba(0,0,0,0.6);
    display:block;
  }
  .lightbox-caption{ color:#fff; margin-top:18px; font-family:'Fraunces',serif; font-size:1.2rem; }
  .lightbox-caption span{ display:block; font-family:'IBM Plex Mono',monospace; font-size:0.75rem; color:var(--lime-300); letter-spacing:0.08em; text-transform:uppercase; margin-top:6px; }
  .lightbox-close{
    position:absolute; top:0; right:0; width:42px;height:42px;border-radius:50%;
    background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.4); color:#fff;
    display:flex;align-items:center;justify-content:center; cursor:pointer; transition:background .2s ease;
  }
  .lightbox-close:hover{ background:var(--lime-500); color:var(--forest-950); }
  .lightbox-close svg{ width:18px;height:18px; }
  .lightbox-nav{
    position:absolute; top:50%; transform:translateY(-50%); width:46px;height:46px;border-radius:50%;
    background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.4); color:#fff;
    display:flex;align-items:center;justify-content:center; cursor:pointer; transition:background .2s ease;
  }
  .lightbox-nav:hover{ background:var(--lime-500); color:var(--forest-950); }
  .lightbox-nav svg{ width:20px;height:20px; }
  .lightbox-nav.prev{ left:-60px; }
  .lightbox-nav.next{ right:-60px; }

  

  @media (max-width:1024px){
    .project-grid{ grid-template-columns:repeat(2,1fr); }
    .project-img{ width: 100%; height: 100%;}
  }
  @media (max-width:760px){
    .project-grid{ grid-template-columns:1fr; }
    .lightbox{ padding:20px; }
    .lightbox-nav.prev{ left:4px; }
    .lightbox-nav.next{ right:4px; }
    .lightbox-close{ top:-46px; }
  }

  .contact-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px;  }
  .contact-tile{
    background:#fff; border:1px solid var(--line); padding:30px; text-align:center;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .contact-tile:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
  .contact-tile .ci{
    width:56px;height:56px;border-radius:50%; margin:0 auto 18px; background:var(--sand-50);
    display:flex;align-items:center;justify-content:center; color:var(--leaf-500);
  }
  .contact-tile .ci svg{ width:26px;height:26px; }
  .contact-tile h4{ font-size:1.05rem; margin-bottom:8px; color:var(--forest-950); }
  .contact-tile p{ color:var(--ink-600); font-size:0.9rem; margin:0; }
  .map-wrap{ position:relative; border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow); }
  .map-wrap iframe{ width:100%; height:420px; border:0; display:block; filter:grayscale(0.15) contrast(1.05); }
  .map-chip{
    position:absolute; z-index:3; top:24px; left:24px; max-width:300px;
    background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
    padding:22px 24px; display:flex; flex-direction:column; gap:12px;
  }
  .map-chip-icon{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:var(--leaf-500); color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .map-chip-icon svg{ width:18px; height:18px; }
  .map-chip-text{ font-size:0.86rem; color:var(--ink-600); line-height:1.5; }
  .map-chip-text strong{ display:block; color:var(--forest-950); font-size:0.95rem; margin-bottom:4px; }
  .map-chip-link{
    font-family:'IBM Plex Mono',monospace; font-size:0.74rem; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--leaf-500); font-weight:600; width:fit-content;
    border-bottom:1px solid var(--leaf-500);
  }
  .map-chip-link:hover{ color:var(--forest-800); border-color:var(--forest-800); }
  @media (max-width:560px){
    .map-chip{ position:static; max-width:none; box-shadow:none; border:none; border-bottom:1px solid var(--line); }
  }

  @media (max-width:900px){
    .contact-strip{ grid-template-columns:1fr; }
  }

  .detail-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; }
  .detail-media{ position:relative; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3.3; }
  .detail-media img{ width:100%; height:100%; object-fit:cover; }

  /* ================= Product image gallery: main + thumbnails ================= */
  .pd-gallery{ display:flex; flex-direction:column; gap:14px; }
  .pd-main{
    position:relative; overflow:hidden; box-shadow:var(--shadow);
    aspect-ratio:4/3.3; background:var(--sand-50);
  }
  .pd-main img{
    width:100%; height:100%; object-fit:cover; display:block;
    opacity:1; transition:opacity .25s ease;
  }
  .pd-main img.is-swapping{ opacity:0; }
  .pd-thumbs-row{ display:flex; align-items:center; gap:8px; }
  .pd-thumbs{
    display:flex; gap:12px; flex:1; min-width:0;
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .pd-thumbs::-webkit-scrollbar{ display:none; }
  .pd-thumb{
    flex:0 0 calc(25% - 9px); scroll-snap-align:start;
    padding:0; margin:0; background:none; cursor:pointer;
    border:2px solid transparent; overflow:hidden; position:relative;
    aspect-ratio:1/1; opacity:0.55;
    transition:opacity .2s ease, border-color .2s ease;
  }
  .pd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .pd-thumb:hover{ opacity:0.85; }
  .pd-thumb.active{ opacity:1; border-color:var(--lime-500); }
  .pd-thumb-nav{
    flex:0 0 auto; width:32px; height:32px; border-radius:50%;
    background:var(--forest-950); color:var(--lime-500); border:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:background .2s ease, color .2s ease, opacity .2s ease;
  }
  .pd-thumb-nav svg{ width:15px; height:15px; }
  .pd-thumb-nav:hover{ background:var(--lime-500); color:var(--forest-950); }
  .pd-thumb-nav:disabled{ opacity:0.3; cursor:default; pointer-events:none; }
  @media (max-width:520px){
    .pd-thumbs{ gap:8px; }
    .pd-thumb{ flex-basis:calc(33.333% - 6px); }
    .pd-thumb-nav{ width:28px; height:28px; }
    .pd-thumb-nav svg{ width:13px; height:13px; }
  }

  .detail-text h2{  font-size: 30px; color: var(--forest-600); }
  .detail-text p{ color:var(--ink-600); margin-bottom:20px; font-size: 15px; }

  /* ================= Product specs (right of gallery image) ================= */
  .pd-specs{ margin-top:22px; }
  .pd-specs .specs-tabs{ margin-bottom:26px; }
  .pd-specs .specs-tab{ padding:11px 22px; font-size:0.92rem; }
  .pd-specs .specs-panel.active{ display:flex; flex-direction:column; gap:26px; }
  .pd-specs .specs-group-title{ font-size:0.88rem; padding-bottom:10px; margin-bottom:2px; }
  .pd-specs .specs-row{ padding:10px 0; font-size:0.88rem; gap:14px; }
  .pd-specs .specs-group:last-child .specs-row:last-child{ border-bottom:none; }
  @media (max-width:480px){
    .pd-specs .specs-tab{ padding:9px 16px; font-size:0.8rem; }
    .pd-specs .specs-row{ flex-direction:column; gap:4px; }
    .pd-specs .specs-row strong{ text-align:left; }
  }

  /* ================= Specifications & Warranty ================= */
  .specs-tabs{ display:flex; gap:10px; margin-bottom:40px; }
  .specs-panel{ display:none; }
  .specs-panel.active{ display:block; }

  .specs-groups{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px 60px; }
  .specs-group-title{
    font-family:'IBM Plex Mono',monospace; font-size:0.78rem; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--leaf-500); font-weight:600;
    padding-bottom:12px; margin:0 0 4px; border-bottom:2px solid var(--lime-500);
  }
  .specs-rows{ display:flex; flex-direction:column; list-style:none; margin:0; padding:0; }
  .specs-row{
    display:flex; justify-content:space-between; align-items:baseline; gap:20px;
    padding:14px 0; border-bottom:1px solid var(--line); font-size:0.92rem;
  }
  .specs-row:last-child{ border-bottom:none; }
  .specs-row span{ color:var(--ink-600); flex-shrink:0; }
  .specs-row strong{ color:var(--forest-950); font-weight:700; text-align:right; }
  @media (max-width:760px){
    .specs-groups{ grid-template-columns:1fr; gap:32px; }
  }
  @media (max-width:480px){
    .specs-row{ flex-direction:column; gap:4px; }
    .specs-row strong{ text-align:left; }
  }

  .warranty-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  .warranty-card{
    background:#fff; border:1px solid var(--line); padding:32px 28px; text-align:center;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .warranty-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
  .warranty-icon{
    width:52px; height:52px; border-radius:50%; margin:0 auto 18px;
    background:var(--leaf-500); color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .warranty-icon svg{ width:24px; height:24px; }
  .warranty-card h4{ font-size:1rem; margin-bottom:10px; color:var(--forest-950); }
  .warranty-card .wyears{ font-family:'Fraunces',serif; font-weight:600; font-size:1.9rem; color:var(--lime-500); line-height:1; }
  .warranty-card p{ color:var(--ink-600); font-size:0.85rem; margin:6px 0 0; }
  @media (max-width:760px){
    .warranty-grid{ grid-template-columns:1fr; }
  }
  .info-card.wide{ display:block; max-width:760px; margin:0 auto; }
  .detail-text .date{ color: var(--leaf-500);}
  .info-card.wide h4{ text-align:center; }
  .breadcrumb{ display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:0.78rem; letter-spacing:0.04em; color:rgba(255,255,255,0.65); margin-top:14px; }
  .breadcrumb a{ color:rgba(255,255,255,0.85); }
  .breadcrumb a:hover{ color:var(--lime-300); }
  .breadcrumb .sep{ color:rgba(255,255,255,0.4); }
  @media (max-width:1024px){
    .detail-grid{ grid-template-columns:1fr; }
  }

  .about-mini{
    display:grid; grid-template-columns:repeat(3,1fr); gap:0;
    margin-top:32px; position:relative; overflow:hidden;
    background:var(--sand-50); border:1px solid var(--line); border-left:4px solid var(--lime-500);
  }
  .about-mini::after{
    content:""; position:absolute; top:-40px; right:-40px; width:120px; height:120px; z-index:0;
    background-image:radial-gradient(var(--leaf-400) 1.5px, transparent 1.5px);
    background-size:16px 16px; opacity:0.35; pointer-events:none;
  }
  .about-mini > div{
    position:relative; z-index:1;
    padding:26px 24px; border-left:1px solid var(--line);
    display:flex; flex-direction:column; gap:12px;
    transition:background .25s ease;
  }
  .about-mini > div:first-child{ border-left:none; }
  .about-mini > div:hover{ background:rgba(160,183,60,0.10); }
  .about-mini .ami-head{ display:flex; align-items:center; gap:12px; }
  .about-mini .ami-icon{
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    background:var(--leaf-500); color:#fff;
    display:flex; align-items:center; justify-content:center;
    transition:background .25s ease, transform .25s ease;
  }
  .about-mini .ami-icon svg{ width:16px; height:16px; }
  .about-mini > div:hover .ami-icon{ background:var(--forest-950); transform:scale(1.08); }
  .about-mini h4{
    font-family:'IBM Plex Mono',monospace; font-size:0.9rem; letter-spacing:0.04em;
    text-transform:uppercase; color:var(--leaf-500); font-weight:600; margin:0;
    white-space:nowrap;
  }
  @media (max-width:900px){
    .about-mini h4{ font-size:0.62rem; letter-spacing:0.02em; }
  }
  .about-mini p{ font-size:0.9rem; color:var(--ink-600); margin:0; line-height:1.55; }
  @media (max-width:760px){
    .about-mini{ grid-template-columns:1fr; border-left:4px solid var(--lime-500); }
    .about-mini > div{ border-left:none; border-top:1px solid var(--line); }
    .about-mini > div:first-child{ border-top:none; }
  }

  /* ================= Privacy Policy / Terms & Conditions pages ================= */
  .pp-layout{ display:grid; grid-template-columns:270px 1fr; gap:64px; align-items:start; }

  .pp-toc{
    position:sticky; top:110px; background:var(--sand-50); border:1px solid var(--line); padding:26px;
  }
  .pp-toc h4{
    font-family:'IBM Plex Mono',monospace; font-size:1.00rem; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--leaf-500); font-weight:600; margin:0 0 16px;
  }
  .pp-toc ul{ display:flex; flex-direction:column; }
  .pp-toc li{ border-bottom:1px solid var(--line); }
  .pp-toc li:last-child{ border-bottom:none; }
  .pp-toc a{
    display:flex; align-items:center; gap:12px; padding:12px 0;
    color:var(--ink-600); font-weight:600; font-size:0.88rem;
    transition:color .2s ease, gap .2s ease;
  }
  .pp-toc a .num{
    font-family:'IBM Plex Mono',monospace; color:var(--leaf-500); font-size:0.78rem; flex-shrink:0;
  }
  .pp-toc a:hover{ color:var(--forest-800); gap:16px; }
  .pp-toc .pp-toc-updated{
    margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
    font-size:0.8rem; color:var(--ink-600);
  }
  .pp-toc .pp-toc-updated strong{ display:block; color:var(--forest-950); font-size:0.82rem; margin-bottom:4px; }

  .pp-content{ max-width:760px; }
  .pp-intro-note{ color:var(--ink-600); font-size:0.98rem; margin-bottom:0; }

  .pp-section{ padding-bottom:48px; margin-bottom:48px; border-bottom:1px solid var(--line); scroll-margin-top:110px; }
  .pp-section:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
  .pp-head{ display:flex; align-items:center; gap:18px; margin-bottom:20px; }
  .pp-num{
    width:50px;height:50px;border-radius:50%; flex-shrink:0;
    background:var(--forest-950); color:var(--lime-300);
    font-family:'Fraunces',serif; font-size:1.25rem; font-weight:600;
    display:flex; align-items:center; justify-content:center;
  }
  .pp-head h3{ margin:0; font-size:1.35rem; color:var(--forest-950); }
  .pp-section > p{ color:var(--ink-600); font-size:0.96rem; margin:0 0 6px; }

  .pp-list{ display:flex; flex-direction:column; gap:16px; margin-top:20px; padding:0; }
  .pp-list li{ display:flex; align-items:flex-start; gap:14px; color:var(--ink-600); font-size:0.95rem; }
  .pp-list li .tick{ margin-top:1px; }
  .pp-list li strong{ color:var(--forest-950); }

  .pp-callout{
    display:flex; gap:16px; align-items:flex-start;
    background:var(--sand-50); border-left:4px solid var(--lime-500);
    padding:22px 26px; margin-top:22px;
  }
  .pp-callout .ci{
    width:38px;height:38px;border-radius:50%;flex-shrink:0; background:#fff; border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center; color:var(--forest-800);
  }
  .pp-callout .ci svg{ width:18px;height:18px; }
  .pp-callout p{ margin:0; color:var(--ink-600); font-size:0.92rem; }
  .pp-callout strong{ color:var(--forest-950); }

  @media (max-width:1024px){
    .pp-layout{ grid-template-columns:1fr; gap:36px; }
    .pp-toc{ position:relative; top:0; }
  }
  @media (max-width:640px){
    .pp-head{ gap:14px; }
    .pp-num{ width:42px;height:42px;font-size:1.05rem; }
  }

  /* ================= Pagination ================= */
  #pagination{ margin-top:48px; }
  #pagination nav{ display:flex; justify-content:center; }
  #pagination ul.pagination{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap:8px; list-style:none; margin:0; padding:0;
  }
  #pagination ul.pagination li{ margin:0; }
  #pagination ul.pagination li a{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:42px; height:42px; padding:0 14px;
    border:1.5px solid var(--line); border-radius:10px;
    background:#fff; color:var(--forest-950);
    font-family:'IBM Plex Mono',monospace; font-size:0.88rem; font-weight:600;
    text-decoration:none; transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
  }
  #pagination ul.pagination li a:hover{
    border-color:var(--lime-500); background:var(--sand-50); transform:translateY(-2px);
  }
  #pagination ul.pagination li.active a{
    background:var(--lime-500); border-color:var(--lime-500); color:var(--forest-950); cursor:default;
  }
  #pagination ul.pagination li.active a:hover{ transform:none; }
  #pagination ul.pagination li:first-child a,
  #pagination ul.pagination li:last-child a,
  #pagination ul.pagination li:nth-child(2) a,
  #pagination ul.pagination li:nth-last-child(2) a{
    font-family:'Inter',sans-serif; font-size:0.8rem; letter-spacing:0.02em; padding:0 16px;
  }
  @media (max-width:480px){
    #pagination ul.pagination{ gap:6px; }
    #pagination ul.pagination li a{ min-width:36px; height:36px; padding:0 10px; font-size:0.8rem; }
  }