/* Sustainable NValue — Home page styles */

  body{
    font-family:'Inter', system-ui, sans-serif;
    color:var(--slate);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
  }
  .eyebrow{
    font-family:'Inter',sans-serif;
    font-size:0.72rem;
    font-weight:600;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--amber);
  }
  .about .eyebrow, .value .eyebrow, section:not([class]) .eyebrow{color:var(--amber-deep);}


  /* HERO */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; align-items:center;
    background:linear-gradient(115deg, #08182D 0%, #0B1E36 38%, #14385F 100%);
    overflow:hidden;
  }
  .hero-photo{
    position:absolute; inset:0;
    background-image:url('../images/hero-home.jpg');
    background-size:cover; background-position:center;
  }
  .hero-overlay{
    position:absolute; inset:0;
    background:rgba(16,38,55,0.55);
  }
  .hero-content{position:relative; z-index:2; padding-top:70px;}
  .hero h1{
    color:#fff; font-weight:700;
    font-size:clamp(2.6rem, 6vw, 4.6rem);
    line-height:1.02;
  }
  .hero .sub{
    color:#B9C6D6; font-weight:500;
    font-size:clamp(1.3rem, 2.6vw, 1.9rem);
    margin-top:4px;
  }
  .hero .tagline{
    color:#fff; font-weight:600; font-size:clamp(1rem,1.6vw,1.15rem);
    letter-spacing:0.02em;
  }
  .scroll-cue{
    position:absolute; bottom:36px; left:24px; z-index:2;
    display:flex; align-items:center; gap:10px;
    color:rgba(255,255,255,0.55); font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase;
  }
  .scroll-cue .line{width:1px; height:34px; background:rgba(255,255,255,0.4); animation:scrollpulse 2s ease-in-out infinite;}
  @keyframes scrollpulse{0%,100%{opacity:0.3;} 50%{opacity:1;}}

  /* SECTION GENERIC */
  section{padding:100px 0;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem); color:var(--ink); font-weight:700; margin-top:10px; line-height:1.15;}
  .section-head p{color:var(--slate-soft); margin-top:16px; font-size:1.05rem; line-height:1.6;}

  /* ABOUT */
  .about{background:#fff;}
  .about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center;}
  .about-grid p{color:var(--slate); font-size:1.05rem; line-height:1.75; margin-bottom:16px;}
  @media (max-width:860px){ .about-grid{grid-template-columns:1fr;} }

  /* signature: net-zero trajectory graphic */
  .trajectory-card{
    background:var(--ink); border-radius:16px; padding:40px 32px 32px;
    position:relative; overflow:hidden;
    box-shadow:0 24px 50px -20px rgba(16,38,55,0.35);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .trajectory-card:hover{transform:translateY(-4px); box-shadow:0 28px 60px -18px rgba(16,38,55,0.45);}
  .trajectory-card .cap{color:#8FA4BC; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:22px;}
  .trajectory-card svg{width:100%; height:auto; display:block; transition:transform .7s ease;}
  .trajectory-card:hover svg{transform:scale(1.07);}
  .traj-line{
    stroke:var(--amber); stroke-width:2.5; fill:none;
    stroke-dasharray:520; stroke-dashoffset:520;
    animation:draw 2.2s ease-out .3s forwards;
  }
  @keyframes draw{to{stroke-dashoffset:0;}}
  .traj-dot{fill:var(--amber);}
  .traj-labels{display:flex; justify-content:space-between; margin-top:14px; font-size:0.72rem; color:#7C90A8; letter-spacing:0.04em;}

  /* STATS */
  .stats{background:var(--paper);}
  .stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .stat-cell{
    background:#fff; padding:44px 34px; border:1px solid var(--line); border-radius:16px;
    position:relative; overflow:hidden;
    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .stat-cell::before{
    content:''; position:absolute; top:0; left:0; width:100%; height:3px;
    background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
  }
  .stat-cell:hover{border-color:var(--amber); transform:translateY(-6px); box-shadow:0 20px 40px -18px rgba(16,38,55,0.2);}
  .stat-cell:hover::before{transform:scaleX(1);}
  .stat-num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(2.4rem,4vw,3.4rem); color:var(--ink);}
  .stat-cell p{color:var(--slate-soft); margin-top:10px; font-size:0.95rem; line-height:1.55;}
  @media (max-width:760px){ .stats-grid{grid-template-columns:1fr;} }

  /* VALUE DRIVERS */
  .value{background:var(--paper);}
  .value-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  .value-card{
    background:#fff; border:1px solid var(--line); border-radius:16px; padding:32px 26px;
    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
    position:relative; overflow:hidden;
  }
  .value-card::before{
    content:''; position:absolute; top:0; left:0; width:100%; height:3px;
    background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
  }
  .value-card:hover{border-color:var(--amber); transform:translateY(-6px); box-shadow:0 20px 40px -18px rgba(16,38,55,0.2);}
  .value-card:hover::before{transform:scaleX(1);}
  .value-card .num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2.2rem; color:var(--amber-deep); letter-spacing:-0.02em;}
  .value-card .lbl{margin-top:12px; font-weight:600; color:var(--ink); font-size:1rem;}
  .value-card .sub{margin-top:6px; color:var(--slate-soft); font-size:0.85rem;}
  @media (max-width:860px){ .value-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .value-grid{grid-template-columns:1fr;} }

  /* SERVICES */
  .services{background:var(--ink); color:#fff;}
  .services .section-head p{color:#9FB0C4;}
  .services .eyebrow{color:var(--amber);}
  .services-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
  .service-card{
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1);
    border-radius:16px; padding:36px 32px; transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease, background .3s ease;
  }
  .service-card:hover{
    border-color:var(--amber); transform:translateY(-4px);
    box-shadow:0 20px 40px -16px rgba(0,0,0,0.35); background:rgba(255,255,255,0.05);
  }
  .service-card .icon-box{
    width:48px; height:48px; border-radius:12px; background:rgba(224,122,62,0.12);
    display:flex; align-items:center; justify-content:center; margin-bottom:20px;
    transition:background .3s ease;
  }
  .service-card:hover .icon-box{background:rgba(224,122,62,0.22);}
  .service-card .icon-box svg{width:24px; height:24px; color:var(--amber);}
  .service-col h3{font-size:1.1rem; font-weight:600; color:#fff; margin-bottom:20px; letter-spacing:0.02em;}
  .service-col ul{list-style:none;}
  .service-col li{
    padding:13px 0; border-top:1px solid rgba(255,255,255,0.08);
    font-size:0.95rem; color:#D7E0EA; display:flex; align-items:flex-start; gap:12px; line-height:1.5;
  }
  .service-col li:first-child{border-top:none;}
  .service-col li .bullet{
    flex-shrink:0; width:20px; height:20px; border-radius:6px; margin-top:2px;
    background:rgba(224,122,62,0.14); border:1px solid rgba(224,122,62,0.3);
    display:flex; align-items:center; justify-content:center;
  }
  .service-col li .bullet svg{width:11px; height:11px; color:var(--amber);}
  @media (max-width:760px){ .services-grid{grid-template-columns:1fr;} }
  .services-cta{margin-top:44px; text-align:center;}
  .btn-outline-light{
    display:inline-block; border:1px solid rgba(255,255,255,0.3); color:#fff;
    padding:13px 30px; border-radius:999px; font-size:0.9rem; font-weight:600;
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .btn-outline-light:hover{background:rgba(255,255,255,0.08); border-color:var(--amber); transform:translateY(-3px);}

  .btn-outline-dark{
    display:inline-block; border:1px solid rgba(10,26,42,0.25); color:var(--ink);
    padding:13px 30px; border-radius:999px; font-size:0.9rem; font-weight:600;
    transition:background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
  }
  .btn-outline-dark:hover{background:rgba(224,122,62,0.08); border-color:var(--amber); color:var(--amber); transform:translateY(-3px);}


  /* QUOTE */
  .quote blockquote{
    max-width:780px; margin:0 auto; font-family:'Space Grotesk',sans-serif;
    font-size:clamp(1.2rem,2.4vw,1.6rem); font-weight:500; line-height:1.5; color:#EDF1F5;
  }
  .quote cite{display:block; margin-top:24px; color:#8FA4BC; font-size:0.85rem; font-style:normal;}

  /* TEAM */
  .team{background:#08182D;}
  .team .section-head h2{color:#fff;}
  .team-card{
    display:flex; align-items:center; gap:28px; max-width:520px;
    background:#0F2A47; border:1px solid rgba(255,255,255,0.08); border-radius:16px;
    padding:32px 36px; cursor:pointer; text-decoration:none;
    box-shadow:0 20px 50px -20px rgba(0,0,0,0.5);
    transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease, background .3s ease;
  }
  .team-card:hover{
    border-color:var(--amber); transform:translateY(-4px);
    box-shadow:0 20px 40px -16px rgba(0,0,0,0.5); background:#13315A;
  }
  .team-photo{
    width:96px; height:96px; border-radius:50%; flex-shrink:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center; border:3px solid rgba(255,255,255,0.1);
    transition:border-color .3s ease, transform .3s ease;
  }
  .team-card:hover .team-photo{border-color:var(--amber); transform:scale(1.05);}
  .team-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .team-info h3{font-size:1.2rem; color:#fff; font-weight:700; display:flex; align-items:center; gap:8px;}
  .team-arrow{opacity:0; transform:translateX(-6px); transition:opacity .3s ease, transform .3s ease; color:var(--amber); font-weight:700;}
  .team-card:hover .team-arrow{opacity:1; transform:translateX(0);}
  .team-info .role{color:var(--amber); font-size:0.88rem; font-weight:600; margin-top:2px; transition:color .3s ease;}

  /* CTA BAND */
  .cta-band{background:#08182D; text-align:center;}
  .cta-band h2{color:#fff; font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700;}
  .cta-band p{color:rgba(255,255,255,0.85); margin-top:12px; font-size:1.02rem;}
  .btn-dark{
    display:inline-block; margin-top:28px; background:var(--amber); color:#fff;
    padding:15px 34px; border-radius:999px; font-weight:600; font-size:0.95rem;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .btn-dark:hover{transform:translateY(-3px); box-shadow:0 14px 28px -10px rgba(224,122,62,0.5);}


  .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    .reveal, .traj-line, .scroll-cue .line{transition:none; animation:none; opacity:1; transform:none; stroke-dashoffset:0;}
  }