/* ============================================================
   GrowArova — Asset Management, Ballari (Bellary), Karnataka
   Stylesheet | Theme: deep forest green + gold + cream
   Palette sourced from the GrowArova brand creative
   ------------------------------------------------------------
   1.  Design tokens (dark + light)
   2.  Base / reset
   3.  Ticker, header & navigation
   4.  Hero (canvas, parallax, business card)
   5.  Marquee & section headings
   6.  About / Sectors / Documents / Process
   7.  Contact & forms
   8.  Footer, WhatsApp float, chat assistant
   9.  Responsive
   ============================================================ */

  :root{
    /* GrowArova brand palette — deep forest green, gold, cream */
    --charcoal:#0B2E21;          /* deepest forest green (page base)   */
    --charcoal2:#0F3A2A;         /* forest green (raised base)         */
    --graphite:#134734;          /* card green                         */
    --graphite2:#17553E;         /* card green (hover / elevated)      */
    --ember:#C9A227;             /* GrowArova gold                     */
    --ember2:#E3BE55;            /* light gold (accents, links)        */
    --ember-dim:rgba(201,162,39,.16);
    --brass:#BFA867;             /* muted antique gold (labels)        */
    --leaf:#7AA96D;              /* sprouting-leaf green               */
    --stone:#F3F0E4;             /* cream section background           */
    --stone2:#E7E2D2;
    --ink:#F2F7F1;               /* near-white text                    */
    --ink-dim:#C6DAC6;
    --ink-dim2:#9DB79E;
    --on-accent:#0B2E21;         /* text placed ON gold surfaces       */
    --line: rgba(242,247,241,0.12);
    --line-dark: rgba(11,46,33,0.12);
    --r:10px;
    --header-bg: rgba(11,46,33,0.88);
    --header-bg-scrolled: rgba(11,46,33,0.97);
    --ticker-bg: #082418;
    --ticker-border: rgba(255,255,255,.05);
    --grid-line: rgba(242,247,241,.02);
    --card-shadow: rgba(0,0,0,.35);
    --panel-ink:#0B2E21;
    --panel-ink-dim:#4A5B4C;
    color-scheme: dark;
  }
  :root[data-theme="light"]{
    /* Brighter, higher-contrast light theme (WCAG-AA body text) */
    --charcoal:#FFFFFF;
    --charcoal2:#F7F8F3;
    --graphite:#FFFFFF;
    --graphite2:#F2F5ED;
    --ember:#96730E;
    --ember2:#7A5B0A;
    --ember-dim:rgba(150,115,14,.12);
    --brass:#6B5423;
    --leaf:#2F6B3E;
    --stone:#F1EEE0;
    --stone2:#E7E2CE;
    --ink:#0D2117;
    --ink-dim:#3C4C3E;
    --ink-dim2:#57685A;
    --panel-ink:#12261B;
    --panel-ink-dim:#3C4C3E;
    --on-accent:#0D2117;
    --line: rgba(13,33,23,0.12);
    --line-dark: rgba(13,33,23,0.14);
    --header-bg: rgba(255,255,255,0.92);
    --header-bg-scrolled: rgba(255,255,255,0.98);
    --ticker-bg: #EFEBDA;
    --ticker-border: rgba(13,33,23,.08);
    --grid-line: rgba(13,33,23,.035);
    --card-shadow: rgba(13,33,23,.12);
    color-scheme: light;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }
  body{
    font-family:'Inter',sans-serif;
    background:var(--charcoal);
    color:var(--ink);
    line-height:1.6;
    font-size:16px;
    overflow-x:hidden;
    transition:background .35s ease, color .35s ease;
  }
  h1,h2,h3,h4{font-family:'Roboto Slab',serif; line-height:1.15; font-weight:600;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  button{font-family:'Inter',sans-serif;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
  section{position:relative;}
  :focus-visible{outline:2px solid var(--ember2); outline-offset:3px;}
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- TICKER ---------- */
  .ticker{background:var(--ticker-bg); padding:8px 0; overflow:hidden; border-bottom:1px solid var(--ticker-border); transition:background .35s ease, border-color .35s ease;}
  .ticker-track{display:flex; width:max-content; animation:tick 30s linear infinite;}
  @keyframes tick{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  .ti{display:inline-flex; align-items:center; gap:9px; padding:0 26px; font-size:.72rem; font-weight:600; letter-spacing:.03em; color:var(--ink-dim2); white-space:nowrap;}
  .ti .dot{width:5px; height:5px; border-radius:50%; background:var(--ember2); flex-shrink:0;}
  .ti b{color:var(--ember2);}

  /* ---------- NAV ---------- */
  header{
    position:sticky; top:0; z-index:200;
    background:var(--header-bg);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    transition:background .3s ease, border-color .35s ease;
  }
  header.scrolled{background:var(--header-bg-scrolled);}
  .nav-inner{display:flex; align-items:center; gap:18px; padding:16px 28px; max-width:1180px; margin:0 auto;}
  .brand{display:flex; align-items:center; gap:11px; flex-shrink:0;}
  .logo-box{
    width:42px; height:42px; border-radius:10px;
    background:#FAF8F0; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid rgba(201,162,39,.55);
    box-shadow:0 2px 10px rgba(11,46,33,.28);
    flex-shrink:0;
  }
  .logo-box img{width:100%; height:100%; object-fit:cover; display:block;}
  .brand-text{display:flex; flex-direction:column; gap:1px;}
  .brand-name{font-family:'Roboto Slab',serif; font-size:1.25rem; font-weight:700; letter-spacing:.01em; white-space:nowrap;}
  .brand-name span{color:var(--ember2);}
  .brand-sub{font-size:.66rem; color:var(--ink-dim2); letter-spacing:.06em; white-space:nowrap;}
  nav.links{display:flex; gap:32px; margin-left:auto; font-size:.94rem;}
  nav.links a{position:relative; padding:4px 0; color:var(--ink-dim); transition:color .2s ease;}
  nav.links a:hover, nav.links a:focus-visible{color:var(--ink);}
  nav.links a::after{content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--ember2); transition:width .25s ease;}
  nav.links a:hover::after{width:100%;}
  .nav-cta{
    display:inline-flex; align-items:center; gap:6px;
    padding:10px 20px; background:linear-gradient(135deg,var(--ember),var(--ember2));
    color:var(--on-accent); border-radius:7px; font-size:.88rem; font-weight:600;
    box-shadow:0 4px 16px rgba(201,162,39,.28);
    transition:transform .2s ease, box-shadow .2s ease;
    white-space:nowrap; flex-shrink:0;
  }
  .nav-cta:hover, .nav-cta:focus-visible{transform:translateY(-2px); box-shadow:0 10px 26px rgba(201,162,39,.4);}
  .theme-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:9px; flex-shrink:0;
    background:rgba(242,247,241,.05); border:1px solid var(--line); color:var(--ink);
    cursor:pointer; transition:border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .theme-toggle:hover, .theme-toggle:focus-visible{border-color:var(--brass); background:rgba(201,162,39,.1);}
  .theme-toggle svg{width:18px; height:18px;}
  .theme-toggle .icon-moon{display:block;}
  .theme-toggle .icon-sun{display:none;}
  [data-theme="light"] .theme-toggle .icon-moon{display:none;}
  [data-theme="light"] .theme-toggle .icon-sun{display:block;}

  /* ---------- LANGUAGE TOGGLE ---------- */
  .lang-toggle{
    display:inline-flex; align-items:center; gap:2px; flex-shrink:0;
    background:rgba(242,247,241,.05); border:1px solid var(--line);
    border-radius:9px; padding:3px; height:38px; box-sizing:border-box;
  }
  .lang-btn{
    appearance:none; border:none; background:transparent; cursor:pointer;
    color:var(--ink-dim); font-size:.74rem; font-weight:700; letter-spacing:.02em;
    padding:6px 10px; border-radius:6px; transition:background .2s ease, color .2s ease;
    font-family:'Inter',sans-serif;
  }
  .lang-btn:hover, .lang-btn:focus-visible{color:var(--ink);}
  .lang-btn.active{
    background:linear-gradient(135deg,var(--ember),var(--ember2)); color:var(--on-accent);
  }
  [lang="hi"] h1, [lang="hi"] .typed-pre, [lang="hi"] .typed-word{font-family:'Inter',sans-serif;}
  .menu-btn{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; flex-shrink:0;}
  .menu-btn span{width:22px; height:2px; background:var(--ink); transition:transform .25s ease, opacity .25s ease;}
  .menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-btn.open span:nth-child(2){opacity:0;}
  .menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .mobile-panel{display:none; flex-direction:column; background:var(--graphite); border-top:1px solid var(--line);}
  .mobile-panel a{padding:16px 28px; border-bottom:1px solid var(--line); color:var(--ink-dim);}
  .mobile-panel a:hover{color:var(--ink); background:var(--graphite2);}
  .mobile-panel.open{display:flex;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:70px 0 0;
    background:var(--charcoal);
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  #heroCanvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.55;}
  .hgrid{
    position:absolute; inset:0; z-index:0;
    background-image:linear-gradient(var(--grid-line) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
    background-size:56px 56px;
  }
  .orb{position:absolute; border-radius:50%; filter:blur(85px); pointer-events:none; animation:orbFloat 9s ease-in-out infinite; z-index:0;}
  .orb1{width:560px; height:560px; background:radial-gradient(circle,rgba(201,162,39,.22),transparent 70%); top:-160px; right:-100px;}
  .orb2{width:420px; height:420px; background:radial-gradient(circle,rgba(122,169,109,.16),transparent 70%); bottom:-100px; left:-80px; animation-duration:11s; animation-delay:-4s;}
  @keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(20px,-16px) scale(1.06);} 66%{transform:translate(-16px,20px) scale(.96);}}
  .scan{position:absolute; left:0; right:0; height:2px; z-index:1; pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(201,162,39,.55),rgba(122,169,109,.35),transparent);
    animation:scanLine 6s linear infinite;
  }
  @keyframes scanLine{0%{top:-2px; opacity:0;} 6%{opacity:1;} 94%{opacity:1;} 100%{top:100%; opacity:0;}}

  /* Parallax scene layers - depth motion behind hero content */
  .parallax-scene{position:absolute; inset:-4%; z-index:0; pointer-events:none;}
  .parallax-scene svg{position:absolute; inset:0; width:100%; height:100%; will-change:transform;}
  .layer-back .shape{fill:var(--graphite2); opacity:.55;}
  .layer-mid .shape{fill:var(--ember-dim); opacity:.9;}
  .layer-mid .shape2{fill:var(--graphite2); opacity:.5;}
  .layer-front .line{stroke:var(--brass); stroke-width:1; opacity:.28; fill:none;}
  .layer-front .dot{fill:var(--ember2); opacity:.5;}

  .hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; padding:56px 0 60px; perspective:1400px;}
  .hleft{animation:fadeLeft .9s ease both;}
  @keyframes fadeLeft{from{opacity:0; transform:translateX(-32px);} to{opacity:1; transform:translateX(0);}}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(201,162,39,.1); border:1px solid rgba(201,162,39,.32);
    color:var(--ember2); font-size:.72rem; font-weight:700; letter-spacing:.05em;
    padding:6px 14px; border-radius:20px; text-transform:uppercase; margin-bottom:20px;
  }
  .hdot{width:6px; height:6px; background:var(--ember2); border-radius:50%; animation:blink 1.8s ease-in-out infinite; flex-shrink:0;}
  @keyframes blink{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.3; transform:scale(1.5);}}
  .hero h1{font-size:clamp(2.2rem,4vw,3.3rem); color:var(--ink); max-width:14ch;}
  .hero h1 .accent{color:var(--ember2);}
  .typed-row{display:flex; align-items:center; gap:6px; margin:20px 0 18px; min-height:28px; flex-wrap:wrap;}
  .typed-pre{font-family:'Roboto Slab',serif; font-size:1rem; font-weight:600; color:var(--ink-dim2);}
  .typed-word{font-family:'Roboto Slab',serif; font-size:1rem; font-weight:700; color:var(--ember2);}
  .typed-cursor{display:inline-block; width:2px; height:1.1em; background:var(--ember2); animation:cur .75s step-end infinite; vertical-align:middle;}
  @keyframes cur{0%,100%{opacity:1;} 50%{opacity:0;}}
  .hero p.lede{font-size:1.04rem; color:var(--ink-dim); max-width:46ch;}
  .hero-actions{margin-top:30px; display:flex; gap:16px; flex-wrap:wrap;}
  .btn-primary{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 26px; background:linear-gradient(135deg,var(--ember),var(--ember2));
    color:var(--on-accent); border-radius:7px; font-weight:600;
    box-shadow:0 6px 20px rgba(201,162,39,.3);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .btn-primary:hover, .btn-primary:focus-visible{transform:translateY(-3px); box-shadow:0 14px 34px rgba(201,162,39,.42);}
  .btn-ghost{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 26px; border:1px solid var(--line); color:var(--ink); border-radius:7px;
    transition:border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .btn-ghost:hover, .btn-ghost:focus-visible{border-color:var(--brass); background:rgba(242,247,241,.04); transform:translateY(-3px);}

  /* Hero right: floating business card */
  .hright{position:relative; animation:fadeRight .9s .15s ease both; perspective:1200px;}
  @keyframes fadeRight{from{opacity:0; transform:translateX(32px);} to{opacity:1; transform:translateX(0);}}
  .hright-inner{position:relative; transform-style:preserve-3d; transition:transform .1s ease-out;}
  .bizcard{transform-style:preserve-3d;}
  .bc-head, .bc-rows, .bc-strip{transform:translateZ(18px);}
  .fb{
    position:absolute; border-radius:9px; padding:9px 13px; display:flex; align-items:center; gap:7px;
    background:rgba(11,46,33,.9); backdrop-filter:blur(10px);
    border:1px solid var(--line); box-shadow:0 10px 26px rgba(0,0,0,.35);
    font-size:.72rem; font-weight:600; z-index:10; white-space:nowrap;
  }
  .fb1{top:-16px; left:-14px; color:var(--ember2); animation:floatSm 4s ease-in-out infinite;}
  .fb2{bottom:-14px; right:-16px; color:var(--brass); animation:floatSm 5s ease-in-out infinite reverse;}
  @keyframes floatSm{0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}
  .bizcard{
    background:rgba(15,58,42,.92); border:1px solid var(--line); border-radius:16px;
    padding:26px; backdrop-filter:blur(16px); box-shadow:0 30px 68px rgba(0,0,0,.4);
  }
  .bc-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
  .bc-title{font-size:.72rem; font-weight:700; letter-spacing:.04em; color:rgba(242,247,241,.85); font-family:'Roboto Slab',serif;}
  .open-pill{display:flex; align-items:center; gap:5px; background:rgba(201,162,39,.16); border:1px solid rgba(201,162,39,.36); color:var(--ember2); font-size:.62rem; font-weight:700; padding:4px 9px; border-radius:10px; letter-spacing:.03em;}
  .open-dot{width:5px; height:5px; background:var(--ember2); border-radius:50%; animation:livePulse 1.6s ease-in-out infinite;}
  @keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(227,190,85,.55);} 70%{box-shadow:0 0 0 7px rgba(227,190,85,0);}}
  .bc-rows{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); margin-bottom:16px;}
  .bc-row{display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line);}
  .bc-row .l{font-size:.78rem; color:var(--ink-dim2);}
  .bc-row .v{font-family:'Roboto Slab',serif; font-size:.92rem; text-align:right;}
  .bc-strip{display:flex; flex-direction:column; gap:7px;}
  .bc-item{display:flex; align-items:center; gap:9px; background:rgba(242,247,241,.04); border:1px solid var(--line); border-radius:8px; padding:9px 11px; transition:background .2s ease;}
  .bc-item:hover{background:rgba(201,162,39,.09);}
  .bc-item .mk{font-size:.66rem; font-weight:700; padding:2px 8px; border-radius:7px; background:rgba(201,162,39,.2); color:var(--ember2); flex-shrink:0;}
  .bc-item .tx{font-size:.78rem; font-weight:600; color:var(--ink);}

  .fact-strip{border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); position:relative; z-index:2;}
  .fact{padding:24px 28px; border-right:1px solid var(--line); transition:background .2s ease;}
  .fact:hover{background:rgba(201,162,39,.05);}
  .fact:last-child{border-right:none;}
  .fact .k{font-family:'Roboto Slab',serif; font-size:1.4rem; color:var(--ember2);}
  .fact .v{font-size:.82rem; color:var(--ink-dim); margin-top:4px;}

  /* ---------- MARQUEE ---------- */
  .mq-wrap{background:linear-gradient(135deg,var(--ember),var(--ember2)); padding:11px 0; overflow:hidden;}
  .mq-track{display:inline-flex; white-space:nowrap; animation:mq 26s linear infinite;}
  @keyframes mq{0%{transform:translateX(0);} 100%{transform:translateX(-50%);}}
  .mi{display:inline-flex; align-items:center; gap:8px; padding:0 26px; font-size:.78rem; font-weight:700; color:var(--on-accent); letter-spacing:.02em;}
  .ms{color:rgba(11,46,33,.45); font-size:.9rem;}

  /* ---------- SECTION HEADERS ---------- */
  .section-head{max-width:56ch; margin-bottom:44px;}
  .section-head h2{font-size:clamp(1.7rem,2.6vw,2.25rem);}
  .section-head p{margin-top:14px; color:var(--ink-dim); font-size:1.02rem;}
  .light .section-head p{color:var(--panel-ink-dim);}
  section.pad{padding:92px 0;}

  /* ---------- ABOUT ---------- */
  .light{background:var(--stone); color:var(--panel-ink);}
  .light h2{color:var(--panel-ink);}
  .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
  .about-copy p{color:var(--panel-ink-dim); margin-bottom:16px; max-width:52ch;}
  .about-list{display:flex; flex-direction:column; border-top:1px solid var(--line-dark); margin-bottom:22px;}
  .about-list .row{display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--line-dark);}
  .about-list .row .label{font-size:.82rem; color:var(--panel-ink-dim); letter-spacing:.02em;}
  .about-list .row .val{font-family:'Roboto Slab',serif; font-size:1rem; text-align:right;}
  .acards{display:flex; flex-direction:column; gap:10px;}
  .acard{
    background:rgba(16,35,26,.04); border:1px solid var(--line-dark); border-radius:var(--r);
    padding:14px 16px; transition:all .3s ease; cursor:default;
  }
  .acard:hover{border-color:rgba(201,162,39,.4); background:rgba(201,162,39,.06); transform:translateX(7px);}
  .acard .t{font-size:.92rem; font-weight:700; color:var(--panel-ink); margin-bottom:3px;}
  .acard .d{font-size:.84rem; color:var(--panel-ink-dim);}

  /* ---------- CARD GRIDS (sectors / why) ---------- */
  .services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; perspective:1000px;}
  .service-card{
    background:var(--graphite); border:1px solid var(--line); border-radius:14px;
    padding:30px 26px; transition:transform .15s ease-out, border-color .3s ease, box-shadow .3s ease;
    transform-style:preserve-3d;
  }
  .service-card:hover{border-color:rgba(201,162,39,.4); box-shadow:0 18px 40px rgba(0,0,0,.3);}
  .service-mark{width:34px; height:34px; border-radius:8px; background:rgba(201,162,39,.14); display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-size:1rem; transition:transform .25s ease;}
  .service-card:hover .service-mark{transform:scale(1.12) rotate(-4deg);}
  .service-card h3{font-size:1.12rem; margin-bottom:10px; color:var(--ink);}
  .service-card p{color:var(--ink-dim); font-size:.94rem;}

  /* ---------- DOCUMENTS (spec sheet) ---------- */
  .material{background:var(--graphite); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .material-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
  .material-copy p{color:var(--ink-dim); max-width:52ch; margin-bottom:14px;}
  .spec-sheet{border:1px solid var(--line); background:var(--charcoal2); border-radius:12px; overflow:hidden; transition:border-color .3s ease;}
  .spec-sheet:hover{border-color:rgba(201,162,39,.35);}
  .spec-sheet .sheet-head{padding:15px 22px; border-bottom:1px solid var(--line); font-size:.74rem; letter-spacing:.05em; color:var(--brass);}
  .spec-row{display:flex; justify-content:space-between; gap:20px; padding:15px 22px; border-bottom:1px solid var(--line); font-size:.92rem; transition:background .2s ease;}
  .spec-row:hover{background:rgba(201,162,39,.05);}
  .spec-row:last-child{border-bottom:none;}
  .spec-row .label{color:var(--ink-dim);}
  .spec-row .val{font-family:'Roboto Slab',serif; text-align:right;}

  /* Conveyor motion strip - ambient looping motion graphic */
  .conveyor{
    position:relative; height:46px; border-radius:8px; overflow:hidden;
    background:var(--charcoal2); border:1px solid var(--line); margin:18px 22px 22px;
  }
  .conveyor::before{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(-45deg, rgba(201,162,39,.28) 0 14px, transparent 14px 30px);
    animation:conveyorMove 1.8s linear infinite;
  }
  @keyframes conveyorMove{from{background-position:0 0;} to{background-position:60px 0;}}
  .conveyor-label{
    position:relative; z-index:1; height:100%; display:flex; align-items:center; justify-content:center;
    font-size:.7rem; letter-spacing:.06em; color:var(--ink-dim2); background:rgba(11,46,33,.55);
    backdrop-filter:blur(2px);
  }

  /* ---------- PROCESS ---------- */
  .process-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; margin-top:12px;}
  .process-steps::before{
    content:""; position:absolute; top:26px; left:12%; right:12%; height:2px;
    background:linear-gradient(90deg,transparent,var(--line) 15%,var(--line) 85%,transparent);
  }
  .pstep{padding:0 14px; text-align:left; position:relative; z-index:1;}
  .pnum{
    width:52px; height:52px; border-radius:50%; background:var(--graphite);
    border:2px solid rgba(201,162,39,.35); display:flex; align-items:center; justify-content:center;
    margin-bottom:16px; font-family:'Roboto Slab',serif; font-size:1.05rem; font-weight:700; color:var(--ember2);
    transition:all .3s ease;
  }
  .pstep:hover .pnum{background:var(--ember); color:var(--ink); border-color:var(--ember); transform:scale(1.1); box-shadow:0 0 0 8px rgba(201,162,39,.1);}
  .pstep h4{font-size:.98rem; margin-bottom:6px; color:var(--ink);}
  .pstep p{font-size:.86rem; color:var(--ink-dim);}

  /* ---------- DISCLOSURE ---------- */
  .disclosure .wrap{max-width:820px;}
  .disclosure p{color:var(--panel-ink-dim); margin-bottom:14px; font-size:.98rem; max-width:70ch;}
  .disclosure h2{margin-bottom:22px;}

  /* ---------- CONTACT ---------- */
  .contact{background:var(--charcoal);}
  .contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px;}
  .contact-info{display:flex; flex-direction:column; gap:20px;}
  .contact-card{border:1px solid var(--line); padding:22px 24px; border-radius:10px; transition:border-color .25s ease, transform .25s ease;}
  .contact-card:hover{border-color:rgba(201,162,39,.4); transform:translateY(-3px);}
  .contact-card .label{font-size:.76rem; color:var(--brass); letter-spacing:.03em; margin-bottom:8px;}
  .contact-card .value{font-family:'Roboto Slab',serif; font-size:1.15rem;}
  .contact-card a.value{transition:color .2s ease;}
  .contact-card a.value:hover, .contact-card a.value:focus-visible{color:var(--ember2);}

  .mini-steps{margin-top:8px; display:flex; flex-direction:column; border-top:1px solid var(--line);}
  .mini-step{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:.88rem; color:var(--ink-dim);}
  .mini-step .n{font-family:'Roboto Slab',serif; color:var(--ember2); flex-shrink:0;}

  form{display:flex; flex-direction:column; gap:18px;}
  .field{display:flex; flex-direction:column; gap:8px;}
  .field label{font-size:.85rem; color:var(--ink-dim);}
  .field input, .field textarea, .field select{
    background:var(--graphite); border:1px solid var(--line); color:var(--ink);
    padding:13px 14px; border-radius:7px; font-family:'Inter',sans-serif; font-size:.95rem;
    transition:border-color .2s ease;
  }
  .field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--ember2);}
  .field textarea{resize:vertical; min-height:108px;}
  .form-note{font-size:.82rem; color:var(--ink-dim);}
  .submit-btn{
    align-self:flex-start; margin-top:6px; padding:14px 30px;
    background:linear-gradient(135deg,var(--ember),var(--ember2)); color:var(--on-accent); border:none;
    border-radius:7px; font-family:'Inter',sans-serif; font-size:.95rem; font-weight:600; cursor:pointer;
    box-shadow:0 6px 20px rgba(201,162,39,.28);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .submit-btn:hover, .submit-btn:focus-visible{transform:translateY(-3px); box-shadow:0 14px 32px rgba(201,162,39,.4);}
  .field.error input, .field.error textarea{border-color:#C0553C;}
  .field .err-msg{display:none; font-size:.8rem; color:#E39B7A;}
  .field.error .err-msg{display:block;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--graphite); border-top:1px solid var(--line); padding:52px 0 26px;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:36px;}
  .footer-grid h4{font-size:.82rem; color:var(--brass); letter-spacing:.03em; margin-bottom:15px; font-weight:600;}
  .footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
  .footer-brand .name{font-family:'Roboto Slab',serif; font-size:1.15rem;}
  .footer-grid p{color:var(--ink-dim); font-size:.9rem; max-width:38ch;}
  .footer-links{display:flex; flex-direction:column; gap:10px;}
  .footer-links a{color:var(--ink-dim); font-size:.9rem; transition:color .2s ease;}
  .footer-links a:hover, .footer-links a:focus-visible{color:var(--ink);}
  .footer-bottom{border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.8rem; color:var(--ink-dim);}

  .skip-link{position:absolute; left:-9999px; top:0; background:var(--ember); color:var(--ink); padding:12px 20px; z-index:999;}
  .skip-link:focus{left:12px; top:12px;}

  /* ---------- WHATSAPP FLOAT ---------- */
  .whatsapp-float{
    position:fixed; right:24px; bottom:24px; z-index:300;
    width:58px; height:58px; border-radius:50%;
    background:#25D366; color:#0B2E21;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 12px 30px rgba(0,0,0,.35);
    animation:waFloat 3.2s ease-in-out infinite;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .whatsapp-float:hover, .whatsapp-float:focus-visible{transform:scale(1.08); box-shadow:0 16px 36px rgba(0,0,0,.45);}
  .whatsapp-float svg{width:29px; height:29px;}
  .whatsapp-float .wa-ring{
    position:absolute; inset:0; border-radius:50%; border:2px solid rgba(37,211,102,.55);
    animation:waPulse 2.4s ease-out infinite;
  }
  @keyframes waFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}
  @keyframes waPulse{0%{transform:scale(1); opacity:.7;} 100%{transform:scale(1.6); opacity:0;}}
  @media (max-width:520px){
    .whatsapp-float{right:16px; bottom:16px; width:52px; height:52px;}
    .whatsapp-float svg{width:26px; height:26px;}
  }

  /* ---------- CHATBOT ---------- */
  .chatbot-toggle{
    position:fixed; right:96px; bottom:24px; z-index:300;
    width:58px; height:58px; border-radius:50%;
    background:linear-gradient(135deg,var(--ember),var(--ember2)); color:var(--ink);
    display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
    box-shadow:0 12px 30px rgba(0,0,0,.35);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .chatbot-toggle:hover, .chatbot-toggle:focus-visible{transform:scale(1.08); box-shadow:0 16px 36px rgba(0,0,0,.45);}
  .chatbot-toggle svg{width:26px; height:26px;}
  .chatbot-toggle .icon-close{display:none;}
  .chatbot-toggle.open .icon-chat{display:none;}
  .chatbot-toggle.open .icon-close{display:block;}
  .chatbot-badge{
    position:absolute; top:-3px; right:-3px; width:14px; height:14px; border-radius:50%;
    background:#25D366; border:2px solid var(--charcoal2);
  }
  .chatbot-panel{
    position:fixed; right:24px; bottom:92px; z-index:300;
    width:340px; max-width:calc(100vw - 32px); max-height:min(480px, calc(100vh - 140px));
    background:var(--graphite); border:1px solid var(--line); border-radius:16px;
    box-shadow:0 30px 68px rgba(0,0,0,.45);
    display:none; flex-direction:column; overflow:hidden;
    opacity:0; transform:translateY(14px) scale(.98);
    transition:opacity .22s ease, transform .22s ease;
  }
  .chatbot-panel.open{display:flex;}
  .chatbot-panel.show{opacity:1; transform:translateY(0) scale(1);}
  .chatbot-head{
    display:flex; align-items:center; gap:11px; padding:16px 18px;
    background:linear-gradient(135deg,var(--ember),var(--ember2)); color:var(--on-accent); flex-shrink:0;
  }
  .chatbot-head .avatar{
    width:34px; height:34px; border-radius:50%; background:rgba(242,247,241,.22);
    display:flex; align-items:center; justify-content:center; font-family:'Roboto Slab',serif; font-weight:700; font-size:.8rem; flex-shrink:0;
  }
  .chatbot-head .ct{display:flex; flex-direction:column; gap:1px; min-width:0;}
  .chatbot-head .ct-name{font-family:'Roboto Slab',serif; font-weight:700; font-size:.94rem;}
  .chatbot-head .ct-status{font-size:.7rem; opacity:.9; display:flex; align-items:center; gap:5px;}
  .chatbot-head .ct-status .dot{width:6px; height:6px; border-radius:50%; background:#D6F5C9; flex-shrink:0;}
  .chatbot-body{
    flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:10px;
    background:var(--charcoal2);
  }
  .cb-msg{max-width:85%; padding:10px 13px; border-radius:12px; font-size:.86rem; line-height:1.5;}
  .cb-msg.bot{align-self:flex-start; background:var(--graphite2); color:var(--ink); border-bottom-left-radius:3px;}
  .cb-msg.user{align-self:flex-end; background:linear-gradient(135deg,var(--ember),var(--ember2)); color:var(--on-accent); border-bottom-right-radius:3px;}
  .cb-quick{display:flex; flex-wrap:wrap; gap:7px; padding:0 14px 12px; background:var(--charcoal2); flex-shrink:0;}
  .cb-chip{
    appearance:none; cursor:pointer; border:1px solid var(--line); background:rgba(242,247,241,.05); color:var(--ink);
    font-size:.76rem; padding:7px 11px; border-radius:20px; transition:border-color .2s ease, background .2s ease;
  }
  .cb-chip:hover, .cb-chip:focus-visible{border-color:var(--brass); background:rgba(201,162,39,.12);}
  .chatbot-input{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:var(--graphite); flex-shrink:0;}
  .chatbot-input input{
    flex:1; background:var(--charcoal2); border:1px solid var(--line); color:var(--ink);
    padding:10px 13px; border-radius:20px; font-family:'Inter',sans-serif; font-size:.86rem;
  }
  .chatbot-input input:focus{outline:none; border-color:var(--ember2);}
  .chatbot-input button{
    width:38px; height:38px; border-radius:50%; flex-shrink:0; border:none; cursor:pointer;
    background:linear-gradient(135deg,var(--ember),var(--ember2)); color:var(--on-accent);
    display:flex; align-items:center; justify-content:center;
  }
  .chatbot-input button svg{width:16px; height:16px;}
  @media (max-width:520px){
    .chatbot-toggle{right:84px; bottom:16px; width:52px; height:52px;}
    .chatbot-panel{right:16px; bottom:78px; width:calc(100vw - 32px);}
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:920px){
    nav.links{display:none;}
    .menu-btn{display:flex;}
    .hero-grid{grid-template-columns:1fr; gap:40px; padding-top:36px;}
    .hright{order:-1;}
    .fact-strip{grid-template-columns:repeat(2,1fr);}
    .fact:nth-child(2){border-right:none;}
    .about-grid, .material-grid, .contact-grid{grid-template-columns:1fr;}
    .services-grid{grid-template-columns:1fr;}
    .process-steps{grid-template-columns:1fr; gap:26px;}
    .process-steps::before{display:none;}
    .footer-grid{grid-template-columns:1fr; gap:28px;}
  }
  @media (max-width:520px){
    .wrap{padding:0 20px;}
    .nav-inner{padding:14px 20px;}
    section.pad{padding:60px 0;}
    .fact-strip{grid-template-columns:1fr 1fr;}
    .fact{padding:18px;}
    .hero-actions{flex-direction:column; align-items:stretch;}
    .btn-primary, .btn-ghost{justify-content:center;}
  }

  /* ---------- BRAND ACCENTS (GrowArova leaf / gold theme) ---------- */
  .brand-name span{color:var(--ember2);}
  .layer-front .line{stroke:var(--leaf);}
  .layer-mid .shape2{fill:rgba(122,169,109,.16);}
  .hero::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:180px; z-index:1;
    background:linear-gradient(180deg, transparent, rgba(11,46,33,.55));
    pointer-events:none;
  }
  :root[data-theme="light"] .hero::after{background:linear-gradient(180deg, transparent, rgba(250,248,241,.65));}
  .service-mark{background:rgba(201,162,39,.16); border:1px solid rgba(201,162,39,.28);}
  .fact .k{color:var(--ember2);}
  .eyebrow{background:rgba(201,162,39,.1); border-color:rgba(201,162,39,.34);}

  /* Address block in the contact card */
  .contact-card .value.addr{font-size:1rem; line-height:1.55; font-family:'Inter',sans-serif; font-weight:500;}
  .contact-card .map-link{
    display:inline-flex; align-items:center; gap:6px; margin-top:10px;
    font-size:.82rem; font-weight:600; color:var(--ember2);
    border-bottom:1px solid transparent; transition:border-color .2s ease;
  }
  .contact-card .map-link:hover, .contact-card .map-link:focus-visible{border-color:var(--ember2);}
  .footer-address{color:var(--ink-dim); font-size:.9rem; line-height:1.6; font-style:normal;}
  address{font-style:normal;}


  /* ============================================================
     FIXES & POLISH — mobile header, light-mode dark surfaces
     (layout/contrast only; no animation is added or removed)
     ============================================================ */

  /* -- The business card & floating badges sit on a dark green
        surface in BOTH themes, so lock their text to light. ---- */
  :root[data-theme="light"] .bizcard{color:#F2F7F1;}
  :root[data-theme="light"] .bc-title{color:rgba(242,247,241,.88);}
  :root[data-theme="light"] .bc-row{border-bottom-color:rgba(242,247,241,.14);}
  :root[data-theme="light"] .bc-rows{border-top-color:rgba(242,247,241,.14);}
  :root[data-theme="light"] .bc-row .l{color:#9DB79E;}
  :root[data-theme="light"] .bc-row .v{color:#F2F7F1;}
  :root[data-theme="light"] .bc-item{background:rgba(242,247,241,.05); border-color:rgba(242,247,241,.14);}
  :root[data-theme="light"] .bc-item .tx{color:#F2F7F1;}
  :root[data-theme="light"] .bc-item .mk{background:rgba(201,162,39,.22); color:#E3BE55;}
  :root[data-theme="light"] .open-pill{background:rgba(201,162,39,.18); border-color:rgba(201,162,39,.4); color:#E3BE55;}
  :root[data-theme="light"] .open-dot{background:#E3BE55;}
  :root[data-theme="light"] .fb{border-color:rgba(242,247,241,.16);}
  :root[data-theme="light"] .fb1{color:#E3BE55;}
  :root[data-theme="light"] .fb2{color:#9FCB8E;}

  /* -- Header fits small screens instead of overflowing -------- */
  .nav-inner{flex-wrap:nowrap; min-width:0;}
  .brand-text{min-width:0;}
  @media (max-width:820px){
    .nav-inner{gap:10px;}
    .nav-cta{display:none;}          /* moved into the mobile panel */
  }
  @media (max-width:430px){
    .nav-inner{gap:8px; padding:12px 16px;}
    .logo-box{width:36px; height:36px;}
    .brand-name{font-size:1.06rem;}
    .brand-sub{font-size:.56rem; letter-spacing:.05em;}
    .lang-toggle, .theme-toggle{height:34px;}
    .theme-toggle{width:34px;}
    .lang-btn{padding:5px 7px; font-size:.68rem;}
  }
  .mobile-panel .panel-cta{
    background:linear-gradient(135deg,var(--ember),var(--ember2));
    color:var(--on-accent); font-weight:700; border-bottom:none;
  }
  .mobile-panel .panel-cta:hover{color:var(--on-accent); filter:brightness(1.05); background:linear-gradient(135deg,var(--ember),var(--ember2));}

  /* -- Notch / safe-area support ------------------------------- */
  @supports (padding: max(0px)){
    .wrap{padding-left:max(28px, env(safe-area-inset-left)); padding-right:max(28px, env(safe-area-inset-right));}
    .whatsapp-float{bottom:max(24px, env(safe-area-inset-bottom));}
    .chatbot-toggle{bottom:max(24px, env(safe-area-inset-bottom));}
  }

  /* -- Long addresses never blow out a card -------------------- */
  .about-list .row .val, .contact-card .value{overflow-wrap:anywhere;}

  /* ============================================================
     GROWING PLANT — animated 3D background motif
     Pure CSS/SVG: a stem "grows" (stroke-dashoffset), leaves
     unfurl in sequence, and the whole scene sways on a 3D
     rotateY/rotateX loop. Respects prefers-reduced-motion via
     the global rule already defined above.
     ============================================================ */

  .grow-plant{position:absolute; pointer-events:none; z-index:0; overflow:visible;}
  .grow-plant__stage{width:100%; height:100%; transform-style:preserve-3d; will-change:transform;}
  .grow-plant__svg{width:100%; height:100%; overflow:visible; display:block;}

  .gp-stem{fill:none; stroke:var(--leaf); stroke-width:3.5; stroke-linecap:round;
    stroke-dasharray:230; stroke-dashoffset:230;
    animation:gpGrowStem 9s ease-in-out infinite;}
  .gp-shoot{fill:none; stroke:var(--leaf); stroke-width:2.6; stroke-linecap:round;
    stroke-dasharray:36; stroke-dashoffset:36;
    animation:gpGrowShoot 9s ease-in-out infinite;}
  .gp-leaf{fill:var(--ember2); opacity:0; transform-box:fill-box; transform-origin:50% 100%;
    transform:scale(.35); animation:gpLeaf 9s ease-in-out infinite;}
  .gp-leaf-1{animation-delay:.15s;}
  .gp-leaf-2{animation-delay:.55s;}
  .gp-leaf-3{animation-delay:.95s;}
  .gp-leaf-4{animation-delay:1.35s;}

  @keyframes gpGrowStem{
    0%{stroke-dashoffset:230;}
    38%,68%{stroke-dashoffset:0;}
    100%{stroke-dashoffset:230;}
  }
  @keyframes gpGrowShoot{
    0%,30%{stroke-dashoffset:36;}
    55%,70%{stroke-dashoffset:0;}
    100%{stroke-dashoffset:36;}
  }
  @keyframes gpLeaf{
    0%,12%{opacity:0; transform:scale(.32);}
    42%{opacity:.95; transform:scale(1);}
    68%{opacity:.95; transform:scale(1);}
    92%,100%{opacity:0; transform:scale(.5);}
  }

  /* Hero variant — large, faint, behind the copy */
  .grow-plant--hero{
    left:-6%; bottom:-8%; width:360px; height:440px; opacity:.16;
    perspective:1000px;
  }
  :root[data-theme="light"] .grow-plant--hero{opacity:.13;}
  .grow-plant--hero .grow-plant__stage{animation:gpSwayBig 10s ease-in-out infinite;}
  @keyframes gpSwayBig{
    0%,100%{transform:rotateY(-9deg) rotateX(3deg) rotateZ(-1.5deg);}
    50%{transform:rotateY(11deg) rotateX(-3deg) rotateZ(1.5deg);}
  }

  /* Persistent corner mascot — stays visible across the whole site while scrolling */
  .grow-plant--corner{
    position:fixed; left:16px; bottom:16px; width:74px; height:96px;
    opacity:.55; z-index:120; perspective:700px;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.25));
  }
  .grow-plant--corner .grow-plant__stage{animation:gpSwaySmall 7s ease-in-out infinite;}
  @keyframes gpSwaySmall{
    0%,100%{transform:rotateY(-14deg) rotateX(4deg);}
    50%{transform:rotateY(16deg) rotateX(-4deg);}
  }
  @media (max-width:640px){
    .grow-plant--corner{width:52px; height:68px; left:10px; bottom:10px; opacity:.45;}
  }
  @media (max-width:400px){
    .grow-plant--corner{display:none;}   /* keep the WhatsApp/chat corner clear on tiny screens */
  }