/*
Theme Name: Key of Sustainability
Theme URI: https://keyofsustainability.com
Author: Key of Sustainability
Description: Custom theme for a sustainability consulting site focused on garment and textile (RMG) factories. Covers environmental services (audits, energy & water, chemical/wastewater, certifications, ESG reporting, worker welfare training) and social compliance programmes (HRDD, Worker's Voice, Grievance Mechanism, Social Dialogue).
Version: 1.0
Text Domain: key-of-sustainability
*/

  :root{
    --ink:#1C2620;
    --ink-soft:#48584A;
    --cotton:#F4F1E6;
    --cotton-dim:#EAE5D2;
    --forest:#2F5233;
    --forest-deep:#1C3620;
    --loom-green:#7C9473;
    --rust:#B5622E;
    --rust-deep:#95501F;
    --thread:#D9D3BE;
    --max-w:1180px;

    --font-display:'Fraunces', serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    font-family:var(--font-body);
    background:var(--cotton);
    color:var(--ink);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  a{color:inherit;}

  img,svg{display:block;max-width:100%;}

  .wrap{
    max-width:var(--max-w);
    margin:0 auto;
    padding:0 32px;
  }

  h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;color:var(--ink);}

  .eyebrow{
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--rust-deep);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px;height:1px;
    background:var(--rust-deep);
    display:inline-block;
  }

  /* ---------- stitch progress bar ---------- */
  #stitch-progress{
    position:fixed;
    top:0; left:0;
    width:100%;
    height:4px;
    z-index:999;
    background:transparent;
  }
  #stitch-progress svg{width:100%;height:100%;display:block;}
  #stitch-progress line{
    stroke:var(--rust);
    stroke-width:4;
    stroke-dasharray:10 8;
    stroke-linecap:round;
  }

  /* ---------- nav ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(244,239,228,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--thread);
  }
  nav.wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:78px;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-display);
    font-weight:600;
    font-size:19px;
    color:var(--ink);
    text-decoration:none;
  }
  .logo svg{width:26px;height:26px;flex-shrink:0;}
  .logo span em{
    font-style:italic;
    color:var(--rust-deep);
  }
  .nav-links{
    display:flex;
    gap:34px;
    list-style:none;
    font-size:14.5px;
    font-weight:500;
  }
  .nav-links a{
    text-decoration:none;
    color:var(--ink-soft);
    position:relative;
    padding-bottom:4px;
  }
  .nav-links a::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:0; height:1.5px;
    background:var(--rust);
    transition:width .25s ease;
  }
  .nav-links a:hover{color:var(--ink);}
  .nav-links a:hover::after{width:100%;}
  .nav-cta{
    font-size:14px;
    font-weight:600;
    background:var(--forest);
    color:var(--cotton);
    padding:10px 20px;
    border-radius:3px;
    text-decoration:none;
    white-space:nowrap;
  }
  .nav-cta:hover{background:var(--forest-deep);}
  .menu-toggle{display:none;}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    background:var(--forest-deep);
    color:var(--cotton);
    overflow:hidden;
    padding:120px 0 100px;
  }
  .weave-bg{
    position:absolute; inset:0;
    opacity:0.10;
    pointer-events:none;
  }
  .hero .wrap{position:relative; z-index:2;}
  .hero-inner{
    max-width:700px;
  }
  .hero .eyebrow{color:var(--thread);}
  .hero .eyebrow::before{background:var(--thread);}
  .hero h1{
    font-size:clamp(38px, 5.2vw, 64px);
    line-height:1.06;
    margin:22px 0 24px;
    color:#fff;
  }
  .hero h1 .accent{
    font-style:italic;
    font-weight:500;
    color:#E3A582;
  }
  .hero p.lede{
    font-size:18.5px;
    max-width:540px;
    color:#D4E0E1;
    margin-bottom:38px;
  }
  .hero-ctas{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-body);
    font-weight:600;
    font-size:15px;
    padding:14px 26px;
    border-radius:3px;
    text-decoration:none;
    transition:all .2s ease;
    border:1.5px solid transparent;
    cursor:pointer;
  }
  .btn-primary{
    background:var(--rust);
    color:#fff;
  }
  .btn-primary:hover{background:var(--rust-deep); transform:translateY(-1px);}
  .btn-ghost{
    border-color:rgba(244,239,228,0.4);
    color:var(--cotton);
  }
  .btn-ghost:hover{border-color:var(--cotton); background:rgba(244,239,228,0.07);}

  /* ---------- section base ---------- */
  section{padding:104px 0;}
  .section-head{
    max-width:640px;
    margin-bottom:56px;
  }
  .section-head h2{
    font-size:clamp(28px,3.4vw,40px);
    margin-top:16px;
    line-height:1.15;
  }
  .section-head p{
    margin-top:16px;
    font-size:16.5px;
    color:var(--ink-soft);
  }

  /* ---------- stitch divider ---------- */
  .stitch-divider{
    width:100%;
    height:14px;
    margin:0 0 0;
  }
  .stitch-divider svg{width:100%;height:100%;}
  .stitch-divider line{
    stroke:var(--thread);
    stroke-width:2;
    stroke-dasharray:9 7;
    stroke-linecap:round;
  }

  /* ---------- why-now ---------- */
  .why-now{background:var(--cotton);}
  .why-now .intro-text{
    max-width:680px;
    font-size:17.5px;
    color:var(--ink-soft);
    margin-bottom:56px;
  }
  .pressure-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
  }
  .pressure-card{
    background:#fff;
    border:1px solid var(--thread);
    border-radius:4px;
    padding:30px 26px;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .pressure-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(20,40,45,0.08);
  }
  .pressure-card .tag{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--loom-green);
    margin-bottom:14px;
    display:block;
  }
  .pressure-card h3{
    font-size:20px;
    margin-bottom:10px;
    font-weight:600;
  }
  .pressure-card p{
    font-size:14.8px;
    color:var(--ink-soft);
  }

  /* ---------- services ---------- */
  .services{background:var(--cotton-dim);}
  .service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--thread);
    border:1px solid var(--thread);
    border-radius:4px;
    overflow:hidden;
  }
  .service-card{
    background:var(--cotton-dim);
    padding:34px 30px;
    transition:background .2s ease;
  }
  .service-card:hover{background:#fff;}
  .service-card:last-child{grid-column:1 / -1;}
  .service-card:last-child p{max-width:640px;}
  .service-grid > .service-card:nth-child(7){grid-column:2;}
  @media (max-width:900px){
    .service-grid > .service-card:nth-child(7){grid-column:auto;}
  }
  .service-card .icon{
    width:38px;height:38px;
    margin-bottom:20px;
    color:var(--forest);
  }
  .service-card h3{
    font-size:18.5px;
    margin-bottom:10px;
    font-weight:600;
  }
  .service-card p{
    font-size:14.6px;
    color:var(--ink-soft);
  }

  /* ---------- programmes ---------- */
  .programmes{background:var(--cotton);}
  .programme-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
  }
  .programme-card{
    background:#fff;
    border:1px solid var(--thread);
    border-top:3px solid var(--loom-green);
    border-radius:4px;
    padding:28px 24px;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .programme-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(28,38,32,0.08);
  }
  .programme-card .p-index{
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--loom-green);
    background:rgba(124,148,115,0.12);
    padding:4px 10px;
    border-radius:20px;
    display:inline-block;
    margin-bottom:18px;
  }
  .programme-card h3{
    font-size:17.5px;
    margin-bottom:10px;
    line-height:1.25;
  }
  .programme-card p{
    font-size:14.2px;
    color:var(--ink-soft);
  }

  /* ---------- process ---------- */
  .process{background:var(--forest-deep); color:var(--cotton);}
  .process .section-head p{color:#C4D2D3;}
  .process .eyebrow{color:var(--thread);}
  .process .eyebrow::before{background:var(--thread);}
  .process-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    position:relative;
  }
  .process-list::before{
    content:"";
    position:absolute;
    top:26px; left:0; right:0;
    height:1px;
    background:repeating-linear-gradient(to right, rgba(244,239,228,0.35) 0 10px, transparent 10px 18px);
  }
  .process-step{
    position:relative;
    padding:0 20px 0 0;
  }
  .process-step .num{
    font-family:var(--font-mono);
    font-size:14px;
    color:var(--rust);
    background:var(--forest-deep);
    display:inline-block;
    padding-right:10px;
    position:relative;
    z-index:2;
    margin-bottom:20px;
  }
  .process-step .num::before{
    content:"";
    display:inline-block;
    width:10px;height:10px;
    border-radius:50%;
    background:var(--rust);
    margin-right:10px;
    vertical-align:middle;
  }
  .process-step h3{
    color:#fff;
    font-size:19px;
    margin-bottom:10px;
  }
  .process-step p{
    font-size:14.3px;
    color:#C4D2D3;
  }

  /* ---------- why-us ---------- */
  .why-us{background:var(--cotton);}
  .whyus-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
  }
  .whyus-item h3{
    font-size:19px;
    margin-bottom:10px;
    display:flex;
    align-items:baseline;
    gap:10px;
  }
  .whyus-item h3 .mark{
    color:var(--rust);
    font-family:var(--font-mono);
    font-size:14px;
  }
  .whyus-item p{
    font-size:15px;
    color:var(--ink-soft);
  }

  /* ---------- contact ---------- */
  .contact{background:var(--cotton-dim);}
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:start;
  }
  .contact-info .field{
    margin-bottom:26px;
  }
  .contact-info .field .tag{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--loom-green);
    display:block;
    margin-bottom:6px;
  }
  .placeholder-box{
    border:1.5px dashed var(--forest);
    border-radius:4px;
    padding:12px 16px;
    font-size:15px;
    color:var(--ink-soft);
    background:rgba(43,76,92,0.04);
  }
  .contact-form{
    background:#fff;
    border:1px solid var(--thread);
    border-radius:6px;
    padding:34px;
  }
  .contact-form label{
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:6px;
    color:var(--ink);
  }
  .contact-form input,
  .contact-form textarea{
    width:100%;
    font-family:var(--font-body);
    font-size:14.5px;
    padding:11px 13px;
    border:1px solid var(--thread);
    border-radius:3px;
    margin-bottom:18px;
    background:var(--cotton);
    color:var(--ink);
  }
  .contact-form textarea{resize:vertical; min-height:100px;}
  .contact-form input:focus,
  .contact-form textarea:focus{
    outline:2px solid var(--forest);
    outline-offset:1px;
  }
  .form-note{
    font-size:12.5px;
    color:var(--ink-soft);
    margin-top:-6px;
    margin-bottom:18px;
  }

  /* ---------- footer ---------- */
  footer{
    background:var(--ink);
    color:var(--cotton-dim);
    padding:56px 0 30px;
  }
  .footer-top{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:30px;
    padding-bottom:36px;
    border-bottom:1px solid rgba(244,239,228,0.15);
    margin-bottom:24px;
  }
  .footer-logo{
    font-family:var(--font-display);
    font-size:19px;
    font-weight:600;
    color:#fff;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .footer-logo svg{width:24px;height:24px;}
  .footer-links{
    display:flex;
    gap:30px;
    list-style:none;
    font-size:14px;
  }
  .footer-links a{text-decoration:none; color:var(--cotton-dim);}
  .footer-links a:hover{color:#fff;}
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    font-size:12.5px;
    color:rgba(244,239,228,0.5);
    flex-wrap:wrap;
    gap:10px;
  }

  /* ---------- reveal animation ---------- */
  .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal.in{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1; transform:none; transition:none;}
  }

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .pressure-grid, .service-grid, .whyus-grid{grid-template-columns:1fr;}
    .programme-grid{grid-template-columns:1fr 1fr;}
    .process-list{grid-template-columns:1fr 1fr; row-gap:36px;}
    .process-list::before{display:none;}
    .contact-grid{grid-template-columns:1fr;}
  }
  @media (max-width:640px){
    .nav-links{display:none;}
    .programme-grid{grid-template-columns:1fr;}
    .process-list{grid-template-columns:1fr;}
    section{padding:72px 0;}
    .hero{padding:90px 0 70px;}
  }