/* Layout: lembar lapangan di atas kertas krem. Hero terbuka dengan foto berbentuk lengkung (arch) dan cincin tahun pohon
   di belakangnya; bar perkiraan hijau hutan menumpang di tepi foto. Oranye keselamatan hanya untuk tombol dan stiker. */
:root {
  --bg: #EDF4EA;
  --surface: #F8FBF6;
  --surface-2: #DCEBD6;
  --fg: #14281B;
  --muted: #4A6252;
  --line: #C6DABF;
  --field: #7E9C85;
  --head: #14502F;
  --forest: #14502F;
  --forest-2: #1F6B40;
  --on-forest: #F6FBF3;
  --moss: #4F9A4A;
  --bark: #8A5A3B;
  --clay: #2F7A44;
  --safety: #F5A524;
  --on-safety: #1F1405;
  --accent-text: #14502F;
  --link: #14502F;
  --ring: #4F9A4A;
  --ring-forest: rgba(246, 251, 243, 0.14);
  --shadow: 0 1px 2px rgba(20, 40, 27, 0.08), 0 16px 32px -14px rgba(20, 60, 35, 0.28);
  --display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rings: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 400%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linejoin=%22round%22%3E%3Cpolygon points=%22214.8,200.0 214.8,200.9 214.6,201.9 214.3,202.7 213.9,203.6 213.4,204.4 213.0,205.2 212.5,206.0 212.0,206.7 211.5,207.5 210.9,208.2 210.3,208.9 209.6,209.4 208.8,209.9 207.9,210.4 207.1,210.8 206.2,211.2 205.4,211.5 204.5,211.8 203.6,212.1 202.7,212.3 201.8,212.4 200.8,212.4 199.9,212.3 199.0,212.1 198.1,212.0 197.2,211.8 196.2,211.7 195.3,211.6 194.3,211.5 193.3,211.3 192.3,211.0 191.5,210.5 190.7,209.9 190.0,209.2 189.4,208.5 188.8,207.7 188.3,207.0 187.8,206.1 187.5,205.3 187.2,204.4 187.1,203.5 187.0,202.6 187.1,201.7 187.2,200.8 187.3,200.0 187.4,199.2 187.5,198.3 187.5,197.5 187.5,196.6 187.6,195.7 187.9,194.9 188.2,194.1 188.7,193.3 189.3,192.6 189.9,191.9 190.5,191.3 191.2,190.6 191.9,190.0 192.6,189.4 193.4,188.8 194.2,188.4 195.1,188.0 196.0,187.7 197.0,187.5 197.9,187.3 198.9,187.2 199.9,187.0 200.8,186.9 201.8,186.9 202.8,187.0 203.8,187.3 204.7,187.6 205.5,188.1 206.3,188.7 207.0,189.3 207.7,189.9 208.4,190.5 209.1,191.1 209.7,191.6 210.4,192.2 211.0,192.8 211.6,193.5 212.1,194.2 212.6,195.0 213.0,195.7 213.5,196.5 213.9,197.3 214.3,198.2 214.6,199.1%22/%3E%3Cpolygon points=%22229.1,200.0 228.7,201.8 228.2,203.6 227.6,205.3 227.0,207.0 226.4,208.7 225.9,210.3 225.2,212.0 224.4,213.7 223.3,215.2 222.1,216.5 220.6,217.7 219.0,218.7 217.3,219.6 215.6,220.4 213.9,221.1 212.3,221.9 210.6,222.6 208.9,223.2 207.1,223.8 205.3,224.2 203.5,224.4 201.6,224.6 199.8,224.7 197.9,224.8 195.9,225.0 193.9,225.1 191.9,225.0 189.9,224.8 187.9,224.2 186.1,223.4 184.4,222.2 183.0,220.9 181.8,219.4 180.6,217.9 179.6,216.4 178.5,214.9 177.6,213.3 176.7,211.8 175.9,210.2 175.4,208.5 175.0,206.8 174.7,205.1 174.5,203.4 174.4,201.7 174.2,200.0 174.0,198.3 173.9,196.5 173.9,194.7 174.3,193.0 174.8,191.3 175.7,189.7 176.7,188.2 177.8,186.8 178.9,185.4 180.0,184.0 181.1,182.5 182.2,181.1 183.5,179.6 184.9,178.3 186.5,177.2 188.2,176.3 190.0,175.6 191.9,175.0 193.8,174.6 195.8,174.3 197.7,174.0 199.7,173.9 201.7,174.1 203.6,174.4 205.5,175.1 207.2,175.9 208.9,176.8 210.4,177.8 212.0,178.7 213.5,179.5 215.2,180.2 216.8,180.9 218.5,181.7 220.1,182.7 221.6,183.8 223.0,185.1 224.1,186.5 225.2,188.0 226.1,189.6 227.0,191.2 227.8,192.8 228.5,194.6 228.9,196.3 229.1,198.2%22/%3E%3Cpolygon points=%22243.1,200.0 242.8,202.7 242.3,205.4 241.8,208.0 241.2,210.6 240.4,213.2 239.4,215.7 238.0,218.1 236.2,220.3 234.1,222.2 231.8,223.8 229.5,225.3 227.1,226.7 224.9,228.1 222.7,229.6 220.6,231.2 218.4,232.8 216.1,234.3 213.6,235.7 211.0,236.8 208.2,237.6 205.4,238.2 202.5,238.7 199.6,239.0 196.6,239.2 193.6,239.2 190.5,238.9 187.6,238.2 184.8,237.1 182.3,235.5 180.0,233.7 177.9,231.7 175.9,229.7 174.0,227.8 172.0,225.9 170.1,224.0 168.2,222.1 166.4,220.0 164.9,217.7 163.8,215.3 162.9,212.8 162.3,210.3 161.8,207.7 161.4,205.1 161.0,202.6 160.7,200.0 160.6,197.4 160.8,194.8 161.2,192.2 162.0,189.7 163.0,187.2 164.1,184.8 165.3,182.4 166.4,180.0 167.5,177.5 168.7,175.0 170.2,172.5 172.0,170.2 174.1,168.2 176.6,166.6 179.4,165.4 182.3,164.5 185.2,163.8 188.2,163.4 191.1,163.0 193.9,162.7 196.8,162.6 199.6,162.7 202.4,163.0 205.2,163.6 207.9,164.4 210.5,165.1 213.1,165.9 215.7,166.6 218.4,167.2 221.2,167.8 223.9,168.7 226.6,169.8 229.1,171.2 231.3,173.1 233.2,175.1 234.8,177.4 236.3,179.7 237.7,182.0 239.0,184.4 240.3,186.8 241.5,189.3 242.4,191.9 243.0,194.6 243.2,197.3%22/%3E%3Cpolygon points=%22257.5,200.0 256.9,203.6 256.1,207.1 255.1,210.5 253.9,213.9 252.4,217.1 250.5,220.2 248.3,223.0 245.8,225.6 243.3,228.1 240.8,230.5 238.4,233.0 236.2,235.7 234.0,238.5 231.6,241.3 228.9,244.0 225.9,246.4 222.6,248.4 218.9,249.8 215.1,250.8 211.2,251.5 207.3,251.9 203.4,252.2 199.4,252.2 195.5,252.0 191.6,251.5 187.7,250.6 184.1,249.2 180.6,247.4 177.4,245.4 174.3,243.4 171.2,241.4 168.1,239.4 165.0,237.3 162.0,235.1 159.2,232.7 156.8,229.9 154.9,226.8 153.5,223.5 152.4,220.1 151.6,216.7 150.9,213.4 150.1,210.1 149.2,206.8 148.4,203.4 147.7,200.0 147.3,196.5 147.3,193.0 147.7,189.5 148.3,186.0 149.2,182.5 150.2,178.9 151.3,175.4 152.7,171.9 154.4,168.5 156.7,165.4 159.4,162.6 162.7,160.3 166.3,158.6 170.2,157.3 174.0,156.2 177.8,155.3 181.4,154.4 185.0,153.4 188.6,152.5 192.2,151.7 195.8,151.1 199.5,150.8 203.3,150.9 207.0,151.2 210.6,151.7 214.3,152.2 218.0,152.7 221.8,153.4 225.5,154.3 229.2,155.6 232.6,157.3 235.7,159.5 238.5,162.0 241.0,164.7 243.3,167.5 245.7,170.3 248.0,173.1 250.4,175.9 252.8,178.9 254.8,182.1 256.4,185.4 257.5,189.0 258.0,192.7 257.9,196.4%22/%3E%3Cpolygon points=%22268.7,200.0 267.9,204.3 267.1,208.5 266.2,212.6 265.0,216.7 263.5,220.8 261.7,224.6 259.6,228.4 257.4,232.1 255.2,235.9 253.0,239.7 250.7,243.6 248.1,247.5 245.0,251.2 241.5,254.4 237.5,257.1 233.0,259.1 228.2,260.5 223.4,261.5 218.6,262.3 213.8,263.0 209.0,263.6 204.2,264.2 199.3,264.5 194.4,264.4 189.6,263.8 184.8,262.6 180.3,260.9 175.9,259.0 171.7,256.8 167.6,254.6 163.6,252.2 159.7,249.7 156.1,246.8 152.8,243.6 150.1,240.0 147.8,236.2 146.0,232.2 144.3,228.2 142.6,224.3 140.7,220.5 138.6,216.7 136.4,212.8 134.3,208.8 132.5,204.5 131.4,200.0 130.9,195.4 131.1,190.8 131.9,186.3 133.1,181.8 134.5,177.4 136.3,173.1 138.4,168.9 141.0,165.0 144.2,161.4 147.8,158.2 151.9,155.6 156.2,153.3 160.5,151.3 164.7,149.4 168.8,147.3 172.8,145.2 176.8,143.0 181.0,141.0 185.4,139.3 189.9,138.2 194.6,137.6 199.4,137.5 204.1,137.9 208.8,138.4 213.4,139.0 218.1,139.6 222.7,140.4 227.4,141.5 231.9,142.9 236.3,144.8 240.4,147.1 244.2,149.8 247.9,152.6 251.6,155.6 255.3,158.6 258.9,161.7 262.4,165.0 265.5,168.7 268.0,172.8 269.7,177.2 270.6,181.8 270.6,186.5 270.2,191.1 269.5,195.6%22/%3E%3Cpolygon points=%22280.2,200.0 280.7,205.1 280.9,210.2 280.6,215.4 279.8,220.6 278.3,225.6 276.3,230.5 274.0,235.3 271.5,240.1 268.9,244.8 265.9,249.4 262.6,253.9 258.7,258.0 254.2,261.6 249.3,264.6 244.0,267.0 238.6,269.0 233.1,270.8 227.7,272.6 222.2,274.4 216.7,276.2 210.9,277.7 205.1,278.6 199.1,278.8 193.2,278.1 187.5,276.5 182.0,274.4 176.8,271.9 171.8,269.2 167.0,266.5 162.2,263.8 157.6,260.9 153.2,257.8 149.1,254.3 145.4,250.6 142.0,246.6 138.7,242.5 135.4,238.5 131.9,234.4 128.3,230.3 124.6,226.0 121.1,221.4 118.3,216.4 116.3,211.1 115.4,205.6 115.4,200.0 116.3,194.5 117.8,189.1 119.5,183.8 121.4,178.6 123.5,173.6 125.8,168.6 128.6,163.9 131.8,159.5 135.6,155.4 139.7,151.7 144.1,148.3 148.5,145.0 152.8,141.8 157.2,138.5 161.7,135.3 166.4,132.4 171.4,129.9 176.8,128.0 182.4,126.9 188.1,126.5 193.7,126.5 199.3,126.7 204.9,126.8 210.4,126.8 216.1,126.8 221.9,126.8 227.7,127.2 233.5,128.2 239.2,129.8 244.6,132.1 249.7,134.8 254.6,137.9 259.4,141.3 263.9,144.9 268.1,148.8 271.9,153.2 275.1,157.9 277.4,163.1 278.8,168.5 279.4,174.0 279.5,179.5 279.4,184.8 279.4,190.0 279.7,195.0%22/%3E%3Cpolygon points=%22297.3,200.0 298.0,206.2 297.8,212.4 296.6,218.5 294.6,224.4 292.1,230.1 289.4,235.7 286.5,241.3 283.7,246.8 280.5,252.4 277.0,257.8 272.9,262.8 268.2,267.4 263.0,271.5 257.3,275.1 251.5,278.4 245.5,281.4 239.4,284.3 233.1,287.0 226.6,289.2 219.8,290.8 212.9,291.4 205.9,290.9 199.1,289.4 192.5,287.2 186.3,284.6 180.3,282.0 174.4,279.6 168.5,277.5 162.6,275.4 156.6,273.3 150.7,270.8 145.1,267.8 139.7,264.3 134.6,260.5 129.7,256.3 124.9,252.0 120.2,247.5 115.6,242.6 111.4,237.4 107.8,231.8 105.3,225.7 103.9,219.3 103.5,212.8 104.1,206.4 105.1,200.0 106.3,193.8 107.5,187.7 108.6,181.6 109.9,175.5 111.5,169.4 113.8,163.6 116.9,158.0 120.7,152.8 125.1,148.1 129.8,143.7 134.7,139.6 139.6,135.6 144.7,131.7 149.9,128.1 155.4,124.7 161.2,122.0 167.4,119.8 173.7,118.3 180.1,117.1 186.4,116.1 192.8,114.9 199.2,113.6 205.8,112.1 212.6,110.7 219.7,109.9 226.8,109.9 233.8,110.9 240.5,113.0 246.8,116.0 252.7,119.6 258.2,123.7 263.4,128.0 268.3,132.5 272.9,137.2 276.9,142.3 280.4,147.7 283.2,153.4 285.3,159.3 286.9,165.3 288.4,171.1 290.0,176.8 291.9,182.5 293.8,188.1 295.8,194.0%22/%3E%3Cpolygon points=%22312.6,200.0 311.9,207.0 310.4,214.0 308.3,220.7 306.2,227.4 304.1,234.0 302.2,240.8 300.2,247.8 297.8,254.8 294.6,261.6 290.6,268.0 285.5,273.8 279.7,278.8 273.2,283.2 266.4,287.0 259.4,290.4 252.2,293.5 244.9,296.1 237.3,298.1 229.6,299.2 221.8,299.4 214.0,298.7 206.5,297.4 199.2,295.9 192.0,294.4 185.0,293.3 177.8,292.6 170.4,292.0 162.9,291.3 155.3,289.9 147.9,287.8 140.9,284.7 134.4,280.8 128.4,276.3 122.7,271.4 117.3,266.2 112.2,260.8 107.3,255.1 102.8,249.1 99.2,242.6 96.4,235.7 94.6,228.6 93.7,221.4 93.3,214.2 93.1,207.1 92.9,200.0 92.8,192.9 92.9,185.7 93.5,178.6 95.0,171.5 97.7,164.7 101.5,158.4 106.2,152.6 111.5,147.3 116.9,142.4 122.3,137.7 127.5,132.9 132.7,128.1 138.0,123.4 143.6,118.9 149.5,114.9 155.9,111.3 162.6,108.1 169.4,105.2 176.5,102.5 183.6,99.7 191.1,97.1 198.8,94.8 206.8,93.3 215.0,92.8 223.1,93.7 230.9,95.9 238.3,99.2 245.1,103.3 251.6,107.7 257.7,112.2 263.7,116.6 269.6,121.1 275.3,125.6 280.7,130.5 285.6,135.9 289.9,141.6 293.5,147.7 296.8,153.9 299.8,160.1 302.8,166.4 305.8,172.7 308.5,179.3 310.8,186.0 312.2,192.9%22/%3E%3Cpolygon points=%22325.0,200.0 324.6,207.8 324.1,215.7 323.5,223.6 323.0,231.7 322.2,240.0 320.8,248.4 318.4,256.6 314.6,264.3 309.4,271.3 303.0,277.3 295.6,282.4 287.8,286.8 279.9,290.7 272.0,294.2 264.2,297.6 256.3,300.6 248.4,303.3 240.2,305.3 232.0,306.7 223.7,307.5 215.4,307.9 207.2,308.2 199.0,308.6 190.7,309.3 182.2,309.8 173.4,310.0 164.6,309.4 156.0,307.6 147.8,304.7 140.2,300.6 133.2,295.7 126.6,290.4 120.3,285.0 114.0,279.5 107.7,273.9 101.6,268.1 95.9,261.9 90.9,255.1 86.8,247.8 83.8,240.1 81.6,232.2 80.1,224.1 79.0,216.1 78.2,208.1 77.9,200.0 78.1,191.9 79.4,183.9 81.8,176.2 85.5,168.8 90.0,162.0 95.1,155.6 100.2,149.5 105.1,143.4 109.5,137.2 113.7,130.7 117.9,124.0 122.5,117.3 127.7,110.9 133.8,105.1 140.6,100.0 148.0,95.6 155.8,91.8 163.9,88.4 172.2,85.4 180.8,82.9 189.6,81.0 198.6,80.2 207.7,80.7 216.5,82.4 225.1,85.2 233.2,88.7 241.0,92.5 248.6,96.2 256.2,99.7 263.8,103.1 271.4,106.6 278.8,110.7 285.6,115.4 291.7,121.0 297.0,127.3 301.5,134.1 305.4,141.0 309.0,148.0 312.6,155.0 316.0,162.1 319.2,169.3 321.8,176.7 323.7,184.4 324.7,192.2%22/%3E%3Cpolygon points=%22343.5,200.0 344.1,209.1 344.2,218.3 343.8,227.5 342.6,236.8 340.2,245.9 336.3,254.6 330.9,262.5 324.0,269.5 316.3,275.6 308.2,281.1 300.1,286.1 292.3,291.0 284.8,296.1 277.5,301.2 269.9,306.2 262.0,310.8 253.7,314.7 244.9,317.7 235.9,319.9 226.7,321.6 217.5,322.9 208.2,324.1 198.8,325.1 189.2,325.6 179.5,325.5 169.9,324.3 160.6,321.9 151.6,318.5 143.2,314.2 135.0,309.5 127.0,304.7 118.9,300.0 110.6,295.2 102.4,290.1 94.5,284.5 87.3,277.9 81.3,270.5 76.7,262.3 73.4,253.5 71.3,244.4 70.0,235.3 69.1,226.4 68.6,217.5 68.4,208.7 68.9,200.0 70.2,191.4 72.3,183.0 75.3,174.8 78.7,167.0 82.2,159.3 85.5,151.5 88.4,143.5 91.2,135.2 94.2,126.7 97.8,118.2 102.6,110.0 108.6,102.7 115.8,96.4 123.9,91.1 132.7,86.7 141.7,83.0 150.8,79.7 160.1,76.6 169.5,74.0 179.0,72.0 188.8,70.9 198.6,70.8 208.4,71.8 217.9,73.6 227.2,75.9 236.3,78.4 245.4,80.9 254.5,83.5 263.5,86.4 272.3,90.0 280.5,94.6 287.9,100.3 294.4,106.9 299.9,114.1 304.8,121.6 309.4,129.0 314.1,136.2 319.1,143.3 324.2,150.4 329.3,157.7 333.9,165.5 337.7,173.7 340.5,182.2 342.3,191.0%22/%3E%3Cpolygon points=%22360.9,200.0 360.3,210.1 359.0,220.1 356.8,230.0 353.5,239.6 348.8,248.7 343.0,257.2 336.3,265.0 329.1,272.3 322.0,279.2 315.1,286.2 308.5,293.3 301.9,300.5 295.0,307.7 287.4,314.3 278.9,320.0 269.7,324.6 259.8,327.9 249.7,330.3 239.5,332.1 229.4,333.7 219.2,335.2 209.0,336.7 198.6,337.9 188.1,338.4 177.5,338.0 167.0,336.5 156.7,334.0 146.6,330.8 136.6,327.2 126.7,323.3 116.8,319.2 106.9,314.5 97.6,309.0 89.1,302.3 82.0,294.4 76.4,285.5 72.4,275.8 69.8,265.8 67.9,255.9 66.3,246.2 64.6,236.8 62.8,227.7 61.1,218.5 59.7,209.3 58.9,200.0 59.1,190.7 60.0,181.3 61.4,172.1 63.2,162.8 65.0,153.4 67.1,143.8 69.6,134.1 73.0,124.5 77.6,115.4 83.8,107.0 91.3,99.6 99.8,93.4 109.1,88.0 118.5,83.2 127.9,78.6 137.3,74.0 146.7,69.4 156.4,65.2 166.5,61.6 176.9,59.1 187.7,58.0 198.5,58.1 209.2,59.3 219.7,61.2 229.9,63.4 240.1,66.0 250.0,68.9 259.7,72.3 269.0,76.6 277.7,81.9 285.7,88.1 292.9,94.8 299.7,101.8 306.4,108.6 313.3,115.2 320.7,121.6 328.6,128.1 336.4,134.9 343.8,142.5 350.1,150.9 355.0,160.0 358.3,169.7 360.1,179.7 360.9,189.9%22/%3E%3Cpolygon points=%22370.4,200.0 369.8,210.7 368.6,221.3 366.3,231.8 362.8,242.0 358.2,251.7 352.7,261.0 346.7,269.9 340.6,278.7 334.4,287.3 328.0,295.9 321.2,304.3 313.5,312.1 304.9,319.0 295.3,324.7 285.0,329.2 274.4,332.8 263.7,335.9 253.1,338.9 242.6,342.2 232.1,345.9 221.2,349.7 210.0,353.0 198.3,355.3 186.4,356.2 174.5,355.6 162.7,353.7 151.2,350.7 139.9,346.8 129.0,342.4 118.3,337.3 108.2,331.4 98.9,324.5 90.7,316.4 83.9,307.3 78.4,297.4 74.0,287.3 70.2,277.3 66.4,267.6 62.3,258.3 57.6,249.2 52.8,240.1 48.2,230.6 44.5,220.7 42.0,210.5 40.9,200.0 41.2,189.5 42.3,179.0 44.0,168.6 46.1,158.2 48.6,147.7 51.7,137.3 55.8,127.2 61.2,117.5 67.8,108.5 75.6,100.4 84.2,93.0 93.1,86.1 102.1,79.3 111.1,72.6 120.3,65.8 129.9,59.4 140.2,53.9 151.3,49.7 162.9,47.1 174.9,46.4 186.8,47.2 198.5,49.0 209.8,51.3 220.9,53.8 231.7,56.1 242.4,58.6 253.0,61.4 263.4,64.8 273.4,69.0 283.1,73.9 292.4,79.3 301.7,84.8 311.1,90.4 320.9,96.0 330.8,101.9 340.6,108.5 349.6,116.1 357.3,124.8 363.3,134.6 367.2,145.2 369.5,156.2 370.5,167.4 370.7,178.4 370.7,189.3%22/%3E%3Cpolygon points=%22384.4,200.0 384.9,211.6 383.7,223.2 380.8,234.6 376.4,245.5 370.8,255.8 364.5,265.8 358.1,275.4 351.5,284.8 344.8,294.0 337.5,303.0 329.5,311.4 320.6,319.0 311.0,325.7 300.9,331.8 290.6,337.5 280.2,343.2 269.9,349.3 259.3,355.6 248.3,362.0 236.6,367.7 224.1,372.0 211.2,374.5 197.9,374.9 184.8,373.2 172.1,369.9 159.8,365.6 148.0,360.6 136.6,355.3 125.5,349.6 114.9,343.3 104.9,336.3 95.9,328.4 87.7,319.8 80.4,310.7 73.6,301.4 67.0,292.3 60.1,283.3 52.9,274.4 45.7,265.3 39.0,255.6 33.4,245.3 29.4,234.4 27.3,223.0 26.8,211.5 27.5,200.0 28.8,188.7 30.3,177.4 31.7,166.1 33.3,154.7 35.4,143.2 38.5,131.7 42.9,120.7 48.8,110.2 56.0,100.4 64.1,91.2 72.7,82.5 81.8,74.1 91.2,66.1 101.3,58.7 112.1,52.2 123.8,47.1 136.2,43.8 149.0,42.3 161.9,42.3 174.6,43.2 186.8,44.4 198.7,45.3 210.4,45.6 222.1,45.5 234.1,45.5 246.2,45.9 258.3,47.2 270.3,49.8 282.0,53.5 293.4,58.0 304.5,63.2 315.6,68.8 326.5,74.9 337.2,81.8 347.0,89.6 355.7,98.6 362.8,108.7 368.1,119.7 371.8,131.3 374.4,142.9 376.5,154.5 378.5,165.9 380.7,177.1 382.8,188.5%22/%3E%3Cpolygon points=%22400.7,200.0 398.7,212.5 394.6,224.6 389.2,236.2 383.0,247.1 376.8,257.8 371.1,268.3 365.6,278.9 360.2,289.6 354.4,300.3 347.8,310.7 340.2,320.6 331.5,329.8 322.1,338.5 312.2,346.9 301.9,355.0 291.1,363.1 279.6,370.7 267.4,377.4 254.2,382.6 240.4,385.7 226.1,386.5 211.9,385.2 198.0,382.2 184.6,378.2 171.7,374.0 159.0,369.9 146.5,366.0 134.0,361.9 121.8,357.3 110.0,351.7 99.0,345.0 88.7,337.2 79.3,328.7 70.5,319.8 61.9,310.8 53.4,301.6 45.1,292.2 37.3,282.3 30.5,271.7 25.1,260.4 21.3,248.6 19.1,236.5 17.9,224.3 17.2,212.1 16.4,200.0 15.2,187.8 14.0,175.2 13.2,162.4 13.5,149.3 15.6,136.4 19.9,124.0 26.2,112.3 34.3,101.6 43.5,91.7 53.4,82.6 63.7,74.1 74.3,66.1 85.5,58.9 97.3,52.7 109.7,47.8 122.6,44.2 135.6,41.7 148.6,40.0 161.2,38.3 173.6,36.3 186.0,33.7 198.5,30.6 211.4,27.6 224.8,25.4 238.4,24.6 252.0,25.6 265.3,28.5 278.0,32.9 290.3,38.4 302.2,44.4 313.9,50.8 325.4,57.6 336.5,65.1 347.0,73.4 356.3,82.7 364.4,93.1 371.1,104.1 376.7,115.7 381.6,127.4 386.3,139.1 390.8,150.8 395.1,162.7 398.6,174.9 400.6,187.4%22/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C1A11;
    --surface: #132618;
    --surface-2: #1A3322;
    --fg: #E6F1E3;
    --muted: #9DB8A4;
    --line: #25422E;
    --field: #4F7058;
    --head: #E6F1E3;
    --forest: #14502F;
    --forest-2: #1F6B40;
    --on-forest: #F6FBF3;
    --moss: #7CC46F;
    --bark: #B08060;
    --clay: #7CC46F;
    --safety: #F5A524;
    --on-safety: #1F1405;
    --accent-text: #F5A524;
    --link: #9FDB8F;
    --ring: #7CC46F;
    --ring-forest: rgba(246, 251, 243, 0.12);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 32px -14px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0C1A11;
  --surface: #132618;
  --surface-2: #1A3322;
  --fg: #E6F1E3;
  --muted: #9DB8A4;
  --line: #25422E;
  --field: #4F7058;
  --head: #E6F1E3;
  --forest: #14502F;
  --forest-2: #1F6B40;
  --on-forest: #F6FBF3;
  --moss: #7CC46F;
  --bark: #B08060;
  --clay: #7CC46F;
  --safety: #F5A524;
  --on-safety: #1F1405;
  --accent-text: #F5A524;
  --link: #9FDB8F;
  --ring: #7CC46F;
  --ring-forest: rgba(246, 251, 243, 0.12);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 32px -14px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg) var(--grain);
  color: var(--fg);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  background: var(--bg);
  z-index: 40;
}
h1, h2, h3, h4 {
  margin: 0;
  color: var(--head);
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}
main { overflow-x: clip; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--safety); outline-offset: 3px; }
.ico { width: 1.25em; height: 1.25em; flex: none; }

.wrap {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Header */
.site-head {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--forest);
  color: var(--on-forest);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.bar { display: flex; align-items: center; gap: 1rem; padding-block: 0.65rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; min-width: 0; color: var(--on-forest); text-decoration: none; }
.brand-logo { display: block; width: auto; height: 52px; flex: none; }
.foot .brand-logo { height: 84px; }
.brand-text {
  display: grid;
  min-width: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.15;
}
.brand-text small {
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.74rem;
  color: var(--on-forest);
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main { display: flex; gap: 0.15rem; margin-left: auto; }
.main a {
  position: relative;
  padding: 0.55rem 0.8rem;
  color: var(--on-forest);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.main a::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.2rem;
  height: 3px;
  border-radius: 3px;
  background: var(--safety);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.main a:hover::after, .main a[aria-current="page"]::after { transform: scaleX(1); }
.main a[aria-current="page"] { color: var(--on-forest); font-weight: 800; }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: auto;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px 14px 14px 5px;
  background: transparent;
  color: var(--on-forest);
  font-size: 1.15rem;
  cursor: pointer;
}

/* Buttons: sudut daun, bayangan tebal seperti stiker */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 50px;
  padding: 0.7rem 1.35rem;
  border: 2px solid transparent;
  border-radius: 18px 18px 18px 6px;
  font-family: var(--body);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-accent { background: var(--safety); color: var(--on-safety); box-shadow: 0 4px 0 rgba(35, 21, 6, 0.28); }
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(35, 21, 6, 0.28); }
.btn-accent:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(35, 21, 6, 0.28); }
.btn-line { border-color: currentColor; background: transparent; color: var(--head); }
.btn-line:hover { background: var(--surface-2); }
.btn-sm { min-height: 42px; padding: 0.5rem 1rem; font-size: 0.9rem; }

/* Hero */
.hero-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 2.25rem 3.5rem;
  align-items: center;
  margin-top: 1.1rem;
  padding: clamp(1.6rem, 4.5vw, 3.4rem);
  padding-bottom: clamp(4.6rem, 7vw, 6rem);
  border-radius: 40px 40px 40px 12px;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-2) 100%);
  color: var(--on-forest);
  overflow: hidden;
}
.hero-card h1 { color: var(--on-forest); }
.hero-card .pill { background: rgba(255, 255, 255, 0.14); color: var(--on-forest); }
.hero-card .lede { color: var(--on-forest); opacity: 0.94; }
.hero-card .btn-line { color: var(--on-forest); }
.hero-card .btn-line:hover { background: rgba(255, 255, 255, 0.12); }
.hero-card .checks .ico { color: var(--safety); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.4rem 0.9rem;
  border-radius: 999px 999px 999px 6px;
  background: var(--surface-2);
  color: var(--fg);
  font-size: 0.85rem;
  font-weight: 700;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--safety); }
h1 {
  margin: 1rem 0;
  font-size: clamp(2.2rem, 5.6vw, 3.7rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.lede { max-width: 34rem; margin: 0; font-size: 1.12rem; color: var(--fg); }
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.7rem; }
.checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 1.6rem 0 0; padding: 0; list-style: none; font-size: 0.92rem; font-weight: 600; }
.checks li { display: inline-flex; align-items: center; gap: 0.4rem; }
.checks .ico { color: var(--moss); stroke-width: 2.4; }

.hero-art { position: relative; isolation: isolate; margin: 0; }
.hero-art::before {
  content: "";
  position: absolute;
  inset: -9% -16% -5% -12%;
  z-index: -1;
  background: #FFFFFF;
  opacity: 0.16;
  -webkit-mask: var(--rings) center / contain no-repeat;
  mask: var(--rings) center / contain no-repeat;
}
.hero-photo img {
  display: block;
  border: 5px solid rgba(255, 255, 255, 0.9);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: 999px 999px 28px 90px / 260px 260px 28px 90px;
  box-shadow: var(--shadow);
}
.hero-photo figcaption {
  position: absolute;
  left: -0.9rem;
  bottom: 2.6rem;
  max-width: 15rem;
  padding: 0.6rem 0.9rem;
  border-radius: 14px 14px 14px 4px;
  background: var(--safety);
  color: var(--on-safety);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  transform: rotate(-2.5deg);
  box-shadow: 0 4px 0 rgba(35, 21, 6, 0.25);
}

/* Quick estimate bar */
.quick {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0.9rem;
  align-items: end;
  margin: -2.4rem clamp(0rem, 3vw, 2rem) 0;
  padding: 1.2rem 1.3rem;
  border-radius: 30px 30px 30px 8px;
  background: var(--forest);
  color: var(--on-forest);
  box-shadow: var(--shadow);
}
label { display: block; margin-bottom: 0.3rem; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.quick label { color: var(--on-forest); opacity: 0.85; }
.field {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--field);
  border-radius: 14px 14px 14px 5px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
}
.quick .field { border-color: transparent; }
textarea.field { min-height: 96px; resize: vertical; }

/* Sections */
.sec { padding-block: clamp(2.75rem, 6.5vw, 5rem); }
.sec-alt {
  margin-inline: clamp(6px, 2vw, 24px);
  border-radius: 44px 44px 44px 12px;
  background: var(--surface-2);
}
.sec-head { max-width: 42rem; margin-bottom: 2rem; }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.kicker::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: currentColor; }
h2 { margin-bottom: 0.7rem; font-size: clamp(2rem, 4.6vw, 3.1rem); }
.sec-head p { margin: 0; color: var(--muted); }

.grid { display: grid; gap: 1rem; }
.cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 28px 28px 28px 8px;
  background: var(--surface);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cards .card:nth-child(even) { border-radius: 28px 28px 8px 28px; }
a.card { color: inherit; text-decoration: none; }
.card:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: var(--shadow); }
.ico-wrap {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 6px 22px 6px 22px;
  background: var(--forest);
  color: var(--on-forest);
  font-size: 1.5rem;
}
.card h3 { margin-top: 0.3rem; font-size: 1.55rem; }
.card p { margin: 0; color: var(--muted); }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-weight: 800;
  color: var(--link);
  text-decoration: none;
}
.card-link .ico { transition: transform 0.2s ease; }
.card-link:hover .ico, a.card:hover .card-link .ico { transform: translateX(4px); }
.num {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 0.9;
  color: var(--clay);
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-top: 1rem;
  padding: 1.15rem 1.4rem;
  border: 1.5px dashed var(--field);
  border-radius: 24px 24px 24px 8px;
  background: var(--surface);
}
.notice .ico { margin-top: 0.15rem; font-size: 1.5rem; color: var(--accent-text); }
.notice p { margin: 0; }
.notice strong { font-weight: 800; }

.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.strip-wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.shot {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 3 / 4;
  border-radius: 28px 28px 28px 6px;
  overflow: hidden;
  background: var(--surface-2);
}
.shot:nth-child(even) { border-radius: 28px 28px 6px 28px; }
.strip-wide .shot { aspect-ratio: 16 / 9; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.shot:hover img { transform: scale(1.04); }
.shot .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.4rem 1rem 0.8rem;
  background: linear-gradient(to top, rgba(10, 20, 13, 0.78), transparent);
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 700;
}
.masonry { columns: 240px 3; column-gap: 1rem; }
.masonry .shot { aspect-ratio: auto; margin-bottom: 1rem; break-inside: avoid; }
.masonry .shot img { height: auto; }
.video-row { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 2rem 3.5rem; align-items: center; }
.video-row video { display: block; width: 100%; max-height: 80vh; border-radius: 120px 120px 28px 28px / 160px 160px 28px 28px; background: #000000; }
.video-note { max-width: 34rem; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.chips li {
  padding: 0.6rem 1.15rem;
  border: 1.5px solid var(--forest);
  border-radius: 16px 16px 16px 5px;
  color: var(--head);
  font-weight: 800;
}
.note { margin: 1rem 0 0; color: var(--muted); }

/* Page head and CTA: panel hijau hutan dengan cincin kayu */
.page-card, .cta-card {
  position: relative;
  overflow: hidden;
  background: var(--forest);
  color: var(--on-forest);
}
.page-card::after, .cta-card::after {
  content: "";
  position: absolute;
  right: -90px;
  top: 50%;
  width: 380px;
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: var(--ring-forest);
  -webkit-mask: var(--rings) center / contain no-repeat;
  mask: var(--rings) center / contain no-repeat;
  pointer-events: none;
}
.page-card {
  margin-top: 1.1rem;
  padding: clamp(1.9rem, 4.5vw, 3.2rem);
  border-radius: 36px 36px 36px 10px;
}
.page-card > *, .cta-card > * { position: relative; z-index: 1; }
.page-card .pill { background: rgba(244, 239, 227, 0.14); color: var(--on-forest); }
.page-card h1, .cta-card h2 { color: var(--on-forest); }
.page-card h1 { margin: 0.9rem 0 0.7rem; font-size: clamp(2.2rem, 5.5vw, 3.6rem); }
.page-card .lede { color: var(--on-forest); opacity: 0.92; }
.cta-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding: clamp(1.9rem, 4.5vw, 3rem);
  border-radius: 36px 36px 10px 36px;
}
.cta-card h2 { max-width: 34rem; margin: 0; }
.cta-card p { margin: 0.5rem 0 0; opacity: 0.88; }

/* Height guide */
.hcard .range { font-family: var(--display); font-weight: 800; font-size: 2.3rem; line-height: 1; color: var(--head); font-variant-numeric: tabular-nums; }
.hcard .eg { font-weight: 700; }
.hcard .check { color: var(--muted); font-size: 0.92rem; }
.hcard .check strong { color: var(--fg); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: start; }
.info-list { display: grid; gap: 0.9rem; }
.info-card { display: flex; gap: 1rem; min-width: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: 24px 24px 24px 8px; background: var(--surface); }
.info-card .ico-wrap { flex: none; }
.info-card dl { flex: 1; min-width: 0; }
.info-card dl, .info-card dt, .info-card dd { margin: 0; }
.info-card dt { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.info-card dd { min-width: 0; margin-top: 0.15rem; overflow-wrap: anywhere; }
.info-card .bignum { font-family: var(--display); font-weight: 800; font-size: 2.1rem; line-height: 1.1; color: var(--head); font-variant-numeric: tabular-nums; }
.info-card .btn { margin-top: 0.8rem; margin-right: 0.4rem; }
.tag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.2rem 0.6rem;
  border: 1px dashed var(--field);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  vertical-align: middle;
}
.form-card { display: grid; gap: 1rem; min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 30px 30px 30px 8px; background: var(--surface); }
.form-card h2 { margin: 0; font-size: 2rem; }
.hint { margin: 0; font-size: 0.9rem; color: var(--muted); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.preview {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border-radius: 20px 20px 20px 4px;
  background: var(--surface-2);
  font-size: 0.95rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.faq-list { display: grid; gap: 0.6rem; max-width: 52rem; }
.faq { border: 1px solid var(--line); border-radius: 22px 22px 22px 6px; background: var(--surface); overflow: hidden; }
.faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; font-weight: 800; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-text); font-size: 1.5rem; line-height: 1; }
.faq[open] summary::after { content: "\2013"; }
.faq p { margin: 0; padding: 0 1.3rem 1.2rem; max-width: 62ch; color: var(--muted); }

/* Lightbox */
.lightbox { max-width: 100vw; max-height: 100vh; padding: 0; border: 0; background: transparent; color: #FFFFFF; }
.lightbox::backdrop { background: rgba(8, 16, 11, 0.9); }
.lightbox[open] { display: grid; gap: 0.6rem; justify-items: center; padding: 1rem; }
.lightbox img { max-width: min(92vw, 1000px); max-height: 78vh; object-fit: contain; border-radius: 16px; }
.lb-cap { margin: 0; font-size: 0.95rem; text-align: center; }
.lb-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #FFFFFF; font-size: 1.6rem; line-height: 1; cursor: pointer; }

/* Footer and mobile dock */
.foot { margin-top: clamp(2rem, 5vw, 3.5rem); padding-block: 3.2rem 1.5rem; border-radius: 48px 48px 0 0; background: var(--forest); color: var(--on-forest); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.foot .brand, .foot .brand-text { color: var(--on-forest); }
.foot .brand-text small { color: inherit; opacity: 0.75; }
.foot p { margin: 0.75rem 0 0; max-width: 28rem; opacity: 0.88; font-size: 0.95rem; }
.foot h4 { margin: 0 0 0.75rem; color: var(--on-forest); font-family: var(--body); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.foot ul { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .tag { border-color: rgba(244, 239, 227, 0.4); color: inherit; opacity: 0.85; }
.copy { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(244, 239, 227, 0.16); font-size: 0.85rem; opacity: 0.75; }
.dock {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  padding: 0.75rem max(16px, env(safe-area-inset-right, 0px)) calc(0.75rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(to top, var(--bg) 55%, transparent);
  pointer-events: none;
}
.dock .btn { width: 100%; pointer-events: auto; }

@media (min-width: 901px) {
  .strip:not(.strip-wide) { padding-bottom: 18px; }
  .strip:not(.strip-wide) .shot:nth-child(even) { transform: translateY(18px); }
}
@media (max-width: 900px) {
  .hero-card { grid-template-columns: minmax(0, 1fr); }
  .hero-art { max-width: 460px; margin-inline: auto; width: 100%; }
  .hero-photo img { aspect-ratio: 1 / 1; object-position: 50% 38%; }
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick .btn { grid-column: 1 / -1; }
  .contact-grid, .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .video-row { grid-template-columns: minmax(0, 1fr); }
  .video-row video { max-width: 340px; margin-inline: auto; }
  .nav-toggle { display: inline-flex; }
  .head-cta { display: none; }
  .main { order: 3; flex-basis: 100%; flex-wrap: wrap; margin-left: 0; }
  .bar { flex-wrap: wrap; }
  .js .bar { flex-wrap: nowrap; }
  .js .main {
    display: none;
    position: absolute;
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    top: 100%;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.4rem;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 24px 24px 24px 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  .js .main.open { display: flex; }
  .js .main a { padding: 0.8rem 1rem; font-size: 1.05rem; color: var(--fg); }
  .js .main a[aria-current="page"] { color: var(--head); }
  .js .main a::after { background: var(--forest-2); left: 1rem; right: auto; width: 28px; bottom: 0.45rem; }
  .dock { display: block; }
  body { padding-bottom: 5.5rem; }
}
@media (max-width: 560px) {
  .quick { grid-template-columns: minmax(0, 1fr); margin-top: -1.9rem; }
  .hero-photo figcaption { left: 0.4rem; bottom: 2.2rem; }
  .sec-alt { border-radius: 32px 32px 32px 10px; }
  .page-card::after, .cta-card::after { width: 260px; right: -110px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card, .shot img, .main a::after, .card-link .ico { transition: none; }
  .card:hover, .btn-accent:hover { transform: none; }
}

/* ===== Penyempurnaan: tampilan rapi dan sobar (radius seragam, tanpa dekorasi) ===== */
:root { --r: 10px; --r-lg: 14px; --gap: 1.25rem; }
body { background: var(--bg); }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
.card h3 { font-size: 1.25rem; }

.btn { border-radius: var(--r); box-shadow: none; font-weight: 700; min-height: 48px; }
.btn-accent:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--safety) 88%, #000); }
.btn-accent:active { transform: none; }
.btn-line { border-width: 1.5px; }
.nav-toggle { border-radius: var(--r); }
.pill { border-radius: 6px; font-weight: 600; font-size: 0.82rem; }
.kicker { font-size: 0.78rem; letter-spacing: 0.1em; font-weight: 700; }
.kicker::before { width: 18px; height: 2px; border-radius: 0; }

/* Hero */
.hero-card { border-radius: var(--r-lg); background: var(--forest); overflow: hidden; padding-bottom: clamp(1.6rem, 4.5vw, 3.4rem); align-items: stretch; }
.hero-card > div:first-child { align-self: center; }
.hero-art::before { display: none; }
.hero-photo img { border: 0; border-radius: var(--r); aspect-ratio: 4 / 5; box-shadow: none; }
.hero-photo figcaption { left: 0.9rem; right: auto; bottom: 0.9rem; transform: none; box-shadow: none; border-radius: 6px; background: rgba(10, 30, 18, 0.78); color: #fff; font-weight: 600; }
.hero-card .checks .ico { color: var(--safety); }

/* Form perkiraan */
.quick { margin: 1rem 0 0; border-radius: var(--r-lg); background: var(--surface); color: var(--fg); border: 1px solid var(--line); box-shadow: none; }
.quick label { color: var(--muted); opacity: 1; }
.quick .field { border-color: var(--line); }
.field { border-radius: var(--r); border-width: 1px; }
@media (max-width: 560px) { .quick { margin-top: 1rem; } }

/* Angka usaha */
.stats-band { padding-block: clamp(1.75rem, 4vw, 2.75rem) 0; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.stats li { display: grid; gap: 0.2rem; padding: 1.25rem 1.4rem; align-content: start; }
.stats li + li { border-left: 1px solid var(--line); }
.stats strong { font-size: 1.35rem; font-weight: 700; color: var(--head); line-height: 1.2; }
.stats span { font-size: 0.88rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats li:nth-child(3) { border-left: 0; }
  .stats li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Bagian */
.sec { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.sec-alt { margin-inline: 0; border-radius: 0; background: var(--surface-2); }
.sec-head { margin-bottom: 1.75rem; }

/* Kartu */
.card, .cards .card:nth-child(even) { border-radius: var(--r-lg); padding: 1.35rem; }
.card:hover { transform: none; box-shadow: none; border-color: var(--forest-2); }
a.card:hover { border-color: var(--forest-2); box-shadow: 0 8px 20px -12px rgba(20, 60, 35, 0.35); }
.ico-wrap { border-radius: var(--r); width: 46px; height: 46px; font-size: 1.3rem; }
.num { font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--forest-2); padding-bottom: 0.6rem; margin-bottom: 0.2rem; border-bottom: 2px solid var(--moss); width: 2.6rem; }

.card-photo { padding: 0; gap: 0; overflow: hidden; }
.card-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
a.card-photo:hover .card-img img { transform: scale(1.04); }
.card-body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; padding: 1.1rem 1.25rem 1.3rem; }
.card-body h3 { margin: 0; }

.hcard .range { font-size: 2rem; font-weight: 700; }
.notice { border: 1px solid var(--line); border-left: 4px solid var(--safety); border-radius: var(--r); }
.chips li { border-radius: var(--r); border-width: 1px; font-weight: 600; }

/* Foto, video */
.shot, .shot:nth-child(even) { border-radius: var(--r); }
.video-row video { border-radius: var(--r-lg); }

/* Panel hijau */
.page-card, .cta-card { border-radius: var(--r-lg); }
.page-card::after, .cta-card::after { display: none; }
.foot { border-radius: 0; margin-top: 0; }

/* Profil usaha */
.profile { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 2rem; align-items: start; }
.facts { margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.facts > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding: 1.05rem 1.4rem; }
.facts > div + div { border-top: 1px solid var(--line); }
.facts dt { color: var(--muted); font-weight: 600; font-size: 0.92rem; }
.facts dd { margin: 0; color: var(--fg); font-weight: 600; }
.profile-photo { position: relative; margin: 0; }
.profile-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 55%; border-radius: var(--r-lg); }
.profile-photo figcaption { margin-top: 0.6rem; font-size: 0.88rem; color: var(--muted); }
@media (max-width: 900px) {
  .profile { grid-template-columns: minmax(0, 1fr); }
  .profile-photo { order: -1; max-width: 420px; }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}
.card.card-photo, .cards .card.card-photo:nth-child(even) { padding: 0; }

/* Kepala halaman: ringkas */
.page-card { margin-top: 1rem; padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.25rem, 3.5vw, 2.25rem); }
.page-card .pill { padding: 0.25rem 0.65rem; font-size: 0.78rem; }
.page-card h1 { margin: 0.6rem 0 0.4rem; font-size: clamp(1.6rem, 3.4vw, 2.25rem); line-height: 1.2; }
.page-card .lede { max-width: 44rem; font-size: 1rem; line-height: 1.55; }

/* Kepala halaman dan ajakan: lebih ringkas */
.page-card { padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1.25rem, 3vw, 1.9rem); }
.page-card .pill { padding: 0.2rem 0.55rem; font-size: 0.74rem; }
.page-card h1 { margin: 0.45rem 0 0.3rem; font-size: clamp(1.45rem, 2.8vw, 1.9rem); }
.page-card .lede { font-size: 0.95rem; line-height: 1.5; }
.cta-card { gap: 1rem 2rem; padding: clamp(1.1rem, 2.6vw, 1.6rem) clamp(1.25rem, 3vw, 1.9rem); }
.cta-card h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); line-height: 1.2; max-width: 40rem; }
.cta-card p { margin-top: 0.3rem; font-size: 0.95rem; }
.sec:has(> .wrap > .cta-card) { padding-block: clamp(1.5rem, 4vw, 2.5rem); }

/* Hero: foto sejajar tengah, keterangan tetap di dalam foto */
.hero-art { align-self: center; }

/* Kontak: dua kolom sama tinggi, sudut dan jarak seragam */
.contact-grid { align-items: stretch; gap: 1.25rem; }
.info-list { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
.info-card { flex: 1 1 auto; align-items: center; padding: 1.25rem 1.4rem; border-radius: var(--r-lg); }
.info-card:first-child { flex: 1.6 1 auto; }
.info-card .bignum { font-size: 1.9rem; font-weight: 700; }
.info-card dt { font-weight: 700; }
.form-card { border-radius: var(--r-lg); align-content: start; padding: 1.5rem 1.6rem; gap: 0.95rem; }
.form-card h2 { font-size: 1.6rem; }
.form-card .btn { width: 100%; }
.preview { border-radius: var(--r); }
.faq { border-radius: var(--r); }
.faq summary { font-weight: 700; }

/* Profil usaha: tabel dan foto sama tinggi, tepi atas dan bawah rata */
.profile { align-items: stretch; gap: 1.25rem; }
.facts { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; }
.facts > div { flex: 1 1 auto; align-items: center; }
.profile-photo { position: relative; min-height: 100%; overflow: hidden; border-radius: var(--r-lg); background: var(--surface-2); }
.profile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; object-position: 60% 50%; }
.profile-photo figcaption { position: absolute; left: 0.75rem; bottom: 0.75rem; margin: 0; padding: 0.4rem 0.7rem; border-radius: 6px; background: rgba(10, 30, 18, 0.78); color: #fff; font-size: 0.85rem; font-weight: 600; }
@media (max-width: 900px) {
  .profile-photo { order: -1; max-width: none; min-height: 0; aspect-ratio: 4 / 3; }
}

/* Logo bulat: tajam dan menyatu dengan latar hijau */
.brand-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(246, 251, 243, 0.9); }
.foot .brand-logo { width: 96px; height: 96px; box-shadow: 0 0 0 3px rgba(246, 251, 243, 0.9); }
.fb-link { color: var(--head); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--moss); }
.fb-link:hover { border-bottom-color: var(--head); }

/* Ikon modern: garis tipis, kotak lembut berwarna hijau muda */
.ico { stroke-width: 1.75; }
.ico-wrap { width: 48px; height: 48px; border-radius: 14px; background: var(--surface-2); color: var(--forest); box-shadow: inset 0 0 0 1px var(--line); }
.ico-wrap .ico { width: 1.45rem; height: 1.45rem; }
.info-card-link { color: inherit; text-decoration: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.info-card-link:hover { border-color: var(--forest-2); box-shadow: 0 8px 20px -12px rgba(20, 60, 35, 0.35); }
.info-card-link .go { display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; border-radius: 50%; background: var(--surface-2); color: var(--forest); flex: none; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; }
.info-card-link:hover .go { transform: translateX(3px); background: var(--forest); color: var(--on-forest); }
.info-card dd { font-weight: 500; }

/* FAQ selebar kolom di atasnya */
.faq-list { max-width: none; width: 100%; }